feat: AcfSocial

wp-content/themes/headless/app/components/acf/AcfSocial.gql

@@ -0,0 +1,5 @@
+fragment AcfSocial on GroupAbstractSocial_Fields {
+  profiles @filterNullItems @nullToEmpty {
+    url
+  }
+}

wp-content/themes/headless/app/components/acf/AcfSocial.vue

@@ -0,0 +1,34 @@
+<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>