From 397bd6bba13882c6d3a821b1530e7fae73215f39 Mon Sep 17 00:00:00 2001
From: neha <nsharma215@gmail.com>
Date: Fri, 14 Jun 2024 18:00:52 +0100
Subject: [PATCH 1/2] code improvements of header, and layouts

---
 app/(marketing)/layout.tsx        | 37 --------------------
 app/about/layout.tsx              | 39 ---------------------
 app/collaboration/layout.tsx      | 26 --------------
 app/jobs/layout.tsx               | 36 -------------------
 app/layout.tsx                    | 33 +++++++++++-------
 app/meetups/layout.tsx            | 26 --------------
 app/speakers/layout.tsx           | 26 --------------
 components/Header.tsx             | 12 +++++++
 components/navigation/Logo.tsx    | 14 ++++++++
 components/navigation/MainNav.tsx | 58 ++++++++++++++++++-------------
 10 files changed, 81 insertions(+), 226 deletions(-)
 delete mode 100644 app/(marketing)/layout.tsx
 delete mode 100644 app/about/layout.tsx
 delete mode 100644 app/collaboration/layout.tsx
 delete mode 100644 app/jobs/layout.tsx
 delete mode 100644 app/meetups/layout.tsx
 delete mode 100644 app/speakers/layout.tsx
 create mode 100644 components/Header.tsx
 create mode 100644 components/navigation/Logo.tsx

diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
deleted file mode 100644
index ac33a2d..0000000
--- a/app/(marketing)/layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Link from "next/link";
-import { buttonVariants } from "@/components/Button";
-import { Footer } from "@/components/Footer";
-import { MainNav } from "@/components/navigation/MainNav";
-import { MARKETING } from "@/config/marketing";
-import { cn } from "@/lib/utils";
-
-interface MarketingLayoutProps {
-  children: React.ReactNode;
-}
-
-export default async function MarketingLayout({
-  children,
-}: MarketingLayoutProps) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      <header className="container z-40 bg-background">
-        <div className="flex h-32 items-center justify-between py-6">
-          <MainNav items={MARKETING.Navigation} />
-          <nav>
-            <Link
-              href="/register"
-              className={cn(
-                buttonVariants(),
-                "border-solid border-2 border-border"
-              )}
-            >
-              Register Now
-            </Link>
-          </nav>
-        </div>
-      </header>
-      <main className="flex-1">{children}</main>
-      <Footer />
-    </div>
-  );
-}
diff --git a/app/about/layout.tsx b/app/about/layout.tsx
deleted file mode 100644
index 91f9f45..0000000
--- a/app/about/layout.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from "next/link";
-import { buttonVariants } from "@/components/Button";
-import { Footer } from "@/components/Footer";
-import { MainNav } from "@/components/navigation/MainNav";
-import { ABOUT } from "@/config/about";
-import { Work_Sans } from "next/font/google";
-import { cn } from "@/lib/utils";
-const workSans = Work_Sans({ subsets: ["latin"] });
-
-interface AboutLayoutProps {
-  children: React.ReactNode;
-}
-
-export default async function AboutLayout({
-  children,
-}: AboutLayoutProps) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      <header className="container z-40 bg-background">
-        <div className="flex h-32 items-center justify-between py-6">
-          <MainNav items={ABOUT.Navigation} />
-          <nav>
-            <Link
-              href="/register"
-              className={cn(
-                buttonVariants(),
-                "border-solid border-2 border-border"
-              )}
-            >
-              Register Now
-            </Link>
-          </nav>
-        </div>
-      </header>
-      <main className="flex-1">{children}</main>
-      <Footer />
-    </div>
-  );
-}
diff --git a/app/collaboration/layout.tsx b/app/collaboration/layout.tsx
deleted file mode 100644
index 2fd4488..0000000
--- a/app/collaboration/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Footer } from "@/components/Footer";
-import { MainNav } from "@/components/navigation/MainNav";
-import { SPEAKERS } from "@/config/speakers";
-import { Work_Sans } from "next/font/google";
-
-const workSans = Work_Sans({ subsets: ["latin"] });
-
-interface CollabortionLayoutProps {
-  children: React.ReactNode;
-}
-
-export default async function SpeakersLayout({
-  children,
-}: CollabortionLayoutProps) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      <header className="container z-40 bg-background">
-        <div className="flex h-32 items-center justify-between py-6">
-          <MainNav items={SPEAKERS.Navigation} />
-        </div>
-      </header>
-      <main className={`${workSans.className} flex-1`}>{children}</main>
-      <Footer />
-    </div>
-  );
-}
diff --git a/app/jobs/layout.tsx b/app/jobs/layout.tsx
deleted file mode 100644
index 2ba5d52..0000000
--- a/app/jobs/layout.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Link from "next/link";
-import { buttonVariants } from "@/components/Button";
-import { cn } from "@/lib/utils";
-import { Footer } from "@/components/Footer";
-import { MainNav } from "@/components/navigation/MainNav";
-import { MARKETING } from "@/config/marketing";
-
-
-interface JobsLayoutProps {
-  children: React.ReactNode;
-}
-
-export default async function JobsLayout({ children }: JobsLayoutProps) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      <header className="container z-40 bg-background">
-        <div className="flex h-32 items-center justify-between py-6">
-          <MainNav items={MARKETING.Navigation} />
-          <nav>
-            <Link
-              href="/register"
-              className={cn(
-                buttonVariants(),
-                "border-solid border-2 border-border"
-              )}
-            >
-              Register Now
-            </Link>
-          </nav>
-        </div>
-      </header>
-      <main className="flex-1">{children}</main>
-      <Footer />
-    </div>
-  );
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index 987a8c0..15dc6cd 100644
--- 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
deleted file mode 100644
index cf3202f..0000000
--- a/app/meetups/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Footer } from "@/components/Footer";
-import { MainNav } from "@/components/navigation/MainNav";
-import { SPEAKERS } from "@/config/speakers";
-import { Work_Sans } from "next/font/google";
-
-const workSans = Work_Sans({ subsets: ["latin"] });
-
-interface SpeakersLayoutProps {
-  children: React.ReactNode;
-}
-
-export default async function SpeakersLayout({
-  children,
-}: SpeakersLayoutProps) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      <header className="container z-40 bg-background">
-        <div className="flex h-32 items-center justify-between py-6">
-          <MainNav items={SPEAKERS.Navigation} />
-        </div>
-      </header>
-      <main className={`${workSans.className} flex-1`}>{children}</main>
-      <Footer />
-    </div>
-  );
-}
diff --git a/app/speakers/layout.tsx b/app/speakers/layout.tsx
deleted file mode 100644
index cf3202f..0000000
--- a/app/speakers/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Footer } from "@/components/Footer";
-import { MainNav } from "@/components/navigation/MainNav";
-import { SPEAKERS } from "@/config/speakers";
-import { Work_Sans } from "next/font/google";
-
-const workSans = Work_Sans({ subsets: ["latin"] });
-
-interface SpeakersLayoutProps {
-  children: React.ReactNode;
-}
-
-export default async function SpeakersLayout({
-  children,
-}: SpeakersLayoutProps) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      <header className="container z-40 bg-background">
-        <div className="flex h-32 items-center justify-between py-6">
-          <MainNav items={SPEAKERS.Navigation} />
-        </div>
-      </header>
-      <main className={`${workSans.className} flex-1`}>{children}</main>
-      <Footer />
-    </div>
-  );
-}
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..e2c3cc3
--- /dev/null
+++ 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
new file mode 100644
index 0000000..5a365b7
--- /dev/null
+++ 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
index 941c90e..432c326 100644
--- 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>
   );
 }

From 93fc2d7866d7c4f5f266c966aa4f2241b3a517c4 Mon Sep 17 00:00:00 2001
From: neha <nsharma215@gmail.com>
Date: Fri, 14 Jun 2024 18:18:13 +0100
Subject: [PATCH 2/2] navigation config update

---
 app/(marketing)/page.tsx           |  8 ++++----
 components/Header.tsx              |  4 ++--
 config/{marketing.tsx => home.tsx} | 30 ++----------------------------
 config/navigation.tsx              | 30 ++++++++++++++++++++++++++++++
 types/index.ts                     |  7 +++++--
 5 files changed, 43 insertions(+), 36 deletions(-)
 rename config/{marketing.tsx => home.tsx} (86%)
 create mode 100644 config/navigation.tsx

diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index 4e99a21..88de323 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -3,7 +3,7 @@ import SectionHeader from "@/components/SectionHeader";
 import Workshop from "@/components/Workshop";
 import { buttonVariants } from "@/components/Button";
 import { cn } from "@/lib/utils";
