37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { X } from 'lucide-react';
|
|
|
|
interface Props {
|
|
title: string;
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
size?: 'md' | 'lg' | 'xl';
|
|
}
|
|
|
|
export default function Modal({ title, onClose, children, size = 'md' }: Props) {
|
|
useEffect(() => {
|
|
const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
|
|
window.addEventListener('keydown', handler);
|
|
return () => window.removeEventListener('keydown', handler);
|
|
}, [onClose]);
|
|
|
|
const widths = { md: 'max-w-lg', lg: 'max-w-2xl', xl: 'max-w-4xl' };
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in"
|
|
onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
|
>
|
|
<div className={`relative w-full ${widths[size]} bg-card border border-border rounded-2xl shadow-2xl animate-slide-up`}>
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-border">
|
|
<h2 className="text-lg font-semibold text-white">{title}</h2>
|
|
<button onClick={onClose} className="p-1.5 rounded-lg hover:bg-white/5 text-muted hover:text-white transition-colors">
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
<div className="p-6">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|