Nav rail

"use client"

import * as React from "react"
import { Activity, Bell, Home, MessagesSquare, Settings, ShieldCheck, SquareKanban, Workflow } from "lucide-react"
import { AppLayout } from "@/components/candor/app-layout"
import { NavRail, useNavRailTabs, type NavRailGroup } from "@/components/candor/nav-rail"
import { TabBar } from "@/components/candor/tab-bar"

const groups: NavRailGroup[] = [
  {
    id: "work",
    label: "Work",
    places: [
      { id: "home", label: "Home", Icon: Home },
      { id: "chat", label: "Chat", Icon: MessagesSquare },
      { id: "board", label: "Board", Icon: SquareKanban },
      // An urgent count is filled and read in the name: "Approvals, 3 waiting".
      { id: "approvals", label: "Approvals", Icon: ShieldCheck, count: 3, urgent: true },
    ],
  },
  {
    id: "watch",
    label: "Watch",
    places: [
      { id: "flows", label: "Flows", Icon: Workflow },
      { id: "activity", label: "Activity", Icon: Activity, count: 8 },
      { id: "alerts", label: "Alerts", Icon: Bell },
    ],
  },
]
const pinned = [{ id: "settings", label: "Settings", Icon: Settings }]
const all = [...groups.flatMap((g) => g.places), ...pinned]

export default function Example() {
  const [place, setPlace] = React.useState("home")
  // The phone's bar takes the places the app picks, from the same list (or the first four without ids); More opens the
  // sheet with the rest. A short rail scrolls its places, the pinned foot kept in view.
  const { destinations, more } = useNavRailTabs(all, { ids: ["home", "chat", "approvals", "alerts"] })
  // One frame at a time: a page has one main. The phone's frame is narrower than tabBarAt, so the bar shows.
  const [size, setSize] = React.useState<"wide" | "phone">("wide")
  return (
    <div className="flex flex-col gap-3">
      <label className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
        Frame
        <select value={size} onChange={(e) => setSize(e.target.value as "wide" | "phone")} className="max-w-full min-w-0 rounded-md border bg-background px-2 py-1 text-foreground">
          <option value="wide">Wide: the rail</option>
          <option value="phone">Phone: the tab bar, the rest behind More</option>
        </select>
      </label>
      {size === "wide" ? (
        <div className="h-[520px] w-full max-w-[420px] overflow-hidden rounded-lg border">
          <AppLayout defaultWidth={420} sidebarAt={400} sidebar={<NavRail places={[]} groups={groups} pinned={pinned} activeId={place} onNavigate={setPlace} />}>
            <div className="p-4 text-sm">
              <h2 className="font-semibold capitalize">{place}</h2>
            </div>
          </AppLayout>
        </div>
      ) : (
        <div className="h-[520px] w-[340px] overflow-hidden rounded-lg border">
          <AppLayout
            defaultWidth={340}
            sidebar={<NavRail places={[]} groups={groups} pinned={pinned} activeId={place} onNavigate={setPlace} />}
            tabBar={<TabBar destinations={destinations} activeId={place} onNavigate={setPlace} more={more} />}
          >
            <div className="p-4 text-sm">
              <h2 className="font-semibold capitalize">{place}</h2>
            </div>
          </AppLayout>
        </div>
      )}
    </div>
  )
}