Container wrapper components

client-solid/src/Containers/PageContainer.tsx

@@ -0,0 +1,10 @@
+import { JSXElement } from "solid-js";
+
+// MainContainer is the main container for the page.
+export function PageContainer(props: { children: JSXElement }): JSXElement {
+  return (
+    <div class="flex min-h-screen flex-col items-center justify-between">
+      {props.children}
+    </div>
+  );
+}

client-solid/src/Containers/PrimaryContainer.tsx

@@ -0,0 +1,10 @@
+import { JSXElement } from "solid-js";
+
+// PrimaryContainer is the main container for the content section of the page.
+export function PrimaryContainer(props: { children: JSXElement }): JSXElement {
+  return (
+    <div class="mb-8 flex w-full flex-col items-center space-y-2 px-2 md:max-w-3xl ">
+      {props.children}
+    </div>
+  );
+}

client-solid/src/Containers/Root.tsx

@@ -4,21 +4,23 @@ import { GlobalStateProvider } from "../Context/GlobalState";
 import { Footer } from "./Footer";
 import { LoginModal } from "./LoginModal";
 import { Navbar } from "./Navbar";
+import { PageContainer } from "./PageContainer";
 import { Primary } from "./Primary";
+import { PrimaryContainer } from "./PrimaryContainer";
 
 function Root(): JSXElement {
   return (
     <>
       <GlobalStateProvider>
         <FancyBackground />
-        <div class="flex flex-col items-center min-h-screen justify-between">
+        <PageContainer>
           <Navbar />
           <LoginModal />
-          <div class="mb-8 flex w-full flex-col items-center space-y-2 px-2 md:max-w-3xl ">
+          <PrimaryContainer>
             <Primary />
-          </div>
+          </PrimaryContainer>
           <Footer />
-        </div>
+        </PageContainer>
       </GlobalStateProvider>
     </>
   );