Skip to content

Commit 92ed315

Browse files
ndthanhdevndthanhdev
authored
apply frames (#33)
1 parent 8c0b201 commit 92ed315

11 files changed

Lines changed: 125 additions & 101 deletions

File tree

‎app/src/components/frames/about/index.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Container from "@mui/material/Container";
2+
import Stack from "@mui/material/Stack";
3+
import Typography from "@mui/material/Typography";
4+
import * as React from "react";
5+
6+
import { MainTemplate, MainTemplateProps } from "@/components/templates/main";
7+
8+
import { styles } from "./styles";
9+
10+
export type AboutFrameProps = { mainTemplateProps: MainTemplateProps };
11+
12+
export const AboutFrame = ({ mainTemplateProps }: AboutFrameProps) => {
13+
return (
14+
<MainTemplate {...mainTemplateProps}>
15+
<Container maxWidth="lg">
16+
<Stack
17+
css={styles.mainWrapper}
18+
justifyContent="center"
19+
alignItems="center"
20+
>
21+
<Typography css={styles.brief} variant="h1">
22+
{"A developer, an open source lover and a gamer"}
23+
</Typography>
24+
</Stack>
25+
</Container>
26+
</MainTemplate>
27+
);
28+
};

‎app/src/components/frames/about/styles.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { css } from "@emotion/react";
2+
3+
import { AppTheme } from "@/theme";
4+
5+
export const styles = {
6+
mainWrapper: () =>
7+
css({
8+
minHeight: "90vh",
9+
}),
10+
11+
brief: (theme: AppTheme) =>
12+
css({
13+
fontWeight: theme.typography.fontWeightMedium,
14+
}),
15+
};

‎app/src/components/frames/home/index.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as React from "react";
2+
3+
import { Wip } from "@/components/organisms/wip";
4+
import { MainTemplate, MainTemplateProps } from "@/components/templates/main";
5+
6+
export type HomeFrameProps = {
7+
mainTemplateProps: MainTemplateProps;
8+
};
9+
10+
export const HomeFrame = ({ mainTemplateProps }: HomeFrameProps) => {
11+
return (
12+
<MainTemplate {...mainTemplateProps}>
13+
<Wip />
14+
</MainTemplate>
15+
);
16+
};

‎app/src/components/frames/not-found/index.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Link } from "@mui/material";
2+
import Typography from "@mui/material/Typography";
3+
import * as React from "react";
4+
5+
import { MainTemplate, MainTemplateProps } from "@/components/templates/main";
6+
7+
export type NotFoundFrameProps = {
8+
mainTemplateProps: MainTemplateProps;
9+
};
10+
11+
export const NotFoundFrame = ({ mainTemplateProps }: NotFoundFrameProps) => {
12+
return (
13+
<MainTemplate {...mainTemplateProps}>
14+
<Typography variant="h1">Page not found</Typography>
15+
<Typography variant="body1">
16+
Sorry 😔 we couldn’t find what you were looking for.
17+
</Typography>
18+
<Link href="/">Go home</Link>
19+
</MainTemplate>
20+
);
21+
};

‎app/src/components/frames/projects/index.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as React from "react";
2+
3+
import { Wip } from "@/components/organisms/wip";
4+
import { MainTemplate, MainTemplateProps } from "@/components/templates/main";
5+
6+
export type HomeFrameProps = {
7+
mainTemplateProps: MainTemplateProps;
8+
};
9+
10+
export const ProjectFrame = ({ mainTemplateProps }: HomeFrameProps) => {
11+
return (
12+
<MainTemplate {...mainTemplateProps}>
13+
<Wip />
14+
</MainTemplate>
15+
);
16+
};

‎app/src/components/templates/main/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Container from "@mui/material/Container";
12
import * as React from "react";
23

