- Fix icon naming: remove 'Icon' suffix from MUI icon components in Header.tsx (AccessTime, Close, Person, School, Schedule, Class, Book, Settings, Student, Login, Logout) - Update timetable components to use UserContext instead of ProfileContext - Fix timetableService naming collision and circular reference - Update various components for consistency
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import Close from '@mui/icons-material/Close';
|
|
|
|
interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
maxWidth?: string;
|
|
}
|
|
|
|
const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, maxWidth = 'max-w-lg' }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
|
<div className="flex min-h-screen items-center justify-center p-4 text-center sm:p-0">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal panel */}
|
|
<div className={`relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full ${maxWidth}`}>
|
|
{/* Header */}
|
|
<div className="bg-gray-50 px-4 py-3 sm:px-6 flex items-center justify-between border-b border-gray-200">
|
|
<h3 className="text-lg font-medium leading-6 text-gray-900">
|
|
{title}
|
|
</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
|
>
|
|
<Close sx={{ fontSize: 20 }} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="px-4 py-5 sm:p-6">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Modal;
|