gpx.studio/website/src/lib/components/Shortcut.svelte

<script lang="ts">
    import { isMac, isSafari } from '$lib/utils';
    import { onMount } from 'svelte';
    import { i18n } from '$lib/i18n.svelte';

    export let key: string | undefined = undefined;
    export let shift: boolean = false;
    export let ctrl: boolean = false;
    export let click: boolean = false;

    let mac = false;
    let safari = false;

    onMount(() => {
        mac = isMac();
        safari = isSafari();
    });
</script>

<div
    class="ml-auto pl-2 text-xs tracking-widest text-muted-foreground flex flex-row gap-0 items-baseline"
    {...$$props}
>
    {#if shift}
        <span>⇧</span>
    {/if}
    {#if ctrl}
        <span>{mac && !safari ? '⌘' : i18n._('menu.ctrl') + '+'}</span>
    {/if}
    {#if key}
        <span class={key === '+' ? 'font-medium text-sm/4' : ''}>{key}</span>
    {/if}
    {#if click}
        <span>{i18n._('menu.click')}</span>
    {/if}
</div>