Tabs

// Package tabs holds the site's example gsx components for ui/tabs.
package tabs

import "github.com/gsxhq/gsxui/ui"

// Basic renders a 3-tab group with "account" selected on first paint —
// selected is server-resolved by comparing each part's value to the root's
// (see ui/tabs/tabs.gsx).
component Basic() {
	<ui.Tabs value="account">
		<ui.TabsList>
			<ui.TabsTrigger value="account" selected>Account</ui.TabsTrigger>
			<ui.TabsTrigger value="password">Password</ui.TabsTrigger>
			<ui.TabsTrigger value="team">Team</ui.TabsTrigger>
		</ui.TabsList>
		<ui.TabsContent value="account" selected>Update your account details.</ui.TabsContent>
		<ui.TabsContent value="password">Change your password.</ui.TabsContent>
		<ui.TabsContent value="team">Manage your team members.</ui.TabsContent>
	</ui.Tabs>
}

package tabs

import (
	"github.com/gsxhq/gsxui/ui"
	"github.com/gsxhq/gsxui/ui/icon"
)

// Icons pairs each trigger with a lucide icon alongside its label.
component Icons() {
	<ui.Tabs value="grid">
		<ui.TabsList>
			<ui.TabsTrigger value="grid" selected>
				<icon.LayoutGrid class="size-4"/>
				Grid
			</ui.TabsTrigger>
			<ui.TabsTrigger value="list">
				<icon.List class="size-4"/>
				List
			</ui.TabsTrigger>
		</ui.TabsList>
		<ui.TabsContent value="grid" selected>Items shown as a grid.</ui.TabsContent>
		<ui.TabsContent value="list">Items shown as a list.</ui.TabsContent>
	</ui.Tabs>
}

package tabs

import "github.com/gsxhq/gsxui/site/uirtl"

// Rtl mirrors shadcn's own tabs-rtl demo: a 4-tab group ("overview"
// selected), each panel a Card with title/description/content, translated
// to Arabic and wrapped in dir="rtl".
component Rtl() {
	<uirtl.Tabs value="overview" dir="rtl" lang="ar" class="w-full max-w-sm">
		<uirtl.TabsList>
			<uirtl.TabsTrigger value="overview" selected>نظرة عامة</uirtl.TabsTrigger>
			<uirtl.TabsTrigger value="analytics">التحليلات</uirtl.TabsTrigger>
			<uirtl.TabsTrigger value="reports">التقارير</uirtl.TabsTrigger>
			<uirtl.TabsTrigger value="settings">الإعدادات</uirtl.TabsTrigger>
		</uirtl.TabsList>
		<uirtl.TabsContent value="overview" selected>
			<uirtl.Card>
				<uirtl.CardHeader>
					<uirtl.CardTitle>نظرة عامة</uirtl.CardTitle>
					<uirtl.CardDescription>
						عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.
					</uirtl.CardDescription>
				</uirtl.CardHeader>
				<uirtl.CardContent class="text-sm text-muted-foreground">
					لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.
				</uirtl.CardContent>
			</uirtl.Card>
		</uirtl.TabsContent>
		<uirtl.TabsContent value="analytics">
			<uirtl.Card>
				<uirtl.CardHeader>
					<uirtl.CardTitle>التحليلات</uirtl.CardTitle>
					<uirtl.CardDescription>
						تتبع مقاييس الأداء ومشاركة المستخدمين. راقب الاتجاهات وحدد فرص النمو.
					</uirtl.CardDescription>
				</uirtl.CardHeader>
				<uirtl.CardContent class="text-sm text-muted-foreground">
					زادت مشاهدات الصفحة بنسبة ٢٥٪ مقارنة بالشهر الماضي.
				</uirtl.CardContent>
			</uirtl.Card>
		</uirtl.TabsContent>
		<uirtl.TabsContent value="reports">
			<uirtl.Card>
				<uirtl.CardHeader>
					<uirtl.CardTitle>التقارير</uirtl.CardTitle>
					<uirtl.CardDescription>
						إنشاء وتنزيل تقاريرك التفصيلية. تصدير البيانات بتنسيقات متعددة للتحليل.
					</uirtl.CardDescription>
				</uirtl.CardHeader>
				<uirtl.CardContent class="text-sm text-muted-foreground">لديك ٥ تقارير جاهزة ومتاحة للتصدير.</uirtl.CardContent>
			</uirtl.Card>
		</uirtl.TabsContent>
		<uirtl.TabsContent value="settings">
			<uirtl.Card>
				<uirtl.CardHeader>
					<uirtl.CardTitle>الإعدادات</uirtl.CardTitle>
					<uirtl.CardDescription>إدارة تفضيلات حسابك وخياراته. تخصيص تجربتك لتناسب احتياجاتك.</uirtl.CardDescription>
				</uirtl.CardHeader>
				<uirtl.CardContent class="text-sm text-muted-foreground">تكوين الإشعارات والأمان والسمات.</uirtl.CardContent>
			</uirtl.Card>
		</uirtl.TabsContent>
	</uirtl.Tabs>
}