From 12d45dc44ead570824ecc14cc7e48334faaf3bc6 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Thu, 1 Feb 2024 18:24:37 +0100
Subject: [PATCH] enhancing profile component

---
 src/assets/css/pages/Profile.scss |  6 ++++++
 src/pages/Profile.jsx             | 27 ++++++++++++++++++++++-----
 2 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/css/pages/Profile.scss

diff --git a/src/assets/css/pages/Profile.scss b/src/assets/css/pages/Profile.scss
new file mode 100644
index 0000000..23aabe2
--- /dev/null
+++ b/src/assets/css/pages/Profile.scss
@@ -0,0 +1,6 @@
+.page-container--profile {
+	.cta--next {
+		@apply mx-auto;
+		transform: translateY(50%);
+	}
+}
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
index 1991198..53a5e9e 100644
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@@ -3,23 +3,40 @@ import Menu from "../components/Menu";
 import CountrySelect from "../components/CountrySelect";
 import ProfileSelect from "../components/ProfileSelect";
 import { Link } from "react-router-dom";
+import { useWordpressCustomData } from "../hooks/WordpressFetchData";
+import { useUserContext } from "../hooks/useUserContext";
 
 export default function Profile() {
+	const profileScreenDatas = useWordpressCustomData("/screen/profile");
+	// const { language } = useUserContext();
+
+	if (!profileScreenDatas) {
+		return <div>Chargement...</div>;
+	}
+
+	const { profileScreenTitle, profileOptions, profileSelectTitle, profileCountrySelectTitle } =
+		profileScreenDatas;
+	console.log(profileScreenDatas);
+
 	return (
-		<div className='page-container page-container--home'>
+		<div className='page-container page-container--profile page-container-has-screen'>
 			{/* <button onClick={test}>test</button> */}
 			<div className='screen screen--home'>
 				<Menu />
 				<section className='screen__content'>
+					<h1>{profileScreenTitle}</h1>
 					<div className='profile'>
-						<h2>profil</h2>
-						<ProfileSelect />
+						<h2>{profileSelectTitle}</h2>
+						<ProfileSelect options={profileOptions} />
 					</div>
 					<div className='country'>
-						<h2>Pays</h2>
+						<h2>{profileCountrySelectTitle}</h2>
 						<CountrySelect />
 					</div>
-					<Link to='/play' className='cta cta--construction cta--round cta--play ' />
+					<Link
+						to='/play'
+						className='cta cta--construction cta--round cta--button-icon cta--next  '
+					/>
 				</section>
 			</div>
 		</div>