Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 9x 8x | import { type ReactNode } from 'react';
interface ModalProps {
open: boolean;
onClose: () => void;
title?: string;
children: ReactNode;
size?: 'sm' | 'md' | 'lg';
}
const sizeClasses: Record<string, string> = {
sm: 'max-w-sm',
md: 'max-w-md',
lg: 'max-w-2xl',
};
function Modal({ open, onClose, title, children, size = 'md' }: ModalProps) {
if (!open) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
<div className="fixed inset-0 bg-overlay-backdrop backdrop-blur-md" onClick={onClose} />
<div className={`relative w-full ${sizeClasses[size]} rounded-modal bg-white dark:bg-gray-50 shadow-modal dark:border dark:border-border p-6 animate-slide-up`}>
{title && (
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
<button
onClick={onClose}
className="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-200 text-text-secondary hover:text-text-primary transition-button"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
)}
{children}
</div>
</div>
);
}
export { Modal };
|