diff --git a/components/Obituary/components/ObituaryLarge.tsx b/components/Obituary/components/ObituaryLarge.tsx index da6270f..88391c8 100644 --- a/components/Obituary/components/ObituaryLarge.tsx +++ b/components/Obituary/components/ObituaryLarge.tsx @@ -8,11 +8,11 @@ import { Text, VStack, } from '@chakra-ui/react' -import { useCallback } from 'react' +import { useCallback, useEffect, useState } from 'react' import { formatDate } from '../../../utils/formatDate' import { useTranslation } from 'next-i18next' import { ObituaryImage } from './ObituaryImage' -import { ObituaryRenderer } from '../ObituaryContainer' +import type { ObituaryRenderer } from '../ObituaryContainer' import { formatName } from '../helpers/formatName' import { useObituary } from 'hooks/reactQuery/queries' import Image from 'next/image' @@ -25,6 +25,7 @@ export const ObituaryLarge: ObituaryRenderer = ({ onShowAppreciation, ...props }) => { + const [canShare, setCanShare] = useState(false) const { data } = useObituary(props._id, { initialData: props, }) @@ -66,7 +67,21 @@ export const ObituaryLarge: ObituaryRenderer = ({ // url: 'https://developer.mozilla.org', // }) // } - }, []) + }, [_id, type]) + + const share = useCallback(async () => { + const url = `${window.location.origin}/${type}/${_id}` + try { + await navigator?.share?.({ url }) + } catch {} + }, [_id, type]) + + useEffect(() => { + const url = `${window.location.origin}/${type}/${_id}` + if (navigator?.canShare?.({ url })) { + setCanShare(true) + } + }, [_id, type]) return ( <> @@ -230,23 +245,45 @@ export const ObituaryLarge: ObituaryRenderer = ({ {formatDate(date_created)} - + {t('share')} + + + + + ) diff --git a/public/icons/share_icon.png b/public/icons/share_icon.png new file mode 100644 index 0000000..0c1d4a5 Binary files /dev/null and b/public/icons/share_icon.png differ