Knowledgers Page

src/AppRouter.tsx

@@ -19,6 +19,7 @@ export function AppRouter() {
       <Route path="/posts/:slug" element={<Post />}></Route>
       <Route path="/techlab" element={<TechLab />}></Route>
       <Route path="/knowledgers" element={<Knowledgers />}></Route>
+      <Route path="/users" element={<Knowledgers />}></Route>
       <Route path="/contact" element={<Contact />}></Route>
     </Routes>
   );

src/components/cardknowledger/CardKnowledger.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+
+import { getUsers } from "../../services/usersService";
+import { mockKnowledgers } from "./mockKnowledgers";
+
+import flagBrasil from "../../assets/images/bandeira-de-brasil.png";
+import flagAlagoas from "../../assets/images/bandeira-de-alagoas.png";
+import flagPara from "../../assets/images/bandeira-do-para.png";
+
+interface UserProps {
+  id: number;
+  name: string;
+  function: string;
+  role: string;
+}
+
+export function CardKnowledger() {
+  const [users, setUsers] = useState<UserProps[]>([]);
+
+  useEffect(() => {
+    async function loadUsers() {
+      const response = await getUsers();
+
+      setUsers(response);
+    }
+
+    loadUsers();
+  }, []);
+
+  return (
+    <div className="mt-8 flex items-start flex-wrap gap-8 justify-center lg:mt-16 lg:justify-start">
+      {users.map((user) => {
+        const image = mockKnowledgers.find(
+          (knowledge) => knowledge.id === user.id
+        )?.image;
+
+        const flags: Record<string, string> = {
+          alagoas: flagAlagoas,
+          para: flagPara,
+        };
+
+        const flagKey = mockKnowledgers.find(
+          (knowledge) => knowledge.id === user.id
+        )?.flag;
+
+        console.log("flagKey: ", flagKey);
+
+        const flagImage = flagKey ? flags[flagKey] : undefined;
+
+        console.log("flagImage: ", flagImage);
+
+        return (
+          <div key={user.id} className="flex flex-col gap-4">
+            {image && <img src={image} className="h-[328px]" alt={user.name} />}
+
+            <div>
+              <p className="text-base font-medium">{user.function}</p>
+
+              <div className="flex items-center justify-between mt-6">
+                <p className="text-xl font-bold">{user.name}</p>
+                <div className="flex items-center gap-2">
+                  <img src={flagImage} alt="" />
+                  <img src={flagBrasil} alt="" />
+                </div>
+              </div>
+            </div>
+
+            <button
+              disabled
+              className="bg-blue-400 w-full h-12 text-black rounded-full flex items-center justify-center font-bold opacity-50 cursor-not-allowed"
+            >
+              Ver perfil
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/cardknowledger/mockKnowledgers.ts

@@ -0,0 +1,58 @@
+import knowledgerMikael from "../../assets/images/knowledgers/mikael.png";
+import knowledgerLeticia from "../../assets/images/knowledgers/leticia.png";
+import knowledgerMonique from "../../assets/images/knowledgers/monique.png";
+import knowledgerLeonardo from "../../assets/images/knowledgers/leonardo.png";
+import knowledgerAlves from "../../assets/images/knowledgers/alves.png";
+import knowledgerJoao from "../../assets/images/knowledgers/joao.png";
+import knowledgerDaniel from "../../assets/images/knowledgers/daniel.png";
+
+export const mockKnowledgers = [
+  {
+    id: 1,
+    name: "Mikael Ribeiro",
+    image: knowledgerMikael,
+    flag: "alagoas",
+  },
+
+  {
+    id: 2,
+    name: "Leticia Dias",
+    image: knowledgerLeticia,
+    flag: "alagoas",
+  },
+
+  {
+    id: 3,
+    name: "Monique Campos",
+    image: knowledgerMonique,
+    flag: "alagoas",
+  },
+
+  {
+    id: 4,
+    name: "Leonardo Henrique",
+    image: knowledgerLeonardo,
+    flag: "alagoas",
+  },
+
+  {
+    id: 8,
+    name: "Alves Jhonata",
+    image: knowledgerAlves,
+    flag: "para",
+  },
+
+  {
+    id: 9,
+    name: "João Jacinto",
+    image: knowledgerJoao,
+    flag: "alagoas",
+  },
+
+  {
+    id: 11,
+    name: "Daniel Duarte",
+    image: knowledgerDaniel,
+    flag: "alagoas",
+  },
+];

src/pages/Knowledgers.tsx

@@ -1,58 +1,21 @@
-import React, { useContext } from "react";
+import React from "react";
 
-import ImageAstronautDark from "../assets/images/astronaut.png";
-import ImageAstrounautLight from "../assets/images/astronaut-lightmode.png";
-
-import { ThemeContext } from "../context/ThemeContext";
+import { CardKnowledger } from "../components/cardknowledger/CardKnowledger";
 
 export function Knowledgers() {
-  const { darkMode } = useContext(ThemeContext);
-
   return (
-    <div className="flex flex-col items-center justify-center h-screen lg:w-[60rem] px-4">
-      <div className="flex items-center justify-center lg:justify-start w-full mt-10 md:mt-0">
-        <p className="bg-[#93C5FD] w-[16rem] h-[2.5rem] rounded-full mb-8 flex items-center justify-center text-black font-bold text-lg">
-          #Em Breve 2025
+    <div className="px-4 screen-custom:w-[22rem] sm-medium:w-[24rem] md:w-[46rem] lg:w-[62rem]">
+      <div className="mt-16 flex flex-col items-center">
+        <h1 className="text-2xl font-bold text-center sm:text-3xl dark:text-white text-black">
+          Somos os Knowledgers
+        </h1>
+
+        <p className="text-center py-4 lg:w-[28rem]">
+          Conhecimento que transforma, vozes que inspiram.
         </p>
       </div>
 
-      <div className="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between w-full max-w-screen-lg">
-        <div className="text-center lg:text-left lg:mr-8 flex flex-col items-center lg:items-start">
-          <h2 className="text-xl font-bold mb-8 dark:bg-gradient-to-r dark:from-white dark:to-blue-300 dark:bg-clip-text dark:text-transparent text-blue-500 md:text-2xl lg:text-4xl">
-            Aguardem Novidades!
-          </h2>
-
-          <div>
-            <p className="text-base font-semibold mb-4 max-w-md md:text-lg lg:text-2xl lg:max-w-[573px] dark:text-white text-[#62748E]">
-              Estamos trabalhando para lançar nossa página de Comunidade no
-              próximo ano.
-            </p>
-
-            <p className="text-base font-semibold max-w-md md:text-lg lg:text-2xl lg:max-w-[573px] dark:text-white text-[#62748E]">
-              Um espaço feito para troca de ideias, networking e colaboração
-              entre apaixonados por tecnologia. Fique de olho 👀 – coisas
-              incríveis estão a caminho!
-            </p>
-
-            <p className="mt-8 font-bold dark:text-blue-300 text-blue-500">
-              #community #techknowledge #networking
-            </p>
-          </div>
-        </div>
-        {darkMode ? (
-          <img
-            src={ImageAstronautDark}
-            alt="Astronauta"
-            className="mt-8 object-cover h-[200px] md:h-[300px] lg:mt-0 lg:h-[380px]"
-          />
-        ) : (
-          <img
-            src={ImageAstrounautLight}
-            alt="Astronauta"
-            className="mt-8 object-cover h-[200px] md:h-[300px] lg:mt-0 lg:h-[380px]"
-          />
-        )}
-      </div>
+      <CardKnowledger />
     </div>
   );
 }

src/services/usersService.ts

@@ -0,0 +1,6 @@
+import { api } from "./api";
+
+export async function getUsers() {
+  const response = await api.get("/users");
+  return response.data;
+}