share catalogue

src/pages/catalogue/components/CatalogueItem.tsx

@@ -19,6 +19,30 @@ const CatalogueItem: FC<Props> = ({ item, refetch }) => {
 
     const deleteCatalog = useDleteCatalog()
 
+    const shareUrl = `${window.location.origin}${Paths.viewer}/${item.id}`
+
+    const handleShare = async () => {
+        try {
+            if (typeof navigator.share === 'function') {
+                await navigator.share({
+                    title: item.name,
+                    text: item.name,
+                    url: shareUrl,
+                })
+                return
+            }
+            await navigator.clipboard.writeText(shareUrl)
+            toast('لینک در کلیپ‌بورد کپی شد', 'success')
+        } catch (err) {
+            const isAbort =
+                err instanceof DOMException
+                    ? err.name === 'AbortError'
+                    : err instanceof Error && err.name === 'AbortError'
+            if (isAbort) return
+            toast(extractErrorMessage(err, 'امکان اشتراک‌گذاری وجود ندارد'), 'error')
+        }
+    }
+
     const handleDelete = () => {
         deleteCatalog.mutate(item.id, {
             onSuccess: () => {
@@ -55,9 +79,14 @@ const CatalogueItem: FC<Props> = ({ item, refetch }) => {
                         <Edit size={18} color='#0047FF' />
                     </div>
                 </Link>
-                <div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
+                <button
+                    type='button'
+                    onClick={handleShare}
+                    className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center border-0 p-0 cursor-pointer shrink-0'
+                    aria-label='اشتراک‌گذاری'
+                >
                     <Share size={18} color='#000' />
-                </div>
+                </button>
                 <div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
                     <TrashWithConfrim
                         onDelete={handleDelete}