35 lines
948 B
Vue
35 lines
948 B
Vue
<script setup lang="ts">
|
|
import type { AcfSocialFragment } from "#graphql/types";
|
|
|
|
defineProps<{ social?: AcfSocialFragment }>();
|
|
|
|
const socialIconNames = {
|
|
"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 getSocialIcon(url: string): string {
|
|
try {
|
|
const domain = new URL(url).hostname.toLowerCase().replace(/^www\./, "");
|
|
return socialIconNames[domain as keyof typeof socialIconNames] ?? "i-lucide-globe";
|
|
} catch (error) {
|
|
return "i-lucide-globe";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ul v-if="social?.profiles.length">
|
|
<li v-for="({ url }, key) in social.profiles" :key="key">
|
|
<a :href="url" target="_blank" rel="noopener noreferrer">
|
|
<UIcon :name="getSocialIcon(url)" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</template>
|