feat: add share button component

src/components/share-button/index.tsx

@@ -0,0 +1,14 @@
+import { Button, ButtonProps } from '@/components/ui/button'
+import { Share2 } from 'lucide-react'
+
+interface Props extends ButtonProps {
+  iconSize?: number
+}
+export const ShareButton = ({ iconSize = 18, children, ...props }: Props) => {
+  return (
+    <Button title="Share on X (Twitter)" {...props}>
+      <Share2 size={iconSize} />
+      {children}
+    </Button>
+  )
+}

src/pages/projectdetail/Reports.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { Button } from '@/components/ui/button'
-import { Info, Share2 } from 'lucide-react'
+import { Info } from 'lucide-react'
 import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle } from '@/components/ui/drawer'
 import { LoadingCards } from '@/components/loading-cards'
 import { cn } from '@/lib/utils'
@@ -10,6 +10,7 @@ import ReactMarkdown from 'react-markdown'
 import { PeriodReport } from '@/types'
 import { fetchProjectReports } from '@/service'
 import { useSearchParams } from 'react-router-dom'
+import { ShareButton } from '@/components/share-button'
 
 interface ReportsProps {
   project: string
@@ -128,15 +129,7 @@ export default function Reports({ project }: ReportsProps) {
                   Close
                 </Button>
               </DrawerClose>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 w-8 p-0 hover:bg-gray-800"
-                onClick={handleShare}
-                title="Share on X (Twitter)"
-              >
-                <Share2 />
-              </Button>
+              <ShareButton variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-gray-800" onClick={handleShare} />
             </div>
           </DrawerFooter>
         </DrawerContent>

src/pages/task-detail/index.tsx

@@ -16,7 +16,7 @@ import { Input } from '@/components/ui/input'
 import { useState, useEffect } from 'react'
 import { distributor } from '@/constants/distributor'
 import { USDT_DECIMAL, USDT_SYMBOL } from '@/constants/contracts/usdt'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { ShareButton } from '@/components/share-button'
 
 type TaskDetailItem = {
   id: number
@@ -223,25 +223,13 @@ function QuestLog({ createUser }: { createUser: string }) {
             {isWithdrawing && <Loader2 className="ml-2 h-4 w-4 animate-spin" />}
           </Button>
         )}
-        {/* <Badge variant="default" className="bg-green-500" onClick={handleShare}>
+        <ShareButton
+          iconSize={14}
+          variant="emphasis"
+          className="flex gap-1 border border-muted text-white hover:border-opacity-80 hover:bg-white/10"
+        >
           Share
-        </Badge> */}
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger>
-              <Button
-                onClick={handleShare}
-                variant="emphasis"
-                className="bg-gray-8/50 text-l border border-muted bg-green-500 hover:border-opacity-80 hover:bg-primary/80"
-              >
-                Share
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <div>Sharing on X</div>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        </ShareButton>
       </div>
       <Card className="sticky left-0 top-0 mt-4 bg-transparent">
         <CardHeader className="flex flex-row items-center justify-between border-b border-muted py-4">
@@ -382,8 +370,6 @@ export default function TaskDetailPage() {
     return <ErrorPage />
   }
 
-  console.log('task >>>', task)
-
   return (
     <div className="mt-5 flex w-full flex-col-reverse gap-5 xl:flex-row">
       <article className="flex w-full flex-col gap-5">