introducing component

src/components/results/ResultsModals.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import Lottie from "lottie-react";
+import { useNavigate } from "react-router-dom";
+
+import Modal from "../../components/ui/Modal.jsx";
+import cup from "../../assets/img/illustrations/cup.svg";
+import celebration from "../../assets/animations/celebration.json";
+import celebrationConfettis from "../../assets/animations/trophee-confettis.json";
+import celebrationConfettisFixe from "../../assets/animations/trophee-confettis-fixe.json";
+import sucessIcon from "../../assets/img/icons/behaviour-type-success.svg";
+import modalBackground from "../../assets/img/shapes-background/modal-background.svg";
+
+export default function ResultsModals({ resultsDatas }) {
+	const navigate = useNavigate();
+	const [isModalOpen, setIsModalOpen] = useState(true);
+
+	if (!resultsDatas) return navigate("/home");
+
+	const { gameStats, contextGameDatas } = resultsDatas;
+
+	function goRating() {
+		setIsModalOpen(false);
+		navigate("/rating");
+	}
+
+	console.log("resultsDatas", resultsDatas);
+
+	return (
+		<Modal className='results-modal' open={isModalOpen} onClose={goRating}>
+			<div className='modal-content-container game-question-container'>
+				<Lottie
+					className='modal-content-container__celebration'
+					animationData={celebrationConfettis}
+					loop
+					autoplay
+				/>
+				<Lottie
+					className='modal-content-container__celebration-confettis-fixe'
+					animationData={celebrationConfettisFixe}
+					loop={false}
+					autoplay
+				/>
+				<h1 className='titling-construction '>Rapport de sécurité</h1>
+				<h2>Félicitations !</h2>
+				<div className='visual-results'>
+					<img className='visual-results__cup' src={cup} alt='' />
+					<div className='visual-results__score'>
+						{gameStats.level_score}
+						<img className='succes-indicator' src={sucessIcon} alt='' />
+					</div>
+				</div>
+				<p className='results-explanation'>
+					Un accident est vite arrivé si nous n'y prêtons pas attention. N'oublions pas
+					que ce jeu reflète la réalité de notre environnement de travail.
+				</p>
+				<button
+					className='cta cta--construction cta--round cta--button-icon cta--home'
+					onClick={goRating}></button>
+			</div>
+		</Modal>
+	);
+}