-
Notifications
You must be signed in to change notification settings - Fork 3.2k
/
Layout.tsx
110 lines (102 loc) · 3.01 KB
/
Layout.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
// https://nextjs.org/docs/basic-features/layouts
import { Box, Grid } from "@chakra-ui/react";
import { Activity, BarChart2, HelpCircle, Layout, MessageSquare, Settings, Users, TrendingUp } from "lucide-react";
import type { NextPage } from "next";
import { Header } from "src/components/Header";
import { SlimFooter } from "./Dashboard/SlimFooter";
import { Footer } from "./Footer";
import { SideMenuLayout } from "./SideMenuLayout";
import { ToSWrapper } from "./ToSWrapper";
export type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {
getLayout?: (page: React.ReactElement) => React.ReactNode;
};
export const getDefaultLayout = (page: React.ReactElement) => (
<div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
<Header />
{page}
<Footer />
</div>
);
export const getTransparentHeaderLayout = (page: React.ReactElement) => (
<div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
<Header />
{page}
<Footer />
</div>
);
export const getDashboardLayout = (page: React.ReactElement) => (
<Grid templateRows="min-content 1fr" h="full" gridTemplateColumns="minmax(0, 1fr)">
<Header />
<Grid templateRows="1fr min-content" h="full">
<ToSWrapper>
<SideMenuLayout
menuButtonOptions={[
{
labelID: "dashboard",
pathname: "/dashboard",
icon: Layout,
},
{
labelID: "messages",
pathname: "/messages",
icon: MessageSquare,
},
{
labelID: "leaderboard",
pathname: "/leaderboard",
icon: BarChart2,
},
{
labelID: "stats",
pathname: "/stats",
icon: TrendingUp,
},
{
labelID: "Guidelines",
pathname: "https://projects.laion.ai/Open-Assistant/docs/guides/guidelines",
icon: HelpCircle,
target: "_blank",
},
]}
>
<Box>{page}</Box>
<Box mt="10">
<SlimFooter />
</Box>
</SideMenuLayout>
</ToSWrapper>
</Grid>
</Grid>
);
export const getAdminLayout = (page: React.ReactElement) => (
<Grid templateRows="min-content 1fr" h="full" gridTemplateColumns="minmax(0, 1fr)">
<Header />
<SideMenuLayout
menuButtonOptions={[
{
labelID: "users",
pathname: "/admin",
icon: Users,
},
{
labelID: "trollboard",
pathname: "/admin/trollboard",
icon: BarChart2,
},
{
labelID: "status",
pathname: "/admin/status",
icon: Activity,
},
{
labelID: "parameters",
pathname: "/admin/parameters",
icon: Settings,
},
]}
>
{page}
</SideMenuLayout>
</Grid>
);
export const noLayout = (page: React.ReactElement) => page;