Navigation bar

import { NavList, type NavGroup } from "@bosunkit/components/nav-list";
import { NavigationBar, type NavigationBarItem } from "@bosunkit/components/navigation-bar";
import {
  BookOpen,
  Cloud,
  House,
  Map as MapIcon,
  Menu,
  MessageSquare,
  Settings,
  TriangleAlert,
  Users,
  Waves,
} from "lucide-react";
import { useState, type Dispatch, type MouseEvent, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A phone at anchor: Home, Chart, Alerts with the unacknowledged alarm counted, Chat, and More, which opens every " +
  "other page above the bar. Press a place and it becomes current.";

const PAGES: Readonly<Record<string, string>> = {
  "#home": "Holding 18 m from the drop point. Wind southwest 18 kn, gusts 24 kn.",
  "#chart": "Morgat anchorage with 3 AIS targets in range.",
  "#alerts": "Anchor dragging: 41 m from the drop point, outside the 35 m swing radius.",
  "#chat": "Ask bosun about the anchor, the weather or the tides.",
};

const MORE: readonly NavGroup[] = [
  {
    id: "passage",
    label: "Passage",
    items: [
      { href: "#weather", label: "Weather", icon: <Cloud /> },
      { href: "#tides", label: "Tides", icon: <Waves /> },
      { href: "#log", label: "Log", icon: <BookOpen /> },
    ],
  },
  {
    id: "aboard",
    label: "Aboard",
    items: [
      { href: "#crew", label: "Crew", icon: <Users /> },
      { href: "#settings", label: "Settings", icon: <Settings /> },
    ],
  },
];

export default function Showcase(): ReactElement {
  const [current, setCurrent]: [string, Dispatch<SetStateAction<string>>] = useState<string>("#home");
  const [moreOpen, setMoreOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);

  // The example stands in for the router: following a link makes its page current and closes More.
  function follow(event: MouseEvent<HTMLDivElement>): void {
    const link: HTMLAnchorElement | null = event.target instanceof Element ? event.target.closest("a") : null;
    if (link !== null) {
      event.preventDefault();
      setCurrent(link.getAttribute("href") ?? current);
      setMoreOpen(false);
    }
  }

  const items: readonly NavigationBarItem[] = [
    { id: "#home", label: "Home", icon: <House />, href: "#home" },
    { id: "#chart", label: "Chart", icon: <MapIcon />, href: "#chart" },
    {
      id: "#alerts",
      label: "Alerts",
      icon: <TriangleAlert />,
      href: "#alerts",
      count: { value: 1, label: "1 unacknowledged alert", priority: "alarm" },
    },
    { id: "#chat", label: "Chat", icon: <MessageSquare />, href: "#chat" },
    {
      id: "more",
      label: "More",
      icon: <Menu />,
      expanded: moreOpen,
      onSelect: (): void => {
        setMoreOpen(!moreOpen);
      },
    },
  ];
  const page: string | undefined = Object.hasOwn(PAGES, current) ? PAGES[current] : undefined;

  return (
    <div
      onClick={follow}
      style={{
        display: "flex",
        flexDirection: "column",
        width: "390px",
        maxWidth: "100%",
        minHeight: "22em",
        border: "1px solid var(--border)",
      }}
    >
      <p style={{ flex: "1 1 auto", margin: 0, padding: "var(--space-lg)" }}>
        {page ?? `The ${current.slice(1)} page.`}
      </p>
      {moreOpen && (
        <nav aria-label="More pages" style={{ padding: "var(--space-sm)", borderTop: "1px solid var(--border)" }}>
          <NavList groups={MORE} currentHref={current} mode="panel" collapsible={false} />
        </nav>
      )}
      <NavigationBar items={items} current={page === undefined ? "more" : current} />
    </div>
  );
}

import { NavigationBar } from "@bosunkit/components/navigation-bar";
import { Anchor, House, MessageSquare } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "Three places, the fewest a tab bar holds: each shares the width equally and is a thumb's target tall.";

export default function ThreePlaces(): ReactElement {
  return (
    <div style={{ width: "390px", maxWidth: "100%" }}>
      <NavigationBar
        current="anchor"
        items={[
          { id: "home", label: "Home", icon: <House />, href: "#home" },
          { id: "anchor", label: "Anchor", icon: <Anchor />, href: "#anchor" },
          { id: "chat", label: "Chat", icon: <MessageSquare />, href: "#chat" },
        ]}
      />
    </div>
  );
}

import { NavigationBar } from "@bosunkit/components/navigation-bar";
import { House, Map as MapIcon, MessageSquare, TriangleAlert } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "Two warnings waiting: the count sits on the Alerts icon in the warning color with its shape, and is read as " +
  "“2 unacknowledged alerts”.";

export default function AlertCount(): ReactElement {
  return (
    <div style={{ width: "390px", maxWidth: "100%" }}>
      <NavigationBar
        current="home"
        items={[
          { id: "home", label: "Home", icon: <House />, href: "#home" },
          { id: "chart", label: "Chart", icon: <MapIcon />, href: "#chart" },
          {
            id: "alerts",
            label: "Alerts",
            icon: <TriangleAlert />,
            href: "#alerts",
            count: { value: 2, label: "2 unacknowledged alerts", priority: "warning" },
          },
          { id: "chat", label: "Chat", icon: <MessageSquare />, href: "#chat" },
        ]}
      />
    </div>
  );
}