enhancing profile component

src/assets/css/pages/Profile.scss

@@ -0,0 +1,6 @@
+.page-container--profile {
+	.cta--next {
+		@apply mx-auto;
+		transform: translateY(50%);
+	}
+}

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>
+						<h2>{profileSelectTitle}</h2>
-						<ProfileSelect />
+						<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>