104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
|
|
import {
|
|
mdiChartTimelineVariant,
|
|
mdiPencil
|
|
} from '@mdi/js';
|
|
import Head from 'next/head';
|
|
import React, { ReactElement } from 'react';
|
|
|
|
|
|
import CardBox from '../../components/CardBox';
|
|
import LayoutAuthenticated from '../../layouts/Authenticated';
|
|
import SectionMain from '../../components/SectionMain';
|
|
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
|
import { getPageTitle } from '../../config';
|
|
|
|
import BaseButton from '../../components/BaseButton';
|
|
|
|
import { useAppSelector } from '../../stores/hooks';
|
|
import { useRouter } from 'next/router';
|
|
import UserAvatar from '../../components/UserAvatar';
|
|
import LoadingSpinner from '../../components/LoadingSpinner';
|
|
|
|
const ProfilePage = () => {
|
|
const { currentUser } = useAppSelector(
|
|
(state) => state.auth,
|
|
);
|
|
const router = useRouter();
|
|
|
|
|
|
const handleEdit = () => {
|
|
router.push('/profile/edit');
|
|
}
|
|
|
|
if (!currentUser) {
|
|
return (
|
|
<SectionMain>
|
|
<LoadingSpinner />
|
|
</SectionMain>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('Profile')}</title>
|
|
</Head>
|
|
<SectionMain>
|
|
<SectionTitleLineWithButton
|
|
icon={mdiChartTimelineVariant}
|
|
title='Profile'
|
|
main
|
|
>
|
|
<BaseButton
|
|
icon={mdiPencil}
|
|
label='Edit'
|
|
color='info'
|
|
onClick={handleEdit}
|
|
/>
|
|
</SectionTitleLineWithButton>
|
|
<CardBox className="mb-6">
|
|
<div
|
|
className="h-48 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage:
|
|
"url('https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')",
|
|
}}
|
|
></div>
|
|
<div className="flex justify-center -mt-24">
|
|
<div className="w-32 h-32 border-4 border-white rounded-full overflow-hidden">
|
|
{currentUser.avatar && currentUser.avatar.length > 0 ? (
|
|
<img
|
|
className="w-full h-full object-cover"
|
|
src={currentUser.avatar[0].publicUrl}
|
|
alt="Avatar"
|
|
/>
|
|
) : (
|
|
<UserAvatar className="w-full h-full" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="text-center mt-4">
|
|
<h1 className="text-2xl font-semibold">{`${currentUser?.firstName || ''} ${
|
|
currentUser?.lastName || ''
|
|
}`}</h1>
|
|
<p className="text-gray-500">{currentUser?.email}</p>
|
|
{currentUser.app_role && (
|
|
<p className="text-gray-500 mt-1 text-sm font-bold">{
|
|
currentUser.app_role.name.charAt(0).toUpperCase() +
|
|
currentUser.app_role.name.slice(1)
|
|
}</p>
|
|
)}
|
|
</div>
|
|
</CardBox>
|
|
</SectionMain>
|
|
</>
|
|
);
|
|
};
|
|
|
|
ProfilePage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
|
};
|
|
|
|
export default ProfilePage;
|