Dialog

import { UserPlusIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import {  Dialog,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog"import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"import { Input } from "@/components/ui/input"import { Textarea } from "@/components/ui/textarea"
export default function DialogBasic() {  return (    <Dialog>      <DialogTrigger render={<Button variant="outline" />}>        <UserPlusIcon data-icon="inline-start" />        Invite teammates      </DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Invite teammates to Halcyon</DialogTitle>          <DialogDescription>            They get access to every shared project. You can change roles later in Settings.          </DialogDescription>        </DialogHeader>        <FieldGroup className="gap-4">          <Field>            <FieldLabel>Email addresses</FieldLabel>            <Input placeholder="priya@halcyon.dev, tom@halcyon.dev" />            <FieldDescription>Separate addresses with a comma.</FieldDescription>          </Field>          <Field>            <FieldLabel>Personal note</FieldLabel>            <Textarea              rows={3}              defaultValue="Hey, we're moving the roadmap into Relay this week. Join us here."            />          </Field>        </FieldGroup>        <DialogFooter>          <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>          <Button>Send invites</Button>        </DialogFooter>      </DialogContent>    </Dialog>  )}

import { Button } from "@/components/ui/button"import {  Dialog,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog"
const sizes = [  {    size: "sm",    label: "Small",    title: "Rename view",    description: "Views are shared with everyone in the workspace.",  },  {    size: "default",    label: "Default",    title: "Move 3 issues",    description: "Choose a project. Labels and assignees stay the same, cycles are cleared.",  },  {    size: "lg",    label: "Large",    title: "Connect a data source",    description:      "Relay reads from your warehouse on a schedule. Nothing is written back, and you can disconnect at any time from Settings.",  },] as const
export default function DialogSizes() {  return (    <div className="flex flex-wrap items-center justify-center gap-3">      {sizes.map((s) => (        <Dialog key={s.size}>          <DialogTrigger render={<Button variant="outline" />}>{s.label}</DialogTrigger>          <DialogContent size={s.size}>            <DialogHeader>              <DialogTitle>{s.title}</DialogTitle>              <DialogDescription>{s.description}</DialogDescription>            </DialogHeader>            <DialogFooter>              <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>              <Button>Continue</Button>            </DialogFooter>          </DialogContent>        </Dialog>      ))}    </div>  )}

import { Button } from "@/components/ui/button"import {  Dialog,  DialogBody,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog"
const notes = [  {    title: "Saved views for every team",    body: "Pin a filter set to the sidebar and share it with your team. Views keep their sort order, grouping and visible columns.",  },  {    title: "Faster search",    body: "Search now returns results in under 80 ms on workspaces with up to two million issues. Typos are forgiven and recent items rank first.",  },  {    title: "SLA timers on tickets",    body: "Set a first response and a resolution target per priority. Tickets that are about to breach move to the top of the inbox.",  },  {    title: "Bulk edit from the keyboard",    body: "Select rows with Shift and the arrow keys, then press E to change status, assignee or labels for all of them at once.",  },  {    title: "Audit log export",    body: "Admins on the Business plan can export the full audit log as CSV for any date range in the last 13 months.",  },  {    title: "Fixes",    body: "Attachments over 25 MB no longer fail silently. Mentions in code blocks stop sending notifications. The Slack bot keeps thread context after edits.",  },]
export default function DialogScrolling() {  return (    <Dialog>      <DialogTrigger render={<Button variant="outline" />}>What's new</DialogTrigger>      <DialogContent size="lg" className="max-h-[min(36rem,calc(100dvh-2rem))]">        <DialogHeader>          <DialogTitle>Relay 4.2 release notes</DialogTitle>          <DialogDescription>Shipped on October 14. Rolling out to all workspaces this week.</DialogDescription>        </DialogHeader>        <DialogBody className="divide-y gap-0">          {notes.map((n) => (            <section key={n.title} className="flex flex-col gap-1 py-4 first:pt-0 last:pb-0">              <h3 className="text-sm font-medium text-foreground">{n.title}</h3>              <p className="text-sm text-muted-foreground">{n.body}</p>            </section>          ))}        </DialogBody>        <DialogFooter>          <Button variant="link" className="mr-auto">            Read the changelog          </Button>          <DialogClose render={<Button />}>Got it</DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  )}