Track HiveGrid Cloud planning reference

2026-06-26 20:48:01 +02:00
1 parent b3d5ea6764
commit e341c5938a
@@ -0,0 +1,69 @@
+import { Fragment, MouseEventHandler, ReactNode } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import clsx from "clsx";
+import { Link } from "react-router";
+import { ChevronDownIcon } from "~/components/ui/icons/vendor";
+
+interface Props {
+  right?: boolean;
+  button?: ReactNode;
+  to?: string;
+  options?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+}
+
+export default function DropdownWithClick({ button, to, options, right, onClick, className, disabled }: Props) {
+  return (
+    <span className={clsx(className, "relative z-10 inline-flex rounded-md shadow-2xs")}>
+      {to ? (
+        <Link
+          to={to}
+          className={clsx(
+            "focus:border-brand-brand-border-solid-default shadow-focus border-border-default bg-surface-neutral-primary text-text-neutral-secondary relative -mr-1 inline-flex items-center rounded-l-md border px-4 py-2 text-sm font-medium focus:z-10 focus:outline-hidden",
+            disabled ? "cursor-not-allowed opacity-80" : "hover:bg-surface-neutral-secondary focus:bg-surface-neutral-secondary"
+          )}
+        >
+          {button}
+        </Link>
+      ) : (
+        <button
+          onClick={onClick}
+          disabled={disabled}
+          type="button"
+          className={clsx(
+            "focus:border-brand-brand-border-solid-default shadow-focus border-border-default bg-surface-neutral-primary text-text-neutral-secondary relative -mr-1 inline-flex items-center rounded-l-md border px-4 py-2 text-sm font-medium focus:z-10 focus:outline-hidden",
+            disabled ? "cursor-not-allowed opacity-80" : "hover:bg-surface-neutral-secondary focus:bg-surface-neutral-secondary"
+          )}
+        >
+          {button}
+        </button>
+      )}
+      <Menu as="span" className="relative -ml-px block">
+        <Menu.Button className="hover:bg-surface-neutral-secondary focus:border-brand-brand-border-solid-default shadow-focus border-border-default text-text-neutral-tertiary bg-surface-neutral-primary relative inline-flex items-center rounded-r-md border px-2 py-2 text-sm font-medium focus:z-10 focus:outline-hidden">
+          <ChevronDownIcon className="h-5 w-5" />
+        </Menu.Button>
+        <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 w-48 rounded-md shadow-lg ring-1 ring-border-default focus:outline-hidden",
+              right ? "left-0 origin-top-left" : "right-0 origin-top-right"
+            )}
+          >
+            <div className="py-1">{options}</div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </span>
+  );
+}