Top BarTop Bar

뒤로가기, 봇 아바타, 제목과 부제, 더보기를 한 줄에 담은 모바일 상단 바입니다. onBack과 onMore를 넘길 때만 해당 버튼이 나타납니다.A mobile top bar with back, bot avatar, title and subtitle, and more in one row. The back and more buttons appear only when onBack or onMore is passed.

@horon-ai/react 내비게이션Navigation

Solid

Chief of staffOnline

Chief of staffLast active 2h ago

Quarterly planning with the whole hiring team

Glass

Chief of staffOnline

Chief of staffLast active 2h ago

Quarterly planning with the whole hiring team

tsx

import { TopBar } from "@horon-ai/react";

function Bars({ surface }: { surface: "solid" | "glass" }) {
  return (
    <>
      <TopBar
        className="w-full max-w-97.5"
        surface={surface}
        title="Chief of staff"
        subtitle="Online"
        live
        onBack={() => undefined}
        onMore={() => undefined}
      />
      <TopBar
        className="w-full max-w-97.5"
        surface={surface}
        title="Chief of staff"
        subtitle="Last active 2h ago"
        onBack={() => undefined}
        onMore={() => undefined}
      />
      <TopBar
        className="w-full max-w-97.5"
        surface={surface}
        title="Quarterly planning with the whole hiring team"
        onBack={() => undefined}
        onMore={() => undefined}
      />
    </>
  );
}

export default function TopBarDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      <div className="flex flex-col gap-3">
        <p className="text-caption text-text-secondary">Solid</p>
        <div className="flex w-full flex-col items-center gap-4">
          <Bars surface="solid" />
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <p className="text-caption text-text-secondary">Glass</p>
        <>
          <Bars surface="glass" />
        </>
      </div>
    </div>
  );
}