From e8802b8a325353d3cb254a63afda6a07b6cbe76a Mon Sep 17 00:00:00 2001
From: Imbus <imbus64@protonmail.com>
Date: Wed, 22 Nov 2023 21:14:36 +0100
Subject: [PATCH] Container wrapper components

---
 client-solid/src/Containers/PageContainer.tsx    | 10 ++++++++++
 client-solid/src/Containers/PrimaryContainer.tsx | 10 ++++++++++
 client-solid/src/Containers/Root.tsx             | 10 ++++++----
 3 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 client-solid/src/Containers/PageContainer.tsx
 create mode 100644 client-solid/src/Containers/PrimaryContainer.tsx

diff --git a/client-solid/src/Containers/PageContainer.tsx b/client-solid/src/Containers/PageContainer.tsx
new file mode 100644
index 0000000..314b1be
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client-solid/src/Containers/PrimaryContainer.tsx b/client-solid/src/Containers/PrimaryContainer.tsx
new file mode 100644
index 0000000..62292c4
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client-solid/src/Containers/Root.tsx b/client-solid/src/Containers/Root.tsx
index daf762c..0669db1 100644
--- a/client-solid/src/Containers/Root.tsx
+++ b/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>
     </>
   );