diff --git a/src/assets/feather/star.svg b/src/assets/feather/star.svg
new file mode 100644
index 0000000..bcdc31a
--- /dev/null
+++ b/src/assets/feather/star.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/ModulosEducacionais_big.tsx b/src/components/ModulosEducacionais_big.tsx
index e69de29..aa37e82 100644
--- a/src/components/ModulosEducacionais_big.tsx
+++ b/src/components/ModulosEducacionais_big.tsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+
+import "../style/components/ModulosEducacionais_big.scss";
+
+import Timer from "../assets/feather/clock.svg";
+import User from "../assets/feather/user.svg";
+import Star from "../assets/feather/star.svg";
+
+
+const ModulosEducacionais_big = () => {
+ const [modulosBigPage, setModulosBigPage] = useState("");
+
+ const fetchModulosB = async (sort = "", page = "") => {
+ const response = await fetch(
+ `http://0.0.0.0:3004/cursos?_sort=${sort}&_page=${page}&_limit=9`
+ );
+ const data = await response.json();
+ return data;
+ };
+
+ const { isLoading, error, data, isFetching } = useQuery({
+ queryKey: ["queryModulosSmall", modulosBigPage],
+ queryFn: () => fetchModulosB(modulosBigPage),
+ });
+
+ if (isLoading || isFetching) {
+ return (
+
+ Carregando Modulos....
+
+ );
+ } else if (error) {
+ return (
+
+ Error: {error.message}
+
+ );
+ }
+
+ return (
+ <>
+
+ Módulos Educacionais
+
+ Covid 19
+ Sifilis e outras Ist's
+ Preceptoria
+ Doenças raras
+ Web Palestras
+ Sistemas prisionais
+ OPAS
+
+ # de # resultados
+
+
+ {data?.map((data: any) => {
+ return (
+ -
+
+ {data?.titulo}
+
+ {data?.parceiros}
+
+
+
+ 
{data?.matriculados}
+
+
+ 
{data?.duracao}
+
+
+ 
{data?.avaliacao}
+
+
{data?.resumo}
+
+
+ );
+ })}
+
+
+
+
+
+
+ );
+};
+
+export default ModulosEducacionais_big;
diff --git a/src/components/ModulosEducacionais_small.tsx b/src/components/ModulosEducacionais_small.tsx
index 7823098..6c82de8 100644
--- a/src/components/ModulosEducacionais_small.tsx
+++ b/src/components/ModulosEducacionais_small.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
import "../style/components/ModulosEducacionais_small.scss";
-import Timer from "../assets/feather//clock.svg";
+import Timer from "../assets/feather/clock.svg";
import User from "../assets/feather/user.svg";
const ModulosEducacionais_small = () => {
@@ -24,13 +24,13 @@ const ModulosEducacionais_small = () => {
if (isLoading || isFetching) {
return (
-
+
Carregando Modulos....
);
} else if (error) {
return (
-
+
Error: {error.message}
);
diff --git a/src/routes/Cursos.tsx b/src/routes/Cursos.tsx
index 9ab2f78..cd989d3 100644
--- a/src/routes/Cursos.tsx
+++ b/src/routes/Cursos.tsx
@@ -1,12 +1,14 @@
import MainHeader from "../components/MainHeader";
+import ModulosEducacionais_big from "../components/ModulosEducacionais_big";
+
import Footer from "../components/Footer";
const Cursos = () => {
return (
- Cursos
+
);
diff --git a/src/style/components/MainHeader.scss b/src/style/components/MainHeader.scss
index 255cfd1..7953c45 100644
--- a/src/style/components/MainHeader.scss
+++ b/src/style/components/MainHeader.scss
@@ -1,39 +1,36 @@
@import "../variables";
.navbar {
- margin: 0;
- padding: 0;
- border: 0;
- width: 100%;
background-color: $ui-lightest;
- align-items: center;
justify-content: center;
+ align-items: center;
+ position: sticky;
+ z-index: 999;
+ top: 0;
+ border-bottom: 2px solid $ui-lighter;
.navbar-group {
- width: 100%;
- margin: 0;
- padding: 0;
- display: flex;
+ justify-content: center;
flex-direction: row;
align-items: center;
- justify-content: center;
text-wrap: nowrap;
list-style: none;
+ display: flex;
a {
text-decoration: none;
}
.navbar-group-item {
- color: $ui-grey;
+ font-size: clamp(0.2rem, 0.2rem + 1vw, 1.4rem);
letter-spacing: $letter-spacing-mid;
padding: 0.8rem 0.5rem;
- font-size: clamp(0.2rem, 0.2rem + 1vw, 1.4rem);
+ color: $ui-grey;
img {
min-width: 5rem;
width: 80%;
}
.nav-button {
border: solid 1px $ui-grey;
- border-radius: 10rem;
padding: 0.3rem 0.8rem;
+ border-radius: 10rem;
box-shadow: none;
}
.nav-button-entrar {
@@ -45,11 +42,10 @@
color: $ui-lightest;
}
input#nav-searchbar {
- width: 100%;
- min-width: 2rem;
- border-radius: 2rem;
border: solid 1px $ui-grey;
padding: 0.1rem 0.3rem;
+ border-radius: 2rem;
+ min-width: 2rem;
}
#nav-searchbar::placeholder {
color: $ui-darkest;
diff --git a/src/style/components/ModulosEducacionais_big.scss b/src/style/components/ModulosEducacionais_big.scss
new file mode 100644
index 0000000..e87946f
--- /dev/null
+++ b/src/style/components/ModulosEducacionais_big.scss
@@ -0,0 +1,104 @@
+@import "../variables";
+
+// * {border: 1px solid black;}
+.modulosBig {
+ width: 80%;
+ h3 {
+ margin-bottom: 2rem;
+ font-size: 2.2rem;
+ color: $red-ligh;
+ }
+ .modulosBig-categorias {
+ flex-direction: row;
+ text-align: center;
+ margin: 1rem 0rem;
+ display: flex;
+ span {
+ text-wrap: nowrap;
+ font-size: 1.1rem;
+ }
+ }
+ .modulosBig-resultados {
+ display: inline-block;
+ margin-left: 0.4rem;
+ margin-bottom: 1rem;
+ text-align: left;
+ }
+ .modulosBig-container {
+ grid-template-columns: repeat(3, 1fr);
+ padding: 0rem 0.4rem;
+ list-style: none;
+ display: grid;
+ gap: 1.5rem;
+ .modulosBig-items {
+ position: relative;
+ text-decoration: none;
+ .modulosBig-items-img {
+ border-radius: 1rem;
+ }
+ .modulosBig-items-titulo {
+ text-align: left;
+ margin: 0.2rem 0rem;
+ color: $ui-darkest;
+ font-size: 1.3rem;
+ }
+ .modulosBig-items-parceiros {
+ display: inline-block;
+ margin: 0.2rem 0rem;
+ text-align: left;
+ color: $red-ligh;
+ font-size: 1rem;
+ }
+ .modulosBig-items-estatisticas {
+ display: inline-block;
+ margin: 0.2rem 0rem;
+ text-align: justify;
+ color: $ui-darkest;
+ text-wrap: nowrap;
+ .modulosBig-items-matriculados {
+ img{
+ margin-right: 0.2rem;
+ width: 1rem;
+ }
+ }
+ .modulosBig-items-duracao {
+ img{
+ margin-right: 0.2rem;
+ margin-left: 0.4rem;
+ width: 1rem;
+ }
+ }
+ .modulosBig-items-avaliacao {
+ img{
+ margin-left: 0.4rem;
+ margin-right: 0.2rem;
+ width: 1rem;
+ }
+ }
+ }
+ .modulosBig-items-objetivogeral {
+ box-shadow: inset 0px -40px 15px 0px rgba(255,255,255,1);
+ background-color: transparent;
+ text-overflow: ellipsis;
+ color: $ui-darkest;
+ max-height: 4.5rem;
+ text-align: left;
+ overflow: hidden;
+ }
+ }
+ .modulosBig-verModulo {
+ background-color: $ui-lighter;
+ border-radius: 3rem;
+ color: $ui-light;
+ padding: 0rem 0.2rem;
+ position: absolute;
+ font-size: 1rem;
+ width: 7rem;
+ bottom: 0;
+ right: 0;
+ }
+ }
+ .modulosBig-paginacao {
+ width: 7rem;
+ }
+}