Merge pull request #3 from Bolado/dev

enhance: Profile page improvements and README update.
Bolado · Nov 17, 2024 · 733788e · 733788e
2 parents d1e575b + f0a9911
commit 733788e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@ A web app for **Summoners War: Lost Centuria** players, enabling them to experim
 - **TailwindCSS**
 - **Express.js**
 - **MongoDB**
+- **Docker**
 
 ## Project Goals
 
@@ -17,6 +18,6 @@ A web app for **Summoners War: Lost Centuria** players, enabling them to experim
 | Responsive Design  | ✅      |
 | Build Sharing      | ✅      |
 | Build Editing      | ✅      |
-| Build Profile      | ⌛      |
-| Docker Image       | ⌛      |
-| Deployment         | ⌛      |
+| Build Profile      | ✅      |
+| Docker Image       | ✅      |
+| Deployment         | ✅      |
diff --git a/frontend/src/components/global-header.jsx b/frontend/src/components/global-header.jsx
@@ -7,11 +7,11 @@ const GlobalHeader = () => {
   return (
     <>
       <header className="flex justify-between items-center p-3 bg-slate-500/10">
-        <Link to="/build/new">
+        <a href="/build/new">
           <h1 className="cinzel text-xl text-bold">
             SW:Lost Centuria Rune Builder
           </h1>
-        </Link>
+        </a>
         {logged ? (
           <Link to="/profile">
             <ProfileButton />

diff --git a/frontend/src/pages/profile.jsx b/frontend/src/pages/profile.jsx
@@ -6,7 +6,7 @@ const Profile = () => {
   return (
     <div className="max-w-7xl mx-auto">
       <h2 className="cinzel text-4xl text-center my-8">Your Builds</h2>
-      <ul>
+      <ul className="flex flex-wrap justify-center">
         <BuildsList builds={builds} />
       </ul>
     </div>
@@ -19,12 +19,28 @@ const BuildsList = ({ builds }) => {
     const b = deserializeBuildState(build.build);
     return (
       <li
-        className={`p-2 m-2 hover:bg-slate-500/30 rounded-md bg-slate-500/10 `}
+        className={`p-4 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 to={`/build/${build._id}`} className="flex flex-row gap-2">
+          <div>
+            <img
+              src={b.monster.icon}
+              alt={b.monster.name}
+              className="w-20 rounded-md"
+            />
+          </div>
+          <div className="flex justify-between flex-col">
+            <div>
+              <h3 className="cinzel text-xl font-bold">{b.name}</h3>
+              <h3 className="text-md">Monster: {b.monster.name}</h3>
+            </div>
+            <div>
+              <h3 className="text-md">
+                Last Updated: {new Date(build.timestamp).toLocaleString()}
+              </h3>
+            </div>
+          </div>
         </Link>
       </li>
     );