feat: split nav in preparation for mdx

src/components/landing-page.tsx

@@ -4,11 +4,11 @@ import dynamic from 'next/dynamic';
 
 
 
-import { Nav } from "@/components/nav";
 import { jgs7 } from '@/fonts';
 import { Translations } from "@/i18n/translations";
 import { cn } from "@/lib/utils";
 import { ReactElement, useEffect, useRef } from "react";
+import { MainpageNav } from './nav';
 import { NewsletterPopup } from './newsletter-form';
 import { useTheme } from "./providers";
 import { Skeleton } from './ui/skeleton';
@@ -150,7 +150,7 @@ export default function LandingPage(
 
   return (
     <div>
-      <Nav t={t} />
+      <MainpageNav t={t} />
       <main className="flex flex-col min-h-screen grid-gap-10 gap-10 pb-12">
 
         <section id="hero" className="h-screen relative overflow-hidden dark:bg-black light:bg-white ">

src/components/nav-container.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "./providers";
+import { LanguageSelector } from "./ui/language-selector";
+
+export function NavContainer({ children, title, }: { children: React.ReactNode, title: string }) {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 backdrop-blur-xs bg-background/40 border-b z-[10000]">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex gap-4">
+            <LanguageSelector />
+            <a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
+              <h1>{title}</h1>
+            </a>
+          </div>
+          <div className="flex items-center">
+            {children}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              className="ml-4"
+            >
+              {theme === "dark" ? (
+                <SunIcon className="h-5 w-5" />
+              ) : (
+                <MoonIcon className="h-5 w-5" />
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}

src/components/nav.tsx

@@ -1,13 +1,10 @@
 "use client"
-import { Button } from "@/components/ui/button"
 import { useColorSections } from "@/hooks/color-sections"
 import { type translations } from "@/i18n/translations"
 import { cn } from "@/lib/utils"
-import { MoonIcon, SunIcon } from "lucide-react"
 import { useRef } from "react"
 import { MobileNav } from "./mobile-nav"
-import { useTheme } from "./providers"
+import { NavContainer } from "./nav-container"
-import { LanguageSelector } from "./ui/language-selector"
 
 const linksOrder: Array<keyof (typeof translations.pl)["nav"]> = [
   "hero",
@@ -20,61 +17,36 @@ const linksOrder: Array<keyof (typeof translations.pl)["nav"]> = [
   "contact",
 ]
 
-export function Nav({
+export function MainpageNav({
   t,
 }: {
   t: typeof translations.pl
 }) {
-  const { theme, setTheme } = useTheme()
   const parent = useRef<HTMLDivElement>(null);
   useColorSections(parent);
 
   return (
-    <nav className="fixed top-0 left-0 right-0 backdrop-blur-xs bg-background/40 border-b z-[10000]">
+    <NavContainer title={t.nav.title}>
-      <div className="container mx-auto px-4">
+      <>
-        <div className="flex items-center justify-between h-16">
+        <div className="hidden md:flex md:items-center md:gap-4 lg:gap-8" ref={parent}>
-          <div className="flex gap-4">
-            <LanguageSelector />
-            <a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
-              <h1>{t.nav.title}</h1>
-            </a>
-          </div>
-          <div className="flex items-center">
-            {/* Desktop Navigation */}
-            <div className="hidden md:flex md:items-center md:gap-4 lg:gap-8" ref={parent}>
 
-              {linksOrder.map((value) => (
+          {linksOrder.map((value) => (
-                <a
+            <a
-                  key={value}
+              key={value}
-                  href={`#${value}`}
+              href={`#${value}`}
-                  className="text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]"
+              className="text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]"
-                >
-                  {t.nav[value]}
-                  <span data-sub={value} className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform will-change-transform", {
-                  })} />
-                </a>
-              ))}
-            </div>
-
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              className="ml-4"
             >
-              {theme === "dark" ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
+              {t.nav[value]}
-            </Button>
+              <span data-sub={value} className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform will-change-transform", {
-
+              })} />
-
+            </a>
-
+          ))}
-            {/* Mobile Navigation */}
-            <div className="md:hidden ml-2">
-              <MobileNav t={t} linksOrder={linksOrder} />
-            </div>
-          </div>
         </div>
-      </div>
+        <div className="md:hidden ml-2">
-    </nav>
+          <MobileNav t={t} linksOrder={linksOrder} />
+        </div>
+      </>
+    </NavContainer>
   )
 }