Wheel Picker

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import type { Snippet } from 'svelte';
4 
5	let {
6		class: className,
7		collapsed = false,
8		children
9	}: { class?: string; collapsed?: boolean; children: Snippet } = $props();
10</script>
11 
12<div
13	class={cn(
14		'relative flex w-full touch-none overflow-hidden bg-background select-none',
15		className,
16		collapsed ? 'h-10 transition-all hover:h-[200px] active:h-[200px]' : 'h-[200px]'
17	)}
18>
19	<div
20		class="pointer-events-none absolute left-2 right-2 top-1/2 -translate-y-1/2 h-[32px] rounded-md bg-muted z-1"
21	/>
22 
23	<div
24		class="pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-background to-transparent z-2"
25	/>
26	<div
27		class="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-background to-transparent z-2"
28	/>
29 
30	<div class="flex h-full w-full justify-center px-4 z-2 perspective-container">
31		{@render children()}
32	</div>
33</div>
34 
35<style>
36	.perspective-container {
37		perspective: 1000px;
38	}
39</style>