chore: cleanup, typescript

components/app/Lunr.vue

@@ -1,35 +1,11 @@
 <template>
   <div key="outputHash">
-    <div
+    <AppSearchEntry
       v-for="(shortcut, shortcutIndex) in theOutput"
       :key="`shortcut-${shortcutIndex}`"
-      class="
-        cursor-pointer
-        flex
-        py-2
-        px-4
-        transition
-        items-center
-        group
-        hover:bg-primaryLight
-      "
-      @click="$emit('action', shortcut.action)"
-    >
-      <SmartIcon
-        class="mr-4 opacity-75 transition svg-icons group-hover:opacity-100"
-        :name="shortcut.icon"
-      />
-      <span class="flex flex-1 mr-4 transition group-hover:text-secondaryDark">
-        {{ $t(shortcut.label) }}
-      </span>
-      <span
-        v-for="(key, keyIndex) in shortcut.keys"
-        :key="`shortcut-${shortcutIndex}-key-${keyIndex}`"
-        class="shortcut-key"
-      >
-        {{ key }}
-      </span>
-    </div>
+      :shortcut="shortcut"
+      @action="$emit('action', shortcut.action)"
+    />
     <div
       v-if="theOutput.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
@@ -223,14 +199,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
-</style>