Create a basic layout component

client/src/App.jsx

@@ -2,16 +2,21 @@ import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Index from './pages';
 import Login from './pages/login';
-import NavBar from './components/NavBar';
+import { Layout } from './stories/Layout/Layout';
 
+/**
+ *
+ * @returns {React.ReactElement}
+ */
 function App() {
   return (
     <>
-      <NavBar />
-      <Routes>
-        <Route path="/" element={<Index />} />
-        <Route path="/login" element={<Login />} />
-      </Routes>
+      <Layout>
+        <Routes>
+          <Route path="/" element={<Index />} />
+          <Route path="/login" element={<Login />} />
+        </Routes>
+      </Layout>
     </>
   );
 }

client/src/stories/Footer/Footer.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Group, Anchor } from '@mantine/core';
+import './footer.css';
+
+const links = [
+  { link: '#', label: 'Contact' },
+  { link: '#', label: 'Privacy' },
+  { link: '#', label: 'Blog' },
+  { link: '#', label: 'Careers' },
+];
+
+/**
+ * Footer
+ * @param {PropTypes.InferProps<typeof FooterProps>} props
+ */
+export const Footer = () => {
+  return (
+    <footer className="footer">
+      <Container>
+        <Group className="links">
+          {links.map((link) => (
+            <Anchor
+              c="dimmed"
+              key={link.label}
+              href={link.link}
+              onClick={(event) => event.preventDefault()}
+              size="sm"
+            >
+              {link.label}
+            </Anchor>
+          ))}
+        </Group>
+      </Container>
+    </footer>
+  );
+};
+
+const FooterProps = {
+  children: PropTypes.node,
+};
+
+Footer.propTypes = FooterProps;
+
+Footer.defaultProps = {
+  children: null,
+};

client/src/stories/Footer/Footer.stories.js

@@ -0,0 +1,14 @@
+import { Footer } from './Footer';
+
+export default {
+  title: 'Example/Footer',
+  component: Footer,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedOut = {};

client/src/stories/Footer/footer.css

@@ -0,0 +1,5 @@
+.footer {
+  padding: 1rem 1rem;
+  width: fit-content;
+  margin: 0 auto;
+}

client/src/stories/Layout/Layout.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Header } from '../Header/Header';
+import { Footer } from '../Footer/Footer';
+
+import './layout.css';
+
+/**
+ * Main layout
+ * @param {PropTypes.InferProps<typeof LayoutProps>} props
+ */
+export const Layout = ({ children }) => {
+  return (
+    <div className="layout">
+      <div className="layout-header">
+        <Header />
+      </div>
+      <div className="layout-content">{children}</div>
+      <div className="layout-footer">
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+const LayoutProps = {
+  children: PropTypes.node,
+};
+
+Layout.propTypes = LayoutProps;
+
+Layout.defaultProps = {
+  children: null,
+};

client/src/stories/Layout/layout.css

@@ -0,0 +1,24 @@
+.layout {
+  min-height: 100vh;
+  min-height: 100dvh;
+  width: 100vw;
+
+  display: grid;
+  grid-template-rows: 100% 1fr 100%;
+  grid-template-areas:
+    'head'
+    'main'
+    'foot';
+}
+
+.layout-header {
+  grid-area: head;
+}
+
+.layout-content {
+  grid-area: main;
+}
+
+.layout-footer {
+  grid-area: foot;
+}