Update share component

This commit is contained in:
marzban-dev
2026-05-26 19:19:59 +03:30
parent 7ccb2f445e
commit b09995920c
2 changed files with 69 additions and 23 deletions
@@ -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>
@@ -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>