From 02ddb76d39b912a6ea6748bf3bfc9e3afd016178 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sun, 20 Aug 2023 23:32:09 +0200
Subject: [PATCH] Improve small details

---
 src/composables/useTalents.ts |  5 +++++
 src/pages/talents.vue         | 11 +++++++++--
 src/pages/work.vue            |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/composables/useTalents.ts b/src/composables/useTalents.ts
index 6b84ea4..f212442 100644
--- a/src/composables/useTalents.ts
+++ b/src/composables/useTalents.ts
@@ -7,8 +7,13 @@ export async function useTalents() {
     data: getCategories,
   } = await $trpc.talents.getCategories.useQuery()
 
+  function getCategoryById(id: number) {
+    return getCategories.value?.find(category => category.id === id)?.name || 'Not Found'
+  }
+
   return {
     getTalents,
     getCategories,
+    getCategoryById,
   }
 }
diff --git a/src/pages/talents.vue b/src/pages/talents.vue
index 0e8411b..8577990 100644
--- a/src/pages/talents.vue
+++ b/src/pages/talents.vue
@@ -9,7 +9,7 @@ const talents = ref<Talent[]>()
 
 const currentFavorite = ref<boolean>(false)
 const currentCategory = ref('all')
-const { getCategories, getTalents } = await useTalents()
+const { getCategories, getTalents, getCategoryById } = await useTalents()
 
 talents.value = await getTalents(currentCategory.value, currentFavorite.value)
 
@@ -106,7 +106,7 @@ function getColor() {
           class="group relative flex flex-col justify-between"
         >
           <div class="flex gap-6 items-center">
-            <img :src="talent.logo" class="h-8 w-8 rounded-md">
+            <img :src="talent.logo" class="z-20 h-8 w-8 rounded-md">
             <div>
               <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
                 <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
@@ -127,6 +127,13 @@ function getColor() {
               </p>
             </div>
           </div>
+          <div class="flex gap-2 z-10">
+            <span
+              v-for="category in talent.categories"
+              :key="category"
+              class="text-[.7rem] px-0.5 text-subtitle rounded-md ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
+            >{{ getCategoryById(category.categoryId) }}</span>
+          </div>
           <p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor()">
             <UIcon name="i-ph-link-bold" />
             <span class="ml-2">{{ talent.website.replace('https://', '') }}</span>
diff --git a/src/pages/work.vue b/src/pages/work.vue
index eee9d58..2db1c83 100644
--- a/src/pages/work.vue
+++ b/src/pages/work.vue
@@ -47,7 +47,7 @@ const { data: projects } = await useProjects()
             <span
               v-for="tag in project.tags"
               :key="tag"
-              class="text-xs p-0.5 text-subtitle rounded-md ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
+              class="text-[.7rem] px-0.5 text-subtitle rounded-md ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
             >{{ tag }}</span>
           </div>
           <p class="relative z-10 mt-6 flex text-sm font-medium items-center" :class="getColor()">