Kanban

import * as Kanban from '$lib/components/ui/kanban/index.js';
import type { KanbanColumn, KanbanValue } from '$lib/components/ui/kanban/index.js';

<script lang="ts">
	import * as Card from '$lib/components/ui/card/index.js';
	import * as Kanban from '$lib/components/ui/kanban/index.js';

	import type { KanbanColumn, KanbanValue } from '$lib/components/ui/kanban/index.js';

	interface WorkItem {
		id: string;
		title: string;
	}

	const columns: KanbanColumn[] = [
		{ id: 'planned', title: 'Planned', description: 'Ready to begin' },
		{ id: 'active', title: 'Active', description: 'Work in progress' },
		{ id: 'done', title: 'Done', description: 'Completed work' }
	];

	let value = $state.raw<KanbanValue<WorkItem>>({
		planned: [
			{ id: 'procurement', title: 'Release procurement package' },
			{ id: 'method', title: 'Approve method statement' }
		],
		active: [{ id: 'drawings', title: 'Issue construction drawings' }],
		done: [{ id: 'survey', title: 'Complete site survey' }]
	});
</script>

<Kanban.Root
	{columns}
	{value}
	getItemId={(item) => item.id}
	onValueChange={(next) => (value = next)}
	ariaLabel="Example work board"
>
	{#snippet item(item)}
		<Card.Root size="sm" class="gap-3 bg-card py-3">
			<Card.Content class="flex items-start gap-2 px-3">
				<Kanban.DragHandle label={`Move ${item.title}`} />
				<p class="pt-1 text-sm font-medium">{item.title}</p>
			</Card.Content>
		</Card.Root>
	{/snippet}
	{#snippet empty(column)}
		No work in {column.title.toLowerCase()}.
	{/snippet}
</Kanban.Root>