<?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>
Comments
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