Added 'class' property to form inputs

A new 'class' property has been added to form inputs in the input.blade.php file to improve control over styling. We have also improved readability by reformatting the label and input components. Now, the form input will show a red border if there are any related errors.

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

@@ -4,6 +4,7 @@
  'name' => '',
  'label' => '',
  'value' => '',
+ 'class' => ''
 ])
 
 @if ($label === 'none')
@@ -23,7 +24,9 @@
 
 <div class="mb-5">
  @if ($label !='none')
- <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
+ <label for="{{ $name }}"
+ class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200"
+ >{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
  <div class="rounded-md shadow-sm">
  <input
@@ -32,7 +35,11 @@
  name="{{ $name }}"
  value="{{ $slot }}"
  {{ $required }}
- {{ $attributes->merge(['class' => 'block w-full 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']) }}>
+ @class([
+ 'block w-full 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',
+ 'border-red-500' => $errors->has($name),
+ ])
+ {{ $attributes }}>
  @error($name)
  <p class="error">{{ $message }}</p>
  @enderror