From 4f63ec8ee93b42dcd5a497a3149bddd732cd9548 Mon Sep 17 00:00:00 2001
From: Thiago Chaves <thiago.coh@gmail.com>
Date: Thu, 7 Jul 2022 11:02:24 +0300
Subject: [PATCH] Add Page component

---
 src/components/Page/Page.stories.tsx | 24 ++++++++++++++++++++++++
 src/components/Page/Page.tsx         | 15 +++++++++++++++
 src/components/Page/index.ts         |  0
 src/styles/components.css            | 18 ++++++++++++++++++
 4 files changed, 57 insertions(+)
 create mode 100644 src/components/Page/Page.stories.tsx
 create mode 100644 src/components/Page/Page.tsx
 create mode 100644 src/components/Page/index.ts

diff --git a/src/components/Page/Page.stories.tsx b/src/components/Page/Page.stories.tsx
new file mode 100644
index 0000000..c0e4a13
--- /dev/null
+++ b/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",
+};
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
new file mode 100644
index 0000000..33cecea
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/components.css b/src/styles/components.css
index 41f5bee..cb8a022 100644
--- a/src/styles/components.css
+++ b/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 {