mohadese namavar
75 lines
2.4 KiB
Vue
75 lines
2.4 KiB
Vue
<template>
|
|
<div class="blog-share">
|
|
<i class="isax isax-hierarchy-2"></i>
|
|
<h3>{{ $t("share") }}</h3>
|
|
<ul>
|
|
<li v-for="(item, i) in items" :key="i">
|
|
<a :href="item.url" target="_blank">
|
|
<img :src="`/icons/${item.icon}.svg`" />
|
|
</a>
|
|
</li>
|
|
<li @click="copyToClipboard()">
|
|
<i class="isax isax-link-21"></i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { post: { title } } = inject('data')
|
|
const { toast, t } = inject('service')
|
|
const route = useRoute();
|
|
const path = document.location.href;
|
|
const items = reactive([
|
|
{ icon: "linkedin", url: `https://www.linkedin.com/sharing/share-offsite/?title=${title}&url=${path}` },
|
|
{ icon: "telegram", url: `https://t.me/share/url?text=${title}&url=${path}` },
|
|
{ icon: "whatsapp", url: `https://api.whatsapp.com/send?text=${title} ${path}` },
|
|
{ icon: "twitter", url: `http://twitter.com/share?text=${title}&url${path}` },
|
|
]);
|
|
const copyToClipboard = () => {
|
|
toast.add({ life: 3000, severity: 'success', summary: t('success'), detail: t('copied') })
|
|
navigator.clipboard.writeText(path)
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.blog-share {
|
|
@apply w-auto lg:w-[26.8rem] lg:max-w-[26.8rem] flex items-center rounded-[0.6rem] relative max-lg:mx-6;
|
|
@apply flex-col lg:flex-row lg:h-14 lg:overflow-hidden lg:bg-zinc-100 gap-4 lg:gap-0;
|
|
|
|
&>i {
|
|
@apply text-2xl lg:hidden;
|
|
}
|
|
|
|
h3 {
|
|
@apply bg-neutral-200 w-full sm:w-[9.3rem] h-10 sm:h-full text-zinc-900;
|
|
@apply font-medium font-vazir leading-[1.9rem] items-center justify-center;
|
|
@apply text-lg hidden lg:flex;
|
|
}
|
|
|
|
ul {
|
|
@apply w-[14.3rem] flex gap-6 justify-center items-center grow h-9 text-[#333333] relative;
|
|
@apply bg-white rounded-[0.3rem] shadow-[0px_0px_10px_10px_#0000000a] z-[1];
|
|
@apply lg:shadow-none lg:h-full lg:bg-[#F2F2F2];
|
|
|
|
li {
|
|
img {
|
|
@apply w-5 h-5 lg:w-6 lg:h-6 object-scale-down object-bottom brightness-[0.45];
|
|
}
|
|
|
|
i {
|
|
@apply text-xl lg:text-[1.6em] lg:leading-9 cursor-pointer;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
@apply max-lg:content-['_'] w-4 h-4 transform rotate-45 bg-white absolute -top-2 rounded;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
@apply max-lg:content-['_'] absolute bottom-4 inset-x-0 h-0.5 bg-[#E5E5E5] z-0;
|
|
}
|
|
}
|
|
</style>
|