Merge pull request from /feature/parceiros

Parceiros_big grid style done

src/App.tsx

@@ -3,17 +3,12 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import "./App.scss";
 
-import MainHeader from "./components/MainHeader";
-import Footer from "./components/Footer";
-
 function App() {
   const queryClient = new QueryClient();
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <MainHeader />
         <Outlet />
-        <Footer />
       </QueryClientProvider>
     </>
   );

src/components/Parceiros_big.tsx

@@ -1,7 +1,57 @@
+import { useQuery } from "@tanstack/react-query";
+import "../style/components/Parceiros_big.scss";
+
+import axios from "axios";
+
 function Parceiros_big() {
+  function ApiAvasus(page: number, limit: number) {
+    return axios
+      .get(`http://0.0.0.0:3004/parceiros?_page=${page}&_limit=${limit}`)
+      .then((response) => response.data);
+  }
+
+  //const [modulos, setModulos] = useState(1);
+
+  const { data, isLoading, isError, error, isFetching }: any = useQuery({
+    queryKey: ["modulosSmall", 1, 9],
+    queryFn: () => ApiAvasus(1, 9),
+  });
+  if (isLoading || isFetching) {
+    return (
+      <p style={{ color: "black", fontSize: "30px", marginTop: "20px" }}>
+        Carregando Modulos....
+      </p>
+    );
+  } else if (isError) {
+    return (
+      <p style={{ color: "black", fontSize: "30px", marginTop: "20px" }}>
+        Error: {error.message}
+      </p>
+    );
+  }
+
   return (
-    <div>Parceiros_big</div>
-  )
+    <>
+      <section className="parceiros">
+        <h2 className="parceiros-cabecalho">Nossos parceiros</h2>
+        <span className="parceiros-resultados"># de # resultados</span>
+        <ol className="parceiros-lista">
+          {data?.map((data: any) => {
+            return (
+              <li className="parceiros-item" key={data?.id}>
+                <img
+                  className="parceiros-item-imagem"
+                  src={data?.capa}
+                  alt="Capa parceiro"
+                />
+                <p className="parceiros-item-nome">{data.titulo}</p>
+              </li>
+            );
+          })}
+        </ol>
+      </section>
+    </>
+  );
 }
 
-export default Parceiros_big
+export default Parceiros_big;

src/routes/Contato.tsx

@@ -1,5 +1,15 @@
+import MainHeader from "../components/MainHeader";
+
+import Footer from "../components/Footer";
+
 const Contato = () => {
-  return <h1>Contato</h1>;
+  return (
+    <main>
+      <MainHeader />
+      <h1>Contato</h1>
+      <Footer />
+    </main>
+  );
 };
 
 export default Contato;

src/routes/Cursos.tsx

@@ -1,5 +1,15 @@
+import MainHeader from "../components/MainHeader";
+
+import Footer from "../components/Footer";
+
 const Cursos = () => {
-    return <h1>Cursos</h1>;
+  return (
+    <main>
+      <MainHeader />
+      <h1>Cursos</h1>
+      <Footer />
+    </main>
+  );
   };
 
   export default Cursos;

src/routes/Home.tsx

@@ -1,14 +1,18 @@
 
+import MainHeader from "../components/MainHeader";
 import ImageSlider from "../components/ImageSlider";
 import ModulosEducacionais_small from "../components/ModulosEducacionais_small";
 import Parceiros_small from "../components/Parceiros_small";
+import Footer from "../components/Footer";
 
 const Home = () => {
    return (
     <main>
+      <MainHeader />
       <ImageSlider />
       <ModulosEducacionais_small />
       <Parceiros_small />  
+      <Footer />
     </main>
   );
 };

src/routes/Modulos.tsx

@@ -1,5 +1,15 @@
+import MainHeader from "../components/MainHeader";
+
+import Footer from "../components/Footer";
+
 const Modulos = () => {
-    return <h1>Modulos</h1>;
+  return (
+    <main>
+      <MainHeader />
+      <h1>Modulos</h1>
+      <Footer />
+    </main>
+  );
   };
 
   export default Modulos;

src/routes/Parceiros.tsx

@@ -1,6 +1,15 @@
+import MainHeader from "../components/MainHeader";
+import Parceiros_big from "../components/Parceiros_big";
+import Footer from "../components/Footer";
+
 const Parceiros = () => {
-    return <div>Parceiros</div>;
-  };
-
-  export default Parceiros;
-
+  return (
+    <main>
+      <MainHeader />
+      <Parceiros_big />
+      <Footer />
+    </main>
+  );
+};
+
+export default Parceiros;

src/routes/Sobre.tsx

@@ -1,5 +1,15 @@
+import MainHeader from "../components/MainHeader";
+
+import Footer from "../components/Footer";
+
 const Sobre = () => {
-    return <h1>Sobre</h1>;
+  return (
+    <main>
+      <MainHeader />
+      <h1>Sobre</h1>
+      <Footer />
+    </main>
+  );
   };
 
   export default Sobre;

src/routes/Transparencia.tsx

@@ -1,5 +1,15 @@
+import MainHeader from "../components/MainHeader";
+
+import Footer from "../components/Footer";
+
 const Transparencia = () => {
-    return <h1>Transparencia</h1>;
+  return (
+    <main>
+      <MainHeader />
+      <h1>Transparencia</h1>
+      <Footer />
+    </main>
+  );
   };
 
   export default Transparencia;

src/style/components/Parceiros_big.scss

@@ -0,0 +1,40 @@
+@import "../variables";
+
+.parceiros {
+  width: 80%;
+  .parceiros-cabecalho {
+      margin-bottom: 1rem;
+      text-align: left;
+    font-size: 2rem;
+  }
+  .parceiros-resultados {
+    display: inline-block;
+    padding: 1rem 0rem;
+    text-align: left;
+    color: $ui-dark;
+    font-weight: 400;
+    width: 100%;
+  }
+  .parceiros-lista {
+    grid-template-columns: 1fr 1fr 1fr;
+    justify-content: center;
+    align-items: baseline;
+    text-align: center;
+    margin: 1rem 0rem;
+    list-style: none;
+    display: grid;
+    gap: 1rem;
+    .parceiros-item {
+      .parceiros-item-imagem {
+        height: fit-content;
+        padding: 1rem 0rem;
+        width: 15rem;
+      }
+      .parceiros-item-nome {
+        border-top: 2px solid $red-ligh;
+        padding: 1rem 0rem;
+        width: 100%;
+      }
+    }
+  }
+}