add: color selection on dashboard

This commit is contained in:
rasmusq
2025-12-19 19:33:43 +01:00
parent 22f9f8f0c9
commit b80ef2cfea
10 changed files with 128 additions and 14 deletions

View File

@@ -11,6 +11,8 @@
itemCount,
color = null,
theme = null,
fallbackColor = null,
fallbackTheme = null,
children
}: {
title: string;
@@ -18,14 +20,18 @@
itemCount: number;
color?: string | null;
theme?: string | null;
fallbackColor?: string | null;
fallbackTheme?: string | null;
children?: Snippet;
} = $props();
const cardStyle = $derived(getCardStyle(color));
const finalColor = $derived(color || fallbackColor);
const finalTheme = $derived(theme || fallbackTheme);
const cardStyle = $derived(getCardStyle(color, fallbackColor));
</script>
<Card style={cardStyle} class="h-full flex flex-col relative overflow-hidden">
<ThemeCard themeName={theme} color={color} />
<ThemeCard themeName={finalTheme} color={finalColor} />
<CardHeader class="flex-shrink-0 relative z-10">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2">
<CardTitle class="text-lg flex items-center gap-2 flex-1 min-w-0">