From 18fbf98695a57d99bc63f34be8ad6ada238aee6b Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 2 Sep 2024 21:11:02 +0200
Subject: [PATCH] Working

---
 app/app.config.ts          |  5 ++++
 app/components/App/Tab.vue |  2 +-
 app/composables/users.ts   |  2 --
 app/pages/[user].vue       | 47 ++++++++++++++++++++++++++++++++++++--
 app/pages/index.vue        | 13 +++++++++++
 5 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/app/app.config.ts b/app/app.config.ts
index caa3c23..73cf2eb 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -26,5 +26,10 @@ export default defineAppConfig({
         },
       },
     },
+    avatar: {
+      size: {
+        '5xl': 'h-24 w-24 text-5xl',
+      },
+    },
   },
 })
diff --git a/app/components/App/Tab.vue b/app/components/App/Tab.vue
index e6a7139..ff673cb 100644
--- a/app/components/App/Tab.vue
+++ b/app/components/App/Tab.vue
@@ -51,7 +51,7 @@ function openDeleteTabModal(tab: TabType) {
 function visitLink() {
   if (!props.editMode) {
     window.open(props.tab.link, '_blank')
-    // add view count
+    // todo: add view count
   }
 }
 </script>
diff --git a/app/composables/users.ts b/app/composables/users.ts
index a421d63..eaea966 100644
--- a/app/composables/users.ts
+++ b/app/composables/users.ts
@@ -42,9 +42,7 @@ export async function useUser() {
         method: 'PATCH',
         body: JSON.stringify(user),
       })
-      console.log(session.value)
       await fetch()
-      console.log(session.value)
       useSuccessToast('User successfully updated!')
     }
     catch (error) {
diff --git a/app/pages/[user].vue b/app/pages/[user].vue
index cee0e73..4675a6c 100644
--- a/app/pages/[user].vue
+++ b/app/pages/[user].vue
@@ -26,6 +26,11 @@ onMounted(() => {
     useErrorToast('This user\'s profile is private.', 'Look for another user.')
   }
 })
+
+function visitLink(link: string) {
+  window.open(link, '_blank')
+  // todo: add view count
+}
 </script>
 
 <template>
@@ -63,6 +68,19 @@ onMounted(() => {
       />
     </div>
     <section v-else>
+      <section class="flex flex-col md:flex-row items-center justify-center md:w-2/3 mx-auto gap-4 md:gap-8">
+        <div>
+          <AppAvatar size="5xl" :src="userDetails.avatar" />
+        </div>
+        <div class="space-y-4">
+          <h1 class="font-bold text-4xl tracking-wide">
+            {{ userDetails.name }}
+          </h1>
+          <h3 class="text-xl">
+            {{ userDetails.description }}
+          </h3>
+        </div>
+      </section>
       <div v-if="userDetails.categories.length > 0" class="space-y-12">
         <div
           v-for="category in userDetails.categories"
@@ -77,10 +95,35 @@ onMounted(() => {
             </div>
           </div>
           <div
-            v-if="userDetails.categories.filter(tab => tab.categoryId === category.id).length > 0"
+            v-if="category.tabs.filter(tab => tab.categoryId === category.id).length > 0"
             class="grid grid-cols-1 auto-rows-auto sm:grid-cols-3 gap-4"
           >
-            {{ userDetails.categories.filter(tab => tab.categoryId === category.id) }}
+            <UCard
+              v-for="tab in category.tabs.filter(tab => tab.categoryId === category.id)"
+              :key="tab.id"
+              :ui="{
+                body: { base: 'cursor-pointer h-full relative z-20' },
+                background: 'h-full duration-300 bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800',
+              }"
+              @click.prevent="visitLink(tab.link)"
+            >
+              <div v-show="tab.primary" class="absolute flex h-3 w-3 -left-1 -top-1">
+                <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" :class="`bg-${tab.color}-400`" />
+                <span class="relative inline-flex rounded-full h-3 w-3" :class="`bg-${tab.color}-400`" />
+              </div>
+              <div class="flex items-center justify-between h-full z-20">
+                <div class="flex gap-4 items-center h-full">
+                  <UBadge :color="tab.color" class="p-2" variant="soft">
+                    <UIcon :name="tab.icon" size="32" />
+                  </UBadge>
+                  <div class="flex flex-col gap-1">
+                    <p :class="`text-${tab.color}-400`" class="text-xl font-medium truncate">
+                      {{ tab.name }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </UCard>
           </div>
           <div v-else class="flex gap-2 items-center">
             <UIcon name="i-ph:empty-duotone" size="16" />
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 03c96a9..5213c03 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -105,6 +105,19 @@ defineShortcuts({
         {{ useDateFormat(date, 'dddd D MMMM YYYY', { locales: user.language }) }}
       </h1>
     </div>
+    <section class="flex flex-col md:flex-row items-center justify-center md:w-2/3 mx-auto gap-4 md:gap-8">
+      <div>
+        <AppAvatar size="5xl" :src="user.avatar" />
+      </div>
+      <div class="space-y-4">
+        <h1 class="font-bold text-4xl tracking-wide">
+          {{ user.name }}
+        </h1>
+        <h3 class="text-xl">
+          {{ user.description }}
+        </h3>
+      </div>
+    </section>
     <div class="flex justify-end mb-8 gap-4">
       <UButton
         v-if="canCreateCategory()"