Tabs

import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from "@/components/optics/tabs";import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/optics/card";import { Input } from "@/components/optics/input";import { Label } from "@/components/optics/label";import { Button } from "@/components/optics/button";<Tabs  className="w-full max-w-sm"  defaultValue="account">  <TabsList variant="default">    <TabsTrigger value="account">      Account    </TabsTrigger>    <TabsTrigger value="password">      Password    </TabsTrigger>  </TabsList>  <Card className="shadow-none! py-0">    <TabsContents className="py-4">      <TabsContent        className="flex flex-col gap-6"        value="account"      >        <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              defaultValue="Pedro Duarte"              id="tabs-demo-name"            />          </div>        </CardContent>        <CardFooter>          <Button>            Save changes          </Button>        </CardFooter>      </TabsContent>      <TabsContent        className="flex flex-col gap-6"        value="password"      >        <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>      </TabsContent>    </TabsContents>  </Card></Tabs>