chore: change app to use a layout

I can now insert header/footer on each pages.

4 files changed, 45 insertions, 0 deletions

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..d92fb72
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,11 @@
+import Copyright from '@components/Copyright/Copyright';
+
+const Footer = () => {
+  return (
+    <footer>
+      <Copyright />
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000..599fdc0
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,11 @@
+import Branding from '@components/Branding/Branding';
+
+const Header = () => {
+  return (
+    <header>
+      <Branding />
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
new file mode 100644
index 0000000..4270a17
--- /dev/null
+++ b/src/components/Layouts/Layout.tsx
@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+import Footer from '@components/Footer/Footer';
+import Header from '@components/Header/Header';
+import Main from '@components/Main/Main';
+
+const Layout: FunctionComponent = ({ children }) => {
+  return (
+    <>
+      <Header />
+      <Main>{children}</Main>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
new file mode 100644
index 0000000..3705c83
--- /dev/null
+++ b/src/components/Main/Main.tsx
@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+
+const Main: FunctionComponent = ({ children }) => {
+  return <main>{children}</main>;
+};
+
+export default Main;