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
|
"use client"
import * as React from "react"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
} from "@/components/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
const FacetedFilter = Popover
const FacetedFilterTrigger = React.forwardRef<
React.ComponentRef<typeof PopoverTrigger>,
React.ComponentPropsWithoutRef<typeof PopoverTrigger>
>(({ className, children, ...props }, ref) => (
<PopoverTrigger ref={ref} className={cn(className)} {...props}>
{children}
</PopoverTrigger>
))
FacetedFilterTrigger.displayName = "FacetedFilterTrigger"
const FacetedFilterContent = React.forwardRef<
React.ComponentRef<typeof PopoverContent>,
React.ComponentPropsWithoutRef<typeof PopoverContent>
>(({ className, children, ...props }, ref) => (
<PopoverContent
ref={ref}
className={cn("w-[12.5rem] p-0", className)}
align="start"
{...props}
>
<Command>{children}</Command>
</PopoverContent>
))
FacetedFilterContent.displayName = "FacetedFilterContent"
const FacetedFilterInput = CommandInput
const FacetedFilterList = CommandList
const FacetedFilterEmpty = CommandEmpty
const FacetedFilterGroup = CommandGroup
interface FacetedFilterItemProps
extends React.ComponentPropsWithoutRef<typeof CommandItem> {
selected: boolean
}
const FacetedFilterItem = React.forwardRef<
React.ComponentRef<typeof CommandItem>,
FacetedFilterItemProps
>(({ className, children, selected, ...props }, ref) => {
return (
<CommandItem
ref={ref}
aria-selected={selected}
data-selected={selected}
className={cn(className)}
{...props}
>
<span
className={cn(
"mr-2 flex size-4 items-center justify-center rounded-sm border border-primary",
selected
? "bg-primary text-primary-foreground"
: "opacity-50 [&_svg]:invisible"
)}
>
<Check className="size-4" />
</span>
{children}
</CommandItem>
)
})
FacetedFilterItem.displayName = "FacetedFilterItem"
const FacetedFilterSeparator = CommandSeparator
const FacetedFilterShortcut = CommandShortcut
export {
FacetedFilter,
FacetedFilterTrigger,
FacetedFilterContent,
FacetedFilterInput,
FacetedFilterList,
FacetedFilterEmpty,
FacetedFilterGroup,
FacetedFilterItem,
FacetedFilterSeparator,
FacetedFilterShortcut,
}
|
