feat: add a page for unknown routes

src/App.tsx

@@ -1,14 +1,27 @@
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, useLocation } from 'react-router-dom';
 
 import { Layout } from './components/Layout';
+import { NotFoundPage } from './pages/NotFoundPage';
 
 import { SearchPage } from './pages/SearchPage';
 
+function getPageName(pathname: string) {
+  if (/^\/\??$/.test(pathname)) {
+    return '';
+  }
+
+  return 'Error';
+}
+
 function App() {
+  const { pathname } = useLocation();
+  const pageName = getPageName(pathname);
+
   return (
     <Routes>
-      <Route path='/' element={<Layout />}>
+      <Route path='/' element={<Layout pageName={pageName} />}>
         <Route index element={<SearchPage />} />
+        <Route path='*' element={<NotFoundPage />} />
       </Route>
     </Routes>
   );

src/components/BackButton.tsx

@@ -0,0 +1,21 @@
+import { ArrowBack as ArrowBackIcon } from '@mui/icons-material';
+import { IconButton, IconButtonProps } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+function BackButton(props: IconButtonProps<'a'>) {
+  const navigate = useNavigate();
+
+  return (
+    <IconButton
+      component='a'
+      color='inherit'
+      aria-label='go back'
+      onClick={() => navigate(-1)}
+      {...props}
+    >
+      <ArrowBackIcon />
+    </IconButton>
+  );
+}
+
+export { BackButton };

src/components/Header.tsx

@@ -1,17 +1,32 @@
 import { GitHub as GitHubIcon } from '@mui/icons-material';
 import { AppBar, AppBarProps, Box, Toolbar } from '@mui/material';
 
+import { BackButton } from './BackButton';
+
 import { HeaderName } from './HeaderName';
 import { LogoIcon } from './LogoIcon';
 import { RepoLink } from './RepoLink';
 
-function Header(props: AppBarProps) {
+interface HeaderProps extends AppBarProps {
+  pageName?: string;
+}
+
+function Header({ pageName, ...props }: HeaderProps) {
   return (
     <AppBar position='static' {...props}>
       <Toolbar variant='dense' sx={{ justifyContent: 'space-between' }}>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <LogoIcon sx={{ mr: 1 }} />
-          <HeaderName name={'OMDb Client'} />
+          {pageName ? (
+            <>
+              <BackButton sx={{ ml: '-10px' }} />
+              <HeaderName name={pageName} />
+            </>
+          ) : (
+            <>
+              <LogoIcon sx={{ mr: 1 }} />
+              <HeaderName name={'OMDb Client'} />
+            </>
+          )}
         </Box>
 
         <RepoLink

src/components/Layout.tsx

@@ -5,9 +5,13 @@ import { BackToTopButton } from './BackToTopButton';
 
 import { Header } from './Header';
 
+interface LayoutProps {
+  pageName: string;
+}
+
 export type OutletContextType = { sx: SxProps };
 
-function Layout() {
+function Layout({ pageName }: LayoutProps) {
   return (
     <Box
       sx={{
@@ -16,7 +20,7 @@ function Layout() {
         minHeight: '100vh',
       }}
     >
-      <Header id='back-to-top-anchor' />
+      <Header id='back-to-top-anchor' pageName={pageName} />
 
       <Outlet context={{ sx: { flexGrow: 1 } }} />
 

src/pages/NotFoundPage.tsx

@@ -0,0 +1,15 @@
+import { Typography } from '@mui/material';
+
+function NotFoundPage() {
+  return (
+    <Typography
+      variant='h3'
+      component='h1'
+      sx={{ m: 'auto', textAlign: 'center' }}
+    >
+      Page not found
+    </Typography>
+  );
+}
+
+export { NotFoundPage };