Tabs

import { Button } from "@ngrok/mantle/button";
import { Card, CardBody, CardFooter, CardHeader, CardTitle } from "@ngrok/mantle/card";
import { Input, PasswordInput } from "@ngrok/mantle/input";
import { TabBadge, Tabs, TabsContent, TabsList, TabsTrigger } from "@ngrok/mantle/tabs";

<Tabs orientation="horizontal" defaultValue="account" className="w-[400px]">
	<TabsList>
		<TabsTrigger value="account">
			<User />
			Account
			<TabBadge>2</TabBadge>
		</TabsTrigger>
		<TabsTrigger value="password">
			<ShieldCheck />
			Password
		</TabsTrigger>
	</TabsList>
	<TabsContent value="account">
		<Card>
			<CardHeader>
				<CardTitle>Account</CardTitle>
				<p className="text-muted">Make changes to your account here. Click save when you're done.</p>
			</CardHeader>
			<CardBody className="space-y-2">
				<div className="space-y-1">
					<label htmlFor="name">Name</label>
					<Input id="name" defaultValue="Cody Price" />
				</div>
				<div className="space-y-1">
					<label htmlFor="username">Username</label>
					<Input id="username" defaultValue="@cody-dot-js" />
				</div>
			</CardBody>
			<CardFooter>
				<Button type="button">Save changes</Button>
			</CardFooter>
		</Card>
	</TabsContent>
	<TabsContent value="password">
		<Card>
			<CardHeader>
				<CardTitle>Password</CardTitle>
				<p className="text-muted">Change your password here. After saving, you'll be logged out.</p>
			</CardHeader>
			<CardBody className="space-y-2">
				<div className="space-y-1">
					<label htmlFor="current">Current password</label>
					<PasswordInput id="current" />
				</div>
				<div className="space-y-1">
					<label htmlFor="new">New password</label>
					<PasswordInput id="new" />
				</div>
			</CardBody>
			<CardFooter>
				<Button type="button">Save password</Button>
			</CardFooter>
		</Card>
	</TabsContent>
</Tabs>