-
Notifications
You must be signed in to change notification settings - Fork 0
/
product-filters.tsx
117 lines (111 loc) · 3.67 KB
/
product-filters.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
'use client'
import { useRouter, useSearchParams } from 'next/navigation'
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '../components/ui/accordion'
import { Checkbox } from '../components/ui/checkbox'
const filters = [
{
id: 'category',
name: 'Categorias',
options: [
{ value: 'bolsas', label: 'Bolsas' },
{ value: 'cintos', label: 'Cintos' },
{ value: 'luvas', label: 'Luvas' },
{ value: 'carteiras', label: 'Carteiras' },
{ value: 'oculos', label: 'Óculos' },
{ value: 'camisas', label: 'Camisas' },
{ value: 'gorros', label: 'Gorros' },
{ value: 'bones', label: 'Bonés' },
{ value: 'casacos', label: 'Casacos' },
],
},
{
id: 'size',
name: 'Tamanhos',
options: [
{ value: 'p', label: 'Pequeno' },
{ value: 'm', label: 'Médio' },
{ value: 'g', label: 'Grande' },
{ value: 'gg', label: 'GG' },
{ value: 'xg', label: 'XG' },
{ value: 'unico', label: 'Único' },
],
},
{
id: 'color',
name: 'Cores',
options: [
{ value: 'preto', label: 'Preto' },
{ value: 'azul', label: 'Azul' },
{ value: 'marrom', label: 'Marrom' },
{ value: 'verde', label: 'Verde' },
{ value: 'amarelo', label: 'Amarelo' },
{ value: 'branco', label: 'Branco' },
],
},
]
export function ProductFilters() {
const router = useRouter()
const searchParams = useSearchParams()
const searchValues = Array.from(searchParams.entries())
return (
<form className="sticky top-20">
<h3 className="sr-only">Categories</h3>
{filters.map((section, i) => (
<Accordion key={i} type="single" collapsible>
<AccordionItem value={`item-${i}`}>
<AccordionTrigger>
<span>
{section.name}{' '}
<span className="ml-1 text-xs font-extrabold uppercase text-gray-400">
{searchParams.get(section.id)
? `(${searchParams.get(section.id)})`
: ''}
</span>
</span>
</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
{section.options.map((option, optionIdx) => (
<div
key={option.value}
className="flex items-center space-x-2"
>
<Checkbox
checked={searchValues.some(
([key, value]) =>
key === section.id && value === option.value,
)}
id={`filter-${section.id}-${optionIdx}`}
onClick={(event) => {
const params = new URLSearchParams(
searchParams.toString(),
)
const checked =
event.currentTarget.dataset.state === 'checked'
checked
? params.delete(section.id)
: params.set(section.id, option.value)
router.replace(`/products/?${params.toString()}`)
}}
/>
<label
htmlFor={`filter-${section.id}-${optionIdx}`}
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{option.label}
</label>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
))}
</form>
)
}