A centered modal overlay for confirmations, with form and cover-image card variants, that traps focus and closes on Escape or an outside click.
"use client";
import Dialog from "@/components/ui/halaska-dialog";
import { useState } from "react";
const triggerStyle: React.CSSProperties = {
height: 30,
padding: "0 12px",
borderRadius: 16,
border: "1.5px solid rgba(0,0,0,0.06)",
background: "transparent",
color: "#3d3d3d",
fontSize: 12,
fontWeight: 500,
fontFamily: "system-ui, sans-serif",
cursor: "pointer",
};
export default function DialogDemo() {
const [open, setOpen] = useState(false);
return (
<div className="flex min-h-[320px] w-full items-center justify-center">
<button style={triggerStyle} onClick={() => setOpen(true)}>
Dialog
</button>
<Dialog open={open} onClose={() => setOpen(false)} title="Confirm credit">
Issue a $180 credit to Acme for the outage? This posts to Stripe and
cannot be undone.
</Dialog>
</div>
);
}
