feat(list): add icons

This commit is contained in:
Kim, Jimin 2025-03-21 13:16:07 +09:00
parent e81efcdb47
commit 7043fcc9c3
Signed by: pomp
GPG key ID: D3932F82A0667A3B
2 changed files with 35 additions and 3 deletions

View file

@ -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>

View file

@ -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>