Admin
c14db5a711
Advances the ongoing token/componentization cleanup (anchored player dock, border-based panels instead of floating shadows, corrected light-mode accent/gradient tokens) alongside in-progress backend support for track genre tags.
32 lines
843 B
Svelte
32 lines
843 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import type { LucideIcon } from '@lucide/svelte';
|
|
|
|
interface Props {
|
|
icon?: LucideIcon;
|
|
title?: string;
|
|
description?: string;
|
|
class?: string;
|
|
actions?: Snippet;
|
|
}
|
|
|
|
let { icon: Icon, title, description, class: klass = '', actions }: Props = $props();
|
|
</script>
|
|
|
|
<div class="flex flex-col items-center rounded-panel px-6 py-16 text-center {klass}">
|
|
{#if Icon}
|
|
<Icon class="h-9 w-9 text-fg-2" strokeWidth={1.25} />
|
|
{/if}
|
|
{#if title}
|
|
<h3 class="mt-6 font-display text-xl font-medium tracking-tight text-fg">
|
|
{title}
|
|
</h3>
|
|
{/if}
|
|
{#if description}
|
|
<p class="mt-2.5 max-w-sm text-sm leading-relaxed text-fg-2">{description}</p>
|
|
{/if}
|
|
{#if actions}
|
|
<div class="mt-6 flex flex-wrap items-center justify-center gap-2.5">{@render actions()}</div>
|
|
{/if}
|
|
</div>
|