"use client";

import {
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@countryclub/ui-react";

const directions = ["top", "right", "bottom", "left"] as const;

export default function DrawerDirections() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      {directions.map((direction) => (
        <Drawer direction={direction} key={direction}>
          <DrawerTrigger asChild>
            <Button className="capitalize" variant="outline">
              {direction}
            </Button>
          </DrawerTrigger>
          <DrawerContent>
            <div className="mx-auto w-full max-w-md">
              <DrawerHeader>
                <DrawerTitle className="capitalize">
                  {direction} drawer
                </DrawerTitle>
                <DrawerDescription>
                  Slides in from the {direction}. Set it with the direction prop.
                </DrawerDescription>
              </DrawerHeader>
              <DrawerFooter>
                <DrawerClose asChild>
                  <Button variant="outline">Close</Button>
                </DrawerClose>
              </DrawerFooter>
            </div>
          </DrawerContent>
        </Drawer>
      ))}
    </div>
  );
}
Drawer

Import

Default

Directions
