23 lines
1.1 KiB
React
23 lines
1.1 KiB
React
// frontend/src/components/UI/Modal.jsx
|
|
|
|
import React from 'react';
|
|
import { X } from 'lucide-react';
|
|
|
|
export default function Modal({ isOpen, onClose, title, children }) {
|
|
if (!isOpen) return null;
|
|
return (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl w-full max-w-md border border-zinc-200 dark:border-zinc-800 max-h-[90vh] overflow-y-auto">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-lg font-black text-zinc-900 dark:text-white uppercase tracking-tight">{title}</h2>
|
|
<button onClick={onClose} className="text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition">
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |