gpx.studio/website/src/lib/components/toolbar/ToolbarItem.svelte

<script lang="ts">
    import { Button } from '$lib/components/ui/button';
    import * as Tooltip from '$lib/components/ui/tooltip/index.js';
    import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
    import type { Snippet } from 'svelte';

    let {
        itemTool,
        label,
        children,
    }: {
        itemTool: Tool;
        label: string;
        children: Snippet;
    } = $props();

    function toggleTool() {
        if (tool.current === itemTool) {
            tool.current = null;
        } else {
            tool.current = itemTool;
        }
    }
</script>

<Tooltip.Provider>
    <Tooltip.Root delayDuration={300}>
        <Tooltip.Trigger>
            {#snippet child({ props })}
                <Button
                    {...props}
                    variant="ghost"
                    class="h-[26px] px-1 py-1.5 {tool.current === itemTool ? 'bg-accent' : ''}"
                    onclick={toggleTool}
                    aria-label={label}
                >
                    {@render children()}
                </Button>
            {/snippet}
        </Tooltip.Trigger>
        <Tooltip.Content side="right">
            <span>{label}</span>
        </Tooltip.Content>
    </Tooltip.Root>
</Tooltip.Provider>