From b12ad06000811dc4e06a9f3b4698e2ec71a90094 Mon Sep 17 00:00:00 2001 From: jwinr Date: Sun, 22 Sep 2024 13:58:51 -0400 Subject: [PATCH] feat(page): add global error and not-found pages --- next.config.mjs | 24 +++++----- public/images/spool.svg | 1 + src/app/error.tsx | 30 ++++++++++++ src/app/not-found.tsx | 103 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 147 insertions(+), 11 deletions(-) create mode 100644 public/images/spool.svg create mode 100644 src/app/error.tsx create mode 100644 src/app/not-found.tsx diff --git a/next.config.mjs b/next.config.mjs index 68102cc..31b441c 100755 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,13 +1,15 @@ /** @type {import('next').NextConfig} */ - -export function webpack(config) { - config.module.rules.push({ - test: /\.svg$/, - use: ['@svgr/webpack'], - }) - - return config -} -export const compiler = { - styledComponents: true, +const nextConfig = { + webpack(config) { + config.module.rules.push({ + test: /\.svg$/, + use: ['@svgr/webpack'], + }) + return config + }, + compiler: { + styledComponents: true, + }, } + +export default nextConfig diff --git a/public/images/spool.svg b/public/images/spool.svg new file mode 100644 index 0000000..8979ef8 --- /dev/null +++ b/public/images/spool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/error.tsx b/src/app/error.tsx new file mode 100644 index 0000000..4ce7965 --- /dev/null +++ b/src/app/error.tsx @@ -0,0 +1,30 @@ +'use client' + +import { useEffect } from 'react' + +export default function Error({ + error, + reset, +}: { + error: Error & { digest?: string } + reset: () => void +}) { + useEffect(() => { + // Log the error to an error reporting service + console.error(error) + }, [error]) + + return ( +
+

Something went wrong!

+ +
+ ) +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..6011566 --- /dev/null +++ b/src/app/not-found.tsx @@ -0,0 +1,103 @@ +'use client' + +import styled from 'styled-components' +import Link from 'next/link' +import Spool from '@/public/images/spool.svg' + +const Container = styled.main` + display: flex; + flex-direction: column; + padding: 80px; + height: 100%; + max-width: 1200px; + margin: 0 auto; + position: relative; + + &::before, + &::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + width: 1px; + background: repeating-linear-gradient( + to bottom, + transparent 0, + transparent 4px, + var(--sc-color-divider) 4px, + var(--sc-color-divider) 8px + ); + opacity: 0.75; + } + + &::before { + left: 0px; + } + + &::after { + right: 0px; + } + + @media (max-width: 768px) { + padding: 40px; + max-width: 100%; + padding: 30px; + } +` + +const Title = styled.h2` + font-size: 3rem; + font-weight: 600; + color: var(--sc-color-title); + margin-bottom: 16px; +` + +const Message = styled.p` + font-size: 1.5rem; + margin-bottom: 24px; + font-weight: 500; +` + +const SubMessage = styled.p` + font-size: 1.2rem; +` + +const HomeLink = styled(Link)` + font-size: 1.2rem; +` + +const Icon = styled(Spool)` + position: absolute; + right: 0; + bottom: 0; + height: 50%; + fill: var(--sc-color-carnation); + opacity: 0.4; + + @media (max-width: 1024px) { + height: 35%; + } + + @media (max-width: 768px) { + height: 35%; + bottom: 10%; + } +` + +export default function NotFound() { + return ( + +
+ Page not found! + + Sorry, but the page you were looking for could not be found. + + + You can return to our front page, or + contact us if you can't find what you're looking for. + +
+ + + ) +}