Cursor

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import type { Snippet } from 'svelte';
4 
5	let {
6		x,
7		y,
8		color = '#000',
9		name,
10		message,
11		class: className,
12		children
13	}: {
14		x: number;
15		y: number;
16		color?: string;
17		name?: string;
18		message?: string;
19		class?: string;
20		children?: Snippet;
21	} = $props();
22</script>
23 
24<div
25	class={cn(
26		'pointer-events-none absolute left-0 top-0 z-50 transition-transform duration-100 ease-linear will-change-transform',
27		className
28	)}
29	style:transform={`translate3d(${x}px, ${y}px, 0)`}
30>
31	<svg
32		width="24"
33		height="24"
34		viewBox="0 0 24 24"
35		fill="none"
36		xmlns="http://www.w3.org/2000/svg"
37		class="relative -top-[1px] -left-[1px] drop-shadow-sm"
38	>
39		<path
40			d="M3 3L9.5 20.5L12.5 13.5L19.5 10.5L3 3Z"
41			fill={color}
42			stroke={color}
43			stroke-width="1"
44			stroke-linejoin="round"
45		/>
46	</svg>
47 
48	{#if name || message || children}
49		<div
50			class="absolute left-3.5 top-5 min-w-[max-content] rounded-xl rounded-tl-none px-3 py-1.5 shadow-sm animate-in fade-in zoom-in-95 duration-200"
51			style:background-color={color}
52		>
53			<div class="flex flex-col text-xs leading-relaxed text-white">
54				{#if name}
55					<span class="font-bold">{name}</span>
56				{/if}
57				{#if message}
58					<span class="font-medium opacity-90">{message}</span>
59				{/if}
60				{#if children}
61					{@render children()}
62				{/if}
63			</div>
64		</div>
65	{/if}
66</div>