From 6c5a0f33ae1f18b98a1c5116dda222e498dbceb1 Mon Sep 17 00:00:00 2001
From: cohenerickson <cohenerickson@gmail.com>
Date: Fri, 15 Dec 2023 09:35:42 -0600
Subject: [PATCH] Header/Headerless routes

---
 src/components/HeaderRoute.tsx | 12 +++++++++++
 src/index.tsx                  | 17 +++++----------
 src/pages/Home.tsx             | 29 ++++++++++++++------------
 src/pages/_404.tsx             | 30 +++++++++++++++------------
 src/pages/discord.tsx          | 38 +++++++++++++++++++---------------
 5 files changed, 71 insertions(+), 55 deletions(-)
 create mode 100644 src/components/HeaderRoute.tsx

diff --git a/src/components/HeaderRoute.tsx b/src/components/HeaderRoute.tsx
new file mode 100644
index 0000000..43fedec
--- /dev/null
+++ b/src/components/HeaderRoute.tsx
@@ -0,0 +1,12 @@
+import { Header } from "./Header";
+
+export function HeaderRoute(props: { children: any }) {
+  return (
+    <div class="flex h-screen flex-col">
+      <Header />
+      <div class="flex-1 bg-primary">
+        <main class="h-full">{props.children}</main>
+      </div>
+    </div>
+  );
+}
diff --git a/src/index.tsx b/src/index.tsx
index 015474a..9c6e45f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,18 +13,11 @@ import "./i18n";
 export function App() {
   return (
     <LocationProvider>
-      <div class="flex h-screen flex-col">
-        <Header />
-        <div class="flex-1 bg-primary">
-          <main class="h-full">
-            <Router>
-              <Route path="/" component={Home} />
-              <Route path="/discord" component={DiscordPage} />
-              <Route default component={NotFound} />
-            </Router>
-          </main>
-        </div>
-      </div>
+      <Router>
+        <Route path="/" component={Home} />
+        <Route path="/discord" component={DiscordPage} />
+        <Route default component={NotFound} />
+      </Router>
     </LocationProvider>
   );
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index ed9d835..b706589 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,23 +1,26 @@
 import { useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
+import { HeaderRoute } from "../components/HeaderRoute";
 
 export function Home() {
   const [isFocused, setIsFocused] = useState(false);
   const { t } = useTranslation();
 
   return (
-    <div class="flex h-full items-center justify-center">
-      <input
-        onFocus={(e) => {
-          setIsFocused(true);
-        }}
-        onBlur={(e) => {
-          setIsFocused(false);
-        }}
-        type="text"
-        class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
-        placeholder={isFocused ? "" : t("home.placeholder")}
-      ></input>
-    </div>
+    <HeaderRoute>
+      <div class="flex h-full items-center justify-center">
+        <input
+          onFocus={(e) => {
+            setIsFocused(true);
+          }}
+          onBlur={(e) => {
+            setIsFocused(false);
+          }}
+          type="text"
+          class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
+          placeholder={isFocused ? "" : t("home.placeholder")}
+        ></input>
+      </div>
+    </HeaderRoute>
   );
 }
diff --git a/src/pages/_404.tsx b/src/pages/_404.tsx
index c294a22..1fd4e7c 100644
--- a/src/pages/_404.tsx
+++ b/src/pages/_404.tsx
@@ -1,22 +1,26 @@
 import { useTranslation } from "react-i18next";
 import { Link } from "preact-router";
+import { HeaderRoute } from "../components/HeaderRoute";
 
 export function NotFound() {
   const { t } = useTranslation();
+
   return (
-    <section class="h-full">
-      <div class="flex h-full flex-col items-center justify-center">
-        <img src="/404.png" class="h-72"></img>
-        <div class="flex flex-col items-center p-6">
-          <p class="font-roboto text-4xl font-bold">{t("404.text")}</p>
-          <span class="font-roboto text-3xl">404</span>
+    <HeaderRoute>
+      <section class="h-full">
+        <div class="flex h-full flex-col items-center justify-center">
+          <img src="/404.png" class="h-72"></img>
+          <div class="flex flex-col items-center p-6">
+            <p class="font-roboto text-4xl font-bold">{t("404.text")}</p>
+            <span class="font-roboto text-3xl">404</span>
+          </div>
+          <Link href="/">
+            <button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+              {t("404.return")}
+            </button>
+          </Link>
         </div>
-        <Link href="/">
-          <button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
-            {t("404.return")}
-          </button>
-        </Link>
-      </div>
-    </section>
+      </section>
+    </HeaderRoute>
   );
 }
diff --git a/src/pages/discord.tsx b/src/pages/discord.tsx
index 284cbf7..6f843fa 100644
--- a/src/pages/discord.tsx
+++ b/src/pages/discord.tsx
@@ -1,25 +1,29 @@
 import { useTranslation } from "react-i18next";
+import { HeaderRoute } from "../components/HeaderRoute";
 
 export function DiscordPage() {
   const { t } = useTranslation();
+
   return (
-    <section class="h-full">
-      <div class="flex h-full flex-col items-center justify-center">
-        <div class="flex flex-col items-center p-6">
-          <p class="font-roboto text-4xl font-bold">{t("discord.title")}</p>
-          <span class="font-roboto text-3xl">{t("discord.sub")}</span>
+    <HeaderRoute>
+      <section class="h-full">
+        <div class="flex h-full flex-col items-center justify-center">
+          <div class="flex flex-col items-center p-6">
+            <p class="font-roboto text-4xl font-bold">{t("discord.title")}</p>
+            <span class="font-roboto text-3xl">{t("discord.sub")}</span>
+          </div>
+          <a href="https://discord.gg/unblocker" class="p-6">
+            <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+              {t("discord.button1")}
+            </button>
+          </a>
+          <a href="/" class="p-6">
+            <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+              {t("discord.button2")}
+            </button>
+          </a>
         </div>
-        <a href="https://discord.gg/unblocker" class="p-6">
-          <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
-            {t("discord.button1")}
-          </button>
-        </a>
-        <a href="/" class="p-6">
-          <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
-            {t("discord.button2")}
-          </button>
-        </a>
-      </div>
-    </section>
+      </section>
+    </HeaderRoute>
   );
 }