Joseph.Rawlings
6440a24390
- Implemented a button for toggling between dark and light modes in the navigation component. - Adjusted sidebar width and improved active link indicators with shadows for better visibility. - Updated layout colors for a more vibrant and cohesive theme, focusing on a "Pure Neutral Black + Neon" aesthetic. - Refined ambient gradient accents for improved content readability across devices. - Enhanced console layout for better responsiveness and user experience.
51 lines
2.4 KiB
PHP
51 lines
2.4 KiB
PHP
@props([
|
|
'name',
|
|
'label' => null,
|
|
'options' => [],
|
|
'selected' => null,
|
|
'multiple' => false,
|
|
'required' => false,
|
|
'divClass' => null,
|
|
'hideRequiredIndicator' => false,
|
|
])
|
|
<fieldset class="flex flex-col relative w-full {{ $divClass ?? '' }}" name="{{ $name }}">
|
|
@if ($label)
|
|
<legend class="mb-2">
|
|
<label for="{{ $name }}" class="text-sm font-bold text-color-base">
|
|
{{ $label }}
|
|
@if ($required && !$hideRequiredIndicator)
|
|
<span class="text-red-500">*</span>
|
|
@endif
|
|
</label>
|
|
</legend>
|
|
@endif
|
|
|
|
<div class="block w-full text-sm text-color-base space-y-2">
|
|
@if (count($options) == 0 && $slot)
|
|
{{ $slot }}
|
|
@else
|
|
@foreach ($options as $key => $option)
|
|
<div class="flex items-center gap-3 group">
|
|
<div class="relative">
|
|
<input type="radio" id="{{ $name }}_{{ $key }}" name="{{ $name }}"
|
|
value="{{ gettype($options) == 'array' ? $option : $key }}"
|
|
{{ ($multiple && $selected ? in_array($key, $selected) : $selected==$option) ? 'checked' : '' }}
|
|
class="peer form-radio size-5 text-primary border-2 border-neutral/60 bg-background-secondary/40
|
|
focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 focus:outline-none
|
|
checked:bg-primary checked:border-primary
|
|
hover:border-primary/50 transition-all duration-200 cursor-pointer
|
|
appearance-none rounded-full" />
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-2 bg-white rounded-full pointer-events-none opacity-0 scale-0 peer-checked:opacity-100 peer-checked:scale-100 transition-all duration-200"></div>
|
|
</div>
|
|
<label for="{{ $name }}_{{ $key }}" class="text-color-base cursor-pointer select-none group-hover:text-primary transition-colors duration-200">
|
|
{{ $option }}
|
|
</label>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
|
|
@error($name)
|
|
<p class="text-red-500 text-xs mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</fieldset> |