Tabs

import { Button } from "@ngrok/mantle/button";
import { Card } from "@ngrok/mantle/card";
import { Icon } from "@ngrok/mantle/icon";
import { Input, PasswordInput } from "@ngrok/mantle/input";
import { Tabs } from "@ngrok/mantle/tabs";

<Tabs.Root
	appearance="classic"
	orientation="horizontal"
	defaultValue="account"
	className="w-[400px]"
>
	<Tabs.List>
		<Tabs.Trigger value="account">
			<Icon svg={<UserIcon />} />
			Account
			<Tabs.Badge>2</Tabs.Badge>
		</Tabs.Trigger>
		<Tabs.Trigger value="password">
			<Icon svg={<ShieldCheckIcon />} />
			Password
		</Tabs.Trigger>
	</Tabs.List>
	<Tabs.Content value="account">
		<Card.Root>
			<Card.Header>
				<Card.Title>Account</Card.Title>
				<p className="text-muted">
					Make changes to your account here. Click save when you're done.
				</p>
			</Card.Header>
			<Card.Body 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>
			</Card.Body>
			<Card.Footer>
				<Button type="button">Save changes</Button>
			</Card.Footer>
		</Card.Root>
	</Tabs.Content>
	<Tabs.Content value="password">
		<Card.Root>
			<Card.Header>
				<Card.Title>Password</Card.Title>
				<p className="text-muted">Change your password here. After saving, you'll be logged out.</p>
			</Card.Header>
			<Card.Body 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>
			</Card.Body>
			<Card.Footer>
				<Button type="button">Save password</Button>
			</Card.Footer>
		</Card.Root>
	</Tabs.Content>
</Tabs.Root>;

import { Icon } from "@ngrok/mantle/icon";
import { Tabs } from "@ngrok/mantle/tabs";

<Tabs.Root orientation="horizontal" defaultValue="getting-started">
	<Tabs.List>
		<Tabs.Trigger value="getting-started">
			<Icon svg={<RocketLaunchIcon />} />
			Getting Started
		</Tabs.Trigger>
		<Tabs.Trigger value="traffic-policy">
			<Icon svg={<ArrowsSplitIcon />} />
			Traffic Policy
		</Tabs.Trigger>
		{/* ... more tabs */}
	</Tabs.List>
</Tabs.Root>;

import { Card } from "@ngrok/mantle/card";
import { Icon } from "@ngrok/mantle/icon";
import { Tabs } from "@ngrok/mantle/tabs";

<Tabs.Root appearance="pill" orientation="horizontal" defaultValue="account">
	<Tabs.List>
		<Tabs.Trigger value="account">
			<Icon svg={<UserIcon />} />
			Account
			<Tabs.Badge>2</Tabs.Badge>
		</Tabs.Trigger>
		<Tabs.Trigger value="password">
			<Icon svg={<ShieldCheckIcon />} />
			Password
		</Tabs.Trigger>
	</Tabs.List>
	<Tabs.Content value="account">
		<Card.Root>
			<Card.Header>
				<Card.Title>Account</Card.Title>
			</Card.Header>
		</Card.Root>
	</Tabs.Content>
</Tabs.Root>;