Icon Rail

import * as React from 'react'
import { IconRail, type NavGroup, type NavItem } from 'ferry-ui'
import { CreditCard, FolderKanban, LayoutDashboard, Settings, Users } from 'lucide-react'

const MAIN: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard /> },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'members', label: 'Members', icon: <Users /> },
]

const WORKSPACE: NavItem[] = [
  { id: 'billing', label: 'Billing', icon: <CreditCard /> },
  { id: 'settings', label: 'Settings', icon: <Settings /> },
]

export default function IconRailHero() {
  // A real app reads the current page from its router. This demo keeps it in state.
  const [page, setPage] = React.useState('overview')
  const withState = (item: NavItem): NavItem => ({
    ...item,
    active: item.id === page,
    onSelect: () => setPage(item.id),
  })
  const groups: NavGroup[] = [
    { id: 'main', items: MAIN.map(withState) },
    { id: 'workspace', items: WORKSPACE.map(withState) },
  ]
  const current = [...MAIN, ...WORKSPACE].find((item) => item.id === page)

  return (
    <div className="flex h-dvh bg-background">
      <IconRail groups={groups} />
      <div className="flex-1 p-6">
        <h1 className="text-lg font-medium text-foreground">{current?.label}</h1>
        <p className="mt-1 text-[13px] text-foreground-light">Select an item of the rail to change the page.</p>
      </div>
    </div>
  )
}

import * as React from 'react'
import { IconRail, type NavGroup, type NavItem } from 'ferry-ui'
import { CreditCard, FolderKanban, LayoutDashboard, Settings, Users } from 'lucide-react'

const MAIN: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard /> },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'members', label: 'Members', icon: <Users /> },
]

const WORKSPACE: NavItem[] = [
  { id: 'billing', label: 'Billing', icon: <CreditCard /> },
  { id: 'settings', label: 'Settings', icon: <Settings /> },
]

export default function IconRailExpanded() {
  const [page, setPage] = React.useState('projects')
  const withState = (item: NavItem): NavItem => ({
    ...item,
    active: item.id === page,
    onSelect: () => setPage(item.id),
  })
  const groups: NavGroup[] = [
    { id: 'main', items: MAIN.map(withState) },
    // The label of a group shows as a heading while the rail is expanded.
    { id: 'workspace', label: 'Workspace', items: WORKSPACE.map(withState) },
  ]

  return (
    <div className="flex h-dvh bg-background">
      <IconRail groups={groups} defaultExpanded />
      <div className="flex-1 bg-dot-grid" />
    </div>
  )
}

import * as React from 'react'
import { Button, IconRail, type NavItem } from 'ferry-ui'
import { FolderKanban, LayoutDashboard, Users } from 'lucide-react'

const ITEMS: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard />, active: true },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'members', label: 'Members', icon: <Users /> },
]

export default function IconRailControlled() {
  // Your code holds the state. Save it in the storage of your app to keep it between visits.
  const [expanded, setExpanded] = React.useState(true)

  return (
    <div className="flex h-dvh bg-background">
      <IconRail items={ITEMS} expanded={expanded} onExpandedChange={setExpanded} />
      <div className="flex flex-1 flex-col items-start gap-3 p-6">
        <p className="text-[13px] text-foreground-light">The rail is {expanded ? 'expanded' : 'collapsed'}.</p>
        <Button onClick={() => setExpanded((value) => !value)}>{expanded ? 'Collapse the rail' : 'Expand the rail'}</Button>
      </div>
    </div>
  )
}

import * as React from 'react'
import { IconRail, IconRailItem, useIconRail, type NavItem } from 'ferry-ui'
import { FolderKanban, Keyboard, LayoutDashboard, LifeBuoy, Users } from 'lucide-react'

const ITEMS: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard />, active: true },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'members', label: 'Members', icon: <Users /> },
]

/** A square mark. It shows the name of the product when the rail is expanded. */
function Wordmark() {
  const rail = useIconRail()
  return (
    <span className="flex h-9 items-center gap-2 px-[9px] text-sm font-medium text-foreground">
      <span className="size-[18px] shrink-0 rounded-sm bg-brand" aria-hidden="true" />
      {rail?.expanded && 'Acme'}
    </span>
  )
}

export default function IconRailSlots() {
  const [message, setMessage] = React.useState('Select an item of the footer.')

  return (
    <div className="flex h-dvh bg-background">
      <IconRail
        items={ITEMS}
        defaultExpanded
        logo={<Wordmark />}
        footer={
          <>
            <IconRailItem
              item={{ id: 'help', label: 'Help center', icon: <LifeBuoy />, onSelect: () => setMessage('Help center') }}
            />
            <IconRailItem
              item={{ id: 'shortcuts', label: 'Shortcuts', icon: <Keyboard />, onSelect: () => setMessage('Shortcuts') }}
            />
          </>
        }
      />
      <p className="flex-1 p-6 text-[13px] text-foreground-light">{message}</p>
    </div>
  )
}

import { Badge, IconRail, type NavItem } from 'ferry-ui'
import { CreditCard, FolderKanban, Inbox, LayoutDashboard } from 'lucide-react'

const ITEMS: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard />, active: true },
  {
    id: 'inbox',
    label: 'Inbox',
    icon: <Inbox />,
    badge: (
      <Badge variant="primary" font="mono">
        12
      </Badge>
    ),
  },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'billing', label: 'Billing', icon: <CreditCard />, disabled: true },
]

export default function IconRailBadges() {
  return (
    <div className="flex h-dvh bg-background">
      {/* Two rails on one page: each one needs its own name. */}
      <IconRail items={ITEMS} collapsible={false} aria-label="Collapsed rail" />
      <IconRail items={ITEMS} collapsible={false} defaultExpanded aria-label="Expanded rail" />
      <div className="flex-1 bg-dot-grid" />
    </div>
  )
}