michal.cukrowski/thermcool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dodanie kalkulatora doboru klimatyzacji i zaktualizowanie 996 produktów

Browse Source
This commit is contained in:
MichalC
2026-06-28 00:16:22 +02:00
parent c4294a81cf
commit 002a325dfb
10 changed files with 5740 additions and 1451 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/shop/ProductsGrid.tsx
+29 -9
View File
@@ -1,7 +1,8 @@
'use client';
import { useState, useMemo } from 'react';
import { useState, useMemo, useEffect } from 'react';
import { ChevronDown, ChevronUp, Phone, X } from 'lucide-react';
import { useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { Product } from '@/content/products';
import { ProductCard } from './ProductCard';
@@ -10,8 +11,6 @@ import { companyDetails } from '@/content/company';
interface ProductsGridProps {
products: Product[];
brands: string[];
initialSearch?: string;
initialBrand?: string;
}
const PER_PAGE = 24;
@@ -76,10 +75,17 @@ function Accordion({ title, children, defaultOpen = true }: AccordionProps) {
);
}
export function ProductsGrid({ products, brands, initialSearch, initialBrand }: ProductsGridProps) {
const [category, setCategory] = useState<'all' | 'scienne' | 'multisplit'>('all');
const [selectedBrands, setSelectedBrands] = useState<string[]>(initialBrand ? [initialBrand] : []);
const [searchQuery, setSearchQuery] = useState(initialSearch || '');
export function ProductsGrid({ products, brands }: ProductsGridProps) {
const searchParams = useSearchParams();
const urlSearch = searchParams.get('search') || '';
const urlBrand = searchParams.get('brand') || '';
const urlCategory = searchParams.get('category') || 'all';
const [category, setCategory] = useState<'all' | 'scienne' | 'multisplit' | 'kasetonowe' | 'kanalowe' | 'konsolowe' | 'podlogowe' | 'jednostka-scienna'>(
urlCategory as 'all' | 'scienne' | 'multisplit' | 'kasetonowe' | 'kanalowe' | 'konsolowe' | 'podlogowe' | 'jednostka-scienna'
);
const [selectedBrands, setSelectedBrands] = useState<string[]>(urlBrand ? [urlBrand] : []);
const [searchQuery, setSearchQuery] = useState(urlSearch);
const [priceMin, setPriceMin] = useState('');
const [priceMax, setPriceMax] = useState('');
const [selectedRooms, setSelectedRooms] = useState<string[]>([]);
@@ -89,6 +95,17 @@ export function ProductsGrid({ products, brands, initialSearch, initialBrand }:
const [page, setPage] = useState(1);
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
useEffect(() => {
setSearchQuery(urlSearch);
setSelectedBrands(urlBrand ? [urlBrand] : []);
if (urlCategory !== 'all') {
setCategory(urlCategory as 'scienne' | 'multisplit' | 'kasetonowe' | 'kanalowe' | 'konsolowe' | 'podlogowe' | 'jednostka-scienna');
} else {
setCategory('all');
}
setPage(1);
}, [urlSearch, urlBrand, urlCategory]);
const toggleBrand = (b: string) => {
setSelectedBrands(prev => prev.includes(b) ? prev.filter(x => x !== b) : [...prev, b]);
setPage(1);
@@ -207,8 +224,11 @@ export function ProductsGrid({ products, brands, initialSearch, initialBrand }:
<ul className="flex flex-col gap-2">
{[
{ val: 'all', label: 'Wszystkie' },
{ val: 'scienne', label: 'Klimatyzacja ścienna' },
{ val: 'multisplit', label: 'Klimatyzacja Multisplit' },
{ val: 'scienne', label: 'Ścienne split' },
{ val: 'multisplit', label: 'Multisplit' },
{ val: 'kasetonowe', label: 'Kasetonowe' },
{ val: 'konsolowe', label: 'Konsolowe' },
{ val: 'kanalowe', label: 'Kanałowe' },
].map(opt => (
<li key={opt.val}>
<button