Merge pull request #90 from OCA-UFCG/refact/redesign_team_member_grid

Refact/redesign team member grid

Author: LazaroQueiroz

src/components/TeamMember/Section/TeamMembers.styles.ts

@@ -6,22 +6,23 @@ export const Section = styled(DefaultSection)`
 `;
 
 export const TeamMembersContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
   justify-content: center;
   padding: 1rem;
   gap: 2rem;
-  column-count: 4;
   box-sizing: border-box;
 
   @media screen and (max-width: 1000px) {
-    column-count: 3;
+    grid-template-columns: 1fr 1fr 1fr;
   }
 
   @media screen and (max-width: 700px) {
-    column-count: 2;
+    grid-template-columns: 1fr 1fr;
   }
 
   @media screen and (max-width: 450px) {
-    column-count: 1;
+    grid-template-columns: 1fr;
   }
 `;
 

src/components/TeamMember/Section/TeamMembers.tsx

@@ -3,6 +3,7 @@
 import { TeamMembersContainer, Section } from "./TeamMembers.styles";
 import TeamMember from "../TeamMember";
 import { ITeamMember } from "@/utils/interfaces";
+import { getPriority } from "../../../utils/functions";
 
 const TeamMembersSection = ({
   teamMembers,
@@ -18,8 +19,11 @@ const TeamMembersSection = ({
               { fields: a }: { fields: ITeamMember },
               { fields: b }: { fields: ITeamMember },
             ) => {
-              const aCombined = `${a.role} ${a.name}`;
-              const bCombined = `${b.role} ${b.name}`;
+              const priorityA = getPriority(a.role);
+              const priorityB = getPriority(b.role);
+
+              const aCombined = `${priorityA} ${a.role} ${a.name}`;
+              const bCombined = `${priorityB} ${b.role} ${b.name}`;
 
               return aCombined.localeCompare(bCombined);
             },

src/utils/functions.ts

@@ -24,3 +24,14 @@ export const capitalize = (inputString: string): string => {
 
   return capitalizedWords.join(" ");
 };
+
+export const getPriority = (role: string): string => {
+  let priority = "";
+
+  if (role.toUpperCase().includes("COORDENADOR")) priority = "A";
+  else if (role.toUpperCase().includes("LÍDER TÉCNICO")) priority = "B";
+  else if (role.toUpperCase().includes("PESQUISADOR")) priority = "C";
+  else priority = "D";
+
+  return priority;
+};