mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-02-16 10:42:08 +00:00
75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import withPageAuthRequired from '@/util/withPageAuthRequired';
|
|
import { NextPage } from 'next';
|
|
|
|
import { Tab } from '@headlessui/react';
|
|
import Head from 'next/head';
|
|
import AccountInfo from '@/components/Account/AccountInfo';
|
|
import { useContext, useReducer } from 'react';
|
|
import UserContext from '@/contexts/UserContext';
|
|
import Security from '@/components/Account/Security';
|
|
import DeleteAccount from '@/components/Account/DeleteAccount';
|
|
import accountPageReducer from '@/reducers/accountPageReducer';
|
|
|
|
const AccountPage: NextPage = () => {
|
|
const { user } = useContext(UserContext);
|
|
|
|
const [pageState, dispatch] = useReducer(accountPageReducer, {
|
|
accountInfoOpen: false,
|
|
securityOpen: false,
|
|
deleteAccountOpen: false,
|
|
});
|
|
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Your Account | The Biergarten App</title>
|
|
<meta
|
|
name="description"
|
|
content="Your account page. Here you can view your account information, change your settings, and view your posts."
|
|
/>
|
|
</Head>
|
|
<div className="flex flex-col items-center">
|
|
<div className="m-12 flex w-11/12 flex-col items-center justify-center space-y-3 lg:w-7/12">
|
|
<div className="flex flex-col items-center space-y-3">
|
|
<div className="avatar">
|
|
<div className="bg-base-black w-24 rounded-full bg-slate-700" />
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center space-y-1">
|
|
<p className="text-3xl font-bold">Hello, {user!.username}!</p>
|
|
<p className="text-lg">Welcome to your account page.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-full w-full">
|
|
<Tab.Group>
|
|
<Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
|
|
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
|
|
Account Info and Security
|
|
</Tab>
|
|
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
|
|
Your Posts
|
|
</Tab>
|
|
</Tab.List>
|
|
<Tab.Panels>
|
|
<Tab.Panel className="h-full space-y-5">
|
|
<AccountInfo pageState={pageState} dispatch={dispatch} />
|
|
<Security pageState={pageState} dispatch={dispatch} />
|
|
<DeleteAccount pageState={pageState} dispatch={dispatch} />
|
|
</Tab.Panel>
|
|
<Tab.Panel>Your posts!</Tab.Panel>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AccountPage;
|
|
|
|
export const getServerSideProps = withPageAuthRequired();
|