[Add] Global Layout

VicDario · Jan 23, 2022 · 333c8c0 · 333c8c0
1 parent 0fafc97
commit 333c8c0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -0,0 +1,15 @@
+import { NextPage } from "next";
+
+import Navbar from "components/Navbar/Navbar";
+
+const Layout: React.FC = ({ children }) => {
+    return (
+        <div>
+            <Navbar />
+            {children}
+            <footer>This is the footer</footer>
+        </div>
+    )
+}
+
+export default Layout;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,7 +1,12 @@
 import { AppProps } from 'next/app'
+import Layout from 'components/Layout/Layout';
 
 function MyApp({ Component, pageProps }: AppProps) {
-    return <Component {...pageProps} />
+    return(
+        <Layout>
+            <Component {...pageProps} />
+        </Layout>
+    )
   }
 
   // Only uncomment this method if you have blocking data requirements for

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -4,7 +4,6 @@ import Navbar from '../components/Navbar/Navbar';
 const About: NextPage = () => {
     return (
         <div>
-            <Navbar />
             <h1>About Platzi-avo</h1>
         </div>
     )

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -14,7 +14,6 @@ const Home: NextPage = () => {
     }, []);
     return (
         <div>
-            <Navbar />
             <h1>Home Platzi-avo</h1>
             {productList.map((product, index) => {
                 return (