Top Bar

import * as React from 'react'
import {
  DropdownMenuItem,
  ResourceSwitcher,
  ThemeMenu,
  TopBar,
  TopBarLogo,
  TopBarSearch,
  TopBarSegment,
  TopBarSeparator,
  TopBarUserMenu,
  toast,
  type ResourceSwitcherItem,
} from 'ferry-ui'
import { Building2, FolderKanban } from 'lucide-react'

const PROJECTS: ResourceSwitcherItem[] = [
  { id: 'billing-portal', label: 'Billing portal', icon: <FolderKanban /> },
  { id: 'customer-app', label: 'Customer app', icon: <FolderKanban /> },
  { id: 'status-page', label: 'Status page', icon: <FolderKanban /> },
]

export default function TopBarHero() {
  const [project, setProject] = React.useState('billing-portal')

  // The bar holds no state. A real app opens its phone drawer and its command menu here.
  return (
    <TopBar
      onOpenMobileNav={() => toast('The phone drawer opens here')}
      logo={
        <TopBarLogo label="Acme home">
          <svg viewBox="0 0 20 20" fill="currentColor" className="text-brand">
            <circle cx="10" cy="10" r="8" />
          </svg>
        </TopBarLogo>
      }
      actions={
        <>
          <TopBarSearch onClick={() => toast('The command menu opens here')} />
          <ThemeMenu />
          <TopBarUserMenu name="Maya Chen" description="maya@example.com">
            <DropdownMenuItem>Sign out</DropdownMenuItem>
          </TopBarUserMenu>
        </>
      }
    >
      {/* On a phone, this segment hides together with its separator. A real app gives it an `href`. */}
      <span className="flex min-w-0 items-center gap-0.5 max-sm:hidden">
        <TopBarSeparator />
        <TopBarSegment icon={<Building2 />} chevron={false}>
          Acme
        </TopBarSegment>
      </span>
      <TopBarSeparator />
      <ResourceSwitcher label="switch project" items={PROJECTS} value={project} onValueChange={setProject} />
    </TopBar>
  )
}

import * as React from 'react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
  TopBar,
  TopBarLogo,
  TopBarSegment,
  TopBarSeparator,
} from 'ferry-ui'
import { Building2 } from 'lucide-react'

const WORKSPACES = [
  { id: 'acme', name: 'Acme' },
  { id: 'acme-labs', name: 'Acme Labs' },
  { id: 'acme-europe', name: 'Acme Europe' },
]

export default function TopBarSegmentMenu() {
  const [workspace, setWorkspace] = React.useState('acme')
  const current = WORKSPACES.find((entry) => entry.id === workspace)

  return (
    <TopBar
      logo={
        <TopBarLogo label="Acme home">
          <svg viewBox="0 0 20 20" fill="currentColor" className="text-brand">
            <circle cx="10" cy="10" r="8" />
          </svg>
        </TopBarLogo>
      }
    >
      <TopBarSeparator />
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <TopBarSegment icon={<Building2 />}>{current?.name}</TopBarSegment>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="w-52">
          <DropdownMenuLabel>Workspace</DropdownMenuLabel>
          <DropdownMenuRadioGroup value={workspace} onValueChange={setWorkspace}>
            {WORKSPACES.map((entry) => (
              <DropdownMenuRadioItem key={entry.id} value={entry.id}>
                {entry.name}
              </DropdownMenuRadioItem>
            ))}
          </DropdownMenuRadioGroup>
        </DropdownMenuContent>
      </DropdownMenu>
      <TopBarSeparator />
      <TopBarSegment chevron={false}>Settings</TopBarSegment>
    </TopBar>
  )
}

import { Badge, TopBar, TopBarLogo, TopBarSegment, TopBarSeparator } from 'ferry-ui'
import { Building2, FolderKanban } from 'lucide-react'

export default function TopBarSegmentStates() {
  return (
    <TopBar
      logo={
        <TopBarLogo label="Acme home">
          <svg viewBox="0 0 20 20" fill="currentColor" className="text-brand">
            <circle cx="10" cy="10" r="8" />
          </svg>
        </TopBarLogo>
      }
    >
      <TopBarSeparator />
      <TopBarSegment icon={<Building2 />} loading aria-label="Workspace" />
      <TopBarSeparator />
      <TopBarSegment
        icon={<Building2 />}
        badge={
          <Badge font="mono" case="normal">
            Pro
          </Badge>
        }
      >
        Acme
      </TopBarSegment>
      <TopBarSeparator />
      <TopBarSegment icon={<FolderKanban />}>Revenue reports for the finance team of Acme Europe</TopBarSegment>
      <TopBarSeparator />
      <TopBarSegment icon={<FolderKanban />} disabled>
        Archived project
      </TopBarSegment>
    </TopBar>
  )
}

import * as React from 'react'
import { TopBarSearch } from 'ferry-ui'

export default function TopBarSearchDemo() {
  const [clicks, setClicks] = React.useState(0)
  const open = () => setClicks((count) => count + 1)

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center justify-center gap-3">
        <TopBarSearch onClick={open} />
        <TopBarSearch placeholder="Search invoices…" shortcut="/" keyShortcuts="/" onClick={open} />
        <TopBarSearch placeholder="Go to…" shortcut={false} onClick={open} />
        <TopBarSearch compactOnMobile={false} onClick={open} />
      </div>
      <p className="text-[13px] text-foreground-light">Clicks: {clicks}</p>
    </div>
  )
}

import { TopBarIconButton, toast } from 'ferry-ui'
import { Bell, CircleHelp, LogOut, RefreshCw } from 'lucide-react'

export default function TopBarIconButtons() {
  return (
    <>
      <TopBarIconButton icon={<Bell />} label="Notifications" onClick={() => toast('No new notifications')} />
      <TopBarIconButton icon={<CircleHelp />} label="Help" onClick={() => toast('Help opens here')} />
      <TopBarIconButton icon={<RefreshCw />} label="Refresh" loading />
      <TopBarIconButton icon={<LogOut />} label="Sign out" tooltip={false} disabled />
    </>
  )
}

import { Badge, DropdownMenuItem, DropdownMenuSeparator, TopBarUserMenu } from 'ferry-ui'
import { Building2, CreditCard, LogOut, Settings, UserRound, Users } from 'lucide-react'

export default function TopBarUserMenuDemo() {
  return (
    <>
      <TopBarUserMenu name="Maya Chen" description="maya@example.com">
        <DropdownMenuItem>
          <UserRound /> Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Settings /> Account settings
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <LogOut /> Sign out
        </DropdownMenuItem>
      </TopBarUserMenu>

      <TopBarUserMenu
        label="Workspace account"
        fallback={<Building2 className="size-3.5" />}
        align="start"
        header={
          <div className="flex items-center justify-between gap-2 px-2 py-1.5 text-[13px] text-foreground">
            <span className="truncate font-medium">Acme</span>
            <Badge font="mono" case="normal">
              Pro
            </Badge>
          </div>
        }
      >
        <DropdownMenuItem>
          <Users /> Members
        </DropdownMenuItem>
        <DropdownMenuItem>
          <CreditCard /> Billing
        </DropdownMenuItem>
      </TopBarUserMenu>
    </>
  )
}