blob: 5b7522fe1b9427b31272eb7f9b80285fbb10bcfb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<script lang="ts">
import { ArrowBigUp } from '@lucide/svelte';
interface Props {
keys: string[];
variant?: 'default' | 'destructive';
class?: string;
}
let { keys, variant = 'default', class: className = '' }: Props = $props();
let baseClasses =
'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';
let variantClasses = variant === 'destructive' ? 'text-destructive' : 'text-muted-foreground';
</script>
<kbd class="{baseClasses} {variantClasses} {className}">
{#each keys as key, index (index)}
{#if key === 'shift'}
<ArrowBigUp class="h-1 w-1 {variant === 'destructive' ? 'text-destructive' : ''} -mr-1" />
{:else if key === 'cmd'}
<span class={variant === 'destructive' ? 'text-destructive' : ''}>⌘</span>
{:else}
{key.toUpperCase()}
{/if}
{#if index < keys.length - 1}
<span> </span>
{/if}
{/each}
</kbd>
|
