67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { X } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
/**
|
|
* A minimal modal dialog. Closes on overlay click and Escape. Centred from sm
|
|
* up; on a phone it rises from the bottom as a full-width sheet. Either way
|
|
* it never outgrows the screen — the body scrolls inside it.
|
|
*/
|
|
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-end justify-center bg-black/40 sm:items-center sm:p-4"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="flex max-h-[92dvh] w-full max-w-lg flex-col rounded-t-2xl border border-border bg-card shadow-xl sm:max-h-[85dvh] sm:rounded-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3.5 sm:px-5 sm:py-4">
|
|
<h2
|
|
title={title}
|
|
className="min-w-0 truncate 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="min-h-0 overflow-y-auto [overflow-wrap:anywhere] px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-5">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|