AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Begin work on account page

Browse Source
This commit is contained in:
Aaron William Po
2023-05-09 08:36:05 -04:00
parent 3e1172e440
commit 55afcdec70
1 changed files with 54 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/account/index.tsx
View File

@@ -1,13 +1,64 @@
import UserContext from '@/contexts/userContext';
import withPageAuthRequired from '@/util/withPageAuthRequired';
import { NextPage } from 'next';
import { useContext } from 'react';
import { Tab } from '@headlessui/react';
import Head from 'next/head';
interface AccountPageProps {}
const AccountPage: NextPage<AccountPageProps> = () => {
const { user } = useContext(UserContext);
return (
<div>
<h1>Account Page</h1>
<>
<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 h-full flex-col items-center bg-base-300">
<div className="m-12 flex w-9/12 flex-col items-center justify-center space-y-3">
<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="w-full">
<Tab.Group>
<Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
<Tab className="tab tab-md w-1/3 uppercase ui-selected:tab-active">
Settings
</Tab>
<Tab className="tab tab-md w-1/3 uppercase ui-selected:tab-active">
Account Info
</Tab>
<Tab className="tab tab-md w-1/3 uppercase ui-selected:tab-active">
Your Posts
</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>Content 1</Tab.Panel>
<Tab.Panel>Content 2</Tab.Panel>
<Tab.Panel>Content 3</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</div>
</div>
</>
);
};
export default AccountPage;
export const getServerSideProps = withPageAuthRequired();