Issue #291: User card: update information

src/app/components/SearchComponent.js

@@ -155,7 +155,10 @@ export default function SearchComponent({ setFilterState, filterState, sizeWindo
             id="buscar"
             type="text"
             placeholder="Digite aqui o que você deseja pesquisar"
-            className="p-2 px-5 rounded-lg outline outline-1 font-light text-2xl placeholder:text-lightGray-HC-dark  outline-ice-HC-white align-middle h-full w-full"
+            className="p-2 px-5 rounded-lg outline outline-1 font-light text-2xl
+                      text-darkGray-HC-dark
+                      placeholder:text-darkGray-HC-dark
+                      outline-ice-HC-white align-middle h-full w-full"
             onFocus={handleFocus}
             onBlur={handleBlur}
             onChange={(e) => {

src/app/components/UsersPageCard.js

+'use client'
 import { mecredURL } from "@/axiosConfig";
 import { CollectionsBookmark, Person, Subject } from "@mui/icons-material"
+import { useEffect, useState } from 'react';
 import { Avatar, Divider } from "@mui/material"
 import Link from "next/link"
+import mecredApi from "@/axiosConfig";
 
 /**
  * 
@@ -10,6 +13,20 @@ import Link from "next/link"
  * @returns 
  */
 export default function UsersPageCard({ item }) {
+    const [achievements, setAchievements] = useState(null);
+
+    const fetchAchievements = async (id) => {
+        await mecredApi
+            .get(`/unlocked_achievements/user/${id}?limit=1000`)
+            .then(({ data }) => {
+                setAchievements(data);
+            })
+            .catch(() => setError(true))
+    }
+
+    fetchAchievements(item.id);
+
+    
     function getRandomBg(id) {
         const colors = [
             "bg-turquoise-HC-white",
@@ -30,7 +47,7 @@ export default function UsersPageCard({ item }) {
     return (
         item &&
         <Link tabIndex="-1" href={`/perfil/${item["id"]}`}>
-            <div id="conteudo" tabIndex="0" className="flex flex-col w-[300px] min-h-[270px] bg-white-HC-dark  outline outline-1 outline-ice-HC-white m-4 rounded-lg hover:bg-ice-HC-dark-hover focus:bg-ice-HC-dark-hover">
+            <div id="conteudo" tabIndex="0" className="flex flex-col w-[300px] min-h-[270px] bg-ice-HC-dark  outline outline-1 outline-lightGray-HC-white m-4 rounded-lg hover:bg-ice-HC-dark-hover focus:bg-ice-HC-dark-hover">
                 <div className="grid justify-items-center h-[200px] pt-2">
                     {item["avatar"] ?
                         <Avatar src={mecredURL + item["avatar"]} sx={{ position: "inherit" }} className=" min-h-[120px] min-w-[120px] m-2" />
@@ -42,21 +59,35 @@ export default function UsersPageCard({ item }) {
 
                     <p className=" font-bold text-darkGray-HC-white-underline text-center">{item["name"]}</p>
                 </div>
-                <Divider className="mx-4" />
+                <hr className="border-lightGray-HC-white h-1 mx-4 "/>
                 <div className="flex items-center flex-col gap-1 py-3 ">
-                    <div className="flex flex-col justify-start gap-1">
-                        <div className="flex">
-                            <Person fontSize="small" className="text-darkGray-HC-white-underline mt-2" />
+                    <div className="grid grid-cols-2 justify-start gap-1">
+                        <div className="flex items-center mb-2">
+                            <img className="flex h-[20px] px-1 text-mediumGray-HC-white invertLogo-HC-white" 
+                                src="/nivel.svg"
+                                alt="Icon nivel" 
+                            />
+                            <p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Nível: {item["level"]}</p>
+                        </div>
+                        <div className="flex items-center mb-2">
+                            <Person fontSize="small" className="text-darkGray-HC-white mt-2" />
                             <p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Seguidores: {item["follows_count"]}</p>
                         </div>
                         {/* <div className="flex">
                             <CollectionsBookmark fontSize="small" className="text-darkGray-HC-white-underline" />
                             <p className="text-sm text-darkGray-HC-white-underline inline px-1">Coleções: {item["collections_count"]} </p>
                         </div> */}
-                        <div className="flex">
-                            <Subject fontSize="small" className="text-darkGray-HC-white-underline" />
+                        <div className="flex items-center mb-2">
+                            <Subject fontSize="small" className="text-darkGray-HC-white" />
                             <p className="text-sm text-darkGray-HC-white-underline inline px-1">Recursos: {item["learning_objects_count"]}</p>
                         </div>
+                        <div className="flex items-center mb-2">
+                            <img className="flex h-[20px] px-1 invertLogo-HC-white" 
+                                src="/conquistas.svg"
+                                alt="Icon conquista" 
+                            />
+                            <p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Conquistas: {achievements?.length}</p>
+                        </div>
                     </div>
                 </div>
             </div>

src/app/perfil/[id]/components/FollowersCards.js

@@ -61,7 +61,7 @@ export default function FollowersCards({ id, count }) {
                     <div className="p-3 my-5 rounded-md min-w-[200px] min-h-[180px]">
                         <div className="flex flex-wrap justify-center">
                             {followers.map((item, i) => (
-                                item && (
+                                item.follower && (
                                     <Fragment key={i}>
                                         <UsersPageCard item={item.follower} />
                                     </Fragment>