From 5dce9bd38c82eb74a670f6888bc308f70c2ecb83 Mon Sep 17 00:00:00 2001
From: Igor <github@bolado.dev>
Date: Sat, 16 Nov 2024 03:08:40 +0100
Subject: [PATCH] Refactor profile page by extracting BuildsList component for
 improved readability and maintainability

---
 frontend/src/pages/profile.jsx | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/profile.jsx b/frontend/src/pages/profile.jsx
index 1c94377..0384bc6 100644
--- a/frontend/src/pages/profile.jsx
+++ b/frontend/src/pages/profile.jsx
@@ -7,24 +7,28 @@ const Profile = () => {
     <div className="max-w-7xl mx-auto">
       <h2 className="cinzel text-4xl text-center my-8">Your Builds</h2>
       <ul>
-        {builds.map((build) => {
-          // deserialize the build object
-          const b = deserializeBuildState(build.build);
-          return (
-            <li
-              className="p-2 m-2 hover:bg-blue-500/30 rounded-md"
-              key={build._id}
-            >
-              <Link to={`/build/${build._id}`}>
-                <h3 className="cinzel text-xl font-bold mr-4 ">{b.name}</h3>
-                <h3 className="text-md mr-4">Monster: {b.monster.name}</h3>
-              </Link>
-            </li>
-          );
-        })}
+        <BuildsList builds={builds} />
       </ul>
     </div>
   );
 };
 
+const BuildsList = ({ builds }) => {
+  return builds.map((build, i) => {
+    // deserialize the build object
+    const b = deserializeBuildState(build.build);
+    return (
+      <li
+        className={`p-2 m-2 hover:bg-slate-500/30 rounded-md bg-slate-500/10 `}
+        key={build._id}
+      >
+        <Link to={`/build/${build._id}`}>
+          <h3 className="cinzel text-xl font-bold mr-4 ">{b.name}</h3>
+          <h3 className="text-md mr-4">Monster: {b.monster.name}</h3>
+        </Link>
+      </li>
+    );
+  });
+};
+
 export default Profile;