// Catalog page — product browser with filters, sort, color search.
function PageCatalog() {
const [category, setCategory] = useState('all');
const [family, setFamily] = useState('all');
const [search, setSearch] = useState('');
const [sort, setSort] = useState('popular');
const [view, setView] = useState('grid');
const items = useMemo(() => {
let list = PRODUCTS.slice();
if (category !== 'all') list = list.filter(p => p.category === category);
if (family !== 'all') list = list.filter(p => {
const sw = RAL_COLORS.find(c => c.ral === p.ral);
return sw && sw.family === family;
});
if (search) {
const q = search.toLowerCase();
list = list.filter(p =>
(p.name + p.brand + p.subtitle + p.subcat).toLowerCase().includes(q));
}
if (sort === 'price-asc') list.sort((a, b) => a.price - b.price);
if (sort === 'price-desc') list.sort((a, b) => b.price - a.price);
if (sort === 'popular') list.sort((a, b) => (b.popular ? 1 : 0) - (a.popular ? 1 : 0));
if (sort === 'name') list.sort((a, b) => a.name.localeCompare(b.name, 'pl'));
return list;
}, [category, family, search, sort]);
return (
<>
Start Katalog
Pełny katalog
farb, lakierów i akcesoriów.
{PRODUCTS.length * 53} pozycji w aktywnym stanie magazynu, w trzech oddziałach.
Mieszamy w 8 minut. Wyszukaj producenta, kategorię, albo otwórz wzornik RAL.
setSearch(e.target.value)}/>
{search && (
)}
/
Znaleziono {items.length} z {PRODUCTS.length}
STAN MAGAZYNU · NA ŻYWO
{view === 'grid' ? (
{items.map(p => )}
) : (
{items.map(p => )}
)}
{items.length === 0 && (
Nic nie znaleźliśmy
Spróbuj innych słów kluczowych albo zadzwoń: 44 633 56 25 — pomożemy znaleźć.