HiveGrid-Wireframes/hivegrid-cloud/apps/web/app/ui/components/HeaderNavigation/HeaderNavigation.tsx

"use client";
/*
 * Documentation:
 * Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
 * Breadcrumbs — https://app.subframe.com/f023064a5ca0/library?component=Breadcrumbs_8898334b-a66f-4ee8-8bd1-afcfa8e37cc0
 * Dropdown Menu — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu_99951515-459b-4286-919e-a89e7549b43b
 * Header Navigation — https://app.subframe.com/f023064a5ca0/library?component=Header+Navigation_9abee202-1896-4bb8-b899-63d76af2825e
 * Icon Button — https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
 * Search Input — https://app.subframe.com/f023064a5ca0/library?component=Search+Input_75a35ed3-52c0-4435-8586-e390eb77d723
 */

import React from "react";
import { FeatherBell } from "@subframe/core";
import { FeatherLogOut } from "@subframe/core";
import { FeatherSettings } from "@subframe/core";
import { FeatherUserSearch } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { Avatar } from "../Avatar";
import { Breadcrumbs } from "../Breadcrumbs";
import { DropdownMenu } from "../DropdownMenu";
import { IconButton } from "../IconButton";
import { SearchInput } from "../SearchInput";

export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
  selected?: boolean;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}

const NavItem = React.forwardRef<HTMLDivElement, NavItemProps>(function NavItem(
  {
    selected = false,
    children,
    icon = null,
    className,
    ...otherProps
  }: NavItemProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/448f9541 flex cursor-pointer items-center justify-center gap-2 rounded-sm px-3 py-1.5 hover:bg-surface-neutral-tertiary",
        { "bg-surface-neutral-tertiary py-2": selected },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {icon ? (
        <SubframeCore.IconWrapper
          className={SubframeUtils.twClassNames(
            "text-body-small-medium-0 font-body-small-medium-0 text-icon-neutral-secondary",
            { "text-icon-neutral-primary": selected }
          )}
        >
          {icon}
        </SubframeCore.IconWrapper>
      ) : null}
      {children ? (
        <span
          className={SubframeUtils.twClassNames(
            "whitespace-nowrap text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-secondary",
            { "text-text-neutral-primary": selected }
          )}
        >
          {children}
        </span>
      ) : null}
    </div>
  );
});

export interface HeaderNavigationRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  leftSlot?: React.ReactNode;
  className?: string;
}

const HeaderNavigationRoot = React.forwardRef<
  HTMLDivElement,
  HeaderNavigationRootProps
>(function HeaderNavigationRoot(
  { leftSlot, className, ...otherProps }: HeaderNavigationRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "flex h-14 w-full items-center justify-between border-b border-solid border-border-default bg-surface-neutral-secondary pl-6 pr-3 py-3 mobile:px-4",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div className="flex grow shrink-0 basis-0 items-center justify-between">
        <div className="flex items-center gap-6 pr-1">
          <Breadcrumbs>
            <Breadcrumbs.Item>Breadcrumb</Breadcrumbs.Item>
            <Breadcrumbs.Divider />
            <Breadcrumbs.Item active={true}>Breadcrumb</Breadcrumbs.Item>
          </Breadcrumbs>
        </div>
        {leftSlot ? (
          <div className="flex grow shrink-0 basis-0 items-center gap-6 mobile:gap-2">
            {leftSlot}
          </div>
        ) : null}
        <div className="flex items-center gap-2 self-stretch pl-1">
          <SearchInput
            className="h-auto min-w-[192px] grow shrink-0 basis-0"
            size="small"
            label="Label"
            helpText="Help text"
            placeholder="Suche"
          />
          <IconButton variant="ghost" size="small" icon={<FeatherBell />} />
          <SubframeCore.DropdownMenu.Root>
            <SubframeCore.DropdownMenu.Trigger asChild={true}>
              <Avatar className="cursor-pointer" border={true}>
                AB
              </Avatar>
            </SubframeCore.DropdownMenu.Trigger>
            <SubframeCore.DropdownMenu.Portal>
              <SubframeCore.DropdownMenu.Content
                side="bottom"
                align="end"
                sideOffset={4}
                asChild={true}
              >
                <DropdownMenu>
                  <DropdownMenu.DropdownUserItem
                    title="Olivia Rhye"
                    subtitle="olivia@untitledui.com"
                    image="https://res.cloudinary.com/subframe/image/upload/v1711417513/shared/kwut7rhuyivweg8tmyzl.jpg"
                  />
                  <DropdownMenu.DropdownDivider />
                  <DropdownMenu.DropdownItem
                    icon={<FeatherSettings />}
                    image=""
                  >
                    Einstellungen
                  </DropdownMenu.DropdownItem>
                  <DropdownMenu.DropdownItem icon={<FeatherLogOut />} image="">
                    Logout
                  </DropdownMenu.DropdownItem>
                  <DropdownMenu.DropdownDivider />
                  <DropdownMenu.DropdownNestedItem
                    label="Profil wechseln"
                    icon={<FeatherUserSearch />}
                  >
                    <DropdownMenu.DropdownUserItem
                      title="Olivia Rhye"
                      subtitle="olivia@untitledui.com"
                      image="https://res.cloudinary.com/subframe/image/upload/v1711417513/shared/kwut7rhuyivweg8tmyzl.jpg"
                    />
                    <DropdownMenu.DropdownUserItem
                      title="Olivia Rhye"
                      subtitle="olivia@untitledui.com"
                      image="https://res.cloudinary.com/subframe/image/upload/v1711417514/shared/ubsk7cs5hnnaj798efej.jpg"
                    />
                    <DropdownMenu.DropdownUserItem
                      title="Olivia Rhye"
                      subtitle="olivia@untitledui.com"
                      image="https://res.cloudinary.com/subframe/image/upload/v1711417512/shared/m0kfajqpwkfief00it4v.jpg"
                    />
                    <DropdownMenu.DropdownUserItem
                      title="Olivia Rhye"
                      subtitle="olivia@untitledui.com"
                      image="https://res.cloudinary.com/subframe/image/upload/v1711417512/shared/btvntvzhdbhpulae3kzk.jpg"
                    />
                  </DropdownMenu.DropdownNestedItem>
                </DropdownMenu>
              </SubframeCore.DropdownMenu.Content>
            </SubframeCore.DropdownMenu.Portal>
          </SubframeCore.DropdownMenu.Root>
        </div>
      </div>
    </div>
  );
});

export const HeaderNavigation = Object.assign(HeaderNavigationRoot, {
  NavItem,
});