Shadcn Dialog

"use client"import { Button } from "~/components/ui/button"import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "~/components/ui/dialog"import { Input } from "~/components/ui/input"import { Label } from "~/components/ui/label"export default function DialogDemo() {  return (    <div className="w-full p-6 flex justify-center">      <Dialog>        <DialogTrigger asChild>          <Button variant="outline">Edit Profile</Button>        </DialogTrigger>        <DialogContent className="sm:max-w-[425px]">          <DialogHeader>            <DialogTitle>Edit profile</DialogTitle>            <DialogDescription>              Make changes to your profile here. Click save when you're done.            </DialogDescription>          </DialogHeader>          <div className="grid gap-4 py-4">            <div className="grid grid-cols-4 items-center gap-4">              <Label className="text-right" htmlFor="name">                Name              </Label>              <Input className="col-span-3" defaultValue="Pedro Duarte" id="name" />            </div>            <div className="grid grid-cols-4 items-center gap-4">              <Label className="text-right" htmlFor="username">                Username              </Label>              <Input className="col-span-3" defaultValue="@peduarte" id="username" />            </div>          </div>          <DialogFooter>            <Button type="submit">Save changes</Button>          </DialogFooter>        </DialogContent>      </Dialog>    </div>  )}

"use client"import { Button } from "~/components/ui/button"import {  Dialog,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,  DialogTrigger,} from "~/components/ui/dialog"export default function DialogSimple() {  return (    <div className="w-full p-6 flex justify-center">      <Dialog>        <DialogTrigger asChild>          <Button>Open Dialog</Button>        </DialogTrigger>        <DialogContent>          <DialogHeader>            <DialogTitle>Are you absolutely sure?</DialogTitle>            <DialogDescription>              This action cannot be undone. This will permanently delete your account and remove              your data from our servers.            </DialogDescription>          </DialogHeader>        </DialogContent>      </Dialog>    </div>  )}

"use client"import * as React from "react"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"export default function DialogWithForm() {  const [open, setOpen] = React.useState(false)  const handleSubmit = (event: React.FormEvent) => {    event.preventDefault()    // Handle form submission    console.log("Form submitted")    setOpen(false)  }  return (    <div className="w-full p-6 flex justify-center">      <Dialog onOpenChange={setOpen} open={open}>        <DialogTrigger asChild>          <Button variant="outline">Open Form Dialog</Button>        </DialogTrigger>        <DialogContent className="sm:max-w-[425px]">          <form onSubmit={handleSubmit}>            <DialogHeader>              <DialogTitle>Edit profile</DialogTitle>              <DialogDescription>                Make changes to your profile here. Click save when you're done.              </DialogDescription>            </DialogHeader>            <div className="grid gap-4 py-4">              <div className="grid gap-2">                <Label htmlFor="name-form">Name</Label>                <Input defaultValue="Pedro Duarte" id="name-form" name="name" required />              </div>              <div className="grid gap-2">                <Label htmlFor="username-form">Username</Label>                <Input defaultValue="@peduarte" id="username-form" name="username" required />              </div>            </div>            <DialogFooter>              <DialogClose asChild>                <Button type="button" variant="outline">                  Cancel                </Button>              </DialogClose>              <Button type="submit">Save changes</Button>            </DialogFooter>          </form>        </DialogContent>      </Dialog>    </div>  )}

"use client"import { Check, Copy } from "lucide-react"import * as React from "react"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"export default function DialogShare() {  const [copied, setCopied] = React.useState(false)  const shareUrl = "https://ui.shadcn.com/docs/installation"  const copyToClipboard = () => {    navigator.clipboard.writeText(shareUrl)    setCopied(true)    setTimeout(() => setCopied(false), 2000)  }  return (    <div className="w-full p-6 flex justify-center">      <Dialog>        <DialogTrigger asChild>          <Button variant="outline">Share</Button>        </DialogTrigger>        <DialogContent className="sm:max-w-md">          <DialogHeader>            <DialogTitle>Share link</DialogTitle>            <DialogDescription>              Anyone who has this link will be able to view this.            </DialogDescription>          </DialogHeader>          <div className="flex items-center space-x-2">            <div className="grid flex-1 gap-2">              <Label className="sr-only" htmlFor="link">                Link              </Label>              <Input defaultValue={shareUrl} id="link" readOnly />            </div>            <Button className="px-3" onClick={copyToClipboard} size="sm" type="button">              <span className="sr-only">Copy</span>              {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}            </Button>          </div>          <DialogFooter className="sm:justify-start">            <DialogClose asChild>              <Button type="button" variant="secondary">                Close              </Button>            </DialogClose>          </DialogFooter>        </DialogContent>      </Dialog>    </div>  )}

"use client"import { Button } from "~/components/ui/button"import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "~/components/ui/dialog"import { ScrollArea } from "~/components/ui/scroll-area"export default function DialogScrollable() {  return (    <div className="w-full p-6 flex justify-center">      <Dialog>        <DialogTrigger asChild>          <Button variant="outline">View Terms</Button>        </DialogTrigger>        <DialogContent className="max-h-[80vh]">          <DialogHeader>            <DialogTitle>Terms of Service</DialogTitle>            <DialogDescription>Please read our terms of service carefully.</DialogDescription>          </DialogHeader>          <ScrollArea className="h-[400px] w-full rounded-md border p-4">            <div className="space-y-4">              <div>                <h4 className="font-medium">1. Acceptance of Terms</h4>                <p className="text-sm text-muted-foreground">                  By accessing and using this service, you accept and agree to be bound by the terms                  and provision of this agreement. If you do not agree to abide by the above, please                  do not use this service.                </p>              </div>              <div>                <h4 className="font-medium">2. Use License</h4>                <p className="text-sm text-muted-foreground">                  Permission is granted to temporarily download one copy of the materials                  (information or software) on our service for personal, non-commercial transitory                  viewing only. This is the grant of a license, not a transfer of title.                </p>              </div>              <div>                <h4 className="font-medium">3. Disclaimer</h4>                <p className="text-sm text-muted-foreground">                  The materials on our service are provided on an 'as is' basis. We make no                  warranties, expressed or implied, and hereby disclaim and negate all other                  warranties including, without limitation, implied warranties or conditions of                  merchantability, fitness for a particular purpose, or non-infringement of                  intellectual property or other violation of rights.                </p>              </div>              <div>                <h4 className="font-medium">4. Limitations</h4>                <p className="text-sm text-muted-foreground">                  In no event shall our company or its suppliers be liable for any damages                  (including, without limitation, damages for loss of data or profit, or due to                  business interruption) arising out of the use or inability to use the materials on                  our service, even if we or our authorized representative has been notified orally                  or in writing of the possibility of such damage.                </p>              </div>              <div>                <h4 className="font-medium">5. Privacy Policy</h4>                <p className="text-sm text-muted-foreground">                  Your privacy is important to us. Our privacy policy explains how we collect, use,                  and protect your information when you use our service. By using our service, you                  agree to the collection and use of information in accordance with our privacy                  policy.                </p>              </div>              <div>                <h4 className="font-medium">6. Governing Law</h4>                <p className="text-sm text-muted-foreground">                  These terms and conditions are governed by and construed in accordance with the                  laws of the country in which the company is registered and you irrevocably submit                  to the exclusive jurisdiction of the courts in that State or location.                </p>              </div>            </div>          </ScrollArea>          <DialogFooter>            <Button type="submit">Accept Terms</Button>          </DialogFooter>        </DialogContent>      </Dialog>    </div>  )}

"use client"import { X } from "lucide-react"import { Button } from "~/components/ui/button"import {  Dialog,  DialogClose,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,  DialogTrigger,} from "~/components/ui/dialog"export default function DialogCustomClose() {  return (    <div className="w-full p-6 flex justify-center">      <Dialog>        <DialogTrigger asChild>          <Button variant="outline">Open Modal</Button>        </DialogTrigger>        <DialogContent className="sm:max-w-md" showCloseButton={false}>          <DialogHeader>            <DialogTitle>Custom Close Button</DialogTitle>            <DialogDescription>              This dialog has a custom close button in the header.            </DialogDescription>          </DialogHeader>          <DialogClose asChild>            <Button              className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"              size="icon"              variant="ghost"            >              <X className="h-4 w-4" />              <span className="sr-only">Close</span>            </Button>          </DialogClose>          <div className="py-6">            <p className="text-sm text-muted-foreground">              You can customize the close button position and style to match your design needs.            </p>          </div>        </DialogContent>      </Dialog>    </div>  )}

"use client"import { Button } from "~/components/ui/button"import {  ContextMenu,  ContextMenuContent,  ContextMenuItem,  ContextMenuTrigger,} from "~/components/ui/context-menu"import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "~/components/ui/dialog"export default function DialogWithContextMenu() {  return (    <div className="w-full p-6 flex justify-center">      <Dialog>        <ContextMenu>          <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">            Right click here          </ContextMenuTrigger>          <ContextMenuContent>            <ContextMenuItem>Open</ContextMenuItem>            <ContextMenuItem>Download</ContextMenuItem>            <DialogTrigger asChild>              <ContextMenuItem>                <span>Delete</span>              </ContextMenuItem>            </DialogTrigger>          </ContextMenuContent>        </ContextMenu>        <DialogContent>          <DialogHeader>            <DialogTitle>Are you absolutely sure?</DialogTitle>            <DialogDescription>              This action cannot be undone. Are you sure you want to permanently delete this file              from our servers?            </DialogDescription>          </DialogHeader>          <DialogFooter>            <Button type="submit" variant="destructive">              Confirm Delete            </Button>          </DialogFooter>        </DialogContent>      </Dialog>    </div>  )}