Dashboard/ui/components/HeaderNavigation/HeaderNavigation.tsx

"use client";
/*
 * Documentation:
 * Breadcrumbs — https://app.subframe.com/f023064a5ca0/library?component=Breadcrumbs_8898334b-a66f-4ee8-8bd1-afcfa8e37cc0
 * 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 * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { Breadcrumbs } from "../Breadcrumbs";
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;
  breadcrumbs?: React.ReactNode[];
  className?: string;
}

const HeaderNavigationRoot = React.forwardRef<
  HTMLDivElement,
  HeaderNavigationRootProps
>(function HeaderNavigationRoot(
  {
    leftSlot,
    breadcrumbs = ["Übersicht"],
    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.map((breadcrumb, index) => (
              <React.Fragment key={`${index}-${String(breadcrumb)}`}>
                {index > 0 ? <Breadcrumbs.Divider /> : null}
                <Breadcrumbs.Item active={index === breadcrumbs.length - 1}>
                  {breadcrumb}
                </Breadcrumbs.Item>
              </React.Fragment>
            ))}
          </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 grow shrink-0 basis-0"
            size="small"
            label="Label"
            helpText="Help text"
            message="Hilfetext"
          >
            <SearchInput.Input placeholder="Suche" />
          </SearchInput>
          <IconButton variant="ghost" size="small" icon={<FeatherBell />} />
        </div>
      </div>
    </div>
  );
});

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