forked from github/plane
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
|
import React from "react";
|
||
|
|
// headless ui
|
||
|
|
import { Listbox } from "@headlessui/react";
|
||
|
|
// icons
|
||
|
|
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||
|
|
// types
|
||
|
|
type Props = {
|
||
|
|
value: any;
|
||
|
|
placeholder: string | JSX.Element;
|
||
|
|
className?: string;
|
||
|
|
theme?: "white" | "purple";
|
||
|
|
onChange: (value: any) => void;
|
||
|
|
icon?: () => React.ReactNode;
|
||
|
|
children: React.ReactNode;
|
||
|
|
};
|
||
|
|
|
||
|
|
const ListBox: React.FC<Props> = ({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
placeholder,
|
||
|
|
icon,
|
||
|
|
children,
|
||
|
|
className,
|
||
|
|
theme,
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<div className="relative">
|
||
|
|
<Listbox value={value} onChange={onChange}>
|
||
|
|
<Listbox.Button
|
||
|
|
className={`p-2 rounded flex items-center gap-x-2 ${
|
||
|
|
theme === "white"
|
||
|
|
? "bg-white border border-gray-200"
|
||
|
|
: "bg-purple-200"
|
||
|
|
} ${className ? className : ""}`}
|
||
|
|
>
|
||
|
|
{icon && icon()}
|
||
|
|
<p className="font-semibold">{placeholder}</p>
|
||
|
|
<div className="flex-grow flex justify-end">
|
||
|
|
<ChevronDownIcon width="20" height="20" />
|
||
|
|
</div>
|
||
|
|
</Listbox.Button>
|
||
|
|
<Listbox.Options className="absolute mt-1 w-full bg-white border border-gray-300 flex flex-col gap-y-2 py-3 z-50">
|
||
|
|
{children}
|
||
|
|
</Listbox.Options>
|
||
|
|
</Listbox>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export { Listbox };
|
||
|
|
|
||
|
|
export default ListBox;
|