File size: 4,328 Bytes
88c4c60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | "use client";
import { useEffect } from "react";
import { cn } from "@/shared/utils/cn";
import Button from "./Button";
import Tooltip from "./Tooltip";
export default function Modal({
isOpen,
onClose,
title,
children,
footer,
size = "md",
closeOnOverlay = true,
showTrafficLights = true,
className,
}) {
const sizes = {
sm: "max-w-sm",
md: "max-w-md",
lg: "max-w-lg",
xl: "max-w-xl",
full: "max-w-4xl",
};
useEffect(() => {
if (isOpen) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
return () => { document.body.style.overflow = ""; };
}, [isOpen]);
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/50 backdrop-blur-[2px] fade-in"
onClick={closeOnOverlay ? onClose : undefined}
/>
{/* Modal content */}
<div
className={cn(
"relative w-full bg-surface",
"border border-border-subtle",
"rounded-[14px] shadow-[var(--shadow-elev)]",
"fade-in",
sizes[size],
className
)}
>
{/* Header */}
{(title || showTrafficLights) && (
<div className="flex items-center justify-between p-2 border-b border-border-subtle">
<div className="flex items-center">
{/* Traffic lights — desktop only */}
{showTrafficLights && (
<div className="hidden md:flex items-center gap-2 mr-4 ml-2">
<Tooltip text="Close" position="top" color="#FF5F56">
<button
onClick={onClose}
aria-label="Close"
title="Close"
className="w-4 h-4 rounded-full bg-[#FF5F56] hover:brightness-90 transition-all cursor-pointer flex items-center justify-center group/dot"
>
<span className="text-[9px] font-bold text-white opacity-0 group-hover/dot:opacity-100 transition-opacity leading-none">✕</span>
</button>
</Tooltip>
<div className="w-4 h-4 rounded-full bg-[#3a3a3a]/20 dark:bg-white/15 cursor-not-allowed" />
<div className="w-4 h-4 rounded-full bg-[#3a3a3a]/20 dark:bg-white/15 cursor-not-allowed" />
</div>
)}
{title && (
<h2 className="text-lg font-semibold text-text-main">{title}</h2>
)}
</div>
{/* X button — mobile only */}
<button
onClick={onClose}
aria-label="Close"
className="md:hidden p-1.5 rounded-[10px] text-text-muted hover:bg-surface-2 hover:text-text-main transition-colors"
>
<span className="material-symbols-outlined text-[20px]">close</span>
</button>
</div>
)}
{/* Body */}
<div className="p-6 max-h-[calc(85vh-100px)] overflow-y-auto custom-scrollbar">{children}</div>
{/* Footer */}
{footer && (
<div className="flex items-center justify-end gap-3 p-6 border-t border-border-subtle">
{footer}
</div>
)}
</div>
</div>
);
}
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>
);
}
|