Empezando prototipo de "Registro de Ventas", usa la tabla productos para ayuda visual. Agregado componente select.
This commit is contained in:
@@ -1,13 +1,39 @@
|
||||
@props(['disabled' => false, 'options', 'error' => null])
|
||||
@props(['disabled' => false, 'error' => null, 'options' => [], 'placeholder' => 'Seleccionar...'])
|
||||
|
||||
<select {{ $disabled ? 'disabled' : ''}} {!! $attributes->merge(['class' => 'bg-neutral-800 border-neutral-700 text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 placeholder-gray-500 transition-colors ' . ($error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : '')]) !!}>
|
||||
<option value="">Seleccione</option>
|
||||
@if ($options)
|
||||
@foreach ($options as $key => $op)
|
||||
<option value={{$key}}>{{$op}}</option>
|
||||
@endforeach
|
||||
<!-- 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
|
||||
</select>
|
||||
@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.
|
||||
--}}
|
||||
@@ -36,10 +36,16 @@
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-3 text-white hover:text-neon-lime md:hover:bg-transparent md:border-0 md:p-0 transition-colors">Taller</a>
|
||||
<a href="#"
|
||||
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('mantenimiento*') ? 'text-neon-lime border-b-2 border-neon-lime' : 'text-white hover:text-neon-lime' }}">
|
||||
Taller
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-3 text-white hover:text-neon-lime md:hover:bg-transparent md:border-0 md:p-0 transition-colors">Ventas</a>
|
||||
<a href="{{ url('/sales') }}"
|
||||
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('sales*') ? 'text-neon-lime border-b-2 border-neon-lime' : 'text-white hover:text-neon-lime' }}">
|
||||
Ventas
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<h1 class="font-black text-4xl md:text-5xl text-white uppercase italic">
|
||||
{{ $title }}
|
||||
@if($highlight)
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500">{{ $highlight }}</span>
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500 pe-2">{{ $highlight }}</span>
|
||||
@endif
|
||||
</h1>
|
||||
</div>
|
||||
Reference in New Issue
Block a user