Topbar

import { Topbar, TopbarItem, TopbarUser, Icon } from "@nili/ui"
import { RiHome5Line, RiFolderLine } from "@remixicon/react"

export function Example() {
  return (
    <Topbar
      label="Main"
      logo={<PlaceholderLogo company="apex-financial" size="sm" label="Apex Financial" />}
      actions={
        <TopbarUser
          avatar={<Avatar size="xs" name="Ada Lovelace" tone="blue" />}
          name="Ada Lovelace"
        />
      }
    >
      <TopbarItem icon={<Icon icon={RiHome5Line} />} href="#">Home</TopbarItem>
      <TopbarItem icon={<Icon icon={RiFolderLine} />} href="#" active>
        Projects
      </TopbarItem>
    </Topbar>
  )
}

import { Topbar, TopbarItem } from "@nili/ui"

export function Example() {
  return (
    <Topbar label="Main">
      <TopbarItem href="#" active>Projects</TopbarItem>
      <TopbarItem href="#">Reports</TopbarItem>
      <TopbarItem menu>Workspace</TopbarItem>
      <TopbarItem disabled>Billing</TopbarItem>
    </Topbar>
  )
}

import { Topbar, TopbarItem, TopbarUser, CompactButton, Button, Icon } from "@nili/ui"
import { RiSearchLine, RiNotification3Line } from "@remixicon/react"

export function Example() {
  return (
    <Topbar
      label="Main"
      actions={
        <>
          <CompactButton appearance="ghost" aria-label="Search">
            <Icon icon={RiSearchLine} />
          </CompactButton>
          <CompactButton appearance="ghost" aria-label="Notifications">
            <Icon icon={RiNotification3Line} />
          </CompactButton>
          <Button size="xs">New project</Button>
          <TopbarUser
            avatar={<Avatar size="xs" name="Ada Lovelace" tone="blue" />}
            name="Ada Lovelace"
          />
        </>
      }
    >
      …
    </Topbar>
  )
}