blob: 7ff5d768f79b2bf50dcaef8426b3f309311dd928 (
plain) (
blame)
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
|
import { useState, Fragment } from "react";
import { Listbox, Transition } from "@headlessui/react";
import { BenchmarkNumberOfModules } from "./PackBenchmarks";
export function PackDropdown({
onOptionSelected,
}: {
onOptionSelected: (option: BenchmarkNumberOfModules) => void;
}) {
const [selectedOption, setSelectedOption] =
useState<BenchmarkNumberOfModules>("1000");
const onSelect = (option: BenchmarkNumberOfModules) => {
onOptionSelected(option);
setSelectedOption(option);
};
return (
<div className="relative">
<Listbox value={selectedOption} onChange={onSelect}>
<Listbox.Button className="flex w-24 pl-3 pr-2 py-2 gap-3 rounded !bg-[#fafafa] dark:!bg-[#111111] dark:hover:text-white hover:text-black dark:text-[#888888] text-[#666666] items-center justify-between transition-all text-sm leading-none font-medium m-0">
{Number(selectedOption).toLocaleString()}
<Arrow />
</Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute left-0 mt-2 w-full dark:bg-[#111111] bg-[#FAFAFA] rounded py-1 z-50 list">
<Listbox.Option
value="1000"
className={({ active }) =>
`relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${
active ? "bg-gray-800 text-gray-100" : "text-gray-900"
}`
}
>
1000
</Listbox.Option>
<Listbox.Option
className={({ active }) =>
`relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${
active ? "bg-gray-800 text-gray-100" : "text-gray-900"
}`
}
value="5000"
>
5000
</Listbox.Option>
<Listbox.Option
className={({ active }) =>
`relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${
active ? "bg-gray-800 text-gray-100" : "text-gray-900"
}`
}
value="10000"
>
10000
</Listbox.Option>
<Listbox.Option
className={({ active }) =>
`relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${
active ? "bg-gray-800 text-gray-100" : "text-gray-900"
}`
}
value="30000"
>
30000
</Listbox.Option>
</Listbox.Options>
</Transition>
</Listbox>
</div>
);
}
function BenchmarkOption({
value,
onSelect,
}: {
value: BenchmarkNumberOfModules;
onSelect: (value: string) => void;
}) {
return (
<div
className="flex pl-3 py-2 items-center justify-between cursor-pointer transition-all dark:text-[#888888] dark:hover:text-white text-[#666666] hover:text-[#000]"
onClick={() => onSelect(value)}
>
<p className="text-sm leading-none font-medium m-0">
{Number(value).toLocaleString()}
</p>
</div>
);
}
function Arrow() {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 6L8 10L12 6"
stroke="#666666"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
|