format

2024-07-27 17:41:13 -05:00
parent 4faf389a2b
commit 94be3a7448
34 changed files with 308 additions and 256 deletions
@@ -4,15 +4,15 @@ import ClickAwayHandler from "./ClickAwayHandler";

 type MenuItem =
  | {
-    name: string;
-    onClick: MouseEventHandler;
-    href?: string;
-  }
+      name: string;
+      onClick: MouseEventHandler;
+      href?: string;
+    }
  | {
-    name: string;
-    onClick?: MouseEventHandler;
-    href: string;
-  }
+      name: string;
+      onClick?: MouseEventHandler;
+      href: string;
+    }
  | undefined;

 type Props = {
@@ -60,46 +60,50 @@ export default function Dropdown({
    }
  }, [points, dropdownHeight]);

-  return !points || pos && (
-    <ClickAwayHandler
-      onMount={(e) => {
-        setDropdownHeight(e.height);
-        setDropdownWidth(e.width);
-      }}
-      style={
-        points
-          ? {
-            position: "fixed",
-            top: `${pos?.y}px`,
-            left: `${pos?.x}px`,
-          }
-          : undefined
-      }
-      onClickOutside={onClickOutside}
-      className={`${className || ""
+  return (
+    !points ||
+    (pos && (
+      <ClickAwayHandler
+        onMount={(e) => {
+          setDropdownHeight(e.height);
+          setDropdownWidth(e.width);
+        }}
+        style={
+          points
+            ? {
+                position: "fixed",
+                top: `${pos?.y}px`,
+                left: `${pos?.x}px`,
+              }
+            : undefined
+        }
+        onClickOutside={onClickOutside}
+        className={`${
+          className || ""
        } py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
-    >
-      {items.map((e, i) => {
-        const inner = e && (
-          <div className="cursor-pointer rounded-md">
-            <div className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100">
-              <p className="select-none">{e.name}</p>
+      >
+        {items.map((e, i) => {
+          const inner = e && (
+            <div className="cursor-pointer rounded-md">
+              <div className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100">
+                <p className="select-none">{e.name}</p>
+              </div>
            </div>
-          </div>
-        );
+          );

-        return e && e.href ? (
-          <Link key={i} href={e.href}>
-            {inner}
-          </Link>
-        ) : (
-          e && (
-            <div key={i} onClick={e.onClick}>
+          return e && e.href ? (
+            <Link key={i} href={e.href}>
              {inner}
-            </div>
-          )
-        );
-      })}
-    </ClickAwayHandler>
+            </Link>
+          ) : (
+            e && (
+              <div key={i} onClick={e.onClick}>
+                {inner}
+              </div>
+            )
+          );
+        })}
+      </ClickAwayHandler>
+    ))
  );
 }