chore: username on gamepage

Author: flavioislima

src/components/Library.tsx

@@ -34,6 +34,7 @@ export const Library = ({ library, user }: GameList) => {
           title={title}
           appName={app_name}
           isInstalled={isInstalled}
+          userName={user}
        />
        )
       }

src/components/UI/GameCard.tsx

@@ -6,24 +6,29 @@ interface Card {
   title: string;
   appName: string;
   isInstalled: boolean;
+  userName: string;
 }
 
-const GameCard = ({ cover, title, appName, isInstalled }: Card) => {
+const GameCard = ({ cover, title, appName, isInstalled, userName }: Card) => {
   return (
     <Link
       className="gameCard "
       style={{ backgroundColor: isInstalled ? "#F0183C" : "#2B2B2B" }}
       to={{
         pathname: "/gameconfig",
-        state: { appName },
+        state: { appName, userName },
       }}
     >
       <img alt="cover-art" src={cover} className="gameImg" />
       <div className="gameTitle">
         <span>{title}</span>
-        <i 
-        className={`material-icons ${isInstalled ? 'is-success' : 'is-primary'}`}>
-          {isInstalled ? "check_circle" : "get_app"}</i>
+        <i
+          className={`material-icons ${
+            isInstalled ? "is-success" : "is-primary"
+          }`}
+        >
+          {isInstalled ? "check_circle" : "get_app"}
+        </i>
       </div>
     </Link>
   );

src/components/UI/GameConfig.tsx

@@ -10,7 +10,7 @@ export default function GameConfig({ location }: Card) {
   const [gameInfo, setGameInfo] = React.useState({} as any);
   const [playing, setPlaying] = React.useState(false);
   const [installing, setInstalling] = React.useState(false);
-  const { appName } = location.state || {};
+  const { appName, userName } = location.state || {};
 
   React.useEffect(() => {
     const updateConfig = async () => {
@@ -48,7 +48,7 @@ export default function GameConfig({ location }: Card) {
           </div>
           <div className="rightCluster">
             {/* import user into div below */}
-            <div className="username">username</div>
+            <div className="username">{userName}</div>
             <div className="settings"></div>
           </div>
         </div>