diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx index 32f1375..15cd82e 100644 --- a/src/AppRouter.tsx +++ b/src/AppRouter.tsx @@ -19,6 +19,7 @@ export function AppRouter() { }> }> }> + }> }> ); diff --git a/src/assets/images/bandeira-de-alagoas.png b/src/assets/images/bandeira-de-alagoas.png new file mode 100644 index 0000000..3addcf1 Binary files /dev/null and b/src/assets/images/bandeira-de-alagoas.png differ diff --git a/src/assets/images/bandeira-de-brasil.png b/src/assets/images/bandeira-de-brasil.png new file mode 100644 index 0000000..6420fc8 Binary files /dev/null and b/src/assets/images/bandeira-de-brasil.png differ diff --git a/src/assets/images/bandeira-do-para.png b/src/assets/images/bandeira-do-para.png new file mode 100644 index 0000000..1b4beeb Binary files /dev/null and b/src/assets/images/bandeira-do-para.png differ diff --git a/src/assets/images/knowledgers/alves.png b/src/assets/images/knowledgers/alves.png new file mode 100644 index 0000000..0e7a422 Binary files /dev/null and b/src/assets/images/knowledgers/alves.png differ diff --git a/src/assets/images/knowledgers/daniel.png b/src/assets/images/knowledgers/daniel.png new file mode 100644 index 0000000..95e571c Binary files /dev/null and b/src/assets/images/knowledgers/daniel.png differ diff --git a/src/assets/images/knowledgers/joao.png b/src/assets/images/knowledgers/joao.png new file mode 100644 index 0000000..56e942f Binary files /dev/null and b/src/assets/images/knowledgers/joao.png differ diff --git a/src/assets/images/knowledgers/leonardo.png b/src/assets/images/knowledgers/leonardo.png new file mode 100644 index 0000000..13fc6db Binary files /dev/null and b/src/assets/images/knowledgers/leonardo.png differ diff --git a/src/assets/images/knowledgers/leticia.png b/src/assets/images/knowledgers/leticia.png new file mode 100644 index 0000000..748f587 Binary files /dev/null and b/src/assets/images/knowledgers/leticia.png differ diff --git a/src/assets/images/knowledgers/mikael.png b/src/assets/images/knowledgers/mikael.png new file mode 100644 index 0000000..0ab127c Binary files /dev/null and b/src/assets/images/knowledgers/mikael.png differ diff --git a/src/assets/images/knowledgers/monique.png b/src/assets/images/knowledgers/monique.png new file mode 100644 index 0000000..9e8c479 Binary files /dev/null and b/src/assets/images/knowledgers/monique.png differ diff --git a/src/components/cardknowledger/CardKnowledger.tsx b/src/components/cardknowledger/CardKnowledger.tsx new file mode 100644 index 0000000..2477c46 --- /dev/null +++ b/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([]); + + useEffect(() => { + async function loadUsers() { + const response = await getUsers(); + + setUsers(response); + } + + loadUsers(); + }, []); + + return ( +
+ {users.map((user) => { + const image = mockKnowledgers.find( + (knowledge) => knowledge.id === user.id + )?.image; + + const flags: Record = { + 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 ( +
+ {image && {user.name}} + +
+

{user.function}

+ +
+

{user.name}

+
+ + +
+
+
+ + +
+ ); + })} +
+ ); +} diff --git a/src/components/cardknowledger/mockKnowledgers.ts b/src/components/cardknowledger/mockKnowledgers.ts new file mode 100644 index 0000000..f502a92 --- /dev/null +++ b/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", + }, +]; diff --git a/src/pages/Knowledgers.tsx b/src/pages/Knowledgers.tsx index 7e52e42..d71ebcd 100644 --- a/src/pages/Knowledgers.tsx +++ b/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 ( -
-
-

- #Em Breve 2025 +

+
+

+ Somos os Knowledgers +

+ +

+ Conhecimento que transforma, vozes que inspiram.

-
-
-

- Aguardem Novidades! -

- -
-

- Estamos trabalhando para lançar nossa página de Comunidade no - próximo ano. -

- -

- 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! -

- -

- #community #techknowledge #networking -

-
-
- {darkMode ? ( - Astronauta - ) : ( - Astronauta - )} -
+
); } diff --git a/src/services/usersService.ts b/src/services/usersService.ts new file mode 100644 index 0000000..e361967 --- /dev/null +++ b/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; +}