opendesk

1<template>
2  <span class="inline-flex items-center gap-1">
3    <kbd
4      v-for="(key, index) in keyList"
5      :key="index"
6      class="flex items-center justify-center border border-outline-gray-2 bg-surface-base pt-px text-ink-gray-5"
7      :class="
8        size === 'sm'
9          ? 'h-4 min-w-4 rounded-[4px] px-0.5 text-[10px]'
10          : 'h-5 min-w-5 rounded-[5px] px-1 text-xs'
11      "
12    >
13      {{ key }}
14    </kbd>
15  </span>
16</template>
17
18<script setup lang="ts">
19import { computed } from "vue";
20
21/** Space-separated keys render as separate caps: "L A" -> [L][A]. */
22const props = defineProps<{ keys: string; size?: "sm" }>();
23
24const keyList = computed(() => props.keys.trim().split(/\s+/));
25</script>
26