feat: Initial Nuxt app

wp-content/themes/ccat/app/components/ui/UiSocialProfiles.vue

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