Add page layouts to frontend (#2)

* add page layout with no header or footer

* add page layout with header and footer

* edit index.tsx page to work with new page layouts

* remove Header and Footer from _app.tsx

* alter _app.tsx to work with new page layouts

packages/nextjs/components/layouts/CleanLayout.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+
+interface CleanLayoutProps {
+  children: ReactNode;
+}
+
+export default function CleanLayout({ children }: CleanLayoutProps) {
+  return (
+    <>
+      <main className="relative flex flex-col justify-center flex-1">{children}</main>
+    </>
+  );
+}

packages/nextjs/components/layouts/HeaderFooterLayout.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+import { Footer } from "~~/components/Footer";
+import { Header } from "~~/components/Header";
+
+interface HeaderFooterLayoutProps {
+  children: ReactNode;
+}
+
+export default function HeaderFooterLayout({ children }: HeaderFooterLayoutProps) {
+  return (
+    <>
+      <Header />
+      <main className="relative flex flex-col justify-center flex-1">{children}</main>
+      <Footer />
+    </>
+  );
+}

packages/nextjs/pages/_app.tsx

@@ -1,21 +1,28 @@
-import { useEffect, useState } from "react";
+import { ReactElement, ReactNode, useEffect, useState } from "react";
 import type { AppProps } from "next/app";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
+import type { NextPage } from "next";
 import NextNProgress from "nextjs-progressbar";
 import { Toaster } from "react-hot-toast";
 import { useDarkMode } from "usehooks-ts";
 import { WagmiConfig } from "wagmi";
-import { Footer } from "~~/components/Footer";
-import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { useGlobalState } from "~~/services/store/store";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 import { appChains } from "~~/services/web3/wagmiConnectors";
 import "~~/styles/globals.css";
 
-const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
+export type NextPageWithLayout<P = Record<string, never>, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+const ScaffoldEthApp = ({ Component, pageProps }: AppPropsWithLayout) => {
   const price = useNativeCurrencyPrice();
   const setNativeCurrencyPrice = useGlobalState(state => state.setNativeCurrencyPrice);
   // This variable is required for initial client side rendering of correct theme for RainbowKit
@@ -32,6 +39,8 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
     setIsDarkTheme(isDarkMode);
   }, [isDarkMode]);
 
+  const getLayout = Component.getLayout || (page => page);
+
   return (
     <WagmiConfig config={wagmiConfig}>
       <NextNProgress />
@@ -40,13 +49,7 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
         avatar={BlockieAvatar}
         theme={isDarkTheme ? darkTheme() : lightTheme()}
       >
-        <div className="flex flex-col min-h-screen">
-          <Header />
-          <main className="relative flex flex-col justify-center flex-1">
-            <Component {...pageProps} />
-          </main>
-          <Footer />
-        </div>
+        <div className="flex flex-col min-h-screen">{getLayout(<Component {...pageProps} />)}</div>
         <Toaster />
       </RainbowKitProvider>
     </WagmiConfig>

packages/nextjs/pages/index.tsx

@@ -1,11 +1,13 @@
+import { ReactElement } from "react";
 import Link from "next/link";
-import type { NextPage } from "next";
+import type { NextPageWithLayout } from "./_app";
 import { MetaHeader } from "~~/components/MetaHeader";
+import CleanLayout from "~~/components/layouts/CleanLayout";
 
-const Home: NextPage = () => {
+const LandingPage: NextPageWithLayout = () => {
   return (
     <>
-      <MetaHeader />
+      <MetaHeader /> {/* Look into MetaHeader - should it be moved to _app.tsx ??? */}
       <div className="flex flex-col items-center pt-10">
         <div className="px-5">
           <h1 className="text-center mb-8">
@@ -26,4 +28,8 @@ const Home: NextPage = () => {
   );
 };
 
-export default Home;
+LandingPage.getLayout = function getLayout(page: ReactElement) {
+  return <CleanLayout>{page}</CleanLayout>;
+};
+
+export default LandingPage;