49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Modal as MuiModal, Box, Typography, IconButton } from '@mui/material';
|
|
import { Close } from '@mui/icons-material';
|
|
import styled from 'styled-components';
|
|
|
|
const ModalContent = styled(Box)`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
width: 80%;
|
|
max-width: 600px;
|
|
`;
|
|
|
|
const ModalHeader = styled(Box)`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
`;
|
|
|
|
interface ModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const Modal: React.FC<ModalProps> = ({ open, onClose, title, children }) => {
|
|
return (
|
|
<MuiModal open={open} onClose={onClose}>
|
|
<ModalContent>
|
|
<ModalHeader>
|
|
<Typography variant="h6">{title}</Typography>
|
|
<IconButton onClick={onClose}>
|
|
<Close />
|
|
</IconButton>
|
|
</ModalHeader>
|
|
{children}
|
|
</ModalContent>
|
|
</MuiModal>
|
|
);
|
|
};
|
|
|
|
export default Modal; |