My personal site.
theclashfruit.me
feat: layout for the 404 page
+28
-39
+22
-15
app/not-found.tsx
+22
-15
app/not-found.tsx
···
1
-
import { Frown } from 'lucide-react';
1
+
import Header from '@/components/Header';
2
+
import NavBar from '@/components/NavBar';
3
+
import Footer from '@/components/Footer';
4
+
import Container from '@/components/Container';
2
5
3
-
import styles from '@/styles/pages/Error.module.scss';
6
+
import styles from '@/styles/layout/Main.module.scss';
4
7
5
8
export const metadata = {
6
-
title: 'Not Found',
9
+
title: 'Not Found'
7
10
};
8
11
9
12
export default function NotFound() {
10
13
return (
11
-
<div className={styles.errorContainer}>
12
-
<Frown size={48} />
14
+
<>
15
+
<Header />
16
+
17
+
<Container as="main" className={styles.main}>
18
+
<NavBar />
19
+
20
+
<div className={styles.error}>
21
+
<div>
22
+
<h2>404</h2>
13
23
14
-
<div className={styles.vertDiv} />
24
+
<p>The page you're looking for was not found.</p>
25
+
</div>
26
+
</div>
27
+
</Container>
15
28
16
-
<div>
17
-
<h2>404</h2>
18
-
19
-
<p>
20
-
The page you're looking for was not found.
21
-
</p>
22
-
</div>
23
-
</div>
29
+
<Footer />
30
+
</>
24
31
);
25
-
}
32
+
}
+6
styles/layout/Main.module.scss
+6
styles/layout/Main.module.scss
-24
styles/pages/Error.module.scss
-24
styles/pages/Error.module.scss
···
1
-
.errorContainer {
2
-
display: flex;
3
-
4
-
align-items: center;
5
-
justify-content: center;
6
-
7
-
gap: 32px;
8
-
9
-
height: 100svh;
10
-
width: 100vw;
11
-
12
-
h2 {
13
-
font-weight: 600;
14
-
}
15
-
}
16
-
17
-
.vertDiv {
18
-
border-left: 1px solid var(--outlineVariant);
19
-
20
-
height: 48px;
21
-
width: 0px;
22
-
}
23
-
24
-
// TODO: redo this shit...