diff --git a/src/views/Profile.tsx b/src/views/Profile.tsx index 5ca144f5ff0dd9cecc65ab5e26130799c6709279..6cabcaee84d11d5cfb0a208e972958cfb93ce927 100644 --- a/src/views/Profile.tsx +++ b/src/views/Profile.tsx @@ -20,32 +20,62 @@ const Profile = () => { return <> {/* HEADER */} <Navbar /> - {/* PROFILE */} - <div className="flex flex-col items-center justify-center h-screen"> - <p>Bonjour Chloé</p> - <button className="bg-red-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4" onClick={() => { - dispatch(logoutAsync()); - }}>Se déconnecter</button> - {/* CHANGEMENT DE LANGUE */} - <div className="flex gap-10 mt-10"> - <button className="bg-blue-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4" - type="button" - onClick={() => { - i18n.changeLanguage(Language.EN); - }} - > - {t('languages.english')} - </button> - <button className="bg-blue-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4" - type="button" - onClick={() => { - i18n.changeLanguage(Language.FR); - }} - > - {t('languages.french')} - </button> + {/* PROFILEVIEW */} + <div className="max-w-[640px] mx-auto py-16 px-4"> + <div className="flex flex-col items-center justify-center"> + {/* HEADER PROFILEVIEW */} + <div className="flex w-full gap-[30px] pb-8 border-b-2"> + {/* ZONE PROFILE PIC */} + <div className="w-[292px] flex justify-center"> + <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-[150px] h-[150px]"> + <p className="uppercase text-white text-[38px]">X</p> + </div> + </div> + {/* INFOS COMPTE */} + <div className="flex flex-col gap-4"> + <div className="flex gap-5 items-center"> + <p className="text-xl">Chloé</p> + <button className="bg-red-500 text-white font-bold h-10 rounded-md py-2 px-4" onClick={() => { + dispatch(logoutAsync()); + }}>Se déconnecter</button> + </div> + <div className="flex gap-10"> + <div className="flex flex-col items-center"> + <p>XX</p> + <p>publications</p> + </div> + <div className="flex flex-col items-center"> + <p>XX</p> + <p>followers</p> + </div> + <div className="flex flex-col items-center"> + <p>XX</p> + <p>follow</p> + </div> + </div> + </div> + </div> + {/* CHANGEMENT DE LANGUE */} + <div className="flex gap-10 mt-10"> + <button className="bg-blue-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4" + type="button" + onClick={() => { + i18n.changeLanguage(Language.EN); + }} + > + {t('languages.english')} + </button> + <button className="bg-blue-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4" + type="button" + onClick={() => { + i18n.changeLanguage(Language.FR); + }} + > + {t('languages.french')} + </button> + </div> + <p>{t('languages.aaa')}</p> </div> - <p>{t('languages.aaa')}</p> </div>