Confirm Dialog

import {
	ConfirmDialog,
	AlertDialog,
	AlertDialogTrigger,
	AlertDialogContent,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogAction,
	AlertDialogCancel,
	Button,
} from "@work-rjkashyap/unified-ui";

<ConfirmDialog
	trigger={<Button variant="secondary">Archive Project</Button>}
	title="Archive this project?"
	description="The project will be hidden from your dashboard but can be restored from the settings page."
	confirmLabel="Archive"
	cancelLabel="Cancel"
	onConfirm={() => archiveProject(id)}
/>

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

<>
	<Button variant="danger" onClick={() => setOpen(true)}>
		Delete All
	</Button>
	<ConfirmDialog
		open={open}
		onOpenChange={setOpen}
		variant="danger"
		title="Delete all records?"
		description={`You are about to delete ${selectedCount} records. This cannot be undone.`}
		confirmLabel="Delete All"
		cancelLabel="Cancel"
		onConfirm={async () => {
			await deleteAll();
			setOpen(false);
		}}
		onCancel={() => setOpen(false)}
	/>
</>;

<ConfirmDialog
	trigger={<Button variant="danger">Delete Workspace</Button>}
	variant="danger"
	title="Delete workspace?"
	description="Type the workspace name to confirm deletion."
	confirmLabel="Delete Workspace"
	cancelLabel="Cancel"
>
	<div className="flex flex-col gap-1.5 mt-1">
		<label className="text-xs font-medium text-muted-foreground">
			Type <strong>my-workspace</strong> to confirm
		</label>
		<Input
			placeholder="my-workspace"
			value={confirmName}
			onChange={(e) => setConfirmName(e.target.value)}
		/>
	</div>
</ConfirmDialog>

import { useState } from "react";
import { ConfirmDialog, Button, toast } from "@work-rjkashyap/unified-ui";

function DeleteProjectButton({ projectId }: { projectId: string }) {
	const [open, setOpen] = useState(false);
	const [loading, setLoading] = useState(false);

	const handleConfirm = async () => {
		setLoading(true);
		try {
			await deleteProject(projectId);
			setOpen(false);
			toast.success("Project deleted successfully.");
		} catch {
			toast.error("Failed to delete the project. Please try again.");
		} finally {
			setLoading(false);
		}
	};

	return (
		<ConfirmDialog
			open={open}
			onOpenChange={setOpen}
			trigger={
				<Button variant="danger" size="sm">
					Delete Project
				</Button>
			}
			variant="danger"
			title="Delete this project?"
			description="All repositories, environments, and deployment history will be permanently removed."
			confirmLabel="Delete Project"
			cancelLabel="Keep Project"
			loading={loading}
			onConfirm={handleConfirm}
			onCancel={() => setOpen(false)}
		/>
	);
}

<AlertDialog>
	<AlertDialogTrigger asChild>
		<Button variant="danger">Revoke API Key</Button>
	</AlertDialogTrigger>
	<AlertDialogContent>
		<AlertDialogHeader>
			<AlertDialogTitle>Revoke API key?</AlertDialogTitle>
			<AlertDialogDescription>
				Applications using this key will stop working immediately.
				You'll need to generate a new key and update your integrations.
			</AlertDialogDescription>
		</AlertDialogHeader>
		<div className="my-3 p-3 bg-muted rounded-md font-mono text-xs text-muted-foreground">
			api_xyz_xxxxxxxxxxxxxxxxxxxxxxxxxxx
		</div>
		<AlertDialogFooter>
			<AlertDialogCancel>Cancel</AlertDialogCancel>
			<AlertDialogAction
				className="bg-danger text-danger-foreground hover:bg-danger-hover"
				onClick={revokeKey}
			>
				Revoke Key
			</AlertDialogAction>
		</AlertDialogFooter>
	</AlertDialogContent>
</AlertDialog>