Refactor header component to use dynamic links

YousifAbozid · Feb 29, 2024 · dc93c8a · dc93c8a
1 parent ae40f3b
commit dc93c8a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/components/Header.js b/components/Header.js
@@ -1,6 +1,8 @@
 'use client'
-import Link from 'next/link'
+
 import React, { useState } from 'react'
+import Link from 'next/link'
+import links from '@/data/linksArray'
 
 /**
  * Renders the header component.
@@ -23,20 +25,14 @@ const Header = () => {
 			<Link href='/' className='logo'>
 				<img src='logo.png'></img>
 			</Link>
-			{/* <div className="text">
-        <h1>Hi, I'm Yousif Abozid</h1>
-      </div> */}
+
 			<div className={`links ${showMenu ? 'show' : ''}`}>
 				<ul>
-					<li>
-						<Link href='/projects'>Projects</Link>
-					</li>
-					<li>
-						<Link href='/about'>About</Link>
-					</li>
-					<li>
-						<Link href='/contact'>Contact</Link>
-					</li>
+					{links.map((link, index) => (
+						<li key={index}>
+							<Link href={link.href}>{link.label}</Link>
+						</li>
+					))}
 				</ul>
 			</div>
 			<div

diff --git a/data/linksArray.js b/data/linksArray.js
@@ -0,0 +1,8 @@
+const links = [
+	{ href: '/', label: 'Home' },
+	{ href: '/projects', label: 'Projects' },
+	{ href: '/contact', label: 'Contact' },
+	{ href: '/about', label: 'About' }
+]
+
+export default links