feat(www): docs-migration | added children to Header

crherman7 · Dec 17, 2024 · 450a1f1 · 450a1f1
1 parent 665f730
commit 450a1f1
Showing 1 changed file with 53 additions and 47 deletions.
diff --git a/apps/www/app/components/Header.tsx b/apps/www/app/components/Header.tsx
@@ -10,63 +10,69 @@ type HeaderProps = {
   disableIcon?: boolean;
 };
 
-export function Header({disableIcon = false}: HeaderProps) {
+export function Header({
+  disableIcon = false,
+  children,
+}: React.PropsWithChildren<HeaderProps>) {
   const projectId = useProjectId();
 
   return (
-    <header className="sticky top-0 z-10 flex h-[57px] flex-row items-center justify-between border-b pr-4 backdrop-blur-[10px]">
-      <div className="flex flex-row items-center justify-center">
-        {disableIcon ? (
-          <></>
-        ) : (
-          <div className="h-[57px] w-[56px] border-r p-2">
-            <a href="/">
-              <Button variant="outline" size="icon" aria-label="Home">
-                <img className="p-[6px]" src="/favicon.png" alt="" />
-              </Button>
-            </a>
-          </div>
-        )}
-        <h1 className="ml-4 font-pixelify text-2xl">ReChunk</h1>
-      </div>
-      <div className="flex flex-row items-center">
-        <a href="https://github.com/crherman7/rechunk">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="rounded-lg hover:bg-muted"
-            aria-label="Settings">
-            <GitHubLogoIcon className="size-4" />
-          </Button>
-        </a>
-        <a href="https://discord.gg/xFhuxjwhss">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="rounded-lg hover:bg-muted"
-            aria-label="Settings">
-            <DiscordLogoIcon className="size-4" />
-          </Button>
-        </a>
-        {!!projectId && (
-          <Form method="post" action="/auth/logout">
+    <header className="sticky top-0 z-10">
+      <div className="flex h-[57px] flex-row items-center justify-between border-b pr-4 backdrop-blur-[10px]">
+        <div className="flex flex-row items-center justify-center">
+          {disableIcon ? (
+            <></>
+          ) : (
+            <div className="h-[57px] w-[56px] border-r p-2">
+              <a href="/">
+                <Button variant="outline" size="icon" aria-label="Home">
+                  <img className="p-[6px]" src="/favicon.png" alt=""/>
+                </Button>
+              </a>
+            </div>
+          )}
+          <h1 className="ml-4 font-pixelify text-2xl">ReChunk</h1>
+        </div>
+        <div className="flex flex-row items-center">
+          <a href="https://github.com/crherman7/rechunk">
             <Button
-              type="submit"
               variant="ghost"
               size="icon"
               className="rounded-lg hover:bg-muted"
               aria-label="Settings">
-              <ExitIcon className="size-4" />
+              <GitHubLogoIcon className="size-4"/>
             </Button>
-          </Form>
-        )}
-        <div className="mx-2 h-4 border-[0.2px]" />
-        <a
-          href="https://crherman7.github.io/rechunk/"
-          className="flex items-center pl-2">
-          <Text.Small className="text-center">Docs</Text.Small>
-        </a>
+          </a>
+          <a href="https://discord.gg/xFhuxjwhss">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="rounded-lg hover:bg-muted"
+              aria-label="Settings">
+              <DiscordLogoIcon className="size-4"/>
+            </Button>
+          </a>
+          {!!projectId && (
+            <Form method="post" action="/auth/logout">
+              <Button
+                type="submit"
+                variant="ghost"
+                size="icon"
+                className="rounded-lg hover:bg-muted"
+                aria-label="Settings">
+                <ExitIcon className="size-4"/>
+              </Button>
+            </Form>
+          )}
+          <div className="mx-2 h-4 border-[0.2px]"/>
+          <a
+            href="https://crherman7.github.io/rechunk/"
+            className="flex items-center pl-2">
+            <Text.Small className="text-center">Docs</Text.Small>
+          </a>
+        </div>
       </div>
+      {children}
     </header>
   );
 }