feat(gui): add generic component for showing shortcut label

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/general/ShortcutLabel.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { isMac } from '#imports'
+
+const props = defineProps<{
+  keys: string[]
+}>()
+
+const isMacOs = isMac()
+
+const getLabel = (key: string) => {
+  if (isMacOs) {
+    switch (key.toLowerCase()) {
+      case 'alt':
+        return '⌥'
+      case 'shift':
+        return '⇧'
+      case 'meta':
+        return '⌘'
+      case 'control':
+        return '⌃'
+      case 'enter':
+        return '↩'
+    }
+  }
+  switch (key.toLowerCase()) {
+    case 'arrowup':
+      return '↑'
+    case 'arrowdown':
+      return '↓'
+    case 'arrowleft':
+      return '←'
+    case 'arrowright':
+      return '→'
+  }
+
+  return key
+}
+</script>
+
+<template>
+  <div class="nc-shortcut-label-wrapper">
+    <div v-for="(key, index) in props.keys" :key="index" class="nc-shortcut-label">
+      <span>{{ getLabel(key) }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.nc-shortcut-label-wrapper {
+  @apply flex gap-1;
+}
+
+.nc-shortcut-label {
+  @apply text-[.6rem] text-gray-200 bg-gray-200 bg-opacity-20 rounded  px-1;
+}
+</style>

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -203,12 +203,15 @@ export default {
             <a-tooltip placement="bottom">
               <template #title>
                 {{ $t('labels.nextRow') }}
+                <GeneralShortcutLabel class="justify-center" :keys="['Alt', '←']" />
               </template>
               <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="onNext" />
             </a-tooltip>
             <a-tooltip placement="bottom">
               <template #title>
                 {{ $t('labels.prevRow') }}
+
+                <GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" />
               </template>
               <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
             </a-tooltip>