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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
import { Fragment, useState } from "react";
import { Combobox, Transition } from "@headlessui/react";
import { CheckIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
import React from "react";
export default function MultiSelector({
data,
other,
label,
selected,
setSelected,
inputRef,
}) {
// const [selected, setSelected] = useState();
const [query, setQuery] = useState("");
const filteredMain =
query === ""
? data
: data.filter((item) =>
item.name
.toLowerCase()
.replace(/\s+/g, "")
.includes(query.toLowerCase().replace(/\s+/g, ""))
);
const filteredOther =
query === ""
? other
: other.filter((item) =>
item.name
.toLowerCase()
.replace(/\s+/g, "")
.includes(query.toLowerCase().replace(/\s+/g, ""))
);
return (
<Combobox value={selected} onChange={setSelected} multiple>
<div className="relative mt-1 min-w-full lg:min-w-[160px] w-full">
<div className="font-bold text-lg mb-2">{label}</div>
<div className="relative w-full cursor-default overflow-hidden rounded-lg bg-secondary text-left shadow-md focus:outline-none sm:text-sm">
<Combobox.Input
className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 bg-secondary text-gray-300 focus:ring-0 outline-none"
displayValue={(item) => item?.map((item) => item?.name).join(", ")}
placeholder="Any"
onChange={(event) => setQuery(event.target.value)}
/>
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDownIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</Combobox.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95 translate-y-5"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95 translate-y-5"
afterLeave={() => setQuery("")}
>
<Combobox.Options
className="absolute z-50 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-white/10 scrollbar-thumb-rounded-lg mt-1 max-h-60 w-full overflow-auto rounded-md bg-secondary py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
// style={{ scrollbarGutter: "stable" }}
>
{filteredOther.length === 0 &&
filteredMain.length === 0 &&
query !== "" ? (
<div className="relative cursor-default select-none py-2 px-4 text-gray-300">
Nothing found.
</div>
) : (
<div className="space-y-1">
<span className="px-3 font-karla font-bold text-sm text-gray-200">
GENRES
</span>
<div>
{filteredMain.map((item) => (
<Combobox.Option
key={item.value}
className={({ active }) =>
`relative cursor-pointer select-none py-2 px-2 ml-2 mr-1 rounded-md ${
active ? "bg-white/5 text-action" : "text-gray-300"
}`
}
value={item}
>
{({ selected, active }) => (
<React.Fragment>
<span
className={`block truncate ${
selected
? "font-medium text-white"
: "font-normal"
}`}
>
{item.name}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pl-3 pr-1 ${
active ? "text-white" : "text-action"
}`}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</React.Fragment>
)}
</Combobox.Option>
))}
</div>
<span className="px-3 font-karla font-bold text-sm text-gray-200">
TAGS
</span>
<div>
{filteredOther.map((item) => (
<Combobox.Option
key={item.value}
className={({ active }) =>
`relative cursor-pointer select-none py-2 px-2 ml-2 mr-1 rounded-md ${
active ? "bg-white/5 text-white" : "text-gray-300"
}`
}
value={item}
>
{({ selected, active }) => (
<React.Fragment>
<span
className={`block truncate ${
selected
? "font-medium text-white"
: "font-normal"
}`}
>
{item.name}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pl-3 pr-1 ${
active ? "text-white" : "text-action"
}`}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</React.Fragment>
)}
</Combobox.Option>
))}
</div>
</div>
)}
</Combobox.Options>
</Transition>
</div>
</Combobox>
);
}
|