تب‌ها (Tabs)

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
} from '@parto/ui';

<Tabs defaultValue="tab1" className="w-full max-w-xl">
  <TabsList className="grid grid-cols-3">
    <TabsTrigger value="tab1">تب اول</TabsTrigger>
    <TabsTrigger value="tab2">تب دوم</TabsTrigger>
    <TabsTrigger value="tab3">تب سوم</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    <Card>
      <CardHeader>
        <CardTitle>مرور کلی</CardTitle>
        <CardDescription>آمار امروز را مشاهده کنید.</CardDescription>
      </CardHeader>
    </Card>
  </TabsContent>
  <TabsContent value="tab2">
    <Card>
      <CardHeader>
        <CardTitle>فروش</CardTitle>
        <CardDescription>گزارش فروش هفتگی.</CardDescription>
      </CardHeader>
    </Card>
  </TabsContent>
  <TabsContent value="tab3">
    <Card>
      <CardHeader>
        <CardTitle>اعلان‌ها</CardTitle>
        <CardDescription>سه اعلان جدید دارید.</CardDescription>
      </CardHeader>
    </Card>
  </TabsContent>
</Tabs>

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList className="grid w-full grid-cols-2">
    <TabsTrigger value="account">حساب کاربری</TabsTrigger>
    <TabsTrigger value="password">رمز عبور</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card>
      <CardHeader>
        <CardTitle>حساب کاربری</CardTitle>
        <CardDescription>
          تغییرات حساب کاربری خود را اینجا اعمال کنید.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-2">
        <div className="space-y-1">
          <label htmlFor="name">نام</label>
          <Input id="name" defaultValue="علی احمدی" />
        </div>
      </CardContent>
      <CardFooter>
        <Button>ذخیره تغییرات</Button>
      </CardFooter>
    </Card>
  </TabsContent>
  <TabsContent value="password">
    <Card>
      <CardHeader>
        <CardTitle>رمز عبور</CardTitle>
        <CardDescription>
          رمز عبور خود را تغییر دهید.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-2">
        <div className="space-y-1">
          <label htmlFor="current">رمز فعلی</label>
          <Input id="current" type="password" />
        </div>
        <div className="space-y-1">
          <label htmlFor="new">رمز جدید</label>
          <Input id="new" type="password" />
        </div>
      </CardContent>
      <CardFooter>
        <Button>ذخیره رمز عبور</Button>
      </CardFooter>
    </Card>
  </TabsContent>
</Tabs>