Spaces:
Sleeping
Sleeping
| import React from 'react'; | |
| import { motion, AnimatePresence } from 'framer-motion'; | |
| import { X } from 'lucide-react'; | |
| export const Modal = ({ isOpen, onClose, children, title }) => { | |
| return ( | |
| <AnimatePresence> | |
| {isOpen && ( | |
| <> | |
| {/* Backdrop */} | |
| <motion.div | |
| initial={{ opacity: 0 }} | |
| animate={{ opacity: 1 }} | |
| exit={{ opacity: 0 }} | |
| onClick={onClose} | |
| className="fixed inset-0 bg-brutalist-black/80 z-[100] backdrop-blur-sm" | |
| /> | |
| {/* Modal Content */} | |
| <motion.div | |
| initial={{ opacity: 0, scale: 0.95, y: 20 }} | |
| animate={{ opacity: 1, scale: 1, y: 0 }} | |
| exit={{ opacity: 0, scale: 0.95, y: 20 }} | |
| className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[101] w-full max-w-md p-4" | |
| > | |
| <div className="bg-white border-4 border-brutalist-black shadow-hard-xl relative"> | |
| {/* Header */} | |
| <div className="flex justify-between items-center bg-brutalist-black p-4 text-white"> | |
| <h3 className="font-black uppercase text-xl">{title}</h3> | |
| <button | |
| onClick={onClose} | |
| className="hover:text-brutalist-red transition-colors" | |
| > | |
| <X size={24} /> | |
| </button> | |
| </div> | |
| {/* Body */} | |
| <div className="p-6"> | |
| {children} | |
| </div> | |
| </div> | |
| </motion.div> | |
| </> | |
| )} | |
| </AnimatePresence> | |
| ); | |
| }; | |