devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added flag display for agents

Browse Source
This commit is contained in:
Joao Ramos
2023-12-23 14:51:28 +00:00
parent c37bb2691b
commit cc655fed6c
1 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/profile.tsx
View File

@@ -159,6 +159,7 @@ export default function Home() {
setIsLoading(false); setIsLoading(false);
}; };
debugger;
return ( return (
<> <>
<Head> <Head>
@@ -361,26 +362,37 @@ export default function Home() {
</div> </div>
</form> </form>
</div> </div>
<div <div className="flex flex-col gap-6 w-48">
className="flex flex-col gap-3 items-center w-48 h-fit cursor-pointer group" <div
onClick={() => (profilePictureInput.current as any)?.click()}> className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
<div className="relative overflow-hidden h-48 w-48 rounded-full"> onClick={() => (profilePictureInput.current as any)?.click()}>
<div <div className="relative overflow-hidden h-48 w-48 rounded-full">
className={clsx( <div
"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100", className={clsx(
"transition ease-in-out duration-300", "absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
)}> "transition ease-in-out duration-300",
<BsCamera className="text-6xl text-mti-purple-ultralight/80" /> )}>
<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
</div>
<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
</div> </div>
<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" /> <input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
<span
onClick={() => (profilePictureInput.current as any)?.click()}
className="cursor-pointer text-mti-purple-light text-sm">
Change picture
</span>
<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
</div> </div>
<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} /> {user.type === 'agent' && (
<span <div className="flag items-center h-fit">
onClick={() => (profilePictureInput.current as any)?.click()} <img
className="cursor-pointer text-mti-purple-light text-sm"> alt={user.demographicInformation?.country.toLowerCase() + '_flag'}
Change picture src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
</span> width="320"
<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6> />
</div>
)}
</div> </div>
</div> </div>
<div className="flex flex-col gap-4 mt-8 mb-20"> <div className="flex flex-col gap-4 mt-8 mb-20">