BryamE
39 lines
1.7 KiB
PHP
39 lines
1.7 KiB
PHP
@props(['disabled' => false, 'error' => null, 'options' => [], 'placeholder' => 'Seleccionar...'])
|
|
|
|
<!-- Contenedor relativo para posicionar la flecha personalizada si quisiéramos (opcional) -->
|
|
<div class="relative">
|
|
<select {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => '
|
|
appearance-none bg-transparent border-0 border-b-2 border-neutral-700 text-white text-sm
|
|
py-2.5 px-0 w-full focus:outline-none focus:ring-0 focus:border-neon-lime peer cursor-pointer
|
|
transition-colors' . ($error ? 'border-red-500 focus:border-red-500' : '')
|
|
]) !!}>
|
|
|
|
@if($placeholder)
|
|
<option value="" disabled selected class="bg-neutral-800 text-gray-500">{{ $placeholder }}</option>
|
|
@endif
|
|
|
|
{{ $slot }}
|
|
|
|
</select>
|
|
|
|
<!-- Flecha personalizada (SVG) posicionada a la derecha -->
|
|
<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
|
|
<svg class="w-4 h-4 text-gray-500 peer-focus:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Mensaje de error -->
|
|
@if($error)
|
|
<p class="mt-1 text-xs text-red-400">{{ $error }}</p>
|
|
@endif
|
|
</div>
|
|
|
|
{{--
|
|
NOTA DE ESTILO:
|
|
- `appearance-none`: Quita el estilo feo por defecto del navegador.
|
|
- `bg-transparent`: Fondo transparente para que se vea el color de fondo de tu web.
|
|
- `border-b-2`: Borde solo abajo (estilo línea).
|
|
- `focus:ring-0`: Quita el anillo azul de Chrome al hacer click.
|
|
- `peer`: Permite que el icono de la flecha cambie de color cuando el select tiene foco.
|
|
--}} |