From 843a1ea8b79d0f887c56b69300ca712dfe1cc70e Mon Sep 17 00:00:00 2001
From: pandadev <70103896+0PandaDEV@users.noreply.github.com>
Date: Sun, 16 Mar 2025 21:32:20 +0100
Subject: [PATCH] feat: add new key icon components for Cmd, Enter, Key, and
 Shift to enhance keyboard representation

---
 components/Keys/Cmd.vue   | 39 +++++++++++++++++++++++++++++++++++++
 components/Keys/Enter.vue | 41 +++++++++++++++++++++++++++++++++++++++
 components/Keys/Key.vue   | 30 ++++++++++++++++++++++++++++
 components/Keys/Shift.vue | 12 ++++++++++++
 4 files changed, 122 insertions(+)
 create mode 100644 components/Keys/Cmd.vue
 create mode 100644 components/Keys/Enter.vue
 create mode 100644 components/Keys/Key.vue
 create mode 100644 components/Keys/Shift.vue

diff --git a/components/Keys/Cmd.vue b/components/Keys/Cmd.vue
new file mode 100644
index 0000000..7b18f3e
--- /dev/null
+++ b/components/Keys/Cmd.vue
@@ -0,0 +1,39 @@
+<template>
+  <svg
+    width="24px"
+    height="20px"
+    viewBox="0 0 24 20"
+    version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <path d="M0 0L24 0L24 20L0 20L0 0Z" id="path_1" />
+      <clipPath id="clip_1">
+        <use
+          xlink:href="#path_1"
+          clip-rule="evenodd"
+          fill-rule="evenodd"
+          transform="translate(0, -2.133523)" />
+      </clipPath>
+    </defs>
+    <g id="cmd">
+      <path
+        d="M-751 -2016L-751 -2016L-751 -1996L-775 -1996L-775 -2016L-751 -2016Z"
+        id="cmd"
+        fill="none"
+        stroke="none" />
+      <path
+        d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z"
+        id="Rectangle"
+        fill="#FFFFFF"
+        fill-opacity="0.050980393"
+        stroke="none" />
+      <g id="⌘" clip-path="url(#clip_1)" transform="translate(0 2.133523)">
+        <g transform="translate(5.5692472, 0)" id="⌘" fill="#E5DFD5">
+          <path
+            d="M3.55007 12.8061Q2.98224 12.8061 2.51598 12.5268Q2.04972 12.2475 1.77042 11.7789Q1.49112 11.3104 1.49112 10.7472Q1.49112 10.1747 1.77042 9.70614Q2.04972 9.23757 2.51598 8.95827Q2.98224 8.67898 3.55007 8.67898L4.5657 8.67898L4.5657 7.04474L3.55007 7.04474Q2.98224 7.04474 2.51598 6.76775Q2.04972 6.49077 1.77042 6.02219Q1.49112 5.55362 1.49112 4.98579Q1.49112 4.41797 1.77042 3.9494Q2.04972 3.48082 2.51598 3.20383Q2.98224 2.92685 3.55007 2.92684Q4.1179 2.92684 4.58647 3.20383Q5.05504 3.48082 5.33434 3.9494Q5.61364 4.41797 5.61364 4.98579L5.61364 5.99219L7.25249 5.99219L7.25249 4.98579Q7.25249 4.41797 7.52947 3.9494Q7.80646 3.48082 8.27504 3.20383Q8.74361 2.92685 9.31144 2.92684Q9.87926 2.92684 10.3455 3.20383Q10.8118 3.48082 11.0888 3.9494Q11.3658 4.41797 11.3658 4.98579Q11.3658 5.55362 11.0888 6.02219Q10.8118 6.49077 10.3455 6.76775Q9.87926 7.04474 9.31144 7.04474L8.30043 7.04474L8.30043 8.67898L9.31144 8.67898Q9.87926 8.67898 10.3455 8.95827Q10.8118 9.23757 11.0888 9.70614Q11.3658 10.1747 11.3658 10.7472Q11.3658 11.3104 11.0888 11.7789Q10.8118 12.2475 10.3455 12.5268Q9.87926 12.8061 9.31144 12.8061Q8.74361 12.8061 8.27504 12.5268Q7.80646 12.2475 7.52947 11.7789Q7.25249 11.3104 7.25249 10.7472L7.25249 9.73153L5.61364 9.73153L5.61364 10.7472Q5.61364 11.3104 5.33434 11.7789Q5.05504 12.2475 4.58647 12.5268Q4.1179 12.8061 3.55007 12.8061ZM3.55007 11.7536Q3.97017 11.7536 4.26563 11.4604Q4.56108 11.1673 4.5657 10.7472L4.5657 9.73153L3.55007 9.73153Q3.12997 9.73615 2.83452 10.0293Q2.53906 10.3224 2.53906 10.7472Q2.53906 11.1673 2.83452 11.4604Q3.12997 11.7536 3.55007 11.7536ZM9.31144 11.7536Q9.72692 11.7536 10.0224 11.4604Q10.3178 11.1673 10.3178 10.7472Q10.3178 10.3224 10.0224 10.0293Q9.72692 9.73615 9.31144 9.73153L8.30043 9.73153L8.30043 10.7472Q8.29581 11.1673 8.59357 11.4604Q8.89133 11.7536 9.31144 11.7536ZM3.55007 5.99219L4.5657 5.99219L4.5657 4.98579Q4.56108 4.56569 4.26563 4.27255Q3.97017 3.9794 3.55007 3.9794Q3.12997 3.9794 2.83452 4.27255Q2.53906 4.56569 2.53906 4.98579Q2.53906 5.40589 2.83452 5.70135Q3.12997 5.9968 3.55007 5.99219ZM8.30043 5.99219L9.31144 5.99219Q9.72692 5.9968 10.0224 5.70135Q10.3178 5.40589 10.3178 4.98579Q10.3178 4.56569 10.0224 4.27255Q9.72692 3.9794 9.31144 3.9794Q8.89133 3.9794 8.59357 4.27255Q8.29581 4.56569 8.30043 4.98579L8.30043 5.99219ZM5.61364 8.67898L7.25249 8.67898L7.25249 7.04474L5.61364 7.04474L5.61364 8.67898Z" />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/components/Keys/Enter.vue b/components/Keys/Enter.vue
new file mode 100644
index 0000000..e6e50a0
--- /dev/null
+++ b/components/Keys/Enter.vue
@@ -0,0 +1,41 @@
+<template>
+  <svg
+    width="24px"
+    height="20px"
+    viewBox="0 0 24 20"
+    version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg">
+    <g id="Enter" fill-opacity="1">
+      <path
+        d="M-659 -2016L-659 -2016L-659 -1996L-683 -1996L-683 -2016L-659 -2016Z"
+        id="Enter"
+        fill="none"
+        stroke="none" />
+      <path
+        d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z"
+        id="Rectangle"
+        fill="#FFFFFF"
+        fill-opacity="0.050980393"
+        stroke="none" />
+      <path
+        d="M16.0597 5.48914L16.0597 10.5L7.5 10.5"
+        id="Vector"
+        fill="none"
+        fill-rule="evenodd"
+        stroke="#E5DFD5"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round" />
+      <path
+        d="M9.5 8.5L9.5 12.5035L7 10.5L9.5 8.5Z"
+        id="Vector"
+        fill="#E5DFD5"
+        fill-rule="evenodd"
+        stroke="#E5DFD5"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round" />
+    </g>
+  </svg>
+</template>
diff --git a/components/Keys/Key.vue b/components/Keys/Key.vue
new file mode 100644
index 0000000..181ac17
--- /dev/null
+++ b/components/Keys/Key.vue
@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="key-container"
+    :style="{
+      backgroundColor: 'var(--border)',
+      padding: '0 7px',
+      height: '20px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '4px',
+      minWidth: '22px'
+    }"
+  >
+    <span
+      :style="{
+        color: '#E5E0D5',
+        fontSize: '12px'
+      }"
+    >
+      {{ input }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  input: string;
+}>();
+</script>
diff --git a/components/Keys/Shift.vue b/components/Keys/Shift.vue
new file mode 100644
index 0000000..5af5a9a
--- /dev/null
+++ b/components/Keys/Shift.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path
+        d="M12 0L17.6 0C19.8402 0 20.9603 0 21.816 0.435974Q22.3804 0.723593 22.8284 1.17157Q23.2764 1.61955 23.564 2.18404C24 3.03969 24 4.15979 24 6.4L24 13.6C24 15.8402 24 16.9603 23.564 17.816Q23.2764 18.3804 22.8284 18.8284Q22.3804 19.2764 21.816 19.564C20.9603 20 19.8402 20 17.6 20L6.4 20C4.15979 20 3.03969 20 2.18404 19.564Q1.61955 19.2764 1.17157 18.8284Q0.723594 18.3804 0.435974 17.816C0 16.9603 0 15.8402 0 13.6L0 6.4C0 4.15979 0 3.03969 0.435974 2.18404Q0.723594 1.61955 1.17157 1.17157Q1.61955 0.723594 2.18404 0.435974C3.03969 0 4.15979 0 6.4 0L12 0Z"
+        fill="#FFFFFF" fill-opacity="0.051" />
+      <path
+        d="M4.9427 0.0799475L0.154716 5.27144Q0.144837 5.28216 0.138427 5.29524Q0.132016 5.30833 0.129608 5.3227Q0.127199 5.33707 0.128993 5.35153Q0.130787 5.36599 0.136635 5.37934Q0.142482 5.39269 0.151896 5.40381Q0.16131 5.41493 0.173507 5.42291Q0.185705 5.43088 0.19967 5.43504Q0.213636 5.4392 0.228208 5.4392L3.06459 5.4392Q3.08448 5.4392 3.10285 5.44681Q3.12123 5.45442 3.13529 5.46848Q3.14935 5.48254 3.15696 5.50092Q3.16457 5.51929 3.16457 5.53917L3.16457 9.90003Q3.16457 9.91991 3.17218 9.93828Q3.17979 9.95666 3.19385 9.97072Q3.20791 9.98478 3.22629 9.99239Q3.24466 10 3.26455 10L6.74521 10Q6.7651 10 6.78347 9.99239Q6.80184 9.98478 6.8159 9.97072Q6.82997 9.95666 6.83758 9.93828Q6.84519 9.91991 6.84519 9.90003L6.84519 5.53917Q6.84519 5.51929 6.8528 5.50091Q6.86041 5.48254 6.87447 5.46848Q6.88853 5.45442 6.9069 5.44681Q6.92527 5.4392 6.94516 5.4392L9.77281 5.4392Q9.78736 5.4392 9.8013 5.43505Q9.81525 5.4309 9.82744 5.42295Q9.83962 5.415 9.84904 5.4039Q9.85845 5.39281 9.86431 5.37949Q9.87017 5.36617 9.87199 5.35173Q9.87382 5.3373 9.87145 5.32294Q9.86908 5.30858 9.86271 5.2955Q9.85635 5.28241 9.84652 5.27168L5.0899 0.0801888Q5.07573 0.064719 5.05653 0.0562526Q5.03734 0.0477862 5.01635 0.0477518Q4.99537 0.0477174 4.97615 0.0561208Q4.95692 0.0645242 4.9427 0.0799475Z"
+        fill="none" stroke-width="1.3" stroke="#E5DFD5" transform="translate(7 5)" />
+    </g>
+  </svg>
+</template>
\ No newline at end of file