Dock

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { setDockContext } from './ctx';
4	import { useMotionValue } from 'svelte-motion';
5	import type { Snippet } from 'svelte';
6 
7	let {
8		class: className,
9		magnification = 60,
10		distance = 140,
11		children
12	}: {
13		class?: string;
14		magnification?: number;
15		distance?: number;
16		children: Snippet;
17	} = $props();
18 
19	let mouseX = useMotionValue(Infinity);
20 
21	setDockContext({
22		mouseX,
23		magnification,
24		distance
25	});
26 
27	function handleMouseMove(e: MouseEvent) {
28		mouseX.set(e.pageX);
29	}
30 
31	function handleMouseLeave() {
32		mouseX.set(Infinity);
33	}
34</script>
35 
36<div
37	class={cn(
38		'mx-auto flex h-[58px] w-max items-center gap-2 rounded-2xl border bg-white px-4 dark:bg-black',
39		className
40	)}
41	onmousemove={handleMouseMove}
42	onmouseleave={handleMouseLeave}
43>
44	{@render children()}
45</div>