Add share button

src/components/share-url-button.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Share } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+interface Props {
+  text: string
+  url: string
+}
+
+export function ShareUrlButton({ url, text }: Props) {
+  const canShare = useCanShare(url, text)
+  if (!canShare) return null
+
+  return (
+    <Button
+      size="icon"
+      variant="secondary"
+      type="button"
+      onClick={() => {
+        if (navigator.share) {
+          navigator.share({ text, url })
+        } else {
+          console.log('Sharing is not available', { text, url })
+        }
+      }}
+    >
+      <Share className="w-4 h-4" />
+    </Button>
+  )
+}
+
+function useCanShare(url: string, text: string) {
+  const [canShare, setCanShare] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    setCanShare(
+      navigator.share !== undefined && navigator.canShare({ url, text }),
+    )
+  }, [text, url])
+
+  return canShare
+}