Add share button

src/app/groups/[groupId]/layout.tsx

@@ -42,7 +42,7 @@ export default async function GroupLayout({
 
         <div className="flex gap-2 justify-between">
           <GroupTabs groupId={groupId} />
-          <ShareButton groupId={groupId} />
+          <ShareButton group={group} />
         </div>
       </div>
 

src/app/groups/[groupId]/share-button.tsx

@@ -1,4 +1,5 @@
 import { CopyButton } from '@/components/copy-button'
+import { ShareUrlButton } from '@/components/share-url-button'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import {
@@ -7,14 +8,15 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 import { env } from '@/lib/env'
+import { Group } from '@prisma/client'
 import { Share } from 'lucide-react'
 
 type Props = {
-  groupId: string
+  group: Group
 }
 
-export function ShareButton({ groupId }: Props) {
+export function ShareButton({ group }: Props) {
-  const url = `${env.NEXT_PUBLIC_BASE_URL}/groups/${groupId}`
+  const url = `${env.NEXT_PUBLIC_BASE_URL}/groups/${group.id}`
 
   return (
     <Popover>
@@ -31,6 +33,10 @@ export function ShareButton({ groupId }: Props) {
         <div className="flex gap-2">
           <Input className="flex-1" defaultValue={url} readOnly />
           <CopyButton text={url} />
+          <ShareUrlButton
+            text={`Join my group ${group.name} on Spliit`}
+            url={url}
+          />
         </div>
         <p>
           <strong>Warning!</strong> Every person with the group URL will be able

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
+}