Dialog

---
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
---

<Dialog>
  <DialogTrigger variant="outline">Edit Profile</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save when you're done.
      </DialogDescription>
    </DialogHeader>
    <div class="grid gap-4">
      <div class="grid gap-2">
        <Label for="dialog-name">Name</Label>
        <Input id="dialog-name" value="Pedro Duarte" />
      </div>
      <div class="grid gap-2">
        <Label for="dialog-username">Username</Label>
        <Input id="dialog-username" value="@peduarte" />
      </div>
    </div>
    <DialogFooter>
      <DialogClose variant="outline">Cancel</DialogClose>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

---
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
---

<Dialog>
  <DialogTrigger variant="outline">Open Custom Dialog</DialogTrigger>
  <DialogContent showCloseButton={false}>
    <DialogHeader>
      <DialogTitle>Share project</DialogTitle>
      <DialogDescription>
        Invite a teammate or copy the share link below.
      </DialogDescription>
    </DialogHeader>
    <div class="rounded-lg border p-4 text-sm">
      https://ui.full.dev/project/acme-studio
    </div>
    <DialogFooter>
      <DialogClose variant="outline">Not now</DialogClose>
      <Button>Copy link</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

---
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
---

<Dialog data-close-on-click-outside="false" data-close-on-escape="false">
  <DialogTrigger variant="outline">Open Blocking Dialog</DialogTrigger>
  <DialogContent showCloseButton={false}>
    <DialogHeader>
      <DialogTitle>Processing payment</DialogTitle>
      <DialogDescription>
        Please wait while we confirm your payment details.
      </DialogDescription>
    </DialogHeader>
    <div class="rounded-lg border p-4 text-sm">
      Do not close this window until the request completes.
    </div>
  </DialogContent>
</Dialog>

---
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
---

<Dialog>
  <DialogTrigger variant="outline">Open Sticky Footer</DialogTrigger>
  <DialogContent
    class="grid max-h-[min(85vh,42rem)] grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overflow-hidden p-0"
  >
    <DialogHeader class="border-b px-6 pt-6 pb-4">
      <DialogTitle>Review document</DialogTitle>
      <DialogDescription>
        The actions stay visible while the content area scrolls.
      </DialogDescription>
    </DialogHeader>
    <div class="min-h-0 overflow-y-auto px-6 py-4">
      <div class="text-muted-foreground grid gap-4 text-sm">
        <p>
          Section 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <p>
          Section 2. Sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua.
        </p>
        <p>
          Section 3. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris.
        </p>
        <p>
          Section 4. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum.
        </p>
        <p>
          Section 5. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa.
        </p>
        <p>
          Section 6. Curabitur blandit tempus porttitor. Integer posuere erat a
          ante venenatis.
        </p>
        <p>Section 7. Aenean lacinia bibendum nulla sed consectetur.</p>
        <p>
          Section 8. Cras justo odio, dapibus ac facilisis in, egestas eget
          quam.
        </p>
        <p>
          Section 9. Morbi leo risus, porta ac consectetur ac, vestibulum at
          eros.
        </p>
        <p>Section 10. Vestibulum id ligula porta felis euismod semper.</p>
      </div>
    </div>
    <DialogFooter class="border-t px-6 py-4">
      <DialogClose variant="outline">Cancel</DialogClose>
      <Button>Approve</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>