From fbec3b8a3b2d6ac733113e742cf4074a2f6289b5 Mon Sep 17 00:00:00 2001
From: Chris-D7 <constantincristian.draghici@ulbsibiu.ro>
Date: Tue, 9 Jul 2024 18:06:26 +0300
Subject: [PATCH] [chris]Extracted links + navbar

Extracted the links into an array of objects containing the route and name. It is used by both desktop and mobile navbars, generating <Link> tags based on the links array.
---
 src/components/desktopHeader.jsx        | 10 +++-------
 src/components/desktopNavbar.jsx        |  8 ++++++++
 src/components/links.js                 |  4 ++++
 src/components/mobileHeader/links.jsx   |  5 -----
 src/components/mobileHeader/navbar.jsx  |  8 ++++++++
 src/components/mobileHeader/overlay.jsx |  7 +++++--
 6 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 src/components/desktopNavbar.jsx
 create mode 100644 src/components/links.js
 delete mode 100644 src/components/mobileHeader/links.jsx
 create mode 100644 src/components/mobileHeader/navbar.jsx

diff --git a/src/components/desktopHeader.jsx b/src/components/desktopHeader.jsx
index 4f64b28..6ec9b22 100644
--- a/src/components/desktopHeader.jsx
+++ b/src/components/desktopHeader.jsx
@@ -1,10 +1,6 @@
-import Link from "next/link";
+import { DesktopNavbar } from "./desktopNavbar";
+import { Links } from "./links";
 
 export const DesktopHeader = () => <div className="hidden lg:block ">
-<nav
- className="w-full flex justify-center items-center gap-4 bg-[#C5C6C7] h-20"
- >
-    <Link href="/" className="text-2xl text-[#1F2833]">Home</Link>
-    <Link href="/movies" className="text-2xl text-[#1F2833]">Movies</Link>
-</nav>
+  <DesktopNavbar links={Links}/>
 </div>
\ No newline at end of file
diff --git a/src/components/desktopNavbar.jsx b/src/components/desktopNavbar.jsx
new file mode 100644
index 0000000..f0d2f16
--- /dev/null
+++ b/src/components/desktopNavbar.jsx
@@ -0,0 +1,8 @@
+import Link from "next/link";
+
+export const DesktopNavbar = ({ links }) => (
+  <nav className="w-full flex justify-center items-center gap-4 bg-[#C5C6C7] h-20">
+    {links.map((link, index) => 
+        ( <Link key={index} href={link.route} className="text-2xl text-[#1F2833]">{link.name}</Link> ))}
+    </nav>
+);
\ No newline at end of file
diff --git a/src/components/links.js b/src/components/links.js
new file mode 100644
index 0000000..76e8073
--- /dev/null
+++ b/src/components/links.js
@@ -0,0 +1,4 @@
+export const Links = [
+    { route: "/", name: "Home" },
+    { route: "/movies", name: "Movies" },
+];
\ No newline at end of file
diff --git a/src/components/mobileHeader/links.jsx b/src/components/mobileHeader/links.jsx
deleted file mode 100644
index 32b3699..0000000
--- a/src/components/mobileHeader/links.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Link from "next/link";
-export const Links = () => <div className="flex items-center flex-col gap-5">
-    <Link href="/" className="w-1/2 bg-slate-900 text-center h-12 flex items-center justify-center" onClick={() => setIsOpen(false)}>Home</Link>
-    <Link href="/movies" className="w-1/2 bg-slate-900 text-center  h-12 flex items-center justify-center" onClick={() => setIsOpen(false)}>Movies</Link>
-</div>
\ No newline at end of file
diff --git a/src/components/mobileHeader/navbar.jsx b/src/components/mobileHeader/navbar.jsx
new file mode 100644
index 0000000..0ce03c6
--- /dev/null
+++ b/src/components/mobileHeader/navbar.jsx
@@ -0,0 +1,8 @@
+import Link from "next/link";
+
+export const Navbar = ({ links }) => (
+    <nav className="flex items-center flex-col gap-5">
+        {links.map((link, index) => 
+            ( <Link key={index} href={link.route} className="w-1/2 bg-slate-900 text-center h-12 flex items-center justify-center" onClick={() => setIsOpen(false)}>{link.name}</Link> ))}
+    </nav>
+);
\ No newline at end of file
diff --git a/src/components/mobileHeader/overlay.jsx b/src/components/mobileHeader/overlay.jsx
index ec33571..c2f85cc 100644
--- a/src/components/mobileHeader/overlay.jsx
+++ b/src/components/mobileHeader/overlay.jsx
@@ -1,8 +1,11 @@
-import { BurgerSvg, XIconSvg } from "./xIconSvg";
+import { XIconSvg } from "./xIconSvg";
+import { Navbar } from "./navbar";
+import { Links } from "../links";
 
 export const Overlay = ({ setIsOpen, isOpen }) => 
 <div className={`absolute left-0 top-0 h-full bg-[#C5C6C7] w-full ${isOpen ? "block" : "hidden"} z-10`}>
     <button onClick={() => setIsOpen(false)}>
-        <XIconSvg />
+        <XIconSvg/>
     </button>
+    <Navbar links = { Links }/>
 </div>
\ No newline at end of file