Tabs

import * as React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function Example() {
  const [a, setA] = React.useState("all");
  const [b, setB] = React.useState("all");
  return (
    <div style={{ display: "grid", gap: 24 }}>
      <Tabs appearance="pill" value={a} onValueChange={setA}>
        <TabsList>
          <TabsTrigger value="all">All</TabsTrigger>
          <TabsTrigger value="green">Green</TabsTrigger>
          <TabsTrigger value="black">Black</TabsTrigger>
        </TabsList>
        <TabsContent value="all">All 14 teas</TabsContent>
        <TabsContent value="green">5 green teas</TabsContent>
        <TabsContent value="black">6 black teas</TabsContent>
      </Tabs>
      <Tabs appearance="boxed" value={b} onValueChange={setB}>
        <TabsList>
          <TabsTrigger value="all">All</TabsTrigger>
          <TabsTrigger value="green">Green</TabsTrigger>
          <TabsTrigger value="black">Black</TabsTrigger>
        </TabsList>
        <TabsContent value="all">All 14 teas</TabsContent>
        <TabsContent value="green">5 green teas</TabsContent>
        <TabsContent value="black">6 black teas</TabsContent>
      </Tabs>
    </div>
  );
}

import * as React from "react";
import { Inbox, Star, User } from "@/components/ui/icons";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function Example() {
  const [tab, setTab] = React.useState("orders");
  return (
    <Tabs value={tab} onValueChange={setTab}>
      <TabsList>
        <TabsTrigger value="orders" leadingIcon={<Inbox />} count={12}>Orders</TabsTrigger>
        <TabsTrigger value="saved" leadingIcon={<Star />} count={3}>Saved</TabsTrigger>
        <TabsTrigger value="account" leadingIcon={<User />}>Account</TabsTrigger>
      </TabsList>
      <TabsContent value="orders">12 orders this month.</TabsContent>
      <TabsContent value="saved">3 saved teas.</TabsContent>
      <TabsContent value="account">Nusrat Jahan, Mirpur.</TabsContent>
    </Tabs>
  );
}