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 { FormDialog } 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 FormDialogDemo() {
const [open, setOpen] = useState(false);
const [formName, setFormName] = useState("");
return (
<div className="flex min-h-[320px] w-full items-center justify-center">
<button style={triggerStyle} onClick={() => setOpen(true)}>
Form
</button>
<FormDialog
open={open}
onClose={() => setOpen(false)}
title="Create workflow"
description="Name your workflow and set a refund cap."
onSubmit={() => {}}
>
<div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
<label style={{ fontSize: 12, fontWeight: 500, color: "#888888" }}>
Workflow name
</label>
<input
value={formName}
onChange={(e) => setFormName(e.target.value)}
placeholder="Refund triage"
style={{
height: 38,
padding: "0 16px",
borderRadius: 16,
border: "1.5px solid transparent",
background: "#f0f0f0",
fontSize: 13,
outline: "none",
}}
/>
</div>
<div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
<label style={{ fontSize: 12, fontWeight: 500, color: "#888888" }}>
Refund cap (USD)
</label>
<input
placeholder="2,500"
style={{
height: 38,
padding: "0 16px",
borderRadius: 16,
border: "1.5px solid transparent",
background: "#f0f0f0",
fontSize: 13,
outline: "none",
}}
/>
</div>
</FormDialog>
</div>
);
}
