feat: structure project items better

maybeanerd · Sep 14, 2023 · 34c832d · 34c832d
1 parent c027594
commit 34c832d
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 40 deletions.
diff --git a/components/profile/project/fact.vue b/components/profile/project/fact.vue
@@ -1,15 +1,22 @@
 <template>
   <div>
-    <h4 class="text-sm">
+    <h4
+      class="text-xs italic"
+      :class="{
+        'mb-1': props.variant === 'list',
+      }"
+    >
       {{ props.title }}
     </h4>
-    <div class="text-xs ml-2">
-      <p v-if="typeof props.value === 'string'">
-        {{ props.value }}
-      </p>
-      <ul v-else>
-        <li v-for="(fact, index) in props.value" :key="index">
+    <div class="text-sm">
+      <div v-if="props.variant === 'tags'">
+        <CustomTag v-for="(fact, index) in props.value" :key="index">
           {{ fact }}
+        </CustomTag>
+      </div>
+      <ul v-else>
+        <li v-for="(fact, index) in props.value" :key="index" class="flex">
+          <NaiveIcon name="ph:dot-outline" /> {{ fact }}
         </li>
       </ul>
     </div>
@@ -18,6 +25,8 @@
 
 <script setup lang="ts">
 const props = defineProps<{
-  title: string; value: string | Array<string>
+  title: string;
+  value: Array<string>;
+  variant: 'list' | 'tags';
 }>();
 </script>
diff --git a/components/profile/project/item.vue b/components/profile/project/item.vue
@@ -2,41 +2,48 @@
   <!-- TODO use project type to add icon to timeline item instead of circle of its type -->
   <NTimelineItem
     type="success"
-    :title="props.project.title"
     :time="stringifyTimeframe(props.project.timeframe)"
   >
-    <div class="ml-2">
-      <ProfileProjectPicture
-        v-if="props.project.image"
-        :name="props.name"
-        :image-path="props.project.image"
-      />
-      <ProfileProjectFact
-        :title="t('project.role')"
-        :value="props.project.role"
-      />
-      <ProfileProjectFact
-        :title="t('project.description')"
-        :value="props.project.description"
-      />
-      <!-- TODO move description to a dedicated space -->
-      <ProfileProjectFact
-        v-if="props.project.technologies"
-        :title="t('project.technologies')"
-        :value="props.project.technologies"
-      />
-      <!-- TODO embed link nicely -->
-      <ProfileProjectFact
-        v-if="props.project.url"
-        :title="'URL'"
-        :value="props.project.url"
-      />
-      <ProfileProjectFact
-        v-if="props.project.highlights"
-        :title="'Highlights'"
-        :value="props.project.highlights"
-      />
+    <h3 class="text-base -mt-[3px]">
+      {{ props.project.title }}
+    </h3>
+    <CustomRouterLink v-if="props.project.url" :to="props.project.url" class="text-xs">
+      {{ props.project.url }}
+    </CustomRouterLink>
+
+    <div class="flex mt-4 space-x-4">
+      <div class="mt-1">
+        <ProfileProjectPicture
+          v-if="props.project.image"
+          :name="props.name"
+          :image-path="props.project.image"
+        />
+      </div>
+      <div>
+        <p class="text-sm">
+          {{ props.project.role }}
+        </p>
+
+        <ProfileProjectFact
+          v-if="props.project.technologies"
+          class="mt-2"
+          :title="t('project.technologies')"
+          variant="tags"
+          :value="props.project.technologies"
+        />
+      </div>
     </div>
+
+    <p class="my-2 text-sm">
+      {{ props.project.description }}
+    </p>
+
+    <ProfileProjectFact
+      v-if="props.project.highlights"
+      :title="'Highlights'"
+      variant="list"
+      :value="props.project.highlights"
+    />
   </NTimelineItem>
 </template>