Date Strip

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { setDateStripContext } from './ctx';
4	import { Button } from '$lib/components/ui/button';
5	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
6	import type { Snippet } from 'svelte';
7	import { type DateValue, getLocalTimeZone, today, startOfWeek } from '@internationalized/date';
8
9	let {
10		value = $bindable(),
11		class: className,
12		daysToShow = 5,
13		isDateDisabled = () => false,
14		onDateChange,
15		children
16	}: {
17		value?: DateValue | undefined;
18		class?: string;
19		daysToShow?: number;
20		isDateDisabled?: (date: DateValue) => boolean;
21		onDateChange?: (date: DateValue) => void;
22		children: Snippet<[{ date: DateValue }]>;
23	} = $props();
24
25	let startDate = $state(startOfWeek(today(getLocalTimeZone()), 'en-US'));
26	let slideDirection = $state<'start' | 'end'>('end');
27
28	const displayedDates = $derived(
29		Array.from({ length: daysToShow }, (_, i) => startDate.add({ days: i }))
30	);
31
32	function handlePrev() {
33		slideDirection = 'start';
34		startDate = startDate.add({ days: -daysToShow });
35	}
36
37	function handleNext() {
38		slideDirection = 'end';
39		startDate = startDate.add({ days: daysToShow });
40	}
41
42	setDateStripContext({
43		selectedValue: () => value,
44		onSelect: (d) => {
45			value = d;
46			onDateChange?.(d);
47		},
48		isDateDisabled,
49		direction: () => slideDirection
50	});
51</script>
52
53<div class={cn('flex items-center gap-2 rounded-xl border bg-card p-1 shadow-sm', className)}>
54	<Button variant="ghost" size="icon" class="h-7 w-7 shrink-0" onclick={handlePrev}>
55		<ChevronLeft class="h-4 w-4" />
56	</Button>
57
58	<div class="flex flex-1 justify-between gap-1 overflow-hidden">
59		{#each displayedDates as date (date.toString())}
60			{@render children({ date })}
61		{/each}
62	</div>
63
64	<Button variant="ghost" size="icon" class="h-7 w-7 shrink-0" onclick={handleNext}>
65		<ChevronRight class="h-4 w-4" />
66	</Button>
67</div>