-import { MARKETING } from "@/config/marketing";
+import { HOMEPAGE } from "@/config/home";
 import SignupForMeetupCard from "@/components/SignupForMeetupCard";
 
 export default async function page() {
@@ -13,7 +13,7 @@ export default async function page() {
         <div className="container py-4">
           <div className="max-w-2xl justify-between lg:flex lg:max-w-full lg:items-center gap-x-20">
             <Workshop
-              workshopData={MARKETING.WorkshopData}
+              workshopData={HOMEPAGE.WorkshopData}
               className={"w-full lg:w-1/2 max-w-2xl lg:shrink-0"}
             />
 
@@ -57,7 +57,7 @@ export default async function page() {
         <div className="container py-16 space-y-16">
           <SectionHeader header="Our Achivements" className="w-min mx-auto" />
           <dl className="grid grid-cols-1 gap-x-8 gap-y-16 md:grid-cols-2 lg:grid-cols-4">
-            {MARKETING.Achievements.map((achievement) => {
+            {HOMEPAGE.Achievements.map((achievement) => {
               return (
                 <div key={achievement.title} className="flex flex-col">
                   <dt className="text-xl  xl:text-2xl text-center font-semibold">
@@ -89,7 +89,7 @@ export default async function page() {
         <div className="container py-16 space-y-16 flex flex-col justify-center items-center">
           <SectionHeader header="Previous talks" className="w-min" />
           <div className="carousel carousel-center max-w-full flex flex-wrap justify-between gap-7 xl:gap-8 py-5">
-            {MARKETING.PreviousTalks.map((previousTalk, index) => {
+            {HOMEPAGE.PreviousTalks.map((previousTalk, index) => {
               return (
                 <div
                   key={`previousTalk.title + ${index}`}
diff --git a/components/Header.tsx b/components/Header.tsx
index e2c3cc3..14fa868 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,11 +1,11 @@
 import { MainNav } from "@/components/navigation/MainNav";
-import { MARKETING } from "@/config/marketing";
+import { NAVIGATION } from "@/config/navigation";
 
 export function Header() {
   return (
     <header className="container z-40 bg-background">
       <div className="flex h-32 items-center py-6">
-        <MainNav items={MARKETING.Navigation} />
+        <MainNav items={NAVIGATION.Navigation} />
       </div>
     </header>
   );
diff --git a/config/marketing.tsx b/config/home.tsx
similarity index 86%
rename from config/marketing.tsx
rename to config/home.tsx
index 2695a07..f9c6844 100644
--- a/config/marketing.tsx
+++ b/config/home.tsx
@@ -1,33 +1,7 @@
-import { MarketingData } from "@/types";
+import { Home } from "@/types";
 import speakerImage from "public/assets/hero_image_guest_v1.png";
 
-export const MARKETING: MarketingData = {
-  Navigation: [
-    {
-      title: "Home",
-      href: "/",
-    },
-    {
-      title: "Meetups",
-      href: "/meetups",
-    },
-    {
-      title: "Jobs",
-      href: "/jobs",
-    },
-    {
-      title: "Speakers",
-      href: "/speakers",
-    },
-    {
-      title: "Collaboration",
-      href: "/collaboration",
-    },
-    {
-      title: "About",
-      href: "/about",
-    },
-  ],
+export const HOMEPAGE: Home = {
   Achievements: [
     {
       title: "10,000+ Members",
diff --git a/config/navigation.tsx b/config/navigation.tsx
new file mode 100644
index 0000000..127cdcb
--- /dev/null
+++ b/config/navigation.tsx
@@ -0,0 +1,30 @@
+import { Navigation } from "@/types";
+
+export const NAVIGATION: Navigation = {
+  Navigation: [
+    {
+      title: "Home",
+      href: "/",
+    },
+    {
+      title: "Meetups",
+      href: "/meetups",
+    },
+    {
+      title: "Jobs",
+      href: "/jobs",
+    },
+    {
+      title: "Speakers",
+      href: "/speakers",
+    },
+    {
+      title: "Collaboration",
+      href: "/collaboration",
+    },
+    {
+      title: "About",
+      href: "/about",
+    },
+  ]
+};
diff --git a/types/index.ts b/types/index.ts
index 8c8ba0f..aa12409 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -32,12 +32,15 @@ export interface WorkShopData {
   workshopDate: string;
 }
 
-export interface MarketingData {
-  Navigation: NavItem[];
+export interface Home {
   Achievements: AchievementItem[];
   PreviousTalks: TalkItem[];
   WorkshopData: WorkShopData;
 }
+
+export interface Navigation {
+  Navigation: NavItem[];
+}
 export interface FooterData {
   QuickLinks: FooterItem[];
   FollowUs: FooterItem[];