49 lines
1.1 KiB
Svelte
49 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { Button } from '$lib/components/ui/button';
|
|
import * as Tooltip from '$lib/components/ui/tooltip';
|
|
import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
|
|
import type { Component } from 'svelte';
|
|
|
|
interface Props {
|
|
icon: Component;
|
|
tooltip: string;
|
|
variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
|
|
size?: 'default' | 'sm' | 'lg' | 'icon';
|
|
class?: string;
|
|
disabled?: boolean;
|
|
onclick: () => void;
|
|
'aria-label'?: string;
|
|
}
|
|
|
|
let {
|
|
icon,
|
|
tooltip,
|
|
variant = 'ghost',
|
|
size = 'sm',
|
|
class: className = '',
|
|
disabled = false,
|
|
onclick,
|
|
'aria-label': ariaLabel
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
|
|
<Tooltip.Trigger>
|
|
<Button
|
|
{variant}
|
|
{size}
|
|
{disabled}
|
|
{onclick}
|
|
class="h-6 w-6 p-0 {className} flex"
|
|
aria-label={ariaLabel || tooltip}
|
|
>
|
|
{@const IconComponent = icon}
|
|
<IconComponent class="h-3 w-3" />
|
|
</Button>
|
|
</Tooltip.Trigger>
|
|
|
|
<Tooltip.Content>
|
|
<p>{tooltip}</p>
|
|
</Tooltip.Content>
|
|
</Tooltip.Root>
|