added theme/room dropdowns

README.md

@@ -5,8 +5,9 @@
 - [x] Redo landing page, remove testimonials and either make it dark mode or use another lp
 - [x] Redo README
 - [x] Fix issue with generations not working
-- [ ] Add two dropdowns for what kind of room it is + dropdown for themes
+- [x] Add two dropdowns for what kind of room it is + dropdown for themes
 - [ ] Deploy, assign domain, fix meta tags, add OG image with one of the genrated pics
+- [ ] Make all dropdowns same length as upload box in /restore
 - [ ] Send it to team/ai channel for feedback + tweet out a screenshot for hype
 - [ ] Let replicate team know to keep it on when I launch
 
@@ -21,6 +22,9 @@
 
 ## Todos v2
 
+- [ ] Play around with the scale input - 16 seems good
+- [ ] Refactor all inputs into react-hook-form
+- [ ] Figure out how to customize upload.io more
 - [ ] Add a carousel of generated rooms using my image gallery
 - [ ] Add gradient / Try diff color pallets for roomGPT
 

components/DropDown.tsx

@@ -0,0 +1,76 @@
+import { Menu, Transition } from "@headlessui/react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@heroicons/react/20/solid";
+import { Fragment } from "react";
+import { roomType, themeType } from "../utils/dropdownTypes";
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+interface DropDownProps {
+  theme: themeType | roomType;
+  setTheme: (theme: themeType | roomType) => void;
+  themes: themeType[] | roomType[];
+}
+
+// TODO: Change names since this is a generic dropdown now
+export default function DropDown({ theme, setTheme, themes }: DropDownProps) {
+  return (
+    <Menu as="div" className="relative block text-left w-full">
+      <div>
+        <Menu.Button className="inline-flex w-96 justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black">
+          {theme}
+          <ChevronUpIcon
+            className="-mr-1 ml-2 h-5 w-5 ui-open:hidden"
+            aria-hidden="true"
+          />
+          <ChevronDownIcon
+            className="-mr-1 ml-2 h-5 w-5 hidden ui-open:block"
+            aria-hidden="true"
+          />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items
+          className="absolute left-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          key={theme}
+        >
+          <div className="">
+            {themes.map((themeItem) => (
+              <Menu.Item key={themeItem}>
+                {({ active }) => (
+                  <button
+                    onClick={() => setTheme(themeItem)}
+                    className={classNames(
+                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+                      themeItem === theme ? "bg-gray-200" : "",
+                      "px-4 py-2 text-sm w-full text-left flex items-center space-x-2 justify-between"
+                    )}
+                  >
+                    <span>{themeItem}</span>
+                    {themeItem === theme ? (
+                      <CheckIcon className="w-4 h-4 text-bold" />
+                    ) : null}
+                  </button>
+                )}
+              </Menu.Item>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}