feat: add 404 page

src/components/NotFound/NotFound.tsx

@@ -0,0 +1,45 @@
+import { uiConfigs } from '@/configs/ui.configs'
+import { Button, Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import Link from 'next/link'
+
+const NotFound = () => {
+  return (
+    <Container>
+      <Title genericFontFamily="serif" variant="h3">
+        Page not found
+      </Title>
+      <Description variant="body1">
+        Sorry, the page you are looking for doesn’t exist or has been moved.
+        <br />
+        Try searching our site.
+      </Description>
+      <Link href="/search">
+        <SearchButton size="large">Go to search</SearchButton>
+      </Link>
+    </Container>
+  )
+}
+
+export default NotFound
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: calc(120px + ${uiConfigs.navbarRenderedHeight}px);
+`
+
+const Title = styled(Typography)`
+  margin-bottom: 16px;
+`
+
+const Description = styled(Typography)`
+  margin-bottom: 48px;
+  max-width: 510px;
+  text-align: center;
+`
+
+const SearchButton = styled(Button)`
+  width: fit-content;
+`

src/components/NotFound/index.ts

@@ -0,0 +1 @@
+export { default as NotFound } from './NotFound'

src/layouts/NotFoundLayout/NotFound.layout.tsx

@@ -0,0 +1,25 @@
+import { Main } from '@/components/Main'
+import { NavBarProps } from '@/components/NavBar/NavBar'
+import { PropsWithChildren, useMemo } from 'react'
+import { MainProps } from '../../components/Main/Main'
+import { AppBar } from '../../components/NavBar'
+
+interface Props {
+  navbarProps?: NavBarProps
+  mainProps?: Partial<MainProps>
+}
+
+export default function DefaultLayout(props: PropsWithChildren<Props>) {
+  const { mainProps = {}, navbarProps = {} } = props
+  const navbarDefaultState = useMemo(
+    () => navbarProps.defaultState ?? { showTitle: true },
+    [navbarProps],
+  )
+
+  return (
+    <>
+      <AppBar {...navbarProps} defaultState={navbarDefaultState} />
+      <Main {...mainProps}>{props.children}</Main>
+    </>
+  )
+}

src/layouts/NotFoundLayout/index.ts

@@ -0,0 +1 @@
+export { default as DefaultLayout } from './NotFound.layout'

src/pages/404.tsx

@@ -0,0 +1,24 @@
+import { NotFound } from '@/components/NotFound'
+import { SEO } from '@/components/SEO'
+import NotFoundLayout from '@/layouts/NotFoundLayout/NotFound.layout'
+import { ReactNode } from 'react'
+
+const NotFoundPage = () => {
+  return (
+    <>
+      <SEO
+        title={'Not Found'}
+        description={'Description'}
+        imageUrl={undefined}
+        tags={[]}
+      />
+      <NotFound />
+    </>
+  )
+}
+
+NotFoundPage.getLayout = function getLayout(page: ReactNode) {
+  return <NotFoundLayout>{page}</NotFoundLayout>
+}
+
+export default NotFoundPage