Drawer Side

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerContent,
  type DrawerContentProps,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer"
import { Radio, RadioGroup } from "@/components/ui/radio"
import { Separator } from "@/components/ui/separator"

export default function DrawerSideDemo() {
  const [side, setSide] = useState("bottom")
  return (
    <>
      <RadioGroup orientation="horizontal" aria-label="Side" value={side} onChange={setSide}>
        {["top", "bottom", "left", "right"].map((side) => (
          <Radio key={side} className="capitalize" value={side}>
            {side}
          </Radio>
        ))}
      </RadioGroup>
      <Separator className="my-6 h-px w-full" />
      <Drawer>
        <Button intent="outline" className="capitalize">
          {side}
        </Button>
        <DrawerContent side={side as DrawerContentProps["side"]}>
          <DrawerHeader>
            <DrawerTitle className="capitalize">{side}</DrawerTitle>
            <DrawerDescription>
              The drawer will be positioned on the {side} side of the screen.
            </DrawerDescription>
          </DrawerHeader>
        </DrawerContent>
      </Drawer>
    </>
  )
}