Merge pull request #24 from Mogakamo/develop

Configured the project Layout component
SheCodeAfrica-Nairobi · Jul 1, 2022 · 9260454 · 9260454
2 parents add8a0f + c978e2f
commit 9260454
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 28 deletions.
diff --git a/components/EventsPane.tsx b/components/EventsPane.tsx
@@ -1,4 +1,4 @@
-function SectionHeader() {
+export default function EventsPane() {
   return (
     <>
       <h2 className="font-header text-primary text-3xl sm:text-4xl">Events we have in store for you:</h2>

diff --git a/components/index.ts b/components/index.ts
@@ -0,0 +1,4 @@
+export {default as Banner} from "./Banner"
+export {default as CallToAction} from "./CallToAction"
+export {default as EventsPane} from "./EventsPane"
+export {default as Layout} from "./layout"
diff --git a/components/layout.tsx b/components/layout.tsx
@@ -0,0 +1,19 @@
+import React, {ReactNode} from "react";
+import Nav from "./Nav";
+import Footer from "./Footer";
+
+type LayoutType = {
+    children: ReactNode
+}
+
+const Layout = ({ children }: LayoutType) => {
+  return (
+    <>
+      <Nav />
+      <main>{children}</main>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,8 +1,20 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { NextPage } from "next";
+import { ReactElement, ReactNode } from "react";
 
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+export type NextPageLayout = NextPage & {
+  getLayout?: (page: ReactElement) => ReactNode
 }
 
-export default MyApp
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageLayout
+}
+
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  const getLayout = Component.getLayout ?? ((page) => page)
+
+  return getLayout(<Component {...pageProps} />);
+}
+
+export default MyApp;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,27 +1,20 @@
-import React, { useState } from 'react'
-import Banner from "../components/Banner";
-import Footer from '../components/Footer';
-import Nav from '../components/Nav';
-import EventsPane from '../components/EventsPane'
-import Head from 'next/head';
-import CallToAction from '../components/CallToAction'
+import React, { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import { prependOnceListener } from "process";
+import type { NextPage } from "next";
+import { Banner, CallToAction, EventsPane, Layout } from "../components";
 
 
-const Home = () => {
-	return (
-		<>
-			<Head>
-				<title>She-Codes-Nairobi</title>
-			</Head>
-			<main className="w-full px-4 md:px-8 lg:px-20 text-darkAccent">
-			<Nav />
-			<Banner />
-			<CallToAction />
-			<EventsPane />
-			<Footer />
-			</main>
-		</>
-	);
+      <main className="w-full px-4 md:px-8 lg:px-20 text-darkAccent">
+        <Layout>
+          <Banner />
+          <EventsPane />
+          <CallToAction />
+        </Layout>
+      </main>
+    </div>
+  );
 };
 
 export default Home;