Empezando prototipo de "Registro de Ventas", usa la tabla productos para ayuda visual. Agregado componente select.

This commit is contained in:
BryamE
2025-12-08 21:41:27 -03:00
parent 20e7da64de
commit 04a8ecbd9a
7 changed files with 162 additions and 31 deletions
@@ -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.
--}}
+8 -2
View File
@@ -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>