1<script lang="ts">
 2	import { ArrowBigUp } from '@lucide/svelte';
 3
 4	interface Props {
 5		keys: string[];
 6		variant?: 'default' | 'destructive';
 7		class?: string;
 8	}
 9
10	let { keys, variant = 'default', class: className = '' }: Props = $props();
11
12	let baseClasses =
13		'px-1 pointer-events-none inline-flex select-none items-center gap-0.5 font-sans text-md font-medium opacity-0 transition-opacity -my-1';
14	let variantClasses = variant === 'destructive' ? 'text-destructive' : 'text-muted-foreground';
15</script>
16
17<kbd class="{baseClasses} {variantClasses} {className}">
18	{#each keys as key, index (index)}
19		{#if key === 'shift'}
20			<ArrowBigUp class="h-1 w-1 {variant === 'destructive' ? 'text-destructive' : ''} -mr-1" />
21		{:else if key === 'cmd'}
22			<span class={variant === 'destructive' ? 'text-destructive' : ''}>⌘</span>
23		{:else}
24			{key.toUpperCase()}
25		{/if}
26
27		{#if index < keys.length - 1}
28			<span> </span>
29		{/if}
30	{/each}
31</kbd>