From 7043fcc9c3b5b03d2cb1dd3d6b959fff05ac6337 Mon Sep 17 00:00:00 2001
From: pompydev <pompydev@proton.me>
Date: Fri, 21 Mar 2025 13:16:07 +0900
Subject: [PATCH] feat(list): add icons

---
 apps/list/components/Card.vue | 28 ++++++++++++++++++++++++++++
 apps/list/pages/index.vue     | 10 +++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 apps/list/components/Card.vue

diff --git a/apps/list/components/Card.vue b/apps/list/components/Card.vue
new file mode 100644
index 0000000..603ccab
--- /dev/null
+++ b/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>
diff --git a/apps/list/pages/index.vue b/apps/list/pages/index.vue
index a564422..ac3fbd3 100644
--- a/apps/list/pages/index.vue
+++ b/apps/list/pages/index.vue
@@ -2,8 +2,12 @@
     <Header highlight="anything" />
 
     <Main>
-        <NuxtLink href="/content-creators" class="underline">
-            Content Creators
-        </NuxtLink>
+        <div class="flex gap-6">
+            <Card href="/content-creators" name="Content Creators">
+                <Icon name="logos:twitch" size="48" />
+                <span class="mx-2 text-3xl">/</span>
+                <Icon name="logos:youtube-icon" size="48" />
+            </Card>
+        </div>
     </Main>
 </template>