refactor: use v-for to render items in CallToAction (#748)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: wojtekmaj

app/components/CallToAction.vue

@@ -1,9 +1,30 @@
 <script setup lang="ts">
-const socialLinks = {
-  github: 'https://repo.npmx.dev',
-  discord: 'https://chat.npmx.dev',
-  bluesky: 'https://social.npmx.dev',
-}
+const socialLinks = computed(() => [
+  {
+    id: 'github',
+    href: 'https://repo.npmx.dev',
+    icon: 'i-carbon:logo-github',
+    titleKey: $t('about.get_involved.contribute.title'),
+    descriptionKey: $t('about.get_involved.contribute.description'),
+    ctaKey: $t('about.get_involved.contribute.cta'),
+  },
+  {
+    id: 'discord',
+    href: 'https://chat.npmx.dev',
+    icon: 'i-carbon:chat',
+    titleKey: $t('about.get_involved.community.title'),
+    descriptionKey: $t('about.get_involved.community.description'),
+    ctaKey: $t('about.get_involved.community.cta'),
+  },
+  {
+    id: 'bluesky',
+    href: 'https://social.npmx.dev',
+    icon: 'i-simple-icons:bluesky',
+    titleKey: $t('about.get_involved.follow.title'),
+    descriptionKey: $t('about.get_involved.follow.description'),
+    ctaKey: $t('about.get_involved.follow.cta'),
+  },
+])
 </script>
 
 <template>
@@ -14,70 +35,26 @@ const socialLinks = {
 
     <div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
       <a
-        :href="socialLinks.github"
+        v-for="link in socialLinks"
+        :key="link.id"
+        :href="link.href"
         target="_blank"
         rel="noopener noreferrer"
         class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
       >
         <div class="flex gap-2">
-          <span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
+          <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
-            {{ $t('about.get_involved.contribute.title') }}
+            {{ link.titleKey }}
           </span>
         </div>
         <p class="text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.contribute.description') }}
+          {{ link.descriptionKey }}
         </p>
         <span
           class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
         >
-          {{ $t('about.get_involved.contribute.cta') }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-        </span>
-      </a>
-
-      <a
-        :href="socialLinks.discord"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
-      >
-        <div class="flex gap-2">
-          <span class="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
-          <span class="font-medium text-fg">
-            {{ $t('about.get_involved.community.title') }}
-          </span>
-        </div>
-        <p class="text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.community.description') }}
-        </p>
-        <span
-          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
-        >
-          {{ $t('about.get_involved.community.cta') }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-        </span>
-      </a>
-
-      <a
-        :href="socialLinks.bluesky"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
-      >
-        <div class="flex gap-2">
-          <span class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
-          <span class="font-medium text-fg">
-            {{ $t('about.get_involved.follow.title') }}
-          </span>
-        </div>
-        <p class="text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.follow.description') }}
-        </p>
-        <span
-          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
-        >
-          {{ $t('about.get_involved.follow.cta') }}
+          {{ link.ctaKey }}
           <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
         </span>
       </a>