refactor: remove modal code
This commit is contained in:
@ -1,22 +0,0 @@
|
|||||||
.modal {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 42;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
display: flex;
|
|
||||||
max-width: 430px;
|
|
||||||
padding: 32px;
|
|
||||||
margin-top: auto;
|
|
||||||
margin-bottom: auto;
|
|
||||||
border-radius: 32px;
|
|
||||||
background: #171717;
|
|
||||||
}
|
|
@ -1,26 +0,0 @@
|
|||||||
import "./modal.css";
|
|
||||||
import { useEffect, MouseEventHandler, ReactNode } from "react";
|
|
||||||
|
|
||||||
export interface ModalProps {
|
|
||||||
className?: string;
|
|
||||||
onClose?: MouseEventHandler;
|
|
||||||
children: ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Modal(props: ModalProps) {
|
|
||||||
const onClose = props.onClose || (() => undefined);
|
|
||||||
const className = props.className || "";
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
document.body.classList.add("scroll-lock");
|
|
||||||
return () => document.body.classList.remove("scroll-lock");
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`modal ${className}`} onClick={onClose}>
|
|
||||||
<div className="modal-body" onClick={(e) => e.stopPropagation()}>
|
|
||||||
{props.children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
Reference in New Issue
Block a user