-
Notifications
You must be signed in to change notification settings - Fork 0
/
venue-filter.tsx
69 lines (66 loc) · 3.42 KB
/
venue-filter.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
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
type VenueFilterProps = {
venues: string[]
selectedVenues: string[]
onVenueToggle: (venue: string) => void
onSelectAll: () => void
onDeselectAll: () => void
checked: boolean
}
export function VenueFilter({
venues,
selectedVenues,
onVenueToggle,
onSelectAll,
onDeselectAll,
}: VenueFilterProps) {
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger className='dropdown-button group z-50 w-auto select-none rounded-md border border-zinc-800 bg-zinc-950 px-4 py-2 text-sm font-medium text-zinc-50 shadow-[0_16px_24px_-16px_rgba(0,0,0,0.3),inset_0px_1px_0_rgba(255,255,255,0.25)] transition hover:bg-zinc-800 focus:outline-none focus:ring focus:ring-lime-500/75 dark:border-white dark:bg-zinc-100 dark:text-zinc-800 dark:hover:bg-white md:text-base'>
Select Cleveland venues{' '}
<span className='inline-block text-xs leading-none text-zinc-400 transition-colors group-hover:text-zinc-200 dark:group-hover:text-zinc-500'>
▼
</span>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content className='dropdown-content flex min-w-[260px] flex-col rounded-xl bg-zinc-900 shadow-lg shadow-black/5 dark:bg-zinc-50 md:min-w-[360px]'>
{venues
.sort((a, b) => a.localeCompare(b))
.map(
(venue) =>
venue && (
<DropdownMenu.CheckboxItem
className='dropdown-item flex cursor-pointer items-center justify-start gap-x-2 px-4 py-1.5 font-medium text-zinc-100 first-of-type:rounded-t-xl first-of-type:pt-3 last-of-type:rounded-b-xl last-of-type:pb-4 hover:bg-zinc-800 hover:text-white focus:bg-zinc-800 focus:text-white focus:outline-none dark:text-zinc-800 dark:hover:bg-zinc-200 dark:hover:text-zinc-950 dark:focus:bg-zinc-200 dark:focus:text-zinc-950 md:py-2'
key={venue.replace(/[^\w]+/g, '-').toLowerCase()}
checked={selectedVenues.includes(venue)}
onSelect={(event) => {
event.preventDefault() // Prevent menu from closing after selection
onVenueToggle(venue)
}}
>
{venue}
<span className='order-first w-5 text-center font-mono'>
{selectedVenues.includes(venue) ? '✓' : '×'}
</span>
</DropdownMenu.CheckboxItem>
),
)}
<div className='mb-5 mt-3 grid grid-cols-2 gap-3 px-5'>
<button
className='rounded-md border border-zinc-700 p-1.5 text-sm text-zinc-400 transition hover:border-zinc-600 hover:bg-zinc-800 hover:text-zinc-50 dark:border-zinc-200 dark:text-zinc-500 dark:hover:border-zinc-300 dark:hover:bg-zinc-100 dark:hover:text-zinc-800'
onClick={onDeselectAll}
>
Clear all
</button>
<button
className='rounded-md border border-zinc-700 p-1.5 text-sm text-zinc-400 transition hover:border-zinc-600 hover:bg-zinc-800 hover:text-zinc-50 dark:border-zinc-200 dark:text-zinc-500 dark:hover:border-zinc-300 dark:hover:bg-zinc-100 dark:hover:text-zinc-800'
onClick={onSelectAll}
>
Select all
</button>
</div>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
)
}