elk/components/command/CommandKey.vue

<script setup lang="ts">
const props = defineProps<{
  name: string
}>()

const isMac = useIsMac()

const keys = computed(() => props.name.toLowerCase().split('+'))
</script>

<template>
  <div class="flex items-center px-1">
    <template v-for="(key, index) in keys" :key="key">
      <div v-if="index > 0" class="inline-block px-.5">
        +
      </div>
      <div
        class="p-1 grid place-items-center rounded-lg shadow-sm"
        text="xs secondary"
        border="1 base"
      >
        <div v-if="key === 'enter'" i-material-symbols:keyboard-return-rounded />
        <div v-else-if="key === 'meta' && isMac" i-material-symbols:keyboard-command-key />
        <div v-else-if="key === 'meta' && !isMac" i-material-symbols:window-sharp />
        <div v-else-if="key === 'alt' && isMac" i-material-symbols:keyboard-option-key-rounded />
        <div v-else-if="key === 'arrowup'" i-ri:arrow-up-line />
        <div v-else-if="key === 'arrowdown'" i-ri:arrow-down-line />
        <div v-else-if="key === 'arrowleft'" i-ri:arrow-left-line />
        <div v-else-if="key === 'arrowright'" i-ri:arrow-right-line />
        <template v-else-if="key === 'escape'">
          ESC
        </template>
        <div v-else :class="{ 'px-.5': key.length === 1 }">
          {{ key[0].toUpperCase() + key.slice(1) }}
        </div>
      </div>
    </template>
  </div>
</template>