From b09995920c219ee1268a3f456f565ce5c92476dd Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Tue, 26 May 2026 19:19:59 +0330
Subject: [PATCH] Update share component

---
 .../global/product-detail/Share.vue           | 23 -------
 .../product/ProductHero/ShareButton.vue       | 69 +++++++++++++++++++
 2 files changed, 69 insertions(+), 23 deletions(-)
 delete mode 100644 frontend/components/global/product-detail/Share.vue
 create mode 100644 frontend/components/product/ProductHero/ShareButton.vue

diff --git a/frontend/components/global/product-detail/Share.vue b/frontend/components/global/product-detail/Share.vue
deleted file mode 100644
index 09f0a3d..0000000
--- a/frontend/components/global/product-detail/Share.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <div class="flex items-center gap-6">
-        <span class="typo-p-md text-black">
-            اشتراک گذاری:
-        </span>
-        <div class="flex items-center gap-3">
-            <NuxtLink>
-                <Icon name="ci:instagram" class="**:stroke-slate-500 size-6" />
-            </NuxtLink>
-            <NuxtLink>
-                <Icon name="ci:facebook" class="**:stroke-slate-500 size-6" />
-            </NuxtLink>
-            <NuxtLink>
-                <Icon name="ci:tiktok" class="**:stroke-slate-500 size-6" />
-            </NuxtLink>
-            <NuxtLink>
-                <Icon name="ci:youtube" class="**:stroke-slate-500 size-6" />
-            </NuxtLink>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-</script>
\ No newline at end of file
diff --git a/frontend/components/product/ProductHero/ShareButton.vue b/frontend/components/product/ProductHero/ShareButton.vue
new file mode 100644
index 0000000..9cfd801
--- /dev/null
+++ b/frontend/components/product/ProductHero/ShareButton.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+// imports
+
+import { useToast } from "~/composables/global/useToast";
+
+// types
+
+type Props = {
+    product: Product;
+};
+
+// props
+
+const props = defineProps<Props>();
+const { product } = toRefs(props);
+
+// states
+
+const { addToast } = useToast();
+
+// methods
+
+const shareProduct = async () => {
+    const shareData = {
+        title: product.value.name,
+        text: `لینک اشتراک گذاری محصول ${product.value.name}`,
+        url: window.location.href,
+    };
+
+    // Native share
+    if (navigator.share) {
+        try {
+            await navigator.share(shareData);
+        } catch (error) {
+            console.error("Share canceled or failed", error);
+        }
+
+        return;
+    }
+
+    // Fallback → copy link
+    try {
+        await navigator.clipboard.writeText(shareData.url);
+
+        addToast({
+            message: "لینک کالا کپی شد !",
+        });
+    } catch (error) {
+        console.error("Clipboard failed", error);
+        addToast({
+            options: { status: "error" },
+            message: "کپی لینک کالا با خطا مواجه شد !",
+        });
+    }
+};
+</script>
+
+<template>
+    <button
+        @click="shareProduct"
+        class="px-2 py-2 flex items-center gap-2 bg-slate-50 border-slate-200 border rounded-lg flex-center"
+    >
+        <span class="typo-label-sm max-sm:hidden"> ارسال </span>
+
+        <Icon
+            name="ci:bi-share"
+        />
+    </button>
+</template>