Track HiveGrid Cloud planning reference

2026-06-26 20:48:01 +02:00
1 parent b3d5ea6764
commit e341c5938a
@@ -0,0 +1,88 @@
+import { Fragment, ReactNode } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import clsx from "clsx";
+import OptionsIcon from "../icons/OptionsIcon";
+import { Link } from "react-router";
+
+interface Props {
+  items?: (
+    | {
+        label: string;
+        onClick: () => void;
+      }
+    | {
+        label: string;
+        href: string;
+        target?: "_blank" | string;
+      }
+  )[];
+  button?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+  width?: "w-48" | "w-56" | "w-64" | "w-72" | "w-80" | "w-96";
+  right?: boolean;
+}
+
+export default function DropdownSimple({ items, button, disabled, className, right, width = "w-48" }: Props) {
+  return (
+    <Menu as="div" className={clsx(className, "relative inline-block text-left")}>
+      <div>
+        <Menu.Button disabled={disabled}>{button ?? <OptionsIcon />}</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={clsx(
+            "bg-surface-neutral-modal absolute z-40 mt-2 rounded-md shadow-lg ring-1 ring-border-default focus:outline-hidden",
+            right ? "left-0 origin-top-left" : "right-0 origin-top-right",
+            width
+          )}
+        >
+          <div className="py-1">
+            {items?.map((item, i) => {
+              return (
+                <Menu.Item key={i}>
+                  {({ active, close }) => {
+                    return (
+                      <Fragment>
+                        {"href" in item ? (
+                          <Link
+                            to={item.href}
+                            target={item.target}
+                            className={clsx("w-full text-left", active ? "text-text-neutral-primary bg-surface-neutral-secondary" : "text-text-neutral-secondary", "block px-4 py-2 text-sm")}
+                            onClick={() => close()}
+                          >
+                            {item.label}
+                          </Link>
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              item.onClick();
+                              close();
+                            }}
+                            className={clsx("w-full text-left", active ? "text-text-neutral-primary bg-surface-neutral-secondary" : "text-text-neutral-secondary", "block px-4 py-2 text-sm")}
+                          >
+                            {item.label}
+                          </button>
+                        )}
+                      </Fragment>
+                    );
+                  }}
+                </Menu.Item>
+              );
+            })}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}