code improvements of header, and layouts

jslovers · Jun 14, 2024 · 397bd6b · 397bd6b
1 parent d907a57
commit 397bd6b
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 226 deletions.
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
diff --git a/app/about/layout.tsx b/app/about/layout.tsx
diff --git a/app/collaboration/layout.tsx b/app/collaboration/layout.tsx
diff --git a/app/jobs/layout.tsx b/app/jobs/layout.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,22 +1,31 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
-
-const inter = Inter({ subsets: ['latin'] })
-
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { Work_Sans } from "next/font/google";
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import "./globals.css";
+const inter = Inter({ subsets: ["latin"] });
+const workSans = Work_Sans({ subsets: ["latin"] });
 export const metadata: Metadata = {
-  title: 'JSLovers',
-  description: 'JSLovers - a community for the developers',
-}
+  title: "JSLovers",
+  description: "JSLovers - a community for the developers",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {" "}
+        <div className="flex min-h-screen flex-col">
+          <Header />
+          <main className={`${workSans.className} flex-1`}>{children}</main>
+          <Footer />
+        </div>
+      </body>
     </html>
-  )
+  );
 }
diff --git a/app/meetups/layout.tsx b/app/meetups/layout.tsx
diff --git a/app/speakers/layout.tsx b/app/speakers/layout.tsx
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -0,0 +1,12 @@
+import { MainNav } from "@/components/navigation/MainNav";
+import { MARKETING } from "@/config/marketing";
+
+export function Header() {
+  return (
+    <header className="container z-40 bg-background">
+      <div className="flex h-32 items-center py-6">
+        <MainNav items={MARKETING.Navigation} />
+      </div>
+    </header>
+  );
+}
diff --git a/components/navigation/Logo.tsx b/components/navigation/Logo.tsx
@@ -0,0 +1,14 @@
+"use client";
+import Link from "next/link";
+import { Icons } from "../Icons";
+
+export function Logo() {
+  return (
+      <h1>
+        <Link href="/">
+          <span className="sr-only">JSLovers</span>
+          <Icons.logo />
+        </Link>
+      </h1>
+  );
+}
diff --git a/components/navigation/MainNav.tsx b/components/navigation/MainNav.tsx
@@ -1,42 +1,52 @@
-"use client"
-
-import { NavItem } from "@/types";
+"use client";
 import Link from "next/link";
-import { Icons } from "../Icons";
-import { usePathname } from 'next/navigation';
+import { NavItem } from "@/types";
+import { usePathname } from "next/navigation";
+import { Logo } from "./Logo";
+import { buttonVariants } from "@/components/Button";
+import { cn } from "@/lib/utils";
 
 interface MainNavProps {
   items?: NavItem[];
   children?: React.ReactNode;
 }
+const createNavigation = (items: NavItem[], currentPath: string) => {
+  return items.map((item, index) => (
+    <Link
+      key={index}
+      href={item.href || ""}
+      className={`flex items-center border-b-4 sm:text-sm md:text-lg ${
+        currentPath === item.href ? "border-black" : "border-white"
+      }`}
+    >
+      {item.title}
+    </Link>
+  ));
+};
 
 export function MainNav({ items }: MainNavProps) {
   const currentPath = usePathname();
 
   return (
-    <div className="flex gap-6 md:gap-10">
-      <h1>
-        <Link href="/">
-          <span className="sr-only">JSLovers</span>
-          <Icons.logo />
-        </Link>
-      </h1>
+    <div className="flex justify-between w-full">
+      <div className="flex">
+      <Logo />
 
-      {items?.length ? (
-        <nav className="hidden gap-10 lg:flex">
-          {items.map((item, index) => (
+          <nav className="hidden gap-10 lg:flex">
+            {items && createNavigation(items, currentPath)}
+          </nav>
+      </div>
+      <nav>
             <Link
-              key={index}
-              href={item.href || ""}
-              className={`flex items-center border-b-4 md:text-lg sm:text-sm ${
-                currentPath === item.href ? "border-black" : "border-white"
-              }`}
+              href="/register"
+              className={cn(
+                buttonVariants(),
+                "border-solid border-2 border-border"
+              )}
             >
-              {item.title}
+              Register Now
             </Link>
-          ))}
-        </nav>
-      ) : null}
+          </nav>
     </div>
   );
 }