Header/Headerless routes

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>
+  );
+}

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>
     </LocationProvider>
   );
 }

src/pages/Home.tsx

@@ -1,11 +1,13 @@
 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 (
+    <HeaderRoute>
       <div class="flex h-full items-center justify-center">
         <input
           onFocus={(e) => {
@@ -19,5 +21,6 @@ export function Home() {
           placeholder={isFocused ? "" : t("home.placeholder")}
         ></input>
       </div>
+    </HeaderRoute>
   );
 }

src/pages/_404.tsx

@@ -1,9 +1,12 @@
 import { useTranslation } from "react-i18next";
 import { Link } from "preact-router";
+import { HeaderRoute } from "../components/HeaderRoute";
 
 export function NotFound() {
   const { t } = useTranslation();
+
   return (
+    <HeaderRoute>
       <section class="h-full">
         <div class="flex h-full flex-col items-center justify-center">
           <img src="/404.png" class="h-72"></img>
@@ -18,5 +21,6 @@ export function NotFound() {
           </Link>
         </div>
       </section>
+    </HeaderRoute>
   );
 }

src/pages/discord.tsx

@@ -1,8 +1,11 @@
 import { useTranslation } from "react-i18next";
+import { HeaderRoute } from "../components/HeaderRoute";
 
 export function DiscordPage() {
   const { t } = useTranslation();
+
   return (
+    <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">
@@ -21,5 +24,6 @@ export function DiscordPage() {
           </a>
         </div>
       </section>
+    </HeaderRoute>
   );
 }