From a19cef237da40814b81839c51d47a0e6204077de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marco=20Araya=20Jim=C3=A9nez?= <marcojime23@gmail.com>
Date: Thu, 26 Sep 2024 23:13:56 -0600
Subject: [PATCH 1/3] feat: create navbar component

---
 .../gostarkme-web/components/ui/Navbar.tsx    | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 frontend/gostarkme-web/components/ui/Navbar.tsx

diff --git a/frontend/gostarkme-web/components/ui/Navbar.tsx b/frontend/gostarkme-web/components/ui/Navbar.tsx
new file mode 100644
index 0000000..26a2be7
--- /dev/null
+++ b/frontend/gostarkme-web/components/ui/Navbar.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import Image from "next/image";
+import Link from 'next/link';
+import { LinkButton } from "../ui/LinkButton";
+
+export const Navbar = () => {
+    const ROOT = process.env.NEXT_PUBLIC_APP_ROOT;
+
+    return (
+        <nav className="sticky bg-white top-0 w-full z-20 border-b-[1px] border-darkblue">
+            <div className="max-w-screen-2xl mx-auto w-full p-4 flex flex-col md:flex-row items-center md:justify-between">
+                <div className="flex flex-col md:flex-row items-center md:space-x-8">
+                    <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 mb-4 md:mb-0">
+                        <Image
+                            src={ROOT + "icons/starklogo.png"}
+                            alt="Go Stark Me logo"
+                            width={24}
+                            height={24}
+                            className="md:w-[30px] md:h-[30px]"
+                        />
+                        <span className="text-lg md:text-xl font-semibold">Go Stark Me</span>
+                    </div>
+                    <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6 mb-4 md:mb-0">
+                        <Link href="" className="text-gray-700 hover:text-gray-900">
+                            My Profile
+                        </Link>
+                        <Link href="" className="text-gray-700 hover:text-gray-900">
+                            My funds
+                        </Link>
+                    </div>
+                </div>
+                <LinkButton
+                    label="Connect wallet"
+                    href="/"
+                />
+            </div>
+        </nav>
+    );
+};
+
+export default Navbar;
\ No newline at end of file

From 148c9af3d41583d9cf44229767834d19be8b5f42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marco=20Araya=20Jim=C3=A9nez?= <marcojime23@gmail.com>
Date: Thu, 26 Sep 2024 23:38:49 -0600
Subject: [PATCH 2/3] feat: add props for dynamic content and improved
 reusability

---
 .../gostarkme-web/components/ui/Navbar.tsx    | 45 +++++++++++++------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/frontend/gostarkme-web/components/ui/Navbar.tsx b/frontend/gostarkme-web/components/ui/Navbar.tsx
index 26a2be7..83fa6b5 100644
--- a/frontend/gostarkme-web/components/ui/Navbar.tsx
+++ b/frontend/gostarkme-web/components/ui/Navbar.tsx
@@ -3,35 +3,54 @@ import Image from "next/image";
 import Link from 'next/link';
 import { LinkButton } from "../ui/LinkButton";
 
-export const Navbar = () => {
-    const ROOT = process.env.NEXT_PUBLIC_APP_ROOT;
+interface NavItem {
+  label: string;
+  href: string;
+}
 
+interface NavbarProps {
+  logoSrc: string;
+  logoAlt: string;
+  title: string;
+  navItems: NavItem[];
+  ctaButton: {
+    label: string;
+    href: string;
+  };
+}
+
+export const Navbar = ({
+  logoSrc,
+  logoAlt,
+  title,
+  navItems,
+  ctaButton
+}: NavbarProps) => {
     return (
         <nav className="sticky bg-white top-0 w-full z-20 border-b-[1px] border-darkblue">
             <div className="max-w-screen-2xl mx-auto w-full p-4 flex flex-col md:flex-row items-center md:justify-between">
                 <div className="flex flex-col md:flex-row items-center md:space-x-8">
                     <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 mb-4 md:mb-0">
                         <Image
-                            src={ROOT + "icons/starklogo.png"}
-                            alt="Go Stark Me logo"
+                            src={logoSrc}
+                            alt={logoAlt}
                             width={24}
                             height={24}
                             className="md:w-[30px] md:h-[30px]"
                         />
-                        <span className="text-lg md:text-xl font-semibold">Go Stark Me</span>
+                        <span className="text-lg md:text-xl font-semibold">{title}</span>
                     </div>
                     <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6 mb-4 md:mb-0">
-                        <Link href="" className="text-gray-700 hover:text-gray-900">
-                            My Profile
-                        </Link>
-                        <Link href="" className="text-gray-700 hover:text-gray-900">
-                            My funds
-                        </Link>
+                        {navItems.map((item, index) => (
+                            <Link key={index} href={item.href} className="text-gray-700 hover:text-gray-900">
+                                {item.label}
+                            </Link>
+                        ))}
                     </div>
                 </div>
                 <LinkButton
-                    label="Connect wallet"
-                    href="/"
+                    label={ctaButton.label}
+                    href={ctaButton.href}
                 />
             </div>
         </nav>

From 5bdc2b503d71f9a64b6554fb3f1a7eac7d348cce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marco=20Araya=20Jim=C3=A9nez?= <marcojime23@gmail.com>
Date: Fri, 27 Sep 2024 13:14:05 -0600
Subject: [PATCH 3/3] refactor: use unique keys for nav items

---
 frontend/gostarkme-web/components/ui/Navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/gostarkme-web/components/ui/Navbar.tsx b/frontend/gostarkme-web/components/ui/Navbar.tsx
index 83fa6b5..7a370e7 100644
--- a/frontend/gostarkme-web/components/ui/Navbar.tsx
+++ b/frontend/gostarkme-web/components/ui/Navbar.tsx
@@ -41,8 +41,8 @@ export const Navbar = ({
                         <span className="text-lg md:text-xl font-semibold">{title}</span>
                     </div>
                     <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6 mb-4 md:mb-0">
-                        {navItems.map((item, index) => (
-                            <Link key={index} href={item.href} className="text-gray-700 hover:text-gray-900">
+                        {navItems.map((item) => (
+                            <Link key={item.href} href={item.href} className="text-gray-700 hover:text-gray-900">
                                 {item.label}
                             </Link>
                         ))}