From ae147c84823aac5fda864346137265dbd75f3178 Mon Sep 17 00:00:00 2001
From: n-d-r-d-g <n.d.r.d.g@hotmail.com>
Date: Sun, 9 Jun 2024 15:51:13 +0400
Subject: [PATCH 1/2] Fixed alignment issue

---
 packages/frontendmu-nuxt/pages/team.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontendmu-nuxt/pages/team.vue b/packages/frontendmu-nuxt/pages/team.vue
index 81904588..04206c2a 100644
--- a/packages/frontendmu-nuxt/pages/team.vue
+++ b/packages/frontendmu-nuxt/pages/team.vue
@@ -14,7 +14,7 @@
       <ul id="team" role="list" class="mx-auto grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:gap-x-6 lg:gap-x-8">
         <li v-for="person in people" :key="person.id">
           <template v-if="person.id">
-            <NuxtLink class="space-y-4" :href="`/speaker/${person.id}`">
+            <NuxtLink :href="`/speaker/${person.id}`">
               <span class="sr-only">{{ person.name }}</span>
               <img class="mx-auto h-20 w-20 rounded-lg border-verse-2 shadow-lg 00 border p-2 lg:w-48 lg:h-48"
                 :src="person.imageUrl" :alt="person.name" :title="person.name" width="300" height="300" />
@@ -32,7 +32,7 @@
             </NuxtLink>
           </template>
           <template v-else>
-            <div class="space-y-4">
+            <div>
               <img class="mx-auto h-20 w-20 rounded-lg border-verse-2 shadow-lg 00 border p-2 lg:w-48 lg:h-48"
                 :src="person.imageUrl" :alt="person.name" :title="person.name" width="300" height="300" />
 

From dd77c03d34def50a9ff1261fc251beb27cb804be Mon Sep 17 00:00:00 2001
From: n-d-r-d-g <n.d.r.d.g@hotmail.com>
Date: Sun, 9 Jun 2024 16:07:35 +0400
Subject: [PATCH 2/2] Refactored code

---
 packages/frontendmu-nuxt/pages/team.vue | 51 ++++++++++---------------
 1 file changed, 20 insertions(+), 31 deletions(-)

diff --git a/packages/frontendmu-nuxt/pages/team.vue b/packages/frontendmu-nuxt/pages/team.vue
index 04206c2a..3a954e94 100644
--- a/packages/frontendmu-nuxt/pages/team.vue
+++ b/packages/frontendmu-nuxt/pages/team.vue
@@ -13,41 +13,29 @@
 
       <ul id="team" role="list" class="mx-auto grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:gap-x-6 lg:gap-x-8">
         <li v-for="person in people" :key="person.id">
-          <template v-if="person.id">
-            <NuxtLink :href="`/speaker/${person.id}`">
-              <span class="sr-only">{{ person.name }}</span>
-              <img class="mx-auto h-20 w-20 rounded-lg border-verse-2 shadow-lg 00 border p-2 lg:w-48 lg:h-48"
-                :src="person.imageUrl" :alt="person.name" :title="person.name" width="300" height="300" />
+          <component :is="person.id ? NuxtLink : 'div'" :href="person.id ? `/speaker/${person.id}` : null">
+            <span v-if="person.id" class="sr-only">{{ person.name }}</span>
 
-              <div class="space-y-2">
-                <div class="text-xs font-medium lg:text-lg text-center">
-                  <h3 class="text-verse-500 dark:text-verse-200">
-                    {{ person.name }}
-                  </h3>
-                  <p class="font-heading text-sm dark:text-verse-400 text-verse-600">
-                    {{ person.role }}
-                  </p>
-                </div>
-              </div>
-            </NuxtLink>
-          </template>
-          <template v-else>
-            <div>
-              <img class="mx-auto h-20 w-20 rounded-lg border-verse-2 shadow-lg 00 border p-2 lg:w-48 lg:h-48"
-                :src="person.imageUrl" :alt="person.name" :title="person.name" width="300" height="300" />
+            <img
+              class="mx-auto h-20 w-20 rounded-lg border-verse-2 shadow-lg 00 border p-2 lg:w-48 lg:h-48"
+              :src="person.imageUrl"
+              :alt="person.name"
+              :title="person.name"
+              width="300"
+              height="300"
+            />
 
-              <div class="space-y-2">
-                <div class="text-xs font-medium lg:text-lg text-center">
-                  <h3 class="text-verse-500 dark:text-verse-200">
-                    {{ person.name }}
-                  </h3>
-                  <p class="font-heading text-sm dark:text-verse-400 text-verse-600">
-                    {{ person.role }}
-                  </p>
-                </div>
+            <div class="space-y-2">
+              <div class="text-xs font-medium lg:text-lg text-center">
+                <h3 class="text-verse-500 dark:text-verse-200">
+                  {{ person.name }}
+                </h3>
+                <p class="font-heading text-sm dark:text-verse-400 text-verse-600">
+                  {{ person.role }}
+                </p>
               </div>
             </div>
-          </template>
+          </component>
         </li>
       </ul>
 
@@ -133,4 +121,5 @@ interface Contributor {
 }
 
 const contributors: Contributor[] = Contributors;
+const NuxtLink = resolveComponent('NuxtLink')
 </script>