From 9e2834abc323e9b46803b764b0d04393d437a7cc Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Wed, 13 Dec 2023 12:55:31 -0500
Subject: Add share button

---
 src/components/share-url-button.tsx | 44 +++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/components/share-url-button.tsx

(limited to 'src/components/share-url-button.tsx')

diff --git a/src/components/share-url-button.tsx b/src/components/share-url-button.tsx
new file mode 100644
index 0000000..d31aa78
--- /dev/null
+++ b/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
+}
-- 
cgit v1.3