import { useComponentPreview } from '@/components/component-preview';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Bell, ShieldCheck, UserRound } from 'lucide-react';

export default function TabsDemo() {
	const { rtl } = useComponentPreview();
	const dir = rtl ? 'rtl' : 'ltr';

	return (
		<div className="flex flex-col items-center gap-8">
			<Tabs defaultValue="profile" className="text-sm text-muted-foreground">
				<TabsList size="xs">
					<TabsTrigger value="profile">
						<UserRound /> Profile
					</TabsTrigger>
					<TabsTrigger value="security">
						<ShieldCheck /> Security
					</TabsTrigger>
					<TabsTrigger value="notifications">
						<Bell /> Notifications
					</TabsTrigger>
				</TabsList>
			</Tabs>

			<Tabs defaultValue="profile" className="text-sm text-muted-foreground">
				<TabsList size="xs" variant="button">
					<TabsTrigger value="profile">
						<UserRound /> Profile
					</TabsTrigger>
					<TabsTrigger value="security">
						<ShieldCheck /> Security
					</TabsTrigger>
					<TabsTrigger value="notifications">
						<Bell /> Notifications
					</TabsTrigger>
				</TabsList>
			</Tabs>

			<Tabs defaultValue="profile" className="text-sm text-muted-foreground">
				<TabsList size="xs" variant="line">
					<TabsTrigger value="profile">
						<UserRound /> Profile
					</TabsTrigger>
					<TabsTrigger value="security">
						<ShieldCheck /> Security
					</TabsTrigger>
					<TabsTrigger value="notifications">
						<Bell /> Notifications
					</TabsTrigger>
				</TabsList>
			</Tabs>
		</div>
	);
}
Tabs

Examples

Default

Icon

Badge

Button

Line

Vertical

Size - Large

Size - Medium

Size - Small

Size - Xsmall

Disabled
