Track HiveGrid Cloud planning reference

2026-06-26 20:48:01 +02:00
1 parent b3d5ea6764
commit e341c5938a
@@ -0,0 +1,81 @@
+import { Fragment } from "react";
+import { Popover, Transition } from "@headlessui/react";
+import clsx from "clsx";
+import ChevronDownIcon from "../../ui/icons/ChevronDownIcon";
+import { useTranslation } from "react-i18next";
+import ButtonEvent from "../buttons/ButtonEvent";
+
+export type HeaderFlyoutNavItem = {
+  title: string;
+  path?: string;
+  target?: "_blank";
+  hint?: string;
+  description?: string;
+};
+
+interface Props {
+  title: string;
+  items?: HeaderFlyoutNavItem[];
+  className?: string;
+}
+export default function HeaderFlyoutItem({ title, items, className }: Props) {
+  const { t } = useTranslation();
+  return (
+    <Popover className="relative">
+      {({ open }) => (
+        <>
+          <Popover.Button
+            className={clsx(
+              className,
+              open ? "" : " text-text-neutral-tertiary",
+              "group inline-flex w-full items-center space-x-2 truncate rounded-md text-base font-medium focus:outline-hidden "
+            )}
+          >
+            <span>{title}</span>
+            <ChevronDownIcon className={clsx(open ? "" : " text-text-neutral-tertiary", "group-hover:text-text-neutral-tertiary h-5 w-5")} aria-hidden="true" />
+          </Popover.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="absolute left-1/2 z-20 mt-3 w-screen max-w-xs -translate-x-1/2 transform px-2 sm:px-0">
+              {({ close }) => (
+                <div className="border-border-default bg-surface-neutral-primary overflow-hidden rounded-lg border shadow-lg ring-opacity-5">
+                  <div className="relative grid gap-6 px-5 py-6 sm:gap-8 sm:p-8">
+                    {items?.map((item) => (
+                      <Fragment key={item.title}>
+                        <ButtonEvent
+                          event={{
+                            category: "click",
+                            action: "header-flyout",
+                            label: item.title,
+                            value: item.path ?? "",
+                          }}
+                          onClick={() => close()}
+                          to={item.path ?? "#"}
+                          target={item.target}
+                          className="hover:bg-surface-neutral-secondary -m-3 block rounded-md p-3 transition duration-150 ease-in-out dark:hover:bg-gray-900"
+                        >
+                          <p className="text-base font-medium ">
+                            {t(item.title)} {item.hint && <span className="text-xs">({t(item.hint)})</span>}
+                          </p>
+                          {item.description && <p className="text-text-neutral-tertiary mt-1 text-sm">{t(item.description)}</p>}
+                        </ButtonEvent>
+                      </Fragment>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+}