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
|
import { Fragment } from "react";
import { Combobox, Transition } from "@headlessui/react";
import {
CheckIcon,
ChevronDownIcon,
MagnifyingGlassIcon,
} from "@heroicons/react/20/solid";
import React from "react";
import { useRouter } from "next/router";
export default function InputSelect({
data,
label,
keyDown,
selected,
setSelected,
query,
setQuery,
inputRef,
}) {
const router = useRouter();
function handleChange(event) {
setSelected(event);
router.push(`/en/search/${event.value.toLowerCase()}`);
}
return (
<Combobox value={selected} onChange={(e) => handleChange(e)}>
<div className="relative mt-1 z-[55] w-full">
<div className="flex items-center gap-2 mb-2 relative">
<span className="font-bold text-lg">{label}</span>
<Combobox.Button className="py-[2px] bg-secondary/70 rounded text-sm font-karla flex items-center px-2">
{selected.name}
<ChevronDownIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</Combobox.Button>
</div>
<div className="relative w-full cursor-default overflow-hidden rounded-lg bg-secondary text-left shadow-md focus:outline-none sm:text-sm">
<input
type="text"
value={query || ""}
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"
onKeyDown={keyDown}
onChange={(e) => setQuery(e.target.value)}
ref={inputRef}
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-2">
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
</div>
</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-[55] mt-1 max-h-60 w-full 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" }}
>
{data.length === 0 && query !== "" ? (
<div className="relative cursor-default select-none py-2 px-4 text-gray-300">
Nothing found.
</div>
) : (
data.map((item) => (
<Combobox.Option
key={item.value}
className={({ active }) =>
`relative cursor-pointer select-none py-2 px-2 mx-2 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>
))
)}
</Combobox.Options>
</Transition>
</div>
</Combobox>
);
}
|