55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { ReactNode, useEffect } from "react";
|
|
|
|
interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
children: ReactNode;
|
|
size?: "sm" | "md" | "lg" | "xl";
|
|
closeOnOverlayClick?: boolean;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: "max-w-md",
|
|
md: "max-w-2xl",
|
|
lg: "max-w-3xl",
|
|
xl: "max-w-4xl",
|
|
};
|
|
|
|
export default function Modal({
|
|
isOpen,
|
|
onClose,
|
|
children,
|
|
size = "md",
|
|
closeOnOverlayClick = true,
|
|
}: ModalProps) {
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = "hidden";
|
|
} else {
|
|
document.body.style.overflow = "";
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [isOpen]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
|
|
onClick={closeOnOverlayClick ? onClose : undefined}
|
|
>
|
|
<div
|
|
className={`bg-black border-2 border-pixel-gold/70 rounded-lg w-full ${sizeClasses[size]} max-h-[90vh] overflow-y-auto shadow-2xl`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|