Add Page component

src/components/Page/Page.stories.tsx

@@ -0,0 +1,24 @@
+import "../../styles/globals.css";
+import "../../styles/components.css";
+
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Page } from "./Page";
+import { Navigation, NavigationItem } from "../Navigation";
+
+export default {
+  title: "Components/Page",
+  component: Page,
+} as ComponentMeta<typeof Page>;
+
+export const Example: ComponentStory<typeof Page> = (args) => (
+  <Page>
+    <div style={{ display: "flex", height: "100%" }}>
+      <div style={{ margin: "auto" }}>Content goes here</div>
+    </div>
+  </Page>
+);
+Example.parameters = {
+  layout: "fullscreen",
+};

src/components/Page/Page.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren, ReactNode } from "react";
+import { Navigation } from "../Navigation";
+
+export interface PageProps {}
+
+export function Page({ children }: PropsWithChildren<PageProps>) {
+  return (
+    <div className="page">
+      <header>
+        <Navigation />
+      </header>
+      <main>{children}</main>
+    </div>
+  );
+}

src/styles/components.css

@@ -1,3 +1,21 @@
+/* Page */
+
+.page {
+  display: flex;
+  flex-direction: column;
+
+  height: 100vh;
+  margin: auto;
+  max-width: 800px;
+}
+
+.page > main {
+  background-color: lavender;
+  display: block;
+  flex: 1;
+  position: relative;
+}
+
 /* Navigation */
 
 .navigation {