Skip to content

Commit ff96941

Browse files
nyagaminyagami
committed
add Page component
1 parent c08fa79 commit ff96941

File tree

5 files changed

+154
-61
lines changed

5 files changed

+154
-61
lines changed

‎src/components/AppBar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export default function AppBar() {
133133
);
134134

135135
return (
136-
<MUIAppBar sx={{ px: { sm: 2 } }}>
136+
<MUIAppBar sx={{ px: { sm: 2 } }} position="sticky">
137137
<Toolbar>
138138
{location.pathname === "/" ? null : (
139139
<IconButton

‎src/components/Layout/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export default function Layout({
3737
sx={{
3838
bgcolor: theme.background,
3939
width: "100%",
40-
pt: { xs: 12, sm: 14 },
4140
display: "flex",
4241
...sx,
4342
}}

‎src/components/Page/index.tsx

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { useTheme } from "@hooks/useTheme";
2+
import { Box, Button, Container, Menu, Typography } from "@mui/material";
3+
import { ReactNode, useState } from "react";
4+
5+
export default function Page({
6+
title,
7+
content,
8+
tableOfContent,
9+
}: {
10+
title: string;
11+
content: ReactNode;
12+
tableOfContent?: ReactNode;
13+
}) {
14+
const [mobileMenuAnchor, setmobileMenuAnchor] = useState<null | HTMLElement>(
15+
null
16+
);
17+
const mobileMenuOpen = Boolean(mobileMenuAnchor);
18+
const openMobileMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
19+
setmobileMenuAnchor(event.currentTarget);
20+
};
21+
const closeMobileMenu = () => {
22+
setmobileMenuAnchor(null);
23+
};
24+
const theme = useTheme();
25+
return (
26+
<Container
27+
sx={{
28+
display: { xs: "block", lg: "flex" },
29+
flexDirection: "row-reverse",
30+
textAlign: "left",
31+
px: { xs: 0, lg: 4 },
32+
pt: { lg: 6 },
33+
width: "100%",
34+
minHeight: "100vh",
35+
}}
36+
>
37+
<Box
38+
sx={{
39+
width: { lg: 240 },
40+
position: { xs: "sticky", lg: "relative" },
41+
left: 0,
42+
top: { xs: 64, lg: 0 },
43+
bgcolor: theme.background,
44+
py: tableOfContent ? { xs: 1, lg: 0 } : 0,
45+
px: 4,
46+
mb: 4,
47+
borderBottomColor: theme.shadow,
48+
borderBottomWidth: 1,
49+
borderBottomStyle: tableOfContent ? "solid" : "none",
50+
}}
51+
>
52+
{tableOfContent ? (
53+
<>
54+
<Box sx={{ display: { xs: "none", lg: "block" } }}>
55+
<Typography variant="subtitle1" sx={{ fontSize: "bold" }}>
56+
Table of content
57+
</Typography>
58+
<Box>{tableOfContent}</Box>
59+
</Box>
60+
<Box sx={{ display: { xs: "block", lg: "none" } }}>
61+
<Button
62+
aria-haspopup="true"
63+
aria-expanded={mobileMenuOpen ? "true" : undefined}
64+
onClick={openMobileMenu}
65+
>
66+
<Typography variant="subtitle1" sx={{ fontSize: "bold" }}>
67+
Table of content
68+
</Typography>
69+
</Button>
70+
<Menu
71+
id="basic-menu"
72+
anchorEl={mobileMenuAnchor}
73+
open={mobileMenuOpen}
74+
onClose={closeMobileMenu}
75+
MenuListProps={{
76+
"aria-labelledby": "basic-button",
77+
}}
78+
>
79+
<Box>{tableOfContent}</Box>
80+
</Menu>
81+
</Box>
82+
</>
83+
) : null}
84+
</Box>
85+
<Box
86+
sx={{
87+
flex: 1,
88+
px: { xs: 4, md: 8, lg: 10 },
89+
}}
90+
>
91+
<Typography variant="h4" sx={{ fontWeight: "600" }}>
92+
{title}
93+
</Typography>
94+
{content}
95+
</Box>
96+
</Container>
97+
);
98+
}

‎src/routes/home/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const articles: ArticleProps[] = [
3737
export default function HomePage() {
3838
return (
3939
<Layout showSideBar={false}>
40-
<Box sx={{ pb: 16, px: { xs: 2, md: 4, lg: 16 } }}>
40+
<Box sx={{ mt: 10, pb: 16, px: { xs: 2, md: 8, lg: 22 } }}>
4141
<Banner />
4242
<Stack direction={{ sx: "column", sm: "row" }} sx={{ gap: 2 }}>
4343
{articles.map((article, index) => (

‎src/routes/plugins/index.tsx

+54-58
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Layout from "@components/Layout";
2+
import Page from "@components/Page";
23
import { useTheme } from "@hooks/useTheme";
34
import { Box, Button, Card, Divider, Typography } from "@mui/material";
45

@@ -11,67 +12,62 @@ export default function Plugins() {
1112

1213
return (
1314
<Layout>
14-
<Box
15-
sx={{
16-
textAlign: "left",
17-
px: { xs: 2, sm: 4, md: 16 },
18-
maxWidth: 800,
19-
height: "100vh",
20-
}}
21-
>
22-
<Typography variant="h4" sx={{ fontWeight: "600" }}>
23-
Plugins
24-
</Typography>
25-
<Typography sx={{ mt: 2 }}>
26-
By default, <b>LNReader</b> comes without any plugins. You can choose
27-
to read local content or include an external repository.
28-
</Typography>
29-
<Typography sx={{ mt: 2 }}>
30-
<b>LNReader</b> maintains only one official repository; any other
31-
repositories are unofficial and have no affiliation with us.
32-
</Typography>
33-
{isAndroid ? (
34-
<Box sx={{ my: 2, textAlign: "center" }}>
35-
<Button
36-
variant="contained"
37-
sx={{
38-
borderRadius: 12,
39-
background: theme.primaryContainer,
40-
color: theme.onPrimaryContainer,
41-
textTransform: "none",
42-
}}
43-
href={
44-
"lnreader://repo/add?url=" +
45-
encodeURIComponent(lnreaderPluginsRepo)
46-
}
47-
>
48-
Add repository
49-
</Button>
15+
<Page
16+
title="Plugins"
17+
content={
18+
<Box>
5019
<Typography sx={{ mt: 2 }}>
51-
Requires <b>LNReader 2.0.0</b> or newer.
20+
By default, <b>LNReader</b> comes without any plugins. You can
21+
choose to read local content or include an external repository.
5222
</Typography>
53-
</Box>
54-
) : (
55-
<Card
56-
sx={{
57-
bgcolor: theme.tertiaryContainer,
58-
my: 2,
59-
p: 2,
60-
borderRadius: 2,
61-
}}
62-
>
63-
<Typography sx={{ mb: 2, fontWeight: "600" }}>
64-
Unsupported operating system
65-
</Typography>
66-
<Typography sx={{ fontSize: 16 }}>
67-
<b>LNReader</b> is an <b>Android app</b> only. Use an{" "}
68-
<b>Android</b> device with <b>LNReader</b> installed to add this
69-
extension repo.
23+
<Typography sx={{ mt: 2 }}>
24+
<b>LNReader</b> maintains only one official repository; any other
25+
repositories are unofficial and have no affiliation with us.
7026
</Typography>
71-
</Card>
72-
)}
73-
<Divider />
74-
</Box>
27+
{isAndroid ? (
28+
<Box sx={{ my: 2, textAlign: "center" }}>
29+
<Button
30+
variant="contained"
31+
sx={{
32+
borderRadius: 12,
33+
background: theme.primaryContainer,
34+
color: theme.onPrimaryContainer,
35+
textTransform: "none",
36+
}}
37+
href={
38+
"lnreader://repo/add?url=" +
39+
encodeURIComponent(lnreaderPluginsRepo)
40+
}
41+
>
42+
Add repository
43+
</Button>
44+
<Typography sx={{ mt: 2 }}>
45+
Requires <b>LNReader 2.0.0</b> or newer.
46+
</Typography>
47+
</Box>
48+
) : (
49+
<Card
50+
sx={{
51+
bgcolor: theme.tertiaryContainer,
52+
my: 2,
53+
p: 2,
54+
borderRadius: 2,
55+
}}
56+
>
57+
<Typography sx={{ mb: 2, fontWeight: "600" }}>
58+
Unsupported operating system
59+
</Typography>
60+
<Typography sx={{ fontSize: 16 }}>
61+
<b>LNReader</b> is an <b>Android app</b> only. Use an{" "}
62+
<b>Android</b> device with <b>LNReader</b> installed to add
63+
this extension repo.
64+
</Typography>
65+
</Card>
66+
)}
67+
<Divider />
68+
</Box>
69+
}
70+
/>
7571
</Layout>
7672
);
7773
}

0 commit comments

Comments
 (0)