Update share component
This commit is contained in:
@@ -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>
|
||||||
Reference in New Issue
Block a user