Small fixes, Fix lint, Expand dropdown to have correct style and add icon

components/ui/Button.tsx

@@ -1,21 +1,25 @@
 import { ComponentProps } from "react";
+import React from "react";
 
 type ButtonProps = ComponentProps<"button"> & {
   title: string;
   mode?: "DARK" | "LIGHT";
+  icon?: React.ReactElement;
 };
 
 export default function Button({
   title,
   mode = "LIGHT",
+  icon,
   ...props
 }: ButtonProps) {
   return (
     <button
       {...props}
-      className={`${mode == "LIGHT" ? "bg-slate-400 dark:bg-slate-800 border-slate-800 hover:bg-slate-500" : "bg-gray-400 dark:bg-slate-900 dark:border-slate-900 border-slate-400 hover:bg-slate-600"} border-4 border-double cursor-pointer font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out`}
+      className={`${mode == "LIGHT" ? "bg-slate-400 dark:bg-slate-800 border-slate-800 hover:bg-slate-500" : "bg-gray-400 dark:bg-slate-900 dark:border-slate-900 border-slate-400 hover:bg-slate-600"} flex flex-row items-center border-4 border-double cursor-pointer font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out`}
     >
       {title}
+      {icon}
     </button>
   );
 }

components/ui/Dropdown.tsx

@@ -1,19 +1,47 @@
 import { useState } from "react";
-import Button from "./Button";
+import React from "react";
+import { ArrowRightIcon } from "@heroicons/react/24/outline";
 
-export default function Dropdown({ children }: { children: React.ReactNode }) {
+import Button from "./Button";
+import RoundedContainer from "./RoundedContainer";
+
+export default function Dropdown({
+  title,
+  mode,
+  children,
+}: {
+  title?: string;
+  mode?: "DARK" | "LIGHT";
+  children: React.ReactNode;
+}) {
   const [dropped, setDropped] = useState<boolean>(false);
+  const [degrees, setDegrees] = useState<number>(0);
 
   return (
     <div>
       <Button
-        title="Drop down"
-        mode="DARK"
+        title={title ? title : ""}
+        mode={mode}
         onClick={() => {
           setDropped(!dropped);
+          if (degrees < 90) {
+            setDegrees(90);
+          } else {
+            setDegrees(0);
+          }
         }}
-      ></Button>
-      {dropped && <div>{children}</div>}
+        icon={
+          <ArrowRightIcon
+            className={`size-4 transition-transform rotate-${degrees}`}
+          />
+        }
+      />
+      <RoundedContainer
+        slim={true}
+        className={`${!dropped && "invisible"} absolute z-10 flex flex-col gap-2 transition-discrete duration-150 ease-out`}
+      >
+        {children}
+      </RoundedContainer>
     </div>
   );
 }

components/ui/Form.tsx

@@ -18,7 +18,7 @@ export default function Form({
       <form action={action}>
         <RoundedContainer slim={false}>
           {children}
-          <Button title={submitText} type="submit"></Button>
+          <Button title={submitText} type="submit" />
         </RoundedContainer>
       </form>
     </div>

components/ui/RoundedContainer.tsx

@@ -4,14 +4,16 @@ export default function RoundedContainer({
   children,
   slim = true,
   direction = "column",
+  className,
 }: {
   children: React.ReactNode;
   slim?: boolean;
   direction?: "column" | "row";
+  className?: string;
 }) {
   return (
     <div
-      className={`flex ${slim ? "max-w-6xl" : "max-w-3xl"} rounded-4xl ${direction == "column" ? "flex-col" : "flex-row"} items-center py-8 px-8 bg-gray-400 dark:bg-slate-900 sm:items-start`}
+      className={`flex ${slim ? "max-w-6xl py-3 px-3" : "max-w-3xl py-6 px-6"} rounded-2xl ${direction == "column" ? "flex-col" : "flex-row"} items-center bg-gray-400 dark:bg-slate-900 sm:items-start ${className}`}
     >
       {children}
     </div>