enhance select component to support dynamic data and improve errors

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

@@ -1,4 +1,5 @@
 @props([
+    'data' => [],
     'required' => '',
     'name' => '',
     'id' => '',
@@ -23,21 +24,34 @@
 
 <div class="mb-5">
     @if ($label !='none')
-        <x-form.label :$label :$required :$name />
+        <label for='{{ $name }}' class='block mb-2 font-bold text-sm mb-2 text-gray-600 dark:text-gray-200'>{{ $label }} @if ($required != '') <span aria-hidden="true" class="error">*</span>@endif</label>
     @endif
     <select
         name='{{ $name }}'
         id='{{ $name }}'
         {{ $required }}
-        {{ $attributes->merge(['class' => 'border border-gray-300 bg-white dark:bg-gray-500 dark:text-gray-200 py-2 px-3 w-full rounded-md shadow']) }}
-        @error($name)
-            aria-invalid="true"
-            aria-description="{{ $message }}"
-        @enderror
+        {{ $attributes->merge([
+            'class' => implode(' ', [
+                'block w-full bg-white dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm',
+                $errors->has($name) ? 'border-red-500' : 'border-gray-300',
+            ])
+        ]) }}
+        @if(isset($errors))
+            @error($name)
+                aria-invalid="true"
+                aria-description="{{ $message }}"
+            @enderror
+        @endif
+        {{ $attributes }}
     >
         @if ($placeholder != '')
            <option value=''>{{ $placeholder }}</option>
         @endif
+        @if (count($data) > 0)
+            @foreach($data as $item)
+                <option value="{{ $item['id'] }}">{{ $item['value'] }}</option>
+            @endforeach
+        @endif
         {{ $slot }}
     </select>
     @error($name)