move input and input error into component

resources/js/Components/Input.vue

@@ -0,0 +1,28 @@
+<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>
+  <input
+      ref="input"
+      class="w-full bg-white dark:bg-transparent border-gray-300 dark:border-gray-600 dark:text-gray-100 focus:border-indigo-300 dark:focus:border-gray-700 focus:ring focus:ring-indigo-200 dark:focus:ring-gray-600 focus:ring-opacity-50 rounded-md shadow-sm placeholder:capitalize"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+  >
+</template>

resources/js/Components/InputError.vue

@@ -0,0 +1,15 @@
+<script setup>
+const { error } = defineProps({
+  error: String,
+})
+</script>
+
+<template>
+  <Transition
+    enterActiveClass="transition-all duration-150"
+    leaveActiveClass="transition-all duration-150"
+    enterFromClass="opacity-0 -scale-y-100"
+    leaveToClass="opacity-0 -scale-y-100">
+      <div v-if="error" class="text-right text-sm text-red-500">{{ error }}</div>
+  </Transition>
+</template>