vue components refactoring

resources/js/components/Spotlight/Components/CategoryName.vue

@@ -0,0 +1,10 @@
+<template>
+    <b class="mb-1.5 block text-xs text-gray-500">
+        <slot />
+    </b>
+</template>
+<script>
+export default {
+    name: 'CategoryName',
+}
+</script>

resources/js/components/Spotlight/Components/FilterSuggestion.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="flex cursor-pointer items-center py-2">
+        <span
+            class="dark-text-theme rounded-lg bg-light-background py-1 px-2 text-sm font-bold dark:bg-4x-dark-foreground"
+        >
+            {{ keyword }} + {{ $t('space') }}
+        </span>
+        <p class="ml-3 text-sm font-semibold text-gray-500">
+            {{ description }}
+        </p>
+    </div>
+</template>
+<script>
+export default {
+    name: 'FilterSuggestion',
+    props: ['keyword', 'description'],
+}
+</script>

resources/js/components/Spotlight/Components/KeyboardHints.vue

@@ -0,0 +1,35 @@
+<template>
+    <div v-if="!$isMobile()" class="flex items-center px-5 pb-2">
+        <!--Arrow key navigation-->
+        <div class="mr-4 flex items-center">
+            <ArrowUpIcon size="12" class="vue-feather text-gray-400" />
+            <ArrowDownIcon size="12" class="vue-feather text-gray-400" />
+
+            <span class="ml-1.5 text-xs text-gray-400">
+                {{ $t('navigate') }}
+            </span>
+        </div>
+
+        <!--Submit key-->
+        <div class="flex items-center">
+            <CornerDownLeftIcon size="12" class="vue-feather text-gray-400" />
+
+            <span class="ml-1.5 text-xs text-gray-400">
+                {{ $t('go') }}
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { CornerDownLeftIcon, ArrowDownIcon, ArrowUpIcon } from 'vue-feather-icons'
+
+export default {
+    name: 'KeyboardHints',
+    components: {
+        CornerDownLeftIcon,
+        ArrowDownIcon,
+        ArrowUpIcon,
+    },
+}
+</script>