Add keyboard key components

Author: davidmyersdev

components/KeyboardKey.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+defineProps<{ text?: string }>()
+</script>
+
+<template>
+  <small>
+    <kbd class="monospace border border-layer-text-muted rounded px-1 border-b-2"><slot name="text">{{ text }}</slot></kbd>
+  </small>
+</template>

components/KeyboardKeyCombination.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import KeyboardKey from './KeyboardKey.vue'
+
+defineProps<{ keys?: Array<{ text: string }> }>()
+</script>
+
+<template>
+  <kbd class="inline-flex gap-0.5">
+    <slot>
+      <template v-if="keys">
+        <KeyboardKey v-for="key in keys" :key="key.text" :text="key.text" />
+      </template>
+    </slot>
+  </kbd>
+</template>