dev: hello world

ui/ListBox/index.tsx

@@ -0,0 +1,52 @@
+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;