Tabs

'use client';

import { Tabs } from '@akhatmirzo/ui';

export default function TabsVariants() {
  return (
    <div className="flex w-full flex-col gap-8">
      {(['underline', 'pills', 'segmented'] as const).map((variant) => (
        <Tabs key={variant} defaultValue="info" variant={variant}>
          <Tabs.List aria-label={`Mijoz (${variant})`}>
            <Tabs.Trigger value="info">Ma'lumot</Tabs.Trigger>
            <Tabs.Trigger value="orders" badge={12}>
              Buyurtmalar
            </Tabs.Trigger>
            <Tabs.Trigger value="reviews">Sharhlar</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="info" className="text-text-muted">
            Ism, telefon va yetkazib berish manzili.
          </Tabs.Content>
          <Tabs.Content value="orders" className="text-text-muted">
            Oxirgi 12 ta buyurtma ro'yxati.
          </Tabs.Content>
          <Tabs.Content value="reviews" className="text-text-muted">
            Mijoz hali sharh qoldirmagan.
          </Tabs.Content>
        </Tabs>
      ))}
    </div>
  );
}

'use client';

import { Tabs } from '@akhatmirzo/ui';

export default function TabsSizes() {
  return (
    <div className="flex flex-col items-start gap-4">
      {(['underline', 'pills', 'segmented'] as const).map((variant) => (
        <Tabs key={variant} defaultValue="all" variant={variant} size="sm">
          <Tabs.List aria-label="Holat bo'yicha">
            <Tabs.Trigger value="all">Hammasi</Tabs.Trigger>
            <Tabs.Trigger value="active">Faol</Tabs.Trigger>
            <Tabs.Trigger value="archive">Arxiv</Tabs.Trigger>
          </Tabs.List>
        </Tabs>
      ))}
    </div>
  );
}

'use client';

import { Tabs } from '@akhatmirzo/ui';

export default function TabsVertical() {
  return (
    <Tabs defaultValue="profile" orientation="vertical" variant="pills" className="w-full">
      <Tabs.List aria-label="Sozlamalar" className="w-44">
        <Tabs.Trigger value="profile">Profil</Tabs.Trigger>
        <Tabs.Trigger value="security">Xavfsizlik</Tabs.Trigger>
        <Tabs.Trigger value="notifications" badge={3}>
          Bildirishnomalar
        </Tabs.Trigger>
        <Tabs.Trigger value="billing" disabled>
          To'lovlar
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="profile" className="text-text-muted">
        Ism, familiya va profil rasmi.
      </Tabs.Content>
      <Tabs.Content value="security" className="text-text-muted">
        Parol va ikki bosqichli tasdiqlash.
      </Tabs.Content>
      <Tabs.Content value="notifications" className="text-text-muted">
        SMS, email va Telegram orqali bildirishnomalar.
      </Tabs.Content>
    </Tabs>
  );
}

'use client';

import { Tabs } from '@akhatmirzo/ui';

const months = [
  'Yanvar',
  'Fevral',
  'Mart',
  'Aprel',
  'May',
  'Iyun',
  'Iyul',
  'Avgust',
  'Sentabr',
  'Oktabr',
  'Noyabr',
  'Dekabr',
];

export default function TabsScrollable() {
  return (
    <div className="w-full max-w-md">
      <Tabs defaultValue="Mart">
        <Tabs.List aria-label="Oylar">
          {months.map((m) => (
            <Tabs.Trigger key={m} value={m}>
              {m}
            </Tabs.Trigger>
          ))}
        </Tabs.List>
        {months.map((m) => (
          <Tabs.Content key={m} value={m} className="text-text-muted">
            {m} oyi bo'yicha savdo hisoboti.
          </Tabs.Content>
        ))}
      </Tabs>
    </div>
  );
}

'use client';

import { Badge, Tabs } from '@akhatmirzo/ui';

export default function TabsBadges() {
  return (
    <Tabs defaultValue="new">
      <Tabs.List aria-label="Buyurtmalar holati">
        <Tabs.Trigger value="new" badge={4}>
          Yangi
        </Tabs.Trigger>
        <Tabs.Trigger
          value="paid"
          badge={
            <Badge color="success" size="sm">
              +2
            </Badge>
          }
        >
          To'langan
        </Tabs.Trigger>
        <Tabs.Trigger value="canceled" disabled>
          Bekor qilingan
        </Tabs.Trigger>
      </Tabs.List>
    </Tabs>
  );
}

'use client';

import { Tabs } from '@akhatmirzo/ui';
import { useState } from 'react';

const totals: Record<string, string> = {
  day: "1 250 000 so'm",
  week: "8 740 000 so'm",
  month: "36 900 000 so'm",
  year: "412 500 000 so'm",
};

export default function TabsControlled() {
  const [period, setPeriod] = useState('week');

  return (
    <div className="flex flex-col items-start gap-3">
      <Tabs value={period} onValueChange={setPeriod} variant="segmented">
        <Tabs.List aria-label="Davr">
          <Tabs.Trigger value="day">Kun</Tabs.Trigger>
          <Tabs.Trigger value="week">Hafta</Tabs.Trigger>
          <Tabs.Trigger value="month">Oy</Tabs.Trigger>
          <Tabs.Trigger value="year">Yil</Tabs.Trigger>
        </Tabs.List>
      </Tabs>
      <p className="m-0 text-sm text-text-muted">
        Savdo: <span className="font-semibold text-text">{totals[period]}</span>
      </p>
    </div>
  );
}