143 lines
3.6 KiB
JavaScript
143 lines
3.6 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { cn } from "@/shared/utils/cn";
|
|
import Button from "./Button";
|
|
|
|
export default function Modal({
|
|
isOpen,
|
|
onClose,
|
|
title,
|
|
children,
|
|
footer,
|
|
size = "md",
|
|
closeOnOverlay = true,
|
|
showCloseButton = true,
|
|
className,
|
|
}) {
|
|
const sizes = {
|
|
sm: "max-w-sm",
|
|
md: "max-w-md",
|
|
lg: "max-w-lg",
|
|
xl: "max-w-xl",
|
|
full: "max-w-4xl",
|
|
};
|
|
|
|
// Lock body scroll when modal is open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = "hidden";
|
|
} else {
|
|
document.body.style.overflow = "";
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [isOpen]);
|
|
|
|
// Handle escape key
|
|
useEffect(() => {
|
|
const handleEscape = (e) => {
|
|
if (e.key === "Escape" && isOpen) {
|
|
onClose();
|
|
}
|
|
};
|
|
document.addEventListener("keydown", handleEscape);
|
|
return () => document.removeEventListener("keydown", handleEscape);
|
|
}, [isOpen, onClose]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
{/* Overlay */}
|
|
<div
|
|
className="absolute inset-0 bg-black/30 backdrop-blur-sm"
|
|
onClick={closeOnOverlay ? onClose : undefined}
|
|
/>
|
|
|
|
{/* Modal content */}
|
|
<div
|
|
className={cn(
|
|
"relative w-full bg-surface",
|
|
"border border-black/10 dark:border-white/10",
|
|
"rounded-xl shadow-2xl",
|
|
"animate-in fade-in zoom-in-95 duration-200",
|
|
sizes[size],
|
|
className
|
|
)}
|
|
>
|
|
{/* Header */}
|
|
{(title || showCloseButton) && (
|
|
<div className="flex items-center justify-between p-6 border-b border-black/5 dark:border-white/5">
|
|
<div className="flex items-center">
|
|
<div className="flex items-center gap-2 mr-4">
|
|
<div className="w-3 h-3 rounded-full bg-[#FF5F56]" />
|
|
<div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
|
|
<div className="w-3 h-3 rounded-full bg-[#27C93F]" />
|
|
</div>
|
|
{title && (
|
|
<h2 className="text-lg font-semibold text-text-main">
|
|
{title}
|
|
</h2>
|
|
)}
|
|
</div>
|
|
{showCloseButton && (
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 rounded-lg text-text-muted hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
|
|
>
|
|
<span className="material-symbols-outlined text-[20px]">close</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Body */}
|
|
<div className="p-6 max-h-[calc(80vh-140px)] overflow-y-auto">{children}</div>
|
|
|
|
{/* Footer */}
|
|
{footer && (
|
|
<div className="flex items-center justify-end gap-3 p-6 border-t border-black/5 dark:border-white/5">
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Confirm Modal helper
|
|
export function ConfirmModal({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title = "Confirm",
|
|
message,
|
|
confirmText = "Confirm",
|
|
cancelText = "Cancel",
|
|
variant = "danger",
|
|
loading = false,
|
|
}) {
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={title}
|
|
size="sm"
|
|
footer={
|
|
<>
|
|
<Button variant="ghost" onClick={onClose} disabled={loading}>
|
|
{cancelText}
|
|
</Button>
|
|
<Button variant={variant} onClick={onConfirm} loading={loading}>
|
|
{confirmText}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<p className="text-text-muted">{message}</p>
|
|
</Modal>
|
|
);
|
|
}
|
|
|