Tabs

import {	Card,	CardContent,	CardDescription,	CardHeader,	CardTitle,} from "@/components/ui/card";import {	Tabs,	TabsContent,	TabsList,	TabsTrigger,} from "@/components/ui/tabs";
export function TabsDemo() {	return (		<Tabs defaultValue="overview" className="w-[400px]">			<TabsList>				<TabsTrigger value="overview">Overview</TabsTrigger>				<TabsTrigger value="analytics">Analytics</TabsTrigger>				<TabsTrigger value="reports">Reports</TabsTrigger>			</TabsList>			<TabsContent value="overview">				<Card>					<CardHeader>						<CardTitle>Overview</CardTitle>						<CardDescription>							View your key metrics and recent project activity. Track progress							across all your active projects.						</CardDescription>					</CardHeader>					<CardContent className="text-muted-foreground text-sm">						You have 12 active projects and 3 pending tasks.					</CardContent>				</Card>			</TabsContent>			<TabsContent value="analytics">				<Card>					<CardHeader>						<CardTitle>Analytics</CardTitle>						<CardDescription>							Track performance and user engagement metrics. Monitor trends and							identify growth opportunities.						</CardDescription>					</CardHeader>					<CardContent className="text-muted-foreground text-sm">						Page views are up 25% compared to last month.					</CardContent>				</Card>			</TabsContent>			<TabsContent value="reports">				<Card>					<CardHeader>						<CardTitle>Reports</CardTitle>						<CardDescription>							Generate and download your detailed reports. Export data in							multiple formats for analysis.						</CardDescription>					</CardHeader>					<CardContent className="text-muted-foreground text-sm">						You have 5 reports ready and available to export.					</CardContent>				</Card>			</TabsContent>		</Tabs>	);}

import {	Tabs,	TabsContent,	TabsList,	TabsTrigger,} from "@/components/ui/tabs";
export function TabsVertical() {	return (		<Tabs defaultValue="account" orientation="vertical" className="w-[500px]">			<TabsList>				<TabsTrigger value="account">Account</TabsTrigger>				<TabsTrigger value="password">Password</TabsTrigger>				<TabsTrigger value="notifications">Notifications</TabsTrigger>			</TabsList>			<TabsContent value="account">				<p className="font-medium text-sm">Account Settings</p>				<p className="mt-1 text-muted-foreground text-sm">					Manage your account details, profile information, and connected					services.				</p>			</TabsContent>			<TabsContent value="password">				<p className="font-medium text-sm">Password & Security</p>				<p className="mt-1 text-muted-foreground text-sm">					Update your password and configure two-factor authentication to keep					your account secure.				</p>			</TabsContent>			<TabsContent value="notifications">				<p className="font-medium text-sm">Notification Preferences</p>				<p className="mt-1 text-muted-foreground text-sm">					Choose how and when you receive email, push, and in-app notifications.				</p>			</TabsContent>		</Tabs>	);}

import {	Tabs,	TabsContent,	TabsList,	TabsTrigger,} from "@/components/ui/tabs";
export function TabsLine() {	return (		<Tabs defaultValue="overview" className="w-[400px]">			<TabsList variant="line">				<TabsTrigger value="overview">Overview</TabsTrigger>				<TabsTrigger value="analytics">Analytics</TabsTrigger>				<TabsTrigger value="reports">Reports</TabsTrigger>			</TabsList>			<TabsContent value="overview">				<p className="text-muted-foreground text-sm">					View your key metrics and recent project activity. You have 12 active					projects and 3 pending tasks.				</p>			</TabsContent>			<TabsContent value="analytics">				<p className="text-muted-foreground text-sm">					Track performance and engagement metrics. Page views are up 25%					compared to last month.				</p>			</TabsContent>			<TabsContent value="reports">				<p className="text-muted-foreground text-sm">					Generate and download detailed reports. You have 5 reports ready and					available to export.				</p>			</TabsContent>		</Tabs>	);}

import {	Tabs,	TabsContent,	TabsList,	TabsTrigger,} from "@/components/ui/tabs";
export function TabsVerticalLine() {	return (		<Tabs defaultValue="account" orientation="vertical" className="w-[500px]">			<TabsList variant="line">				<TabsTrigger value="account">Account</TabsTrigger>				<TabsTrigger value="password">Password</TabsTrigger>				<TabsTrigger value="notifications">Notifications</TabsTrigger>			</TabsList>			<TabsContent value="account">				<p className="font-medium text-sm">Account Settings</p>				<p className="mt-1 text-muted-foreground text-sm">					Manage your account details, profile information, and connected					services.				</p>			</TabsContent>			<TabsContent value="password">				<p className="font-medium text-sm">Password & Security</p>				<p className="mt-1 text-muted-foreground text-sm">					Update your password and configure two-factor authentication to keep					your account secure.				</p>			</TabsContent>			<TabsContent value="notifications">				<p className="font-medium text-sm">Notification Preferences</p>				<p className="mt-1 text-muted-foreground text-sm">					Choose how and when you receive email, push, and in-app notifications.				</p>			</TabsContent>		</Tabs>	);}

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
export function TabsDisabled() {	return (		<Tabs defaultValue="home">			<TabsList>				<TabsTrigger value="home">Home</TabsTrigger>				<TabsTrigger value="settings" disabled>					Disabled				</TabsTrigger>			</TabsList>		</Tabs>	);}

