@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/blog/SocialShareSidebar.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Facebook01Icon, Link01Icon, Linkedin01Icon, NewTwitterIcon, Share08Icon, TelegramIcon, Tick02Icon, WhatsappIcon } from '@hugeicons/core-free-icons';
+import Facebook01Icon from '@hugeicons/core-free-icons/Facebook01Icon';
+import Link01Icon from '@hugeicons/core-free-icons/Link01Icon';
+import Linkedin01Icon from '@hugeicons/core-free-icons/Linkedin01Icon';
+import NewTwitterIcon from '@hugeicons/core-free-icons/NewTwitterIcon';
+import Share08Icon from '@hugeicons/core-free-icons/Share08Icon';
+import TelegramIcon from '@hugeicons/core-free-icons/TelegramIcon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
+import WhatsappIcon from '@hugeicons/core-free-icons/WhatsappIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 
 // Props
 const props = defineProps<{
-    title: string;
-    url: string;
+	title: string;
+	url: string;
 }>();
 
 const { t } = useI18n();
@@ -15,40 +22,40 @@ const copied = ref(false);
 
 // Social platforms config (each icon turns its brand color on hover)
 const socialPlatforms = computed(() => {
-    const encodedUrl = encodeURIComponent(props.url);
-    const encodedTitle = encodeURIComponent(props.title);
+	const encodedUrl = encodeURIComponent(props.url);
+	const encodedTitle = encodeURIComponent(props.title);
 
-    return [{
-        name: 'facebook',
-        url: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
-        icon: Facebook01Icon,
-        color: 'hover:text-[#1877F2]',
-        label: t('uiVintage.blog.share.facebook')
-    }, {
-        name: 'twitter',
-        url: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
-        icon: NewTwitterIcon,
-        color: 'hover:text-foreground',
-        label: t('uiVintage.blog.share.x')
-    }, {
-        name: 'whatsapp',
-        url: `https://api.whatsapp.com/send?text=${encodedTitle}%20${encodedUrl}`,
-        icon: WhatsappIcon,
-        color: 'hover:text-[#25D366]',
-        label: t('uiVintage.blog.share.whatsapp')
-    }, {
-        name: 'linkedin',
-        url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
-        icon: Linkedin01Icon,
-        color: 'hover:text-[#0A66C2]',
-        label: t('uiVintage.blog.share.linkedin')
-    }, {
-        name: 'telegram',
-        url: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
-        icon: TelegramIcon,
-        color: 'hover:text-[#229ED9]',
-        label: t('uiVintage.blog.share.telegram')
-    }];
+	return [{
+		name: 'facebook',
+		url: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
+		icon: Facebook01Icon,
+		color: 'hover:text-[#1877F2]',
+		label: t('uiVintage.blog.share.facebook')
+	}, {
+		name: 'twitter',
+		url: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
+		icon: NewTwitterIcon,
+		color: 'hover:text-foreground',
+		label: t('uiVintage.blog.share.x')
+	}, {
+		name: 'whatsapp',
+		url: `https://api.whatsapp.com/send?text=${encodedTitle}%20${encodedUrl}`,
+		icon: WhatsappIcon,
+		color: 'hover:text-[#25D366]',
+		label: t('uiVintage.blog.share.whatsapp')
+	}, {
+		name: 'linkedin',
+		url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
+		icon: Linkedin01Icon,
+		color: 'hover:text-[#0A66C2]',
+		label: t('uiVintage.blog.share.linkedin')
+	}, {
+		name: 'telegram',
+		url: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
+		icon: TelegramIcon,
+		color: 'hover:text-[#229ED9]',
+		label: t('uiVintage.blog.share.telegram')
+	}];
 });
 
 // Shared button classes
@@ -56,61 +63,61 @@ const buttonClasses = 'flex size-9 cursor-pointer items-center justify-center ro
 
 // Copy the article link to the clipboard
 const copyLink = async () => {
-    if (!navigator.clipboard) return;
-    await navigator.clipboard.writeText(props.url);
-    copied.value = true;
-    window.setTimeout(() => {
-        copied.value = false;
-    }, 1800);
+	if (!navigator.clipboard) return;
+	await navigator.clipboard.writeText(props.url);
+	copied.value = true;
+	window.setTimeout(() => {
+		copied.value = false;
+	}, 1800);
 };
 </script>
 
 <template>
-    <Teleport to="body">
-        <!-- Desktop sidebar on the right -->
-        <div class="fixed top-35 right-[max(6.875rem,calc(50%-38.125rem))] z-20 hidden animate-[uv-fade-up_0.7s_var(--ease-out-expo)_0.6s_both] xl:block 2xl:right-[max(0rem,calc(50%-35.125rem))]">
-            <div class="flex flex-col items-center gap-0.5 rounded border border-border bg-card p-1.5 shadow-elevated-sm">
-                <!-- Share icon -->
-                <span aria-hidden="true" class="flex size-9 items-center justify-center text-primary">
-                    <HugeiconsIcon :icon="Share08Icon" class="size-4" />
-                </span>
-                <span aria-hidden="true" class="my-1 h-px w-6 bg-border" />
+	<Teleport to="body">
+		<!-- Desktop sidebar on the right -->
+		<div class="fixed top-35 right-[max(6.875rem,calc(50%-38.125rem))] z-20 hidden animate-[uv-fade-up_0.7s_var(--ease-out-expo)_0.6s_both] xl:block 2xl:right-[max(0rem,calc(50%-35.125rem))]">
+			<div class="flex flex-col items-center gap-0.5 rounded border border-border bg-card p-1.5 shadow-elevated-sm">
+				<!-- Share icon -->
+				<span aria-hidden="true" class="flex size-9 items-center justify-center text-primary">
+					<HugeiconsIcon :icon="Share08Icon" class="size-4" />
+				</span>
+				<span aria-hidden="true" class="my-1 h-px w-6 bg-border" />
 
