Dialog Modal Drawer

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog-modal-drawer"

import Button from "@/demos/button"
import Input from "@/demos/input"
import Label from "@/demos/label"

export default function DialogShowcase() {
  return (
    <div className="flex flex-wrap gap-4 items-center p-6">
      
      {/* Default dialog */}
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">Edit profile</Button>
        </DialogTrigger>

        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Update your profile information. Click save when you're done.
            </DialogDescription>
          </DialogHeader>

          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="name">Name</Label>
              <Input id="name" defaultValue="John Doe" />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="username">Username</Label>
              <Input id="username" defaultValue="@johndoe" />
            </div>
          </div>

          <DialogFooter className="gap-2">
            <Button variant="outline">Cancel</Button>
            <Button>Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>


      {/* Slide-up dialog */}
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">Slide-up dialog</Button>
        </DialogTrigger>

        <DialogContent variant="slide-up">
          <DialogHeader>
            <DialogTitle>Mobile style dialog</DialogTitle>
            <DialogDescription>
              This dialog slides from the bottom and is perfect for mobile
              actions or quick confirmations.
            </DialogDescription>
          </DialogHeader>

          <div className="py-4 text-sm text-muted-foreground">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Repudiandae minima aliquid, doloribus officia voluptate
            dignissimos.
          </div>

          <DialogFooter className="gap-2">
            <Button variant="outline">Cancel</Button>
            <Button>Continue</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>


      {/* expand dialog */}
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="destructive">Delete account</Button>
        </DialogTrigger>

        <DialogContent variant="expand">
          <DialogHeader>
            <DialogTitle>Delete account</DialogTitle>
            <DialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove all associated data.
            </DialogDescription>
          </DialogHeader>

          <DialogFooter className="gap-2">
            <Button variant="outline">Cancel</Button>
            <Button variant="destructive">Confirm delete</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* drawer-right */}
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="default">Drawer-right</Button>
        </DialogTrigger>

        <DialogContent variant="drawer-right">
          <DialogHeader>
            <DialogTitle>Delete account</DialogTitle>
            <DialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove all associated data.
            </DialogDescription>
          </DialogHeader>

          <DialogFooter className="gap-2">
            <Button variant="outline">Cancel</Button>
            <Button variant="default">Confirm delete</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>


      {/* drawer-bottom dialog */}
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">Drawer-bottom Dialog</Button>
        </DialogTrigger>

        <DialogContent variant="drawer-bottom">
          <DialogHeader>
            <DialogTitle>Mobile style dialog</DialogTitle>
            <DialogDescription>
              This dialog slides from the bottom and is perfect for mobile
              actions or quick confirmations.
            </DialogDescription>
          </DialogHeader>

          <div className="py-4 text-sm text-muted-foreground">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Repudiandae minima aliquid, doloribus officia voluptate
            dignissimos.
          </div>

          <DialogFooter className="gap-2">
            <Button variant="outline">Cancel</Button>
            <Button>Continue</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

    </div>
  )
}