initial production version

src/lib/components/dashboard/WishlistCard.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import type { Snippet } from 'svelte';
+	import { getCardStyle } from '$lib/utils/colors';
+
+	let {
+		title,
+		description,
+		itemCount,
+		color = null,
+		children
+	}: {
+		title: string;
+		description?: string | null;
+		itemCount: number;
+		color?: string | null;
+		children?: Snippet;
+	} = $props();
+
+	const cardStyle = $derived(getCardStyle(color));
+</script>
+
+<Card style={cardStyle} class="h-full flex flex-col">
+	<CardHeader class="flex-shrink-0">
+		<div class="flex items-center justify-between gap-2">
+			<CardTitle class="text-lg flex items-center gap-2 flex-1 min-w-0">
+				<span class="truncate">{title}</span>
+			</CardTitle>
+			<span class="text-sm text-muted-foreground flex-shrink-0">
+				{itemCount} item{itemCount === 1 ? '' : 's'}
+			</span>
+		</div>
+		{#if description}
+			<CardDescription class="line-clamp-3 whitespace-pre-line">{description}</CardDescription>
+		{/if}
+	</CardHeader>
+	<CardContent class="space-y-2 flex-1 flex flex-col justify-end">
+		{#if children}
+			<div>
+				{@render children()}
+			</div>
+		{/if}
+	</CardContent>
+</Card>