Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introducing component

Browse Source
This commit is contained in:
Antoine M 2024-02-21 11:04:13 +01:00
parent b5abf68d46
commit 31ae2116ac
3 changed files with 117 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/Rating.jsx Normal file
View File

@ -0,0 +1,71 @@
import React from "react";
import AnimatedPage from "../components/AnimatedPage";
import { Link, useNavigate } from "react-router-dom";
export default function Rate() {
const navigate = useNavigate();
function returnHome() {
navigate("/Home");
}
return (
<AnimatedPage className='page-container page-container--rating'>
<div className='screen '>
<div className='screen__content'>
<h1 className='titling-construction '>Notes</h1>
<h2>merci pour votre participation</h2>
<div class='rating'>
<div class='rating__items'>
<input type='radio' name='stars' id='st5' />
<label for='st5'>
<div class='star-fill'></div>
<div
class='label-description'
data-content='Excellent'></div>
</label>
<input type='radio' name='stars' id='st4' />
<label for='st4'>
<div class='star-fill'></div>
<div
class='label-description'
data-content='Good'></div>
</label>
<input type='radio' name='stars' id='st3' />
<label for='st3'>
<div class='star-fill'></div>
<div class='label-description' data-content='OK'></div>
</label>
<input type='radio' name='stars' id='st2' />
<label for='st2'>
<div class='star-fill'></div>
<div class='label-description' data-content='Bad'></div>
</label>
<input type='radio' name='stars' id='st1' />
<label for='st1'>
<div class='star-fill'></div>
<div
class='label-description'
data-content='Terrible'></div>
</label>
</div>
</div>
<textarea
placeholder="Qu'avez-vous pensé de cette expérience ?"
name=''
id=''
cols='10'
rows='2'></textarea>
<button
className='cta cta--construction cta--round cta--button-icon cta--back'
onClick={returnHome}></button>
</div>
</div>
</AnimatedPage>
);
}

23
src/pages/Results.jsx
View File

@ -1,25 +1,26 @@
import React from "react";
import Menu from "../components/ui/Menu";
import { postGameStatisticsData } from "../services/WordpressFetchData";
import { useLanguage } from "../hooks/useLanguage";
import AnimatedPage from "../components/AnimatedPage";
import { useUser } from "../hooks/useUser";
import { useLocation } from "react-router-dom";
import ResultsModals from "../components/results/ResultsModals";
export default function Results() {
const { language, screenTranslations } = useUser();
if (!screenTranslations) return <p>loading</p>;
// if (!screenTranslations) return <p>loading</p>;
function addPost(language) {
postGameStatisticsData("/statistics/post", "BE");
}
let location = useLocation();
const { contextGameDatas } = location.state;
return (
<AnimatedPage className='page-container page-container--test'>
<div className='screen screen--test'>
<AnimatedPage className='page-container page-container--results'>
<div
className='screen '
style={{ backgroundImage: `url("${contextGameDatas.gameBlockDatas.attrs.coverUrl}")` }}>
<Menu />
<div id='screen-container'>
<button onClick={() => addPost(language)}>Finish the game</button>
</div>
<ResultsModals resultsDatas={location.state} />
{/* <div id='screen-container'></div> */}
</div>
</AnimatedPage>
);

33
src/pages/Welcome.jsx Normal file
View File

@ -0,0 +1,33 @@
import Menu from "../components/ui/Menu";
import { Link } from "react-router-dom";
import AppLogo from "../components/ui/AppLogo";
import AnimatedPage from "../components/AnimatedPage";
import { useUser } from "../hooks/useUser";
import LanguageSelect from "../components/ui/LanguageSelect";
import truckAnimation from "../assets/animations/chargement-vehicules";
import Lottie from "lottie-react";
import Loading from "../components/animations/Loading";
export default function Welcome() {
const { language, screensTranslations } = useUser();
if (!screensTranslations || !screensTranslations.welcome) return <Loading />;
const currentScreenTranslations = screensTranslations.welcome;
return (
<AnimatedPage className='page-container page-container--welcome'>
<AppLogo />
<Lottie className='truck-animation' animationData={truckAnimation} loop autoplay />
<div className='interaction-buttons'>
<LanguageSelect />
<Link
to='/Home'
className='cta cta--construction cta--lhoist cta--button-icon cta--start'>
<span>{currentScreenTranslations.enter}</span>
</Link>
</div>
</AnimatedPage>
);
}