initial production version

src/lib/components/dashboard/WishlistGrid.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import EmptyState from '$lib/components/layout/EmptyState.svelte';
+	import type { Snippet } from 'svelte';
+	import { flip } from 'svelte/animate';
+
+	let {
+		title,
+		description,
+		items,
+		emptyMessage,
+		emptyDescription,
+		emptyActionLabel,
+		emptyActionHref,
+		headerAction,
+		children
+	}: {
+		title: string;
+		description: string;
+		items: any[];
+		emptyMessage: string;
+		emptyDescription?: string;
+		emptyActionLabel?: string;
+		emptyActionHref?: string;
+		headerAction?: Snippet;
+		children: Snippet<[any]>;
+	} = $props();
+
+	let scrollContainer: HTMLElement | null = null;
+
+	function handleWheel(event: WheelEvent) {
+		if (!scrollContainer) return;
+
+		// Check if we have horizontal overflow
+		const hasHorizontalScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth;
+
+		if (hasHorizontalScroll && event.deltaY !== 0) {
+			event.preventDefault();
+			scrollContainer.scrollLeft += event.deltaY;
+		}
+	}
+</script>
+
+<Card>
+	<CardHeader>
+		<div class="flex items-center justify-between">
+			<div>
+				<CardTitle>{title}</CardTitle>
+				<CardDescription>{description}</CardDescription>
+			</div>
+			{#if headerAction}
+				{@render headerAction()}
+			{/if}
+		</div>
+	</CardHeader>
+	<CardContent>
+		{#if items && items.length > 0}
+			<div
+				bind:this={scrollContainer}
+				onwheel={handleWheel}
+				class="flex overflow-x-auto gap-4 pb-4 -mx-6 px-6"
+			>
+				{#each items as item (item.id)}
+					<div class="flex-shrink-0 w-80" animate:flip={{ duration: 300 }}>
+						{@render children(item)}
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<EmptyState
+				message={emptyMessage}
+				description={emptyDescription}
+				actionLabel={emptyActionLabel}
+				actionHref={emptyActionHref}
+			/>
+		{/if}
+	</CardContent>
+</Card>