From 3d020bda6a5627f586cb04fd49a00cb4c4edc70c Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <m.antonoudiou@celonis.com>
Date: Thu, 9 May 2024 14:41:01 +0300
Subject: [PATCH] chore: fix slot

---
 components/home/been-working-with.vue      | 99 ++++++++++------------
 components/{role.vue => previous-role.vue} |  8 +-
 2 files changed, 46 insertions(+), 61 deletions(-)
 rename components/{role.vue => previous-role.vue} (80%)

diff --git a/components/home/been-working-with.vue b/components/home/been-working-with.vue
index a8c8cb8..735f736 100644
--- a/components/home/been-working-with.vue
+++ b/components/home/been-working-with.vue
@@ -1,89 +1,78 @@
+import PreviousRole from '../previous-role.vue';
 <template>
   <UContainer class="flex flex-col gap-5" as="section">
     <div class="text-sm text-gray-500">Been working with</div>
-    <Role
+    <PreviousRole
       company="Celonis"
       role="Senior frontend engineer"
       logo="celonis-logo.webp"
       href="https://celonis.com"
     >
-      <template>
-        <ul class="list-disc list-inside">
-          <li>
-            EMS 2.0 OCPM frontend: Pioneering the future of process mining.
-          </li>
-          <li>
-            Developed internal shared component libraries and build pipelines.
-          </li>
-          <li>
-            Facilitated cross-departmental collaboration with Backstage
-            implementation.
-          </li>
-        </ul>
-      </template>
-    </Role>
+      <ul class="list-disc list-inside">
+        <li>EMS 2.0 OCPM frontend: Pioneering the future of process mining.</li>
+        <li>
+          Developed internal shared component libraries and build pipelines.
+        </li>
+        <li>
+          Facilitated cross-departmental collaboration with Backstage
+          implementation.
+        </li>
+      </ul>
+    </PreviousRole>
 
-    <Role
+    <PreviousRole
       company="Lenses.io"
       role="Senior frontend engineer"
       logo="lenses-logo.webp"
       href="https://lenses.io"
     >
-      <template>
-        <ul class="list-disc list-inside">
-          <li>Engineered the frontend for SQL Processors and Data Catalog.</li>
-          <li>Architected the shared components library.</li>
-          <li>Worked on the Lenses.io CLI tool.</li>
-        </ul>
-      </template>
-    </Role>
+      <ul class="list-disc list-inside">
+        <li>Engineered the frontend for SQL Processors and Data Catalog.</li>
+        <li>Architected the shared components library.</li>
+        <li>Worked on the Lenses.io CLI tool.</li>
+      </ul>
+    </PreviousRole>
 
-    <Role
+    <PreviousRole
       company="The Chat Shop"
       role="Lead Engineer"
       logo="thechatshop-logo.jpg"
       href="https://thechatshop.com"
     >
-      <template>
-        <ul class="list-disc list-inside">
-          <li>Spearheaded end-to-end processing architecture.</li>
-          <li>Established the company’s streaming data infrastructure.</li>
-          <li>
-            Worked on devops to achieve continuous integration and deployment.
-          </li>
-        </ul>
-      </template>
-    </Role>
+      <ul class="list-disc list-inside">
+        <li>Spearheaded end-to-end processing architecture.</li>
+        <li>Established the company’s streaming data infrastructure.</li>
+        <li>
+          Worked on devops to achieve continuous integration and deployment.
+        </li>
+      </ul>
+    </PreviousRole>
 
-    <Role
+    <PreviousRole
       company="Commversion"
       role="Contractor Software Engineer"
       logo="commversion-logo.webp"
       href="https://commversion.com"
     >
-      <template>
-        <ul class="list-disc list-inside">
-          <li>
-            Developed the frontend delivery platform with public-facing
-            infrastructure.
-          </li>
-          <li>Designed and implemented the initial InstantConnect system.</li>
-        </ul>
-      </template>
-    </Role>
+      <ul class="list-disc list-inside">
+        <li>
+          Developed the frontend delivery platform with public-facing
+          infrastructure.
+        </li>
+        <li>Designed and implemented the initial InstantConnect system.</li>
+      </ul>
+    </PreviousRole>
 
-    <Role
+    <PreviousRole
       company="Commversion"
       role="Contractor Frontend Engineer"
       logo="up-logo.webp"
       href="https://uphellas.gr"
     >
-      <template>
-        <ul class="list-disc list-inside">
-          <li>Implemented client's area dashboards.</li>
-          <li>Designed and implemented internal sales dashrboard.</li>
-        </ul>
-      </template>
-    </Role>
+      <ul class="list-disc list-inside">
+        <li>Implemented client's area dashboards.</li>
+        <li>Designed and implemented internal sales dashrboard.</li>
+      </ul>
+    </PreviousRole>
   </UContainer>
 </template>
diff --git a/components/role.vue b/components/previous-role.vue
similarity index 80%
rename from components/role.vue
rename to components/previous-role.vue
index 4b410e8..514bb4a 100644
--- a/components/role.vue
+++ b/components/previous-role.vue
@@ -7,9 +7,6 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-
-const titleRef = ref();
-const altContent = computed(() => titleRef.value?.$el.textContent);
 </script>
 
 <template>
@@ -18,7 +15,7 @@ const altContent = computed(() => titleRef.value?.$el.textContent);
       <NuxtImg
         placeholder
         :src="props.logo"
-        :alt="altContent"
+        :alt="props.company"
         class="block rounded min-w-[50px]"
         format="webp"
         height="50"
@@ -31,7 +28,6 @@ const altContent = computed(() => titleRef.value?.$el.textContent);
         :href="props.href"
         target="_blank"
         class="md:text-xl text-lg font-semibold hover:underline hover:underline-offset-4"
-        ref="titleRef"
       >
         {{ props.company }}
       </NuxtLink>
@@ -39,7 +35,7 @@ const altContent = computed(() => titleRef.value?.$el.textContent);
         {{ props.role }}
       </div>
       <div class="text-sm text-gray-500">
-        <slot> Lorem ipsum, dolor sit amet consectetur adipisicing elit. </slot>
+        <slot />
       </div>
     </div>
   </div>