src/components/share-url-button.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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
}