-
Notifications
You must be signed in to change notification settings - Fork 1
/
custom_sidebar.tsx
87 lines (71 loc) · 1.86 KB
/
custom_sidebar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import type { GetServerSidePropsContext } from 'next';
import Head from 'next/head';
import { getServerSession } from 'next-auth/next';
import Typography from '@mui/material/Typography';
import create from 'zustand';
import { SidebarType } from '~/components/Layout';
import type { AppPage, SessionUser } from '~/types';
import { authOptions } from '~/pages/api/auth/[...nextauth]';
type Store = {
name: string;
setName: (name: string) => void;
};
const useStore = create<Store>((set) => ({
name: 'Bob',
setName: (name) => set((state) => ({ name })),
}));
const ExamplePage: AppPage = () => {
const { name, setName } = useStore();
return (
<main>
<Head>
<title>Custom Sidebar - Examples</title>
</Head>
<Typography variant="h4" component="h1">
Custom sidebar example
</Typography>
<Typography component="span" marginRight={1}>
Enter a name:
</Typography>
<input value={name} onChange={(e) => setName(e.target.value)} />
</main>
);
};
function Sidebar() {
const name = useStore((state) => state.name);
return (
<div>
<Typography variant="h5" component="h1">
Prem Table
</Typography>
<ol>
<li>Arsenal</li>
<li>Man City</li>
<li>???</li>
<li>{"Doesn't Matter"}</li>
<li>{"Don't care"}</li>
</ol>
<Typography>name = {name}</Typography>
</div>
);
}
ExamplePage.layout = {
sidebar: {
type: SidebarType.CUSTOM,
content: <Sidebar />,
},
};
export async function getServerSideProps(context: GetServerSidePropsContext) {
const session = await getServerSession(context.req, context.res, authOptions);
if (!session || !session.user) {
return { notFound: true };
}
const user = session.user as SessionUser;
return {
props: {
session,
user,
},
};
}
export default ExamplePage;