105 lines
4.7 KiB
JavaScript
105 lines
4.7 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Box, HStack, Text, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent, Button
|
|
} from '@chakra-ui/react';
|
|
import { motion } from 'framer-motion';
|
|
import SecondaryButton from '../Buttons/SecondaryButton';
|
|
import PrimaryButton from '../Buttons/PrimaryButton';
|
|
|
|
// Define motion components
|
|
const MotionBox = motion(Box);
|
|
const MotionSvg = motion("svg");
|
|
const MotionCircle = motion.circle;
|
|
const MotionPolyline = motion.polyline;
|
|
|
|
const SuccessModal = ({isOpen,onClose}) => {
|
|
|
|
return (
|
|
<>
|
|
<Modal isOpen={isOpen} onClose={onClose} isCentered>
|
|
<ModalOverlay />
|
|
<ModalContent>
|
|
<ModalHeader></ModalHeader>
|
|
<ModalCloseButton />
|
|
<ModalBody>
|
|
<MotionBox
|
|
textAlign="center"
|
|
initial={{ scale: 0.5, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 0.5, type: "spring", stiffness: 300 }}
|
|
mb={8}
|
|
>
|
|
{/* svg with Framer Motion animation */}
|
|
<HStack justifyContent={"center"} mb={8}>
|
|
<MotionSvg
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 130.2 130.2"
|
|
width="100px"
|
|
height="100px"
|
|
initial={{ scale: 0.8 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ duration: 0.6, type: "spring", bounce: 0.5 }}
|
|
>
|
|
<MotionCircle
|
|
cx="65.1"
|
|
cy="65.1"
|
|
r="62.1"
|
|
fill="#65F37C"
|
|
stroke="#159F2B"
|
|
strokeWidth="0"
|
|
strokeDasharray="1000"
|
|
strokeDashoffset="1000"
|
|
initial={{ strokeDashoffset: 1000 }}
|
|
animate={{ strokeDashoffset: 0 }}
|
|
transition={{ duration: 1 }}
|
|
/>
|
|
<MotionPolyline
|
|
points="100.2,40.2 51.5,88.8 29.8,67.5"
|
|
fill="none"
|
|
stroke="#159F2B"
|
|
strokeWidth="6"
|
|
strokeLinecap="round"
|
|
strokeMiterlimit="10"
|
|
strokeDasharray="1000"
|
|
strokeDashoffset="-100"
|
|
initial={{ strokeDashoffset: 1000 }}
|
|
animate={{ strokeDashoffset: 0 }}
|
|
transition={{ duration: 0.7, delay: 1 }}
|
|
/>
|
|
</MotionSvg>
|
|
</HStack>
|
|
|
|
<Text
|
|
color={"#100F14"}
|
|
fontSize={"md"}
|
|
fontWeight={"600"}
|
|
textAlign={"center"}
|
|
mb={2}
|
|
>
|
|
Your employee list has been submitted
|
|
</Text>
|
|
<Text
|
|
color={"#686677"}
|
|
fontSize={"xs"}
|
|
fontWeight={"500"}
|
|
textAlign={"center"}
|
|
>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
</Text>
|
|
|
|
<HStack justifyContent={"center"} py={4}>
|
|
<SecondaryButton title={"Submit new application"} />
|
|
<PrimaryButton title={"Check application status"} />
|
|
</HStack>
|
|
|
|
</MotionBox>
|
|
</ModalBody>
|
|
</ModalContent>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SuccessModal;
|