Tabs

'use client'

import { Button } from '@nerdfish/react/button'
import {
	Card,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from '@nerdfish/react/card'
import { Field, FieldLabel } from '@nerdfish/react/field'
import { Input } from '@nerdfish/react/input'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@nerdfish/react/tabs'

export default function TabsExample() {
	return (
		<div className="flex w-full max-w-sm flex-col gap-6">
			<Tabs defaultValue="account">
				<TabsList>
					<TabsTrigger value="account">Account</TabsTrigger>
					<TabsTrigger value="password">Password</TabsTrigger>
				</TabsList>
				<TabsContent value="account">
					<Card>
						<CardHeader>
							<CardTitle>Account</CardTitle>
							<CardDescription>
								Make changes to your account here. Click save when you&apos;re
								done.
							</CardDescription>
						</CardHeader>
						<CardContent className="gap-friends grid">
							<Field>
								<FieldLabel htmlFor="tabs-demo-name">Name</FieldLabel>
								<Input id="tabs-demo-name" defaultValue="Nerdfish" />
							</Field>
							<Field>
								<FieldLabel htmlFor="tabs-demo-username">Username</FieldLabel>
								<Input id="tabs-demo-username" defaultValue="@nerdfish" />
							</Field>
						</CardContent>
						<CardFooter>
							<Button>Save changes</Button>
						</CardFooter>
					</Card>
				</TabsContent>
				<TabsContent value="password">
					<Card>
						<CardHeader>
							<CardTitle>Password</CardTitle>
							<CardDescription>
								Change your password here. After saving, you&apos;ll be logged
								out.
							</CardDescription>
						</CardHeader>
						<CardContent className="gap-friends grid">
							<Field>
								<FieldLabel htmlFor="tabs-demo-current">
									Current password
								</FieldLabel>
								<Input id="tabs-demo-current" type="password" />
							</Field>
							<Field>
								<FieldLabel htmlFor="tabs-demo-new">New password</FieldLabel>
								<Input id="tabs-demo-new" type="password" />
							</Field>
						</CardContent>
						<CardFooter>
							<Button>Save password</Button>
						</CardFooter>
					</Card>
				</TabsContent>
			</Tabs>
		</div>
	)
}

'use client'

import { Badge } from '@nerdfish/react/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@nerdfish/react/tabs'
import { Bell, UserRound } from 'lucide-react'

export default function TabsVariantsExample() {
	return (
		<div className="gap-casual flex flex-col">
			<Tabs
				defaultValue="profile"
				className="text-muted-foreground w-93.75 text-sm"
			>
				<TabsList variant="default" className="grid w-full grid-cols-2">
					<TabsTrigger value="profile">
						<UserRound /> Profile
					</TabsTrigger>
					<TabsTrigger value="notifications">
						<Bell />
						Notifications
						<Badge variant="destructive" className="rounded-full">
							5
						</Badge>
					</TabsTrigger>
				</TabsList>
				<TabsContent value="profile">Content for Profile</TabsContent>
				<TabsContent value="notifications">
					Content for Notifications
				</TabsContent>
			</Tabs>
			<Tabs
				defaultValue="profile"
				className="text-muted-foreground w-93.75 text-sm"
			>
				<TabsList variant="button" className="grid w-full grid-cols-2">
					<TabsTrigger value="profile">
						<UserRound /> Profile
					</TabsTrigger>
					<TabsTrigger value="notifications">
						<Bell />
						Notifications
						<Badge variant="destructive" className="rounded-full">
							5
						</Badge>
					</TabsTrigger>
				</TabsList>
				<TabsContent value="profile">Content for Profile</TabsContent>
				<TabsContent value="notifications">
					Content for Notifications
				</TabsContent>
			</Tabs>
			<Tabs
				defaultValue="profile"
				className="text-muted-foreground w-93.75 text-sm"
			>
				<TabsList variant="line" className="grid w-full grid-cols-2">
					<TabsTrigger value="profile">
						<UserRound /> Profile
					</TabsTrigger>
					<TabsTrigger value="notifications">
						<Bell />
						Notifications
						<Badge variant="destructive" className="rounded-full">
							5
						</Badge>
					</TabsTrigger>
				</TabsList>
				<TabsContent value="profile">Content for Profile</TabsContent>
				<TabsContent value="notifications">
					Content for Notifications
				</TabsContent>
			</Tabs>
		</div>
	)
}

'use client'

import { Badge } from '@nerdfish/react/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@nerdfish/react/tabs'
import { Bell, ShieldCheck, UserRound } from 'lucide-react'

export default function TabsVerticalExample() {
	return (
		<Tabs
			defaultValue="profile"
			orientation="vertical"
			className="text-foreground-muted border-border flex w-125 max-w-[calc(100vw-3rem)] flex-row justify-stretch gap-4 rounded-lg border p-4 text-sm"
		>
			<div className="w-43.75 shrink-0">
				<TabsList
					variant="button"
					className="gap-bff! flex flex-col items-stretch *:justify-start"
				>
					<TabsTrigger value="profile">
						<UserRound /> Profile
					</TabsTrigger>
					<TabsTrigger value="security">
						<ShieldCheck /> Security
					</TabsTrigger>
					<TabsTrigger value="notifications">
						<Bell /> Notifications
						<Badge variant="destructive">5</Badge>
					</TabsTrigger>
				</TabsList>
			</div>

			<div className="border-border ms-4 grow border-s py-0 ps-4">
				<TabsContent value="profile" className="mt-2!">
					Content for Profile
				</TabsContent>
				<TabsContent value="security" className="mt-2!">
					Content for Security
				</TabsContent>
				<TabsContent value="notifications" className="mt-2!">
					Content for Notifications
				</TabsContent>
			</div>
		</Tabs>
	)
}