57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { mdiAccountCircle } 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 { useAppSelector } from '../stores/hooks';
|
|
|
|
const UserInfo = () => {
|
|
const { currentUser } = useAppSelector((state) => state.auth);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('User Info')}</title>
|
|
</Head>
|
|
<SectionMain>
|
|
<SectionTitleLineWithButton icon={mdiAccountCircle} title="User Info" main>
|
|
{' '}
|
|
</SectionTitleLineWithButton>
|
|
<CardBox>
|
|
{currentUser ? (
|
|
<dl className="grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2">
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">First Name</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">{currentUser.firstName}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">Last Name</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">{currentUser.lastName}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">Email</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">{currentUser.email}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">Phone Number</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">{currentUser.phoneNumber}</dd>
|
|
</div>
|
|
</dl>
|
|
) : (
|
|
<p>User information not available.</p>
|
|
)}
|
|
</CardBox>
|
|
</SectionMain>
|
|
</>
|
|
);
|
|
};
|
|
|
|
UserInfo.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
|
};
|
|
|
|
export default UserInfo;
|