Small fixes

resources/js/Components/SearchInput.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+defineProps({
+    modelValue: String,
+});
+
+defineEmits(['update:modelValue']);
+
+const input = ref(null);
+
+// onMounted(() => {
+//     if (input.value.hasAttribute('autofocus')) {
+//         input.value.focus();
+//     }
+// });
+
+defineExpose({ focus: () => input.value.focus() });
+</script>
+
+<template>
+    <form>
+   <div class="flex items-center justify-center">
+    <div class="flex border-2 rounded">
+        <input type="text" class="px-4 py-2 w-80" 
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)" placeholder="Search...">
+        <button class="flex items-center justify-center px-4 border-l bg-slate-500">
+            <svg class="w-6 h-6 text-white" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24">
+                <path
+                    d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" />
+            </svg>
+        </button>
+    </div>
+</div>
+    </form>
+</template>