Dialog

import {
	Dialog,
	DialogTrigger,
	DialogContent,
	DialogHeader,
	DialogBody,
	DialogFooter,
	DialogTitle,
	DialogDescription,
	DialogClose,
	Button,
	Input,
} from "@work-rjkashyap/unified-ui";

<Dialog>
	<DialogTrigger asChild>
		<Button>Open</Button>
	</DialogTrigger>
	<DialogContent>
		<DialogHeader>
			<DialogTitle>Dialog Title</DialogTitle>
			<DialogDescription>Optional description text.</DialogDescription>
		</DialogHeader>
		<DialogBody>
			<p>Dialog content goes here.</p>
		</DialogBody>
		<DialogFooter>
			<DialogClose asChild>
				<Button variant="secondary">Close</Button>
			</DialogClose>
		</DialogFooter>
	</DialogContent>
</Dialog>

<DialogContent>
	{/* Header — contains title and description */}
	<DialogHeader>
		<DialogTitle>Title</DialogTitle>
		<DialogDescription>Description</DialogDescription>
	</DialogHeader>

	{/* Body — scrollable main content area */}
	<DialogBody>
		<p>Content goes here.</p>
	</DialogBody>

	{/* Footer — actions, typically right-aligned */}
	<DialogFooter>
		<DialogClose asChild>
			<Button variant="secondary">Cancel</Button>
		</DialogClose>
		<Button>Save</Button>
	</DialogFooter>
</DialogContent>

const [open, setOpen] = useState(false);

<Dialog open={open} onOpenChange={setOpen}>
	<DialogTrigger asChild>
		<Button>Open</Button>
	</DialogTrigger>
	<DialogContent>
		<DialogHeader>
			<DialogTitle>Controlled Dialog</DialogTitle>
		</DialogHeader>
		<DialogBody>
			<p>This dialog is controlled externally.</p>
		</DialogBody>
		<DialogFooter>
			<Button
				variant="primary"
				onClick={() => {
					// Perform action then close
					handleSave();
					setOpen(false);
				}}
			>
				Save & Close
			</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>;

<DialogContent showClose={false}>
	<DialogHeader>
		<DialogTitle>No close button</DialogTitle>
	</DialogHeader>
	<DialogBody>
		<p>The user must use the footer actions or press Escape.</p>
	</DialogBody>
	<DialogFooter>
		<DialogClose asChild>
			<Button variant="secondary">Dismiss</Button>
		</DialogClose>
	</DialogFooter>
</DialogContent>

<Dialog>
	<DialogTrigger asChild>
		<Button>Create Project</Button>
	</DialogTrigger>
	<DialogContent>
		<DialogHeader>
			<DialogTitle>New Project</DialogTitle>
			<DialogDescription>
				Fill in the details to create a new project.
			</DialogDescription>
		</DialogHeader>
		<DialogBody>
			<form className="flex flex-col gap-4">
				<div className="flex flex-col gap-1.5">
					<label className="text-sm font-medium">Project Name</label>
					<Input placeholder="My awesome project" />
				</div>
				<div className="flex flex-col gap-1.5">
					<label className="text-sm font-medium">Description</label>
					<Textarea placeholder="What is this project about?" />
				</div>
			</form>
		</DialogBody>
		<DialogFooter>
			<DialogClose asChild>
				<Button variant="secondary">Cancel</Button>
			</DialogClose>
			<Button variant="primary">Create</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>