56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { X } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
/** A minimal centered modal dialog. Closes on overlay click and Escape. */
|
|
export function Modal({
|
|
open,
|
|
onClose,
|
|
title,
|
|
children,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
React.useEffect(() => {
|
|
if (!open) return;
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") onClose();
|
|
};
|
|
document.addEventListener("keydown", onKey);
|
|
return () => document.removeEventListener("keydown", onKey);
|
|
}, [open, onClose]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="w-full max-w-lg rounded-2xl border border-border bg-card shadow-xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between border-b border-border px-5 py-4">
|
|
<h2 className="text-base font-semibold text-foreground">{title}</h2>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onClose}
|
|
aria-label="Close"
|
|
className="size-8 px-0"
|
|
>
|
|
<X className="size-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="px-5 py-4">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|