Refactor profile page by extracting BuildsList component for improved…

… readability and maintainability
Bolado · Nov 16, 2024 · 5dce9bd · 5dce9bd
1 parent 6a055b0
commit 5dce9bd
Showing 1 changed file with 19 additions and 15 deletions.
diff --git 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;