Merge pull request from /feature/modulos

Feature/modulos
Pyments · Jan 11, 2024 · f105a99 · f105a99
2 parents a19a8d1 + b5c704f
commit f105a99
Show file tree

Hide file tree

Showing 9 changed files with 289 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,8 +22,7 @@
     "json-server-auth": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.1",
-    "swr": "^2.2.4"
+    "react-router-dom": "^6.21.1"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.17.1",

diff --git a/src/App.scss b/src/App.scss
@@ -1,18 +1,18 @@
 *,
 *::before,
 *::after {
+  box-sizing: border-box;
   margin: 0 auto;
+  min-width: 0;
   padding: 0;
   border: 0;
-  box-sizing: border-box;
 }
 
 #root {
   font-family: Raleway, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  text-align: center;
   max-width: 1440px;
   min-width: 980px;
   padding: 0;
   border: 0;
-  text-align: center;
-
 }
diff --git a/src/assets/feather/calendar.svg b/src/assets/feather/calendar.svg
diff --git a/src/components/ModuloDetalhe/ModuloDetalhe.scss b/src/components/ModuloDetalhe/ModuloDetalhe.scss
@@ -0,0 +1,103 @@
+@import "../../variables";
+
+.moduloDetalhe {
+  margin: 0 auto;
+  margin-bottom: 2rem;
+  width: 100%;
+  padding: 0;
+  .moduloDetalhe-header {
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    min-height: 15rem;
+    display: flex;
+    .moduloDetalhe-header-imgCapa {
+      filter: brightness(0.3);
+      position: absolute;
+      z-index: -10;
+      width: 100%;
+      right: 0;
+      left: 0;
+      top: 0;
+    }
+    .moduloDetalhe-header-tituloWrapper {
+      color: $ui-lightest;
+      width: 80%;
+      .moduloDetalhe-header-tituloWrapper-titulo {
+        margin-bottom: 1rem;
+        font-size: 2.5rem;
+        font-weight: 800;
+        text-align: left;
+        margin: 0 auto;
+      }
+      .moduloDetalhe-header-tituloWrapper-parceiros {
+        display: inline-block;
+        text-align: left;
+        font-weight: 600;
+        margin-left: 0;
+        width: 100%;
+      }
+    }
+  }
+  .moduloDetalhe-mainContent {
+    background-color: $ui-lightest;
+    .moduloDetalhe-mainContent-titulo {
+      padding: 2rem 0rem;
+      color: $red-dark;
+      font-size: 2rem;
+    }
+    .moduloDetalhe-mainContent-subtitulo {
+      padding-bottom: 2rem;
+      color: $ui-darkest;
+      font-size: 1.4rem;
+    }
+    .moduloDetalhe-mainContent-texto {
+      text-align: justify;
+      color: $ui-dark;
+      font-size: 1rem;
+      margin-bottom: 0.8rem;
+      width: 75%;
+    }
+    .moduloDetalhe-mainContent-estatisticas {
+      margin-bottom: 1rem;
+      margin-top: 1rem;
+      display: flex;
+      width: 80%;
+      .moduloDetalhe-mainContent-estatisticas-item {
+        justify-content: center;
+        display: flex;
+        .moduloDetalhe-mainContent-estatisticas-item-img {
+          max-width: 1.5rem;
+        }
+        .moduloDetalhe-mainContent-estatisticas-item-texto {
+          margin-left: 0.3rem;
+          font-weight: 600;
+        }
+      }
+    }
+    .moduloDetalhe-mainContent-objLista {
+      list-style: disc;
+      .moduloDetalhe-mainContent-objLista-item {
+        color: $ui-dark;
+        text-align: left;
+        width: 60%;
+      }
+    }
+    .moduloDetalhe-mainContent-recursos {
+      p {
+        text-align: center;
+      }
+    }
+    .moduloDetalhe-mainContent-creditos {
+      grid-template-columns: repeat(3, 1fr);
+      justify-content: center;
+      align-items: center;
+      display: grid;
+      width: 90%;
+      .moduloDetalhe-mainContent-creditos-capas {
+        max-width: 14rem;
+        justify-content: center;
+      }
+    }
+  }
+}
diff --git a/src/components/ModuloDetalhe/ModuloDetalhe.tsx b/src/components/ModuloDetalhe/ModuloDetalhe.tsx
@@ -0,0 +1,152 @@
+import "./ModuloDetalhe.scss";
+import { useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+
+import Users from "../../assets/feather/users.svg";
+import Calendar from "../../assets/feather/calendar.svg";
+import Clock from "../../assets/feather/clock.svg";
+import Star from "../../assets/feather/star.svg";
+
+function ModuloDetalhe() {
+  const param = useParams();
+  const moduloId = param.id;
+
+  const fetchParceiros = async (moduloId: any) => {
+    const response = await fetch(`http://0.0.0.0:3004/cursos?id=${moduloId}`);
+    const data = await response.json();
+    return data;
+  };
+
+  const { data } = useQuery({
+    queryKey: ["queryParceirosBig"],
+    queryFn: () => fetchParceiros(moduloId),
+  });
+
+  {
+    return (
+      <>
+        {data?.map((data: any) => {
+          return (
+            <section className="moduloDetalhe">
+              <div>
+                <div className="moduloDetalhe-header">
+                  <img
+                    src={data.capa}
+                    alt="Capa do módulo"
+                    className="moduloDetalhe-header-imgCapa"
+                  />
+                  <div className="moduloDetalhe-header-tituloWrapper">
+                    <h1 className="moduloDetalhe-header-tituloWrapper-titulo">
+                      {data?.titulo}
+                    </h1>
+                    <span className="moduloDetalhe-header-tituloWrapper-parceiros">
+                      {data?.parceiros}
+                    </span>
+                  </div>
+                </div>
+                <div className="moduloDetalhe-mainContent">
+                  <h2 className="moduloDetalhe-mainContent-titulo">
+                    Informações Gerais do Curso
+                  </h2>
+                  <div className="moduloDetalhe-mainContent-estatisticas">
+                    <span className="moduloDetalhe-mainContent-estatisticas-item">
+                      <img
+                        src={Clock}
+                        className="moduloDetalhe-mainContent-estatisticas-item-img"
+                      />
+                      <p className="moduloDetalhe-mainContent-estatisticas-item-texto">
+                        {data?.duracao}
+                      </p>
+                    </span>
+                    <span className="moduloDetalhe-mainContent-estatisticas-item">
+                      <img
+                        src={Calendar}
+                        className="moduloDetalhe-mainContent-estatisticas-item-img"
+                      />
+                      <p className="moduloDetalhe-mainContent-estatisticas-item-texto">
+                        Desde {data?.criado_em}
+                      </p>
+                    </span>
+                    <span className="moduloDetalhe-mainContent-estatisticas-item">
+                      <img
+                        src={Users}
+                        className="moduloDetalhe-mainContent-estatisticas-item-img"
+                      />
+                      <p className="moduloDetalhe-mainContent-estatisticas-item-texto">
+                        {data?.matriculados} alunos matriculados
+                      </p>
+                    </span>
+                    <span className="moduloDetalhe-mainContent-estatisticas-item">
+                      <img
+                        src={Star}
+                        className="moduloDetalhe-mainContent-estatisticas-item-img"
+                      />
+                      <p className="moduloDetalhe-mainContent-estatisticas-item-texto">
+                        {data?.avaliacao} ({data?.numero_avaliacoes} avaliações)
+                      </p>
+                    </span>
+                  </div>
+                  <div className="moduloDetalhe-mainContent-sobre">
+                    <h2 className="moduloDetalhe-mainContent-titulo">
+                      Sobre o curso{" "}
+                    </h2>
+                    <p className="moduloDetalhe-mainContent-texto">
+                      {data?.sobre}
+                    </p>
+                  </div>
+                  <div>
+                    <h2 className="moduloDetalhe-mainContent-titulo">
+                      Objetivos
+                    </h2>
+                    <h3 className="moduloDetalhe-mainContent-subtitulo">
+                      Objetivo Geral
+                    </h3>
+                    <p className="moduloDetalhe-mainContent-texto">
+                      {data?.objetivo_geral}
+                    </p>
+                    <h3 className="moduloDetalhe-mainContent-subtitulo">
+                      Objetivos Específicos
+                    </h3>
+                    <ol className="moduloDetalhe-mainContent-objLista">
+                      {data?.conteudo.map((data: any) => {
+                        return (
+                          <li className="moduloDetalhe-mainContent-objLista-item">
+                            {data}
+                          </li>
+                        );
+                      })}
+                    </ol>
+                  </div>
+                  <div className="moduloDetalhe-mainContent-recursos">
+                    <h2 className="moduloDetalhe-mainContent-titulo">
+                      Recursos educacionais
+                    </h2>
+                    <p className="moduloDetalhe-mainContent-texto">
+                      Serão utilizados textos no formato de PDF, vídeos,
+                      ilustrações, infográficos, dentre outros recursos
+                    </p>
+                  </div>
+                    <h2 className="moduloDetalhe-mainContent-titulo">
+                      Créditos:
+                    </h2>
+                  <div className="moduloDetalhe-mainContent-creditos">
+                    {data?.creditos.map((data: any) => {
+                      return (
+                        <img
+                          src={data?.capa}
+                          className="moduloDetalhe-mainContent-creditos-capas"
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            </section>
+          );
+        })}
+      </>
+    );
+  }
+}
+
+export default ModuloDetalhe;