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