1
0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-21 21:33:18 +01:00
Files
dozzle/assets/components/common/KeyShortcut.vue
2023-12-20 11:56:48 -08:00

20 lines
616 B
Vue

<template>
<div class="inline-flex items-center">
<template v-if="modifiers.includes('shift')">
<carbon:mac-shift />
</template>
<template v-if="modifiers.includes('meta')">
<ph:command v-if="isMac" class="size-4" />
<ph:control-bold v-else class="size-4" />
</template>
<kbd class="uppercase">{{ char }}</kbd>
</div>
</template>
<script lang="ts">
const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
</script>
<script lang="ts" setup>
const { modifiers = ["meta"], char } = defineProps<{ char: string; modifiers?: ("^" | "meta" | "shift")[] }>();
</script>