File size: 2,815 Bytes
88da18c | 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 | import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/utils/helpers';
interface ModalProps {
isOpen: boolean;
onClose: () => void;
title?: string;
children: React.ReactNode;
size?: 'sm' | 'md' | 'lg' | 'xl';
closeButton?: boolean;
}
const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
(
{
isOpen,
onClose,
title,
children,
size = 'md',
closeButton = true,
},
ref
) => {
const sizes = {
sm: 'max-w-sm',
md: 'max-w-md',
lg: 'max-w-lg',
xl: 'max-w-2xl',
};
return (
<AnimatePresence>
{isOpen && (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
className="fixed inset-0 bg-black/50 z-40"
/>
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
<motion.div
ref={ref}
initial={{ opacity: 0, scale: 0.95, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 20 }}
className={cn(
'bg-slate-900 border border-emerald-500/10 rounded-xl shadow-2xl pointer-events-auto overflow-hidden max-h-[calc(100vh-2rem)] flex flex-col',
sizes[size],
'w-full'
)}
>
{title && (
<div className="border-b border-slate-700 px-6 py-4 flex items-center justify-between">
<h2 className="text-xl font-semibold text-slate-50">
{title}
</h2>
{closeButton && (
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
onClick={onClose}
className="text-slate-400 hover:text-slate-200 transition-colors"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
</svg>
</motion.button>
)}
</div>
)}
<div className="p-6 overflow-y-auto flex-1 overscroll-contain">
{children}
</div>
</motion.div>
</div>
</>
)}
</AnimatePresence>
);
}
);
Modal.displayName = 'Modal';
export default Modal;
|