-                <!-- Social share links (desktop) -->
-                <a v-for="platform in socialPlatforms" :key="platform.name" :href="platform.url" target="_blank" rel="noopener noreferrer" :aria-label="platform.label" :title="platform.label" :class="[buttonClasses, platform.color]">
-                    <HugeiconsIcon :icon="platform.icon" class="size-4" />
-                </a>
+				<!-- Social share links (desktop) -->
+				<a v-for="platform in socialPlatforms" :key="platform.name" :href="platform.url" target="_blank" rel="noopener noreferrer" :aria-label="platform.label" :title="platform.label" :class="[buttonClasses, platform.color]">
+					<HugeiconsIcon :icon="platform.icon" class="size-4" />
+				</a>
 
-                <!-- Copy link -->
-                <span aria-hidden="true" class="my-1 h-px w-6 bg-border" />
-                <button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :title="t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:text-primary', copied && 'text-primary']" @click="copyLink">
-                    <Transition mode="out-in" enter-active-class="transition-[opacity,scale] duration-300 ease-bounce" enter-from-class="opacity-0 scale-50" leave-active-class="transition-opacity duration-100" leave-to-class="opacity-0">
-                        <HugeiconsIcon :key="String(copied)" :icon="copied ? Tick02Icon : Link01Icon" class="size-4" />
-                    </Transition>
-                </button>
-            </div>
-        </div>
+				<!-- Copy link -->
+				<span aria-hidden="true" class="my-1 h-px w-6 bg-border" />
+				<button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :title="t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:text-primary', copied && 'text-primary']" @click="copyLink">
+					<Transition mode="out-in" enter-active-class="transition-[opacity,scale] duration-300 ease-bounce" enter-from-class="opacity-0 scale-50" leave-active-class="transition-opacity duration-100" leave-to-class="opacity-0">
+						<HugeiconsIcon :key="String(copied)" :icon="copied ? Tick02Icon : Link01Icon" class="size-4" />
+					</Transition>
+				</button>
+			</div>
+		</div>
 
-        <!-- Mobile view (floating bar at bottom) -->
-        <div class="fixed bottom-4 left-1/2 z-20 -translate-x-1/2 animate-[uv-fade-up_0.7s_var(--ease-out-expo)_0.8s_both] xl:hidden">
-            <div class="flex items-center gap-0.5 rounded border border-border bg-card p-1.5 shadow-elevated-sm">
-                <!-- Share icon -->
-                <span aria-hidden="true" class="flex size-9 items-center justify-center text-primary">
-                    <HugeiconsIcon :icon="Share08Icon" class="size-4" />
-                </span>
-                <span aria-hidden="true" class="mx-1 h-6 w-px bg-border" />
+		<!-- Mobile view (floating bar at bottom) -->
+		<div class="fixed bottom-4 left-1/2 z-20 -translate-x-1/2 animate-[uv-fade-up_0.7s_var(--ease-out-expo)_0.8s_both] xl:hidden">
+			<div class="flex items-center gap-0.5 rounded border border-border bg-card p-1.5 shadow-elevated-sm">
+				<!-- Share icon -->
+				<span aria-hidden="true" class="flex size-9 items-center justify-center text-primary">
+					<HugeiconsIcon :icon="Share08Icon" class="size-4" />
+				</span>
+				<span aria-hidden="true" class="mx-1 h-6 w-px bg-border" />
 
-                <!-- Social share links (mobile) -->
-                <a v-for="platform in socialPlatforms" :key="platform.name" :href="platform.url" target="_blank" rel="noopener noreferrer" :aria-label="platform.label" :class="[buttonClasses, platform.color]">
-                    <HugeiconsIcon :icon="platform.icon" class="size-4" />
-                </a>
+				<!-- Social share links (mobile) -->
+				<a v-for="platform in socialPlatforms" :key="platform.name" :href="platform.url" target="_blank" rel="noopener noreferrer" :aria-label="platform.label" :class="[buttonClasses, platform.color]">
+					<HugeiconsIcon :icon="platform.icon" class="size-4" />
+				</a>
 
-                <!-- Copy link -->
-                <span aria-hidden="true" class="mx-1 h-6 w-px bg-border" />
-                <button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:text-primary', copied && 'text-primary']" @click="copyLink">
-                    <HugeiconsIcon :icon="copied ? Tick02Icon : Link01Icon" class="size-4" />
-                </button>
-            </div>
-        </div>
-    </Teleport>
-</template>
+				<!-- Copy link -->
+				<span aria-hidden="true" class="mx-1 h-6 w-px bg-border" />
+				<button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:text-primary', copied && 'text-primary']" @click="copyLink">
+					<HugeiconsIcon :icon="copied ? Tick02Icon : Link01Icon" class="size-4" />
+				</button>
+			</div>
+		</div>
+	</Teleport>
+</template>