34
import { AppDrawer, AppDrawerProps } from "@/components/organisms/app-drawer";
@@ -21,7 +22,9 @@ export const MainTemplate = ({
2122
<>
2223
<AppHeader {...appHeaderProps} />
2324
<AppDrawer {...appDrawerProps} />
24-
<main css={styles.main}>{children}</main>
25+
<Container component="main" css={styles.main}>
26+
{children}
27+
</Container>
2528
<AppFooter {...appFooterProps} />
2629
</>
2730
);

‎app/src/components/templates/main/styles.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { css } from "@emotion/react";
22

3+
import { AppTheme } from "@/theme";
4+
35
export const styles = {
4-
main: css({
5-
minHeight: "95vh",
6-
}),
6+
main: (theme: AppTheme) =>
7+
css({
8+
minHeight: "95vh",
9+
marginInline: theme.spacing(2),
10+
}),
711
};

‎app/src/pages/404.tsx‎

Lines changed: 8 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,12 @@
1-
import { Link } from "gatsby";
21
import * as React from "react";
32

4-
// Styles
5-
const pageStyles = {
6-
color: "#232129",
7-
padding: "96px",
8-
fontFamily: "-apple-system, Roboto, sans-serif, serif",
9-
},
10-
headingStyles = {
11-
marginTop: 0,
12-
marginBottom: 64,
13-
maxWidth: 320,
14-
},
15-
paragraphStyles = {
16-
marginBottom: 48,
17-
},
18-
codeStyles = {
19-
color: "#8A6534",
20-
padding: 4,
21-
backgroundColor: "#FFF4DB",
22-
fontSize: "1.25rem",
23-
borderRadius: 4,
24-
},
25-
// Markup
26-
NotFoundPage = () => (
27-
<main style={pageStyles}>
28-
<title>Not found</title>
29-
<h1 style={headingStyles}>Page not found</h1>
30-
<p style={paragraphStyles}>
31-
Sorry{" "}
32-
<span role="img" aria-label="Pensive emoji">
33-
😔
34-
</span>{" "}
35-
we couldn’t find what you were looking for.
36-
<br />
37-
{process.env.NODE_ENV === "development" ? (
38-
<>
39-
<br />
40-
Try creating a page in <code style={codeStyles}>src/pages/</code>.
41-
<br />
42-
</>
43-
) : null}
44-
<br />
45-
<Link to="/">Go home</Link>.
46-
</p>
47-
</main>
48-
);
3+
import { NotFoundFrame } from "@/components/frames/not-found";
4+
import { useMainTemplateProps } from "@/hooks/use-main-template-props";
5+
6+
const NotFoundPage = () => {
7+
const mainTemplateProps = useMainTemplateProps();
8+
9+
return <NotFoundFrame mainTemplateProps={mainTemplateProps} />;
10+
};
4911

5012
export default NotFoundPage;

‎app/src/pages/about.tsx‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,12 @@
1-
import { css } from "@emotion/react";
2-
import Container from "@mui/material/Container";
3-
import Stack from "@mui/material/Stack";
4-
import Typography from "@mui/material/Typography";
51
import * as React from "react";
62

7-
import { MainTemplate } from "@/components/templates/main";
3+
import { AboutFrame } from "@/components/frames/about";
84
import { useMainTemplateProps } from "@/hooks/use-main-template-props";
9-
import { AppTheme } from "@/theme";
105

11-
const styles = {
12-
mainWrapper: () =>
13-
css({
14-
minHeight: "90vh",
15-
}),
16-
17-
brief: (theme: AppTheme) =>
18-
css({
19-
fontWeight: theme.typography.fontWeightMedium,
20-
}),
21-
};
22-
23-
function Index() {
6+
function AboutPage() {
247
const mainTemplateProps = useMainTemplateProps();
258

26-
return (
27-
<MainTemplate {...mainTemplateProps}>
28-
<Container maxWidth="lg">
29-
<Stack
30-
css={styles.mainWrapper}
31-
justifyContent="center"
32-
alignItems="center"
33-
>
34-
<Typography css={styles.brief} variant="h1">
35-
{"A developer, an open source lover and a gamer"}
36-
</Typography>
37-
</Stack>
38-
</Container>
39-
</MainTemplate>
40-
);
9+
return <AboutFrame mainTemplateProps={mainTemplateProps} />;
4110
}
4211

43-
export default Index;
12+
export default AboutPage;

‎app/src/pages/index.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
import * as React from "react";
22

3-
import { Wip } from "@/components/organisms/wip";
4-
import { MainTemplate } from "@/components/templates/main";
3+
import { HomeFrame } from "@/components/frames/home";
54
import { useMainTemplateProps } from "@/hooks/use-main-template-props";
65

7-
function Index() {
6+
function HomePage() {
87
const mainTemplateProps = useMainTemplateProps();
98

10-
return (
11-
<MainTemplate {...mainTemplateProps}>
12-
<Wip />
13-
</MainTemplate>
14-
);
9+
return <HomeFrame mainTemplateProps={mainTemplateProps} />;
1510
}
1611

17-
export default Index;
12+
export default HomePage;

0 commit comments

Comments
 (0)