feat(list): add icons

apps/list/components/Card.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+    href: string
+    name: string
+}>()
+
+// See https://inclusive-components.design/cards/
+</script>
+
+<template>
+    <div
+        class="relative w-80 rounded-lg rounded-b-lg bg-light-card-bg shadow-lg hover:shadow-glow dark:bg-dark-card-bg"
+    >
+        <div
+            class="flex h-32 items-center justify-center rounded-t-lg dark:bg-dark-ui"
+        >
+            <slot />
+        </div>
+        <div class="p-4">
+            <NuxtLink
+                :href="$props.href"
+                class="text-2xl after:absolute after:bottom-0 after:left-0 after:right-0 after:top-0"
+            >
+                {{ $props.name }}
+            </NuxtLink>
+        </div>
+    </div>
+</template>

apps/list/pages/index.vue

@@ -2,8 +2,12 @@
     <Header highlight="anything" />
 
     <Main>
-        <NuxtLink href="/content-creators" class="underline">
+        <div class="flex gap-6">
-            Content Creators
+            <Card href="/content-creators" name="Content Creators">
-        </NuxtLink>
+                <Icon name="logos:twitch" size="48" />
+                <span class="mx-2 text-3xl">/</span>
+                <Icon name="logos:youtube-icon" size="48" />
+            </Card>
+        </div>
     </Main>
 </template>