setup share dialog (#131)

src/components/Project/components/ShareButton.tsx

@@ -0,0 +1,95 @@
+import { Input } from '@/components/Input'
+import DiscordLogo from '@/components/icon/DiscordLogo'
+import { ShareIcon } from '@/components/icon/ShareIcon'
+import { XLogo } from '@/components/icon/XLogo'
+import { Button } from '@/components/ui/Button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTrigger,
+} from '@/components/ui/Dialog'
+import { useCallback, useState } from 'react'
+
+export type ShareButtonProps = {
+  className?: string
+}
+
+export const ShareButton: React.FC<ShareButtonProps> = ({ className }) => {
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : ''
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild className={className}>
+        <Button variant="outline" className="flex h-14 w-full gap-2 md:h-fit">
+          <ShareIcon className="h-5 w-5" />
+          Share
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader className="font-heading text-2xl font-medium">
+          Share
+        </DialogHeader>
+
+        <DialogDescription>
+          <div className="flex flex-col gap-4 md:flex-row">
+            {/* // TODO: What to do when clicked? */}
+            <Button variant="secondary" className="flex flex-1 gap-2">
+              <XLogo className="h-4 w-4" />
+              Share on X
+            </Button>
+            {/* // TODO: What to do when clicked? */}
+            <Button variant="secondary" className="flex flex-1 gap-2">
+              <DiscordLogo className="h-4 w-4" />
+              Share on Discord
+            </Button>
+          </div>
+          <div className="mt-8">
+            <label
+              htmlFor="link"
+              className="block text-sm font-medium text-gray-700"
+            >
+              Page link
+            </label>
+            <div className="mt-1.5 flex flex-col items-center gap-2 md:flex-row">
+              <Input
+                name="link"
+                className="h-12 flex-1"
+                readOnly
+                value={currentUrl}
+              />
+              <CopyButton />
+            </div>
+          </div>
+        </DialogDescription>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CopyButton: React.FC = () => {
+  const [buttonText, setButtonText] = useState('Copy link')
+  const [currentTimer, setCurrentTimer] = useState<NodeJS.Timeout | null>(null)
+
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : ''
+
+  const onClick = useCallback(() => {
+    if (currentTimer) {
+      clearTimeout(currentTimer)
+    }
+    navigator.clipboard.writeText(currentUrl)
+    setButtonText('Copied!')
+    const timer = setTimeout(() => {
+      setButtonText('Copy link')
+    }, 1000)
+    setCurrentTimer(timer)
+  }, [currentTimer, currentUrl])
+
+  return (
+    <Button className="h-12 w-full md:w-fit" onClick={onClick}>
+      {buttonText}
+    </Button>
+  )
+}

src/components/Project/components/Stats.tsx

@@ -1,11 +1,13 @@
 import { Link } from '@/components/Link'
 import { ShareIcon } from '@/components/icon/ShareIcon'
 import { Button } from '@/components/ui/Button'
+import { Dialog } from '@/components/ui/Dialog'
 import { Progress } from '@/components/ui/Progress'
 import { Separator } from '@/components/ui/Separator'
 import { useJbProject } from '@/hooks/useJbProject'
 import { ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
+import { ShareButton } from './ShareButton'
 
 export type StatsProps = {
   className?: string
@@ -37,16 +39,11 @@ export const Stats: React.FC<StatsProps> = ({ className }) => {
           <StatBlock title="Supporters" value="227" />
         </div>
 
-        <div className="w-full md:w-fit">
-          <Button variant="outline" className="flex h-14 w-full gap-2 md:h-fit">
-            <ShareIcon className="h-5 w-5" />
-            Share
-          </Button>
-        </div>
+        <ShareButton className="h-14 w-full md:h-12 md:w-fit" />
       </div>
 
       <Link href={`/p/${projectId}/pay`} className="-mt-8 md:mt-0">
-        <Button className="w-full">Support this project</Button>
+        <Button className="h-14 w-full md:h-12">Support this project</Button>
       </Link>
     </div>
   )

src/components/icon/XLogo.tsx

@@ -12,6 +12,7 @@ export const XLogo: React.FC<XLogoProps> = ({ className }) => {
       viewBox="0 0 300 300"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
     >
       <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
     </svg>