feat(list): add thumbnail

apps/list/assets/thumbnail/content-creators.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="128" fill="none"><defs><linearGradient id="a" x1=".975" x2="-.001" y1=".766" y2=".433"><stop offset=".52" stop-color="#5a3e85"/><stop offset=".53" stop-color="red"/></linearGradient><pattern id="b" width="320" height="128" x="0" y="0" patternUnits="userSpaceOnUse"><path fill="url(#a)" d="M0 0h320v128H0z"/></pattern></defs><g class="fills"><rect width="320" height="128" fill="url(#b)" class="frame-background" rx="0" ry="0"/></g><g class="frame-children"><path fill="#fff" d="M103.151 45.082a8.57 8.57 0 0 0-6.029-6.042c-5.287-1.445-26.565-1.445-26.565-1.445s-21.279.044-26.566 1.489a8.574 8.574 0 0 0-6.03 6.042c-1.599 9.413-2.219 23.756.044 32.792a8.574 8.574 0 0 0 6.03 6.042c5.287 1.445 26.565 1.445 26.565 1.445s21.279 0 26.565-1.445a8.572 8.572 0 0 0 6.03-6.042c1.687-9.426 2.206-23.76-.044-32.836ZM63.784 71.745v-20.49L81.436 61.5 63.784 71.745Zm163.995-29.217-3.124 8.338v33.349h11.451v6.257h6.252l6.246-6.257h9.371l12.498-12.502V42.528Zm4.163 4.166h34.366v22.931l-7.291 7.297h-11.453l-6.244 6.248v-6.248h-9.378Zm11.456 20.849h4.166V55.037h-4.166Zm11.454 0h4.165V55.037h-4.165Z" class="fills"/></g></svg>

apps/list/components/Card.vue

@@ -2,6 +2,7 @@
 const props = defineProps<{
     href: string
     name: string
+    thumbnail: string
 }>()
 
 // See https://inclusive-components.design/cards/
@@ -14,7 +15,7 @@ const props = defineProps<{
         <div
             class="flex h-32 items-center justify-center rounded-t-lg dark:bg-dark-ui"
         >
-            <slot />
+            <img :src="$props.thumbnail" class="rounded-t-lg" />
         </div>
         <div class="p-4">
             <NuxtLink

apps/list/pages/index.vue

@@ -1,13 +1,39 @@
+<script setup lang="ts">
+type Item = {
+    name: string
+    href: string
+    thumbnail: string
+}
+
+const items: Item[] = [
+    {
+        name: "Content Creators",
+        href: "/content-creators",
+        thumbnail: "content-creators",
+    },
+]
+
+const glob = import.meta.glob("~/assets/thumbnail/*", { eager: true })
+const thumbnails = Object.fromEntries(
+    Object.entries(glob).map(([key, value]) => [
+        key.split("/").pop().split(".")[0],
+        value.default,
+    ]),
+)
+</script>
+
 <template>
     <Header highlight="anything" />
 
     <Main>
         <div class="flex gap-6">
-            <Card href="/content-creators" name="Content Creators">
+            <Card
-                <Icon name="logos:twitch" size="48" />
+                v-for="(item, _index) in items"
-                <span class="mx-2 text-3xl">/</span>
+                :key="item.href"
-                <Icon name="logos:youtube-icon" size="48" />
+                :href="item.href"
-            </Card>
+                :name="item.name"
+                :thumbnail="thumbnails[item.thumbnail]"
+            />
         </div>
     </Main>
 </template>