55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { X } from "lucide-react";
|
|
|
|
interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function Modal({ isOpen, onClose, title, children, footer, className }: ModalProps) {
|
|
const overlayRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") onClose();
|
|
};
|
|
if (isOpen) document.addEventListener("keydown", handleKey);
|
|
return () => document.removeEventListener("keydown", handleKey);
|
|
}, [isOpen, onClose]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
ref={overlayRef}
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
|
|
onClick={(e) => e.target === overlayRef.current && onClose()}
|
|
>
|
|
<div className={cn("w-full max-w-lg rounded-xl bg-white shadow-xl flex flex-col max-h-[90vh]", className)}>
|
|
<div className="flex items-center justify-between border-b border-gray-100 px-6 py-4 flex-shrink-0">
|
|
<h3 className="text-base font-semibold text-gray-900">{title}</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
<div className="px-6 py-4 overflow-y-auto flex-1">{children}</div>
|
|
{footer && (
|
|
<div className="flex items-center justify-end gap-2 border-t border-gray-100 px-6 py-3 flex-shrink-0">
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|