81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { AppWindowIcon, CodeIcon } from "lucide-react"
|
|
|
|
import { Button } from "@/registry/new-york-v4/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/new-york-v4/ui/card"
|
|
import { Input } from "@/registry/new-york-v4/ui/input"
|
|
import { Label } from "@/registry/new-york-v4/ui/label"
|
|
import {
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from "@/registry/new-york-v4/ui/tabs"
|
|
|
|
export default function TabsDemo() {
|
|
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're
|
|
done.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-6">
|
|
<div className="grid gap-3">
|
|
<Label htmlFor="tabs-demo-name">Name</Label>
|
|
<Input id="tabs-demo-name" defaultValue="Pedro Duarte" />
|
|
</div>
|
|
<div className="grid gap-3">
|
|
<Label htmlFor="tabs-demo-username">Username</Label>
|
|
<Input id="tabs-demo-username" defaultValue="@peduarte" />
|
|
</div>
|
|
</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'll be logged
|
|
out.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-6">
|
|
<div className="grid gap-3">
|
|
<Label htmlFor="tabs-demo-current">Current password</Label>
|
|
<Input id="tabs-demo-current" type="password" />
|
|
</div>
|
|
<div className="grid gap-3">
|
|
<Label htmlFor="tabs-demo-new">New password</Label>
|
|
<Input id="tabs-demo-new" type="password" />
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button>Save password</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|