import { AppWindowIcon, CodeIcon } from "lucide-react";
import {	Tabs,	TabsContent,	TabsList,	TabsTrigger,} from "@/components/ui/tabs";
export function TabsIcons() {	return (		<Tabs defaultValue="preview" className="w-[400px]">			<TabsList>				<TabsTrigger value="preview">					<AppWindowIcon />					Preview				</TabsTrigger>				<TabsTrigger value="code">					<CodeIcon />					Code				</TabsTrigger>			</TabsList>			<TabsContent value="preview">				<p className="text-muted-foreground text-sm">					See a live preview of your component as it will appear in the browser.				</p>			</TabsContent>			<TabsContent value="code">				<p className="text-muted-foreground text-sm">					View and copy the source code for this component to use in your					project.				</p>			</TabsContent>		</Tabs>	);}

"use client";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import {	Card,	CardContent,	CardDescription,	CardHeader,	CardTitle,} from "@/components/ui/card";import {	Tabs,	TabsContent,	TabsList,	TabsTrigger,} from "@/components/ui/tabs";
const translations: Translations = {	en: {		dir: "ltr",		values: {			overview: "Overview",			analytics: "Analytics",			reports: "Reports",			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.",		},	},	ar: {		dir: "rtl",		values: {			overview: "نظرة عامة",			analytics: "التحليلات",			reports: "التقارير",			overviewTitle: "نظرة عامة",			overviewDesc:				"عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.",			overviewContent: "لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.",			analyticsTitle: "التحليلات",			analyticsDesc:				"تتبع مقاييس الأداء ومشاركة المستخدمين. راقب الاتجاهات وحدد فرص النمو.",			analyticsContent: "زادت مشاهدات الصفحة بنسبة ٢٥٪ مقارنة بالشهر الماضي.",			reportsTitle: "التقارير",			reportsDesc:				"إنشاء وتنزيل تقاريرك التفصيلية. تصدير البيانات بتنسيقات متعددة للتحليل.",			reportsContent: "لديك ٥ تقارير جاهزة ومتاحة للتصدير.",		},	},	he: {		dir: "rtl",		values: {			overview: "סקירה כללית",			analytics: "אנליטיקה",			reports: "דוחות",			overviewTitle: "סקירה כללית",			overviewDesc:				"הצג את המדדים העיקריים שלך ופעילות הפרויקט האחרונה. עקוב אחר התקדמות בכל הפרויקטים הפעילים שלך.",			overviewContent: "יש לך 12 פרויקטים פעילים ו-3 משימות ממתינות.",			analyticsTitle: "אנליטיקה",			analyticsDesc:				"עקוב אחר ביצועים ומדדי מעורבות משתמשים. עקוב אחר מגמות וזהה הזדמנויות צמיחה.",			analyticsContent: "צפיות בדף עלו ב-25% בהשוואה לחודש שעבר.",			reportsTitle: "דוחות",			reportsDesc:				"צור והורד את הדוחות המפורטים שלך. ייצא נתונים בפורמטים מרובים לניתוח.",			reportsContent: "יש לך 5 דוחות מוכנים וזמינים לייצוא.",		},	},};
export function TabsRtl() {	const { dir, t, language } = useTranslation(translations, "ar");
	return (		<Tabs			defaultValue="overview"			className="w-full max-w-sm"			lang={language}			dir={dir}		>			<TabsList dir={dir}>				<TabsTrigger value="overview">{t.overview}</TabsTrigger>				<TabsTrigger value="analytics">{t.analytics}</TabsTrigger>				<TabsTrigger value="reports">{t.reports}</TabsTrigger>			</TabsList>			<TabsContent value="overview">				<Card dir={dir}>					<CardHeader>						<CardTitle>{t.overviewTitle}</CardTitle>						<CardDescription>{t.overviewDesc}</CardDescription>					</CardHeader>					<CardContent className="text-muted-foreground text-sm">						{t.overviewContent}					</CardContent>				</Card>			</TabsContent>			<TabsContent value="analytics">				<Card dir={dir}>					<CardHeader>						<CardTitle>{t.analyticsTitle}</CardTitle>						<CardDescription>{t.analyticsDesc}</CardDescription>					</CardHeader>					<CardContent className="text-muted-foreground text-sm">						{t.analyticsContent}					</CardContent>				</Card>			</TabsContent>			<TabsContent value="reports">				<Card dir={dir}>					<CardHeader>						<CardTitle>{t.reportsTitle}</CardTitle>						<CardDescription>{t.reportsDesc}</CardDescription>					</CardHeader>					<CardContent className="text-muted-foreground text-sm">						{t.reportsContent}					</CardContent>				</Card>			</TabsContent>		</Tabs>	);}