feat: implement share link

src/components/LockedContent.tsx

@@ -89,7 +89,7 @@ const LocationButton = ({
     )
   } else {
     return (
-      <div className='w-full h-[475px] p-4'>
+      <div className='w-full h-[475px] overflow-hidden border border-zinc-200 shadow-sm p-4 rounded'>
         {atTarget ? (
           <div className='flex flex-col justify-center items-center image-wrapper'>
             <img src={imageUrl} className='blur-2xl h-[450px]' />

src/components/ShareButton.tsx

@@ -0,0 +1,54 @@
+import { Button } from "./ui/button"
+
+const ShareButton = () => {
+  const shareLink = async () => {
+    const shareData = {
+      title: "Konulu Konum",
+      text: "Sevdiklerinizi şaşırtın!",
+      url: document.URL
+    }
+
+    await navigator.share(shareData)
+  }
+
+  const copyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(document.URL)
+      // @ts-ignore
+      Toastify({
+        text: "Konulu konum kopyalandı.",
+        duration: 3000,
+        gravity: "top", // `top` or `bottom`
+        position: "center", // `left`, `center` or `right`
+        stopOnFocus: true, // Prevents dismissing of toast on hover
+        style: {
+          background: "black",
+          borderRadius: "6px",
+          margin: "16px"
+        },
+        onClick: function () {} // Callback after click
+      }).showToast()
+    } catch (err: any) {
+      console.error(err.message)
+    }
+  }
+
+  return (
+    <div>
+      {
+        //@ts-expect-error navigator is not always defined
+        window.navigator.share ? (
+          <Button className='w-full text-lg' size='lg' onClick={shareLink}>
+            Paylaş Mobil
+          </Button>
+        ) : (
+          <Button className='w-full text-lg' size='lg' onClick={copyLink}>
+            Paylaş
+          </Button>
+        )
+      }
+    </div>
+  )
+}
+
+export default ShareButton

src/pages/[id].astro

@@ -3,7 +3,7 @@ import '@/styles/globals.css';
 import '../styles/locked-page.css';
 
 import Layout from '../layouts/Layout.astro';
-import { Button } from '@/components/ui/button';
+import ShareButton from '../components/ShareButton';
 import {
   Card,
   CardContent,
@@ -81,7 +81,7 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
     >
     </div>
 
-    <Button className="w-full text-lg" size="lg">Paylaş</Button>
+    <ShareButton client:only />
     <div class="flex justify-center">
       <p class="text-muted-foreground">
         Fotoğrafın kilidi şu ana dek <b>{data?.unlocked_counter}</b> kez açıldı