Tabs

export const client = "only";

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="flex w-[28rem] flex-col gap-8">
      <Tabs defaultValue="chart">
        <TabsList>
          <TabsTrigger value="chart">グラフ</TabsTrigger>
          <TabsTrigger value="table">表</TabsTrigger>
          <TabsTrigger value="sql">SQL</TabsTrigger>
        </TabsList>
        <TabsContent value="chart">月次の推移をグラフで表示します。</TabsContent>
        <TabsContent value="table">同じデータを表で表示します。</TabsContent>
        <TabsContent value="sql">この画面が発行しているクエリです。</TabsContent>
      </Tabs>

      <Tabs defaultValue="day">
        <TabsList variant="line">
          <TabsTrigger value="day">日次</TabsTrigger>
          <TabsTrigger value="week">週次</TabsTrigger>
          <TabsTrigger value="month">月次</TabsTrigger>
        </TabsList>
        <TabsContent value="day">variant="line" の見た目です。</TabsContent>
        <TabsContent value="week">下線だけのタブ。</TabsContent>
        <TabsContent value="month">画面の幅いっぱいに置くときに向きます。</TabsContent>
      </Tabs>
    </div>
  );
}