Add input component

resources/views/components/form/input.blade.php

@@ -0,0 +1,45 @@
+@props(['label', 'name','id', 'type'=>'text', 'value'=>'', 'placeholder'=>''])
+
+@php
+    $hasError = $errors->has($name);
+@endphp
+
+<div {{ $attributes }}>
+    @if(isset($label) && is_object($label))
+        <label for="{{ $id ?? $name }}" {{ $label->attributes->merge(['class' => 'block text-sm/6 font-medium text-gray-900 dark:text-white']) }}>
+            {{ $label }}
+        </label>
+    @else
+        <label for="{{ $id ?? $name }}" class="block text-sm/6 font-medium text-gray-900 dark:text-white">
+            {{ $label }}
+        </label>
+    @endif
+
+    <div class="mt-2 grid grid-cols-1">
+        <input
+            id="{{ $id ?? $name }}"
+            type="{{ $type }}"
+            name="{{ $name }}"
+            value="{{ old($name, $value) }}"
+            placeholder="{{ $placeholder }}"
+            @if($hasError) aria-invalid="true" aria-describedby="{{ $id ?? $name }}-error" @endif
+            @class([
+                'block w-full rounded-md bg-white py-1.5 outline-1 -outline-offset-1 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 dark:bg-white/5',
+                'col-start-1 row-start-1 pr-10 pl-3 text-red-900 outline-red-300 placeholder:text-red-300 focus:outline-red-600 sm:pr-9 dark:text-red-400 dark:outline-red-500/50 dark:placeholder:text-red-400/70 dark:focus:outline-red-400' => $hasError,
+                'px-3 text-base text-gray-900 outline-gray-300 placeholder:text-gray-400 focus:outline-indigo-600 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500' => !$hasError,
+            ])
+        />
+
+        @if($hasError)
+            <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true"
+                 class="pointer-events-none col-start-1 row-start-1 mr-3 size-5 self-center justify-self-end text-red-500 sm:size-4 dark:text-red-400">
+                <path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+                    clip-rule="evenodd" fill-rule="evenodd"/>
+            </svg>
+        @endif
+    </div>
+
+    @error($name)
+        <p id="{{ $id ?? $name }}-error" class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+    @enderror
+</div>