rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: refactor files

Browse source 
feat: refactor more files

feat: uppercase component folder 1/2

feat: uppercase component folder 2/2
This commit is contained in:
swve 2022-12-02 22:23:52 +01:00
parent a371394670
commit d361e68dc0
31 changed files with 101 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

51
front/components/modals/Modal.tsx
View file

@ -1,51 +0,0 @@
import React from "react";
import styled from "styled-components";
import { motion, AnimatePresence } from "framer-motion";
function Modal(props: any) {
return (
<div>
<Overlay>
<AnimatePresence>
<motion.div
initial={{ opacity: 0, left: "50%", top: "50%", scale: 0.9, backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
animate={{ opacity: 1, left: "50%", top: "50%", scale: 1, backdropFilter: "blur(10px)", y: 0, position: "absolute" }}
key="modal"
transition={{
type: "spring",
stiffness: 360,
damping: 70,
delay: 0.02,
}}
exit={{ opacity: 0, left: "50%", top: "46%", backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
>
<Content>{props.children}</Content>
</motion.div>
</AnimatePresence>
</Overlay>
</div>
);
}
const Overlay = styled.div`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
`;
const Content = styled.div`
background-color: white;
border-radius: 5px;
padding: 20px;
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 64px 84px 15px rgb(0 0 0 / 10%);
`;
export default Modal;