Tab Bar

모바일 하단의 아이콘 탭 막대입니다.

@horon-ai/react 내비게이션 Storybook ↗

Preview

Usage

tsx

import { HoronIcon, TabBar } from "@horon-ai/react";
import { Bell, Cube, User } from "@phosphor-icons/react";
import { useState } from "react";

const items = [
  { value: "horon", label: "Horon", icon: <HoronIcon /> },
  { value: "inbox", label: "Inbox", icon: <Bell /> },
  { value: "artifacts", label: "Artifacts", icon: <Cube /> },
  { value: "me", label: "Me", icon: <User /> },
];

export default function TabBarDemo() {
  const [value, setValue] = useState("horon");
  return (
    <>
      <TabBar items={items} value={value} onValueChange={setValue} />
    </>
  );
}