add contributor cards V0

src/app/state/locales/en/team.json

@@ -1,5 +1,8 @@
 {
   "team": "Team",
   "meet_our_contributors": "Meet our contributors",
-  "we_have_a_diverse_talented": "We have a diverse, talented pool of contributors from various fields and locations worldwide. Anyone can join. Browse our current active or past members and connect with contributors to collaborate."
+  "we_have_a_diverse_talented": "We have a diverse, talented pool of contributors from various fields and locations worldwide. Anyone can join. Browse our current active or past members and connect with contributors to collaborate.",
+  "all": "All",
+  "activity_status": "Activity status",
+  "area_of_work": "Area of work"
 }

src/app/state/locales/pt/team.json

@@ -1,5 +1,8 @@
 {
   "team": "Equipe",
   "meet_our_contributors": "Conheça nossos colaboradores",
-  "we_have_a_diverse_talented": "Temos um grupo diversificado e talentoso de colaboradores de várias áreas e localizações ao redor do mundo. Qualquer pessoa pode participar. Explore nossos membros atuais ou passados e conecte-se com colaboradores para colaborar."
+  "we_have_a_diverse_talented": "Temos um grupo diversificado e talentoso de colaboradores de várias áreas e localizações ao redor do mundo. Qualquer pessoa pode participar. Explore nossos membros atuais ou passados e conecte-se com colaboradores para colaborar.",
+  "all": "Todos",
+  "activity_status": "Status da atividade",
+  "area_of_work": "Área de trabalho"
 }

src/app/state/teamSlice.ts

