show games library in a grid

src/renderer/src/pages/profile/profile-content.tsx

@@ -9,12 +9,12 @@ import { useDate } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { PersonIcon } from "@primer/octicons-react";
+
+const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
 export interface ProfileContentProps {
   userProfile: UserProfile;
 }
 
-const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
-
 export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
   const { t, i18n } = useTranslation("user_profile");
 
@@ -28,8 +28,11 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
 
   const { formatDistance } = useDate();
 
-  const formatPlayTime = (game: ProfileGame) => {
-    const seconds = game.playTimeInSeconds;
+  const formatPlayTime = () => {
+    const seconds = userProfile.libraryGames.reduce(
+      (acc, game) => acc + game.playTimeInSeconds,
+      0
+    );
     const minutes = seconds / 60;
 
     if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
@@ -123,6 +126,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
             }}
           >
             <h2>Games</h2>
+
             <div
               style={{
                 flex: 1,
@@ -134,10 +138,11 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
               {userProfile.libraryGames.length}
             </h3>
           </div>
+          <small>Tempo total de jogo: {formatPlayTime()}</small>
           <div
             style={{
-              display: "flex",
-              flexDirection: "column",
+              display: "grid",
+              gridTemplateColumns: "auto auto auto",
               gap: `${SPACING_UNIT}px`,
             }}
           >
@@ -150,6 +155,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
                     padding: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
                   }}
                   onClick={() => handleGameClick(game)}
+                  title={game.title}
                 >
                   {game.iconUrl ? (
                     <img
@@ -160,16 +166,6 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
                   ) : (
                     <SteamLogo className={styles.libraryGameIcon} />
                   )}
-
-                  <div className={styles.gameInformation}>
-                    <h4>{game.title}</h4>
-
-                    <small>
-                      {t("play_time", {
-                        amount: formatPlayTime(game),
-                      })}
-                    </small>
-                  </div>
                 </button>
               );
             })}

src/renderer/src/pages/profile/profile.css.tsx

@@ -60,15 +60,15 @@ export const contentSidebar = style({
   "@media": {
     "(min-width: 768px)": {
       width: "100%",
-      maxWidth: "200px",
+      maxWidth: "150px",
     },
     "(min-width: 1024px)": {
-      maxWidth: "300px",
+      maxWidth: "250px",
       width: "100%",
     },
     "(min-width: 1280px)": {
       width: "100%",
-      maxWidth: "400px",
+      maxWidth: "350px",
     },
   },
 });
@@ -83,7 +83,7 @@ export const feedGameIcon = style({
 
 export const libraryGameIcon = style({
   height: "100%",
-  borderRadius: "50%",
+  borderRadius: "4px",
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
@@ -110,8 +110,7 @@ export const gameListItem = style({
   display: "flex",
   flexDirection: "row",
   gap: `${SPACING_UNIT}px`,
-  width: "100%",
-  height: "60px",
+  aspectRatio: "1",
   transition: "all ease 0.2s",
   cursor: "pointer",
   zIndex: "1",