buscar-productos.blade.php

<?php

use App\Models\Producto;
use Livewire\Attributes\Computed;
use Livewire\Component;

new class extends Component
{
    public string $busqueda = '';

    #[Computed]
    public function productos()
    {
        return Producto::query()
            ->when(
                $this->busqueda !== '',
                fn ($query) => $query->where('nombre', 'like', '%'.$this->busqueda.'%')
            )
            ->orderBy('nombre')
            ->get();
    }
};
?>

<div class="w-full max-w-2xl mx-auto">
    <h1 class="text-2xl font-semibold mb-6 text-[#1b1b18] dark:text-[#EDEDEC]">Buscar productos</h1>

    <label for="busqueda" class="block text-sm font-medium mb-2 text-[#706f6c] dark:text-[#A1A09A]">
        Nombre del producto
    </label>
    <input
        id="busqueda"
        type="search"
        wire:model.live.debounce.300ms="busqueda"
        placeholder="Ej: laptop, mouse..."
        class="w-full px-4 py-2 mb-6 rounded-sm border border-[#e3e3e0] dark:border-[#3E3E3A] bg-white dark:bg-[#161615] text-[#1b1b18] dark:text-[#EDEDEC] focus:outline-none focus:border-[#f53003] dark:focus:border-[#FF4433]"
    />

    <div wire:loading class="text-sm text-[#706f6c] dark:text-[#A1A09A] mb-4">
        Buscando...
    </div>

    @if ($this->productos->isEmpty())
        <p class="text-[#706f6c] dark:text-[#A1A09A]">
            @if ($busqueda === '')
                No hay productos en la base de datos.
            @else
                No se encontraron productos para «{{ $busqueda }}».
            @endif
        </p>
    @else
        <ul class="divide-y divide-[#e3e3e0] dark:divide-[#3E3E3A] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-sm overflow-hidden">
            @foreach ($this->productos as $producto)
                <li class="flex items-center justify-between gap-4 px-4 py-3 bg-white dark:bg-[#161615]">
                    <span class="font-medium text-[#1b1b18] dark:text-[#EDEDEC]">{{ $producto->nombre }}</span>
                    <span class="text-sm text-[#706f6c] dark:text-[#A1A09A] tabular-nums">
                        ${{ number_format($producto->precio, 0, ',', '.') }}
                    </span>
                </li>
            @endforeach
        </ul>
        <p class="mt-3 text-sm text-[#706f6c] dark:text-[#A1A09A]">
            {{ $this->productos->count() }} {{ $this->productos->count() === 1 ? 'producto' : 'productos' }}
        </p>
    @endif
</div>