@@ -79,6 +79,7 @@ function getEmission(phase: number): number {
 }
 
 export interface Contributor {
+  name: string;
   telegram: string;
   github?: string;
   discord?: string;
@@ -89,7 +90,7 @@ export interface Contributor {
   isOG?: boolean;
   isLongTerm?: boolean;
   isActive: boolean;
-  phasesActive?: string[];
+  phasesActive: number[];
   // analytics
   tokensEarned: number;
   trophyGold: number;
@@ -272,6 +273,9 @@ function runPhaseAnalytics(
       console.error({ phaseRows, phase, user, points });
       continue;
     }
+    // Add phase to phasesActive array
+    contributor.phasesActive.push(phase);
+    // Add trophies
     if (row === 0) {
       contributor.trophyGold += 1;
     }
@@ -327,13 +331,15 @@ function rowToContributor(row: string): Contributor {
     .filter((str) => Object.values(Expertise).includes(str as Expertise))
     .map((str) => str.toUpperCase() as Expertise);
   return {
+    name: telegram,
     telegram: telegram.toLowerCase(),
     github: github.toLowerCase(),
     discord: discord.toLowerCase(),
     imageUrl,
     isActive: false,
     expertise,
     radixWallet,
+    phasesActive: [],
     tokensEarned: 0,
     trophyGold: 0,
     trophySilver: 0,

src/app/team/page.tsx

@@ -9,6 +9,7 @@ import {
   showActiveContributors,
   ActivityStatus,
   Expertise,
+  Contributor,
 } from "state/teamSlice";
 import { store } from "state/store";
 import { fetchTeamState } from "state/teamSlice";
@@ -24,8 +25,8 @@ export default function Team() {
   }, []);
 
   return (
-    <div className="bg-[#141414] grow flex items-center justify-center">
-      <div className="max-w-[1000px] p-8">
+    <div className="bg-[#141414] grow flex items-center justify-center pt-10">
+      <div className="max-w-[1200px] p-8">
         <HeaderComponent />
         <Filters />
         <Contributors />
@@ -35,13 +36,14 @@ export default function Team() {
 }
 
 function Filters() {
+  const t = useTranslations();
   return (
     <div className="text-center text-base mt-8">
-      <p>Activity status</p>
+      <p>{t("activity_status")}</p>
       <ActivityStatusToggle filter={ActivityStatus.ACTIVE} />
       <ActivityStatusToggle filter={ActivityStatus.PAST} />
       <ActivityStatusToggle filter={undefined} />
-      <p className="!mt-4">Area of work</p>
+      <p className="!mt-4">{t("area_of_work")}</p>
       <ExpertiseToggle filter={undefined} />
       <ExpertiseToggle filter={Expertise.ADMIN} />
       <ExpertiseToggle filter={Expertise.DEV} />
@@ -53,37 +55,39 @@ function Filters() {
 }
 
 function ActivityStatusToggle({ filter }: { filter?: ActivityStatus }) {
+  const t = useTranslations();
   const dispatch = useAppDispatch();
   const { activityStatusFilter } = useAppSelector((state) => state.teamSlice);
-  const label = filter === undefined ? "ALL" : filter;
+  const label = filter === undefined ? "all" : filter;
   const isActive = activityStatusFilter === filter;
   return (
     <div
-      className={`cursor-pointer inline-block mx-1 my-3 px-4 py-2 bg-black opacity-25 rounded-badge hover:opacity-100 ${
-        isActive ? "!opacity-100" : ""
+      className={`cursor-pointer inline-block mx-1 my-3 px-4 py-2 bg-[#232629] opacity-60 rounded-badge hover:opacity-100 ${
+        isActive ? "!opacity-100 bg-dexter-green text-black" : ""
       }`}
       onClick={() =>
         dispatch(teamSlice.actions.setActivityStatusFilter(filter))
       }
     >
-      <p className="uppercase text-sm">{label}</p>
+      <p className="text-sm font-bold">{t(label)}</p>
     </div>
   );
 }
 
 function ExpertiseToggle({ filter }: { filter?: Expertise }) {
+  const t = useTranslations();
   const dispatch = useAppDispatch();
   const { expertiseFilter } = useAppSelector((state) => state.teamSlice);
-  const label = filter === undefined ? "ALL" : filter;
+  const label = filter === undefined ? "all" : filter;
   const isActive = expertiseFilter === filter;
   return (
     <div
-      className={`cursor-pointer inline-block mx-1 my-3 px-4 py-2 bg-black opacity-25 rounded-badge hover:opacity-100 ${
-        isActive ? "!opacity-100" : ""
+      className={`cursor-pointer inline-block mx-1 my-3 px-4 py-2 bg-[#232629] opacity-60 rounded-badge hover:opacity-100 ${
+        isActive ? "!opacity-100 bg-dexter-green text-black" : ""
       }`}
       onClick={() => dispatch(teamSlice.actions.setExpertiseFilter(filter))}
     >
-      <p className="uppercase text-sm">{label}</p>
+      <p className="text-sm font-bold">{t(label)}</p>
     </div>
   );
 }
@@ -99,7 +103,68 @@ function HeaderComponent() {
 }
 
 function Contributors() {
-  return <div></div>;
+  const { contributorMap } = useAppSelector((state) => state.teamSlice);
+  const contributors = contributorMap
+    .map((arr) => arr[1])
+    .sort((a, b) => b.phasesActive.length - a.phasesActive.length);
+  return (
+    <div className="flex flex-wrap justify-center mt-6">
+      {contributors.map((contributor, indx) => {
+        return <ContributorCard contributor={contributor} key={indx} />;
+      })}
+    </div>
+  );
+}
+
+// TODO: Expertise
+// TODO: links to social channels
+// TODO: active badge
+function ContributorCard({ contributor }: { contributor: Contributor }) {
+  return (
+    <div className="w-[250px] h-[120px] bg-[#232629] rounded-2xl m-2 p-4">
+      {/* Flexbox container for image and text */}
+      <div className="flex items-start">
+        {/* Contributor Image */}
+        <img
+          src={
+            contributor.imageUrl ||
+            "https://dexternominations.space/_next/image?url=%2Fcontimg%2Fdefault.jpg&w=256&q=75"
+          }
+          alt={contributor.telegram}
+          width="60"
+          height="60"
+          className="rounded-full"
+        />
+
+        {/* Contributor Details */}
+        <div className="flex flex-col ml-3">
+          {/* Truncate telegram name */}
+          <p className="truncate max-w-[150px] text-white text-base font-semibold">
+            {contributor.name}
+          </p>
+          {/* Display ADMIN and OG on the same line */}
+          <p className="text-white text-base">
+            <span className="mr-1">ADMIN</span>
+            <span>OG</span>
+          </p>
+          <p className="text-white text-xs">
+            contributed in {contributor.phasesActive.length} phases
+          </p>
+        </div>
+      </div>
+      <div>
+        <p className="inline-block text-xs ml-2 max-w-[70px]">
+          {contributor.telegram}
+        </p>
+        <p className="inline-block text-xs ml-2 max-w-[70px]">
+          {contributor.github}
+        </p>
+        <p className="inline-block text-xs ml-2 max-w-[70px]">
+          {contributor.discord}
+        </p>
+      </div>
+    </div>
+  );
 }
 
 function DexterParagraph({ text }: { text: string }) {