Tabs

---
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = [
  {
    value: "overview",
    title: "Overview",
    description:
      "View your key metrics and recent project activity. Track progress across all your active projects.",
    content: "You have 12 active projects and 3 pending tasks.",
  },
  {
    value: "analytics",
    title: "Analytics",
    description:
      "Track performance and user engagement metrics. Monitor trends and identify growth opportunities.",
    content: "Page views are up 25% compared to last month.",
  },
  {
    value: "reports",
    title: "Reports",
    description:
      "Generate and download your detailed reports. Export data in multiple formats for analysis.",
    content: "You have 5 reports ready and available to export.",
  },
  {
    value: "settings",
    title: "Settings",
    description:
      "Manage your account preferences and options. Customize your experience to fit your needs.",
    content: "Configure notifications, security, and themes.",
  },
]
---

<Tabs defaultValue="overview" class="w-[400px]">
  <TabsList>
    {tabs.map((tab) => (
      <TabsTrigger value={tab.value}>{tab.title}</TabsTrigger>
    ))}
  </TabsList>
  {tabs.map((tab) => (
    <TabsContent value={tab.value}>
      <Card>
        <CardHeader>
          <CardTitle>{tab.title}</CardTitle>
          <CardDescription>{tab.description}</CardDescription>
        </CardHeader>
        <CardContent class="text-sm text-muted-foreground">
          {tab.content}
        </CardContent>
      </Card>
    </TabsContent>
  ))}
</Tabs>

---
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
</Tabs>

---
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

<Tabs defaultValue="account" orientation="vertical">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
</Tabs>

---
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

<Tabs defaultValue="home">
  <TabsList>
    <TabsTrigger value="home">Home</TabsTrigger>
    <TabsTrigger value="settings" disabled>
      Disabled
    </TabsTrigger>
  </TabsList>
</Tabs>

---
import AppWindowIcon from "@lucide/astro/icons/app-window"
import CodeIcon from "@lucide/astro/icons/code"

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
---

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">
      <AppWindowIcon />
      Preview
    </TabsTrigger>
    <TabsTrigger value="code">
      <CodeIcon />
      Code
    </TabsTrigger>
  </TabsList>
</Tabs>

---
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const translations = {
  en: {
    dir: "ltr",
    values: {
      overview: "Overview",
      analytics: "Analytics",
      reports: "Reports",
      settings: "Settings",
      overviewTitle: "Overview",
      overviewDesc:
        "View your key metrics and recent project activity. Track progress across all your active projects.",
      overviewContent: "You have 12 active projects and 3 pending tasks.",
      analyticsTitle: "Analytics",
      analyticsDesc:
        "Track performance and user engagement metrics. Monitor trends and identify growth opportunities.",
      analyticsContent: "Page views are up 25% compared to last month.",
      reportsTitle: "Reports",
      reportsDesc:
        "Generate and download your detailed reports. Export data in multiple formats for analysis.",
      reportsContent: "You have 5 reports ready and available to export.",
      settingsTitle: "Settings",
      settingsDesc:
        "Manage your account preferences and options. Customize your experience to fit your needs.",
      settingsContent: "Configure notifications, security, and themes.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      overview: "نظرة عامة",
      analytics: "التحليلات",
      reports: "التقارير",
      settings: "الإعدادات",
      overviewTitle: "نظرة عامة",
      overviewDesc:
        "عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.",
      overviewContent: "لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.",
      analyticsTitle: "التحليلات",
      analyticsDesc:
        "تتبع مقاييس الأداء ومشاركة المستخدمين. راقب الاتجاهات وحدد فرص النمو.",
      analyticsContent: "زادت مشاهدات الصفحة بنسبة ٢٥٪ مقارنة بالشهر الماضي.",
      reportsTitle: "التقارير",
      reportsDesc:
        "إنشاء وتنزيل تقاريرك التفصيلية. تصدير البيانات بتنسيقات متعددة للتحليل.",
      reportsContent: "لديك ٥ تقارير جاهزة ومتاحة للتصدير.",
      settingsTitle: "الإعدادات",
      settingsDesc:
        "إدارة تفضيلات حسابك وخياراته. تخصيص تجربتك لتناسب احتياجاتك.",
      settingsContent: "تكوين الإشعارات والأمان والسمات.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      overview: "סקירה כללית",
      analytics: "אנליטיקה",
      reports: "דוחות",
      settings: "הגדרות",
      overviewTitle: "סקירה כללית",
      overviewDesc:
        "הצג את המדדים העיקריים שלך ופעילות הפרויקט האחרונה. עקוב אחר התקדמות בכל הפרויקטים הפעילים שלך.",
      overviewContent: "יש לך 12 פרויקטים פעילים ו-3 משימות ממתינות.",
      analyticsTitle: "אנליטיקה",
      analyticsDesc:
        "עקוב אחר ביצועים ומדדי מעורבות משתמשים. עקוב אחר מגמות וזהה הזדמנויות צמיחה.",
      analyticsContent: "צפיות בדף עלו ב-25% בהשוואה לחודש שעבר.",
      reportsTitle: "דוחות",
      reportsDesc:
        "צור והורד את הדוחות המפורטים שלך. ייצא נתונים בפורמטים מרובים לניתוח.",
      reportsContent: "יש לך 5 דוחות מוכנים וזמינים לייצוא.",
      settingsTitle: "הגדרות",
      settingsDesc:
        "נהל את העדפות החשבון והאפשרויות שלך. התאם אישית את החוויה שלך כך שתתאים לצרכים שלך.",
      settingsContent: "הגדר התראות, אבטחה וערכות נושא.",
    },
  },
} as const

const { dir, values: t } = translations.ar

const tabs = [
  {
    value: "overview",
    label: t.overview,
    title: t.overviewTitle,
    description: t.overviewDesc,
    content: t.overviewContent,
  },
  {
    value: "analytics",
    label: t.analytics,
    title: t.analyticsTitle,
    description: t.analyticsDesc,
    content: t.analyticsContent,
  },
  {
    value: "reports",
    label: t.reports,
    title: t.reportsTitle,
    description: t.reportsDesc,
    content: t.reportsContent,
  },
  {
    value: "settings",
    label: t.settings,
    title: t.settingsTitle,
    description: t.settingsDesc,
    content: t.settingsContent,
  },
]
---

<Tabs defaultValue="overview" class="w-full max-w-sm" dir={dir}>
  <TabsList dir={dir}>
    {tabs.map((tab) => (
      <TabsTrigger value={tab.value}>{tab.label}</TabsTrigger>
    ))}
  </TabsList>
  {tabs.map((tab) => (
    <TabsContent value={tab.value}>
      <Card dir={dir}>
        <CardHeader>
          <CardTitle>{tab.title}</CardTitle>
          <CardDescription>{tab.description}</CardDescription>
        </CardHeader>
        <CardContent class="text-sm text-muted-foreground">
          {tab.content}
        </CardContent>
      </Card>
    </TabsContent>
  ))}
</Tabs>