From ed1c796f49d498bd3c73725ddb4694d388441a14 Mon Sep 17 00:00:00 2001
From: Jiajun Xu <jiajunxu@Jiajuns-MacBook-Pro-2.local>
Date: Thu, 22 May 2025 21:01:57 -0700
Subject: [PATCH] make the computer/people icon numbers not hard coded

---
 src/components/Navbar.tsx | 39 +++++++++++----------------------------
 1 file changed, 11 insertions(+), 28 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 07df1c6..3fdc73a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -41,35 +41,18 @@ export default function Navbar({ activePage = "" }: NavbarProps) {
       </div>
 
       <div className={cn("flex flex-row justify-between pb-8")}>
-        {[
-          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-        ].map(() => (
-          <>
-            <a
-              href="https://www.flaticon.com/free-icons/computer"
-              title="computer icons"
-            >
-              <img
-                src="/assets/computer.png"
-                alt="computer icon"
-                width="30"
-                height="30"
+        <div className="w-full grid grid-flow-col auto-cols-[76px] gap-8">
+          {Array.from({ length: 20 }).map((_, index) => (
+            <div key={index} className="flex justify-center">
+              <img 
+                src={index % 2 === 0 ? "/assets/computer.png" : "/assets/people.png"} 
+                alt={index % 2 === 0 ? "computer icon" : "people icon"} 
+                width="30" 
+                height="30" 
               />
-            </a>
-
-            <a
-              href="https://www.flaticon.com/free-icons/peopler"
-              title="people icons"
-            >
-              <img
-                src="/assets/people.png"
-                alt="people icon"
-                width="30"
-                height="30"
-              />
-            </a>
-          </>
-        ))}
+            </div>
+          ))}
+        </div>
       </div>
     </>
   );