96e52666c5
=== NEW === - studio/ — MCPEngine Studio scaffold (Next.js monorepo, build plan) - docs/FACTORY-V2.md — Factory v2 architecture doc - docs/CALENDLY_MCP_BUILD_SUMMARY.md — Calendly MCP build report === UPDATED SERVERS === - fieldedge: Added jobs-tools, UI build script, main entry update - lightspeed: Updated main + server entry points - squarespace: Added collection-browser + page-manager apps - toast: Added main + server entry points === INFRA === - infra/command-center/state.json — Updated pipeline state - infra/command-center/FACTORY-V2.md — Factory v2 operator playbook
109 lines
2.8 KiB
TypeScript
109 lines
2.8 KiB
TypeScript
'use client';
|
|
import React, { useEffect, useRef } from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
export interface ModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const Modal: React.FC<ModalProps> = ({
|
|
open,
|
|
onClose,
|
|
title,
|
|
children,
|
|
footer,
|
|
className,
|
|
}) => {
|
|
const overlayRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Close on Escape
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const handler = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
document.addEventListener('keydown', handler);
|
|
return () => document.removeEventListener('keydown', handler);
|
|
}, [open, onClose]);
|
|
|
|
// Lock body scroll
|
|
useEffect(() => {
|
|
if (open) {
|
|
document.body.style.overflow = 'hidden';
|
|
return () => {
|
|
document.body.style.overflow = '';
|
|
};
|
|
}
|
|
}, [open]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
ref={overlayRef}
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
onClick={(e) => {
|
|
if (e.target === overlayRef.current) onClose();
|
|
}}
|
|
>
|
|
{/* Backdrop */}
|
|
<div
|
|
className={clsx(
|
|
'absolute inset-0 bg-black/60 backdrop-blur-sm',
|
|
'animate-[fadeIn_0.15s_ease-out]',
|
|
)}
|
|
/>
|
|
|
|
{/* Panel */}
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={title}
|
|
className={twMerge(
|
|
clsx(
|
|
'relative z-10 w-full max-w-lg',
|
|
'bg-gray-900 border border-gray-700 rounded-2xl shadow-2xl shadow-black/40',
|
|
'animate-[scaleIn_0.2s_ease-out]',
|
|
'flex flex-col max-h-[85vh]',
|
|
),
|
|
className,
|
|
)}
|
|
>
|
|
{/* Header */}
|
|
{title && (
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-800">
|
|
<h2 className="text-lg font-semibold text-gray-100">{title}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-500 hover:text-gray-300 transition-colors rounded-lg p-1 hover:bg-gray-800"
|
|
aria-label="Close modal"
|
|
>
|
|
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Body */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
|
|
|
|
{/* Footer */}
|
|
{footer && (
|
|
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-800">
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Modal.displayName = 'Modal';
|