chore: update content

components/previous-role.vue

@@ -7,6 +7,8 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+
+const [visibility, toggle] = useToggle(false);
 </script>
 
 <template>
@@ -31,10 +33,17 @@ const props = defineProps<Props>();
       >
         {{ props.company }}
       </NuxtLink>
-      <div class="mb-2 text-xs text-gray-500 uppercase font-bold">
-        {{ props.role }}
+      <div>
+        <button
+          class="mb-2 text-xs text-gray-400 uppercase font-semibold flex items-center justify-start gap-1"
+          @click="() => toggle()"
+        >
+          {{ props.role }}
+          <UIcon name="i-heroicons-chevron-down" v-if="!visibility" as="div" />
+          <UIcon name="i-heroicons-chevron-up" v-if="visibility" as="div" />
+        </button>
       </div>
-      <div class="text-sm text-gray-500">
+      <div v-if="visibility" class="text-sm text-gray-500">
         <slot />
       </div>
     </div>