UPD: Key Mapping

src/components/config/KeySelectButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <button
+    class="flex-1 flex flex-col items-center py-2"
+    :class="{'text-black bg-zinc-200 hover:bg-zinc-100': selected,
+    'hover:bg-zinc-800 text-muted-foreground' : !selected}"
+    @click="$emit('select'); $refs.title.scramble()">
+    <img
+      draggable="false"
+      :src="icon" alt="connection-type-icon"
+      class="w-16 py-2"
+      :class="{'invert': invert && selected}">
+    <ScrambleText ref="title" :resize="false" class="text-xs text-wrap p-1" :text="title" />
+    <span>
+      <ArrowBigUp class="inline-block" />
+      <Badge
+        class="shadow-none text-wrap inline-block p-0.5 mx-1"
+        :class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">Space</Badge>+<Badge
+      class="shadow-none text-wrap inline-block p-0.5 mx-1"
+      :class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">E</Badge>
+    </span>
+  </button>
+</template>
+<script setup>
+import ScrambleText from '@/components/effects/ScrambleText.vue'
+import { Badge } from '@/components/ui/badge'
+import { ArrowBigUp } from 'lucide-vue-next'
+
+defineEmits(['select'])
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: [String, Object, Function],
+    default: '',
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  invert: {
+    type: Boolean,
+    default: true,
+  },
+  badge: {
+    type: [String, Object, Function],
+    default: '',
+  },
+})
+</script>