feat(list): add header text swap effect

apps/list/components/Header.vue

@@ -24,14 +24,19 @@ const props = defineProps<{
                 class="mb-12 text-center text-4xl leading-[3rem] text-slate-800 dark:text-slate-200"
             >
                 <span class="font-semibold">pomp</span>'s<br />
-                biased & opinionated
+                biased & opinionated list of
-                <br />
+                <div
-                list of
+                    class="flex h-12 w-full flex-col items-center gap-8 overflow-hidden"
-                <span
-                    class="highlight whitespace-nowrap px-1 font-extrabold text-light-text-default dark:text-dark-text-default"
                 >
-                    {{ props.highlight }}
+                    <TransitionGroup name="slide-up">
+                        <span
+                            class="highlight font-extrabold text-light-text-default underline decoration-blue-400/75 decoration-[12px] underline-offset-[-6px] dark:text-dark-text-default dark:decoration-blue-600/75"
+                            :key="highlight"
+                        >
+                            &nbsp;{{ highlight }}&nbsp;
                         </span>
+                    </TransitionGroup>
+                </div>
             </h1>
         </div>
     </div>
@@ -39,7 +44,6 @@ const props = defineProps<{
 
 <style scoped>
 .highlight {
-    @apply underline decoration-blue-400/75 decoration-[12px] underline-offset-[-6px] dark:decoration-blue-600/75;
     text-decoration-skip-ink: none;
 }
 
@@ -51,4 +55,19 @@ const props = defineProps<{
 .slant-shadow {
     filter: drop-shadow(0px 0px 20px #ccc);
 }
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+    transition: all 0.2s ease-out;
+}
+
+.slide-up-enter-from {
+    opacity: 0;
+    transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+}
 </style>

apps/list/pages/index.vue

@@ -7,12 +7,15 @@ type Item = {
 
 const items: Item[] = [
     {
-        name: "Content Creators",
+        name: "Content creators",
         href: "/content-creators",
         thumbnail: "content-creators",
     },
 ]
 
+const highlight = ref("anything")
+
+// https://www.lichter.io/articles/nuxt3-vue3-dynamic-images/
 const glob = import.meta.glob("~/assets/thumbnail/*", { eager: true })
 const thumbnails = Object.fromEntries(
     Object.entries(glob).map(([key, value]) => [
@@ -23,12 +26,14 @@ const thumbnails = Object.fromEntries(
 </script>
 
 <template>
-    <Header highlight="anything" />
+    <Header :highlight="highlight" />
 
     <Main>
         <div class="flex gap-6">
             <Card
                 v-for="(item, _index) in items"
+                @mouseenter="highlight = item.name"
+                @mouseleave="highlight = 'anything'"
                 :key="item.href"
                 :href="item.href"
                 :name="item.name"