40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { useState } from "preact/hooks";
|
|
|
|
const Dropdown = ({ name, options }: { name: string; options: string[] }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [choice, setChoice] = useState(
|
|
localStorage.getItem(name) || options[0]
|
|
);
|
|
|
|
return (
|
|
<div className="relative text-center">
|
|
<h1>{name}</h1>
|
|
<div
|
|
className="font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center rounded-2xl border border-input-border-color bg-input text-center text-xl"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
<div className="select-none">{choice}</div>
|
|
{isOpen && (
|
|
<div className="absolute top-full w-full border">
|
|
{options.map((option: string) => (
|
|
<div
|
|
key={option}
|
|
className="hover:bg-dropdown-option-hover-color"
|
|
onClick={() => {
|
|
setIsOpen(false);
|
|
setChoice(option);
|
|
localStorage.setItem(name, option);
|
|
}}
|
|
>
|
|
{option}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dropdown;
|
|
|