64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { Button } from '@workspace/ui/components/ui/button';
|
|
import { Input } from '@workspace/ui/components/ui/input';
|
|
import {
|
|
Tabs,
|
|
TabsList,
|
|
TabsTrigger,
|
|
TabsContent,
|
|
TabsContents,
|
|
} from '@/registry/components/tabs';
|
|
import { Label } from '@workspace/ui/components/ui/label';
|
|
|
|
export const TabsDemo = () => {
|
|
return (
|
|
<Tabs defaultValue="account" className="w-[400px] bg-muted rounded-lg">
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="account">Account</TabsTrigger>
|
|
<TabsTrigger value="password">Password</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContents className="mx-1 mb-1 -mt-2 rounded-sm h-full bg-background">
|
|
<TabsContent value="account" className="space-y-6 p-6">
|
|
<p className="text-sm text-muted-foreground">
|
|
Make changes to your account here. Click save when you're done.
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="name">Name</Label>
|
|
<Input id="name" defaultValue="Pedro Duarte" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="username">Username</Label>
|
|
<Input id="username" defaultValue="@peduarte" />
|
|
</div>
|
|
</div>
|
|
|
|
<Button>Save changes</Button>
|
|
</TabsContent>
|
|
<TabsContent value="password" className="space-y-6 p-6">
|
|
<p className="text-sm text-muted-foreground">
|
|
Change your password here. After saving, you'll be logged out.
|
|
</p>
|
|
<div className="space-y-3">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="current">Current password</Label>
|
|
<Input id="current" type="password" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="new">New password</Label>
|
|
<Input id="new" type="password" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="confirm">Confirm password</Label>
|
|
<Input id="confirm" type="password" />
|
|
</div>
|
|
</div>
|
|
|
|
<Button>Save password</Button>
|
|
</TabsContent>
|
|
</TabsContents>
|
|
</Tabs>
|
|
);
|
|
};
|