Alert dialog

import { Button } from "@moodinary/ui/components/button";
import { ConfirmDialog } from "@moodinary/ui/components/confirm-dialog";
import { useCallback, useState } from "react";

export default function DeleteTeam() {
	const [open, setOpen] = useState(false);
	const show = useCallback(() => setOpen(true), []);
	const confirm = useCallback(() => setOpen(false), []);
	return (
		<>
			<Button onClick={show} variant="danger">
				Eliminar equipo
			</Button>
			<ConfirmDialog
				confirmLabel="Eliminar"
				description={
					<>
						Se va a eliminar el equipo <strong>Equipo Ventas</strong>. Sus
						miembros van a quedar sin equipo asignado.
					</>
				}
				onConfirm={confirm}
				onOpenChange={setOpen}
				open={open}
				pendingLabel="Eliminando…"
				title="Eliminar equipo"
			/>
		</>
	);
}

import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@moodinary/ui/components/alert-dialog";
import { Button } from "@moodinary/ui/components/button";

export default function LibraryAlertDialog() {
	return (
		<AlertDialog>
			<AlertDialogTrigger render={<Button variant="danger" />}>
				Descartar borrador
			</AlertDialogTrigger>
			<AlertDialogContent>
				<AlertDialogHeader>
					<AlertDialogTitle>¿Descartar el borrador?</AlertDialogTitle>
					<AlertDialogDescription>
						Vas a perder los cambios de este borrador. Es un ejemplo de
						biblioteca, no una acción de la app.
					</AlertDialogDescription>
				</AlertDialogHeader>
				<AlertDialogFooter>
					<AlertDialogCancel />
					<AlertDialogAction>Descartar</AlertDialogAction>
				</AlertDialogFooter>
			</AlertDialogContent>
		</AlertDialog>
	);
}