"use client";

import {
  Button,
  Input,
  Label,
  Sheet,
  SheetClose,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetPanel,
  SheetPopup,
  SheetTitle,
  SheetTrigger,
} from "@countryclub/ui-react";

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Edit tee time
      </SheetTrigger>
      <SheetPopup side="right">
        <SheetHeader>
          <SheetTitle>Edit tee time</SheetTitle>
          <SheetDescription>
            Adjust your Saturday booking. Changes are confirmed by the pro
            shop.
          </SheetDescription>
        </SheetHeader>
        <SheetPanel className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="sheet-time">Tee time</Label>
            <Input defaultValue="9:40 AM" id="sheet-time" />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="sheet-players">Players</Label>
            <Input defaultValue="4" id="sheet-players" />
          </div>
        </SheetPanel>
        <SheetFooter>
          <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>
          <SheetClose render={<Button />}>Save booking</SheetClose>
        </SheetFooter>
      </SheetPopup>
    </Sheet>
  );
}
Sheet

Import

Default

Sides
