generated from pascalmartineau/wp-skeleton
40 lines
977 B
Vue
40 lines
977 B
Vue
<script setup lang="ts">
|
|
import type { SiteOptionsFragment } from "#graphql-operations";
|
|
|
|
defineProps<{ profiles: SiteOptionsFragment["profiles"] }>();
|
|
|
|
const socialIconMap = {
|
|
"facebook.com": "i-cib-facebook-f",
|
|
"twitter.com": "i-cib-twitter",
|
|
"x.com": "i-cib-twitter",
|
|
"instagram.com": "i-cib-instagram",
|
|
"youtube.com": "i-cib-youtube",
|
|
"linkedin.com": "i-cib-linkedin",
|
|
"tiktok.com": "i-cib-tiktok",
|
|
};
|
|
|
|
function getIconFromUrl(url: string): string {
|
|
try {
|
|
const domain = new URL(url).hostname.toLowerCase().replace(/^www\./, "");
|
|
return socialIconMap[domain as keyof typeof socialIconMap] || "i-lucide-globe";
|
|
}
|
|
catch {
|
|
return "i-lucide-globe";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-1">
|
|
<UButton
|
|
v-for="(profile, key) in profiles" :key="key"
|
|
:icon="getIconFromUrl(profile!.url)"
|
|
:to="profile!.url"
|
|
variant="link"
|
|
color="neutral"
|
|
external
|
|
target="_blank"
|
|
/>
|
|
</div>
|
|
</template>
|