56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
import React from "react";
|
|
import Lottie from "lottie-react";
|
|
import { motion } from "framer-motion";
|
|
|
|
import animationPoints from "../../assets/animations/ecran-deroulement.json";
|
|
import Loading from "../animations/Loading";
|
|
import { useUser } from "../../hooks/useUser";
|
|
|
|
export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
|
|
const { screensTranslations } = useUser();
|
|
|
|
if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
|
|
const currentScreenTranslations = screensTranslations.tutorial;
|
|
const uiTranslations = screensTranslations.ui;
|
|
|
|
const animationParameters = {
|
|
initial: { x: "100%", opacity: 0 },
|
|
animate: { x: "0%", opacity: 1 },
|
|
exit: { x: "-100%", opacity: 0 },
|
|
};
|
|
return (
|
|
<motion.div
|
|
key='tutorial-walthrought'
|
|
className='modal-content-container tutorial-container'
|
|
initial={animationParameters.initial}
|
|
animate={animationParameters.animate}
|
|
exit={animationParameters.exit}
|
|
transition={{ duration: 0.4, ease: "easeOut" }}>
|
|
<div className='modal-content-container__content'>
|
|
<h3 className='titling-construction '>{currentScreenTranslations.how_to_play}</h3>
|
|
<h2>{currentScreenTranslations.walkthrough}</h2>
|
|
|
|
<p className='explanation'>{currentScreenTranslations.walkthrough_description}</p>
|
|
<div className='tutorial-container__slides-controls'>
|
|
<button
|
|
title={uiTranslations.previous}
|
|
className='cta cta--construction cta--round cta--button-icon cta--previous'
|
|
onClick={setPreviousSlide}></button>
|
|
<button
|
|
title={uiTranslations.next}
|
|
className='cta cta--construction cta--round cta--button-icon cta--next'
|
|
onClick={setNextSlide}></button>
|
|
</div>
|
|
</div>
|
|
<div className='modal-content-container__cover'>
|
|
<Lottie
|
|
className='tutorial-container__animated-cover'
|
|
animationData={animationPoints}
|
|
loop
|
|
autoplay
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|