"use client";

import {
  Button,
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardPanel,
  CardTitle,
  Input,
  Label,
  Tabs,
  TabsList,
  TabsPanel,
  TabsTab,
} from "@countryclub/ui-react";

export default function TabsDemo() {
  return (
    <Tabs className="w-full max-w-sm" defaultValue="profile">
      <TabsList className="w-full">
        <TabsTab value="profile">Profile</TabsTab>
        <TabsTab value="locker">Locker</TabsTab>
      </TabsList>
      <TabsPanel value="profile">
        <Card>
          <CardHeader>
            <CardTitle>Member profile</CardTitle>
            <CardDescription>
              Update how your name appears on the tee sheet.
            </CardDescription>
          </CardHeader>
          <CardPanel className="grid gap-4">
            <div className="grid gap-2">
              <Label htmlFor="tabs-name">Name</Label>
              <Input defaultValue="Anna Whitmore" id="tabs-name" />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="tabs-handicap">Handicap</Label>
              <Input defaultValue="12.4" id="tabs-handicap" />
            </div>
          </CardPanel>
          <CardFooter>
            <Button>Save changes</Button>
          </CardFooter>
        </Card>
      </TabsPanel>
      <TabsPanel value="locker">
        <Card>
          <CardHeader>
            <CardTitle>Locker PIN</CardTitle>
            <CardDescription>
              Change the PIN for your clubhouse locker.
            </CardDescription>
          </CardHeader>
          <CardPanel className="grid gap-4">
            <div className="grid gap-2">
              <Label htmlFor="tabs-current-pin">Current PIN</Label>
              <Input id="tabs-current-pin" type="password" />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="tabs-new-pin">New PIN</Label>
              <Input id="tabs-new-pin" type="password" />
            </div>
          </CardPanel>
          <CardFooter>
            <Button>Update PIN</Button>
          </CardFooter>
        </Card>
      </TabsPanel>
    </Tabs>
  );
}
Tabs

Import

Default
