Skip to content

Commit

Permalink
Merge pull request from /feature/home
Browse files Browse the repository at this point in the history 
ModulosEducacionais_small cards designed & Tabs section implemented (no pagination yet)
  • Loading branch information
@Pyments
Pyments authored Jan 6, 2024
2 parents 4735464 + 0cc9154 commit 7a8a53a
Show file tree
Hide file tree
Showing 8 changed files with 307 additions and 32 deletions.
1 change: 1 addition & 0 deletions src/assets/feather/clock.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/feather/user.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
122 changes: 98 additions & 24 deletions src/components/ModulosEducacionais_small.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,113 @@
import { useQuery } from "@tanstack/react-query";
import "../style/components/ModulosEducacionais_small.scss";

import ApiAvasus from "../services/ApiAvasus";
import Timer from "../assets/feather//clock.svg";
import User from "../assets/feather/user.svg";
import axios from "axios";
//import { useState } from "react";

export default function ModulosEducacionais_small() {
let page = 1;
let limit = 3;
const { data, isLoading }: any = useQuery({
queryFn: () =>
ApiAvasus(`http://0.0.0.0:3004/cursos?_page=${page}&_limit=${limit}`),
queryKey: ["modulosSmall"],
});
function ApiAvasus(sort: string, order: string, page: number, limit: number) {
return axios
.get(
`http://0.0.0.0:3004/cursos?_sort=${sort}&_order=${order}&_page=${page}&_limit=${limit}`
)
.then((response) => response.data);
}

if (isLoading) {
return <h1>Loading...</h1>;
//const [modulos, setModulos] = useState(1);

const { data, isLoading, isError, error, isFetching }: any = useQuery({
queryKey: ["modulosSmall", "matriculados", "desc", 1, 3],
queryFn: () => ApiAvasus("matriculados", "desc", 1, 3),
});
if (isLoading || isFetching) {
return (
<p style={{ color: "white", fontSize: "30px", marginTop: "20px" }}>
Carregando Modulos....
</p>
);
} else if (isError) {
return (
<p style={{ color: "white", fontSize: "30px", marginTop: "20px" }}>
Error: {error.message}
</p>
);
}

return (
<>
<h2>ModulosEducacionais_small</h2>
<div>
<div>Mais populares</div>
{/* Conteúdo paginado */}
<section>
<h2>Modulos Educacionais</h2>
<div>
<ol id="modulos-lista"></ol>
{data?.map((data: any) => {
return (
<li key={data.id}>
<img src={data.capa} />
{data.id}
<div className="modulos-paginas">
<ul>
<li>
<button
onClick={() => {
ApiAvasus("matriculados", "desc", 1, 3);
}}
>
Mais populares
</button>
</li>
);
})}
<li>
<button
onClick={() => {
ApiAvasus("avaliacao", "desc", 1, 3);
}}
>
Mais bem avaliados
</button>
</li>
<li>
<button
onClick={() => {
ApiAvasus("criado_em", "desc", 1, 3);
}}
>
Mais recentes
</button>
</li>
</ul>
</div>
<ol className="modulos-lista">
{data?.map((data: any) => {
return (
<li key={data.id}>
<div>
<div className="modulo-capa">
<img src={data.capa} alt="Capa do moódulo (imagem)" />
</div>
<div className="modulo-cabecalho">
<span className="modulo-titulo">{data.titulo}</span>
<span className="modulo-parceiros">{data.parceiros}</span>
</div>
<div className="modulo-matriculados">
<img src={User} />
<span>{data.matriculados}</span>
</div>
<div className="modulo-duracao">
<img src={Timer} />
<span>{data.duracao}</span>
</div>
<div className="modulo-avaliacao">
<img src="" />
<span>{data.avaliacao}</span>
</div>
<div className="modulo-verModulo">
<button>Ver módulo</button>
</div>
</div>
</li>
);
})}
</ol>
</div>
<div>
<button className="modulo-verMais">Ver mais</button>
</div>
</div>
<span>Ver mais</span>
</section>
</>
);
}
39 changes: 36 additions & 3 deletions src/components/Parceiros_small.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,40 @@
import "../style/components/Parceiros_small.scss";

function Parceiros_small() {
return (
<div>Parceiros_small</div>
)
<>
<section className="parceirosS-section">
<h2 className="parceirosS-titulo">Parceiros</h2>
<div className="parceirosS-row">
<div className="parceirosS-container">
<h3 className="parceirosS-head">Governo do RN</h3>
<p className="parceirosS-texto">
Governo do Estado do Rio Grande o Norte
</p>
</div>
<div className="parceirosS-container">
<h3 className="parceirosS-head">SESAP</h3>
<p className="parceirosS-texto">
Secretaria de Saúde Pública do Estado do Rio Grande do norte
</p>
</div>
<div className="parceirosS-container">
<h3 className="parceirosS-head">UFRN</h3>
<p className="parceirosS-texto">
Universidade Federal do Rio Grande do Norte
</p>
</div>
<div className="parceirosS-container">
<h3 className="parceirosS-head">HUOL</h3>
<p className="parceirosS-texto">
Hospital Onofre Lopes: Hospital Universitário da UFRN Universidade
Federal do Rio Grande do Norte
</p>
</div>
</div>
</section>
</>
);
}

export default Parceiros_small
export default Parceiros_small;
5 changes: 0 additions & 5 deletions src/services/ApiAvasus.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +0,0 @@
import axios from "axios";

export default function ApiAvasus(url: string) {
return axios.get(url).then((response) => response.data);
}
1 change: 1 addition & 0 deletions src/style/components/ImageSlider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
width: 100%;
height: 33rem;
overflow: hidden;
margin-bottom: 1rem;
.img-slider-img {
display: block;
object-fit: cover;
Expand Down
136 changes: 136 additions & 0 deletions src/style/components/ModulosEducacionais_small.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
@import "../variables";

section {
padding: 2rem 0rem;
h2 {
color: $red-ligh;
}
div {
.modulos-paginas {
width: 50%;
margin: 0 auto;
ul {
li {
display: inline;
text-align: center;
button {
display: inline-block;
width: 33%;
padding: 0.75rem 0;
margin: 0;
text-decoration: none;
color: $ui-darkest;
background-color: transparent;
transition: 200ms ease-in;
border-radius: 0rem;
&:hover {
background-color: $red-ligh;
border-radius: 2rem;
}
}
}
}
}
.modulos-lista {
flex-direction: row;
list-style: none;
flex-wrap: wrap;
display: flex;
width: 85%;
li {
background-color: $ui-lighter;
padding: 1.5rem 1.5rem;
border-radius: 3rem;
margin-top: 1.5rem;
width: 100%;
div {
justify-content: center;
flex-direction: row;
align-items: center;
font-weight: 500;
display: flex;
.modulo-capa {
img {
border-radius: 1.5rem;
object-fit: cover;
height: 9rem;
width: 9rem;
}
}
.modulo-cabecalho {
letter-spacing: $letter-spacing-mid;
flex-direction: column;
padding-left: 0.8rem;
text-align: left;
min-width: 22rem;
display: flex;
.modulo-titulo {
padding-bottom: 0.2rem;
font-weight: bold;
padding: 0.4rem;
}
.modulo-parceiros {
letter-spacing: $letter-spacing-min;
font-weight: bolder;
font-size: 0.7rem;
color: $red-ligh;
padding: 0.4rem;
padding-top: 0;
}
}
.modulo-matriculados {
> img {
width: 1.8rem;
margin: 0;
}
span {
padding-left: 0.2rem;
width: auto;
margin: 0;
}
}
.modulo-duracao {
> img {
width: 1.8rem;
margin: 0;
}
span {
padding-left: 0.2rem;
margin: 0;
width: auto;
}
}
.modulo-avaliacao {
> img {
border: 2px solid black !important;
}
}
.modulo-verModulo {
button {
all: unset;
background-color: $ui-light;
padding: 0.3rem 1rem;
border-radius: 1rem;
color: $ui-lightest;
text-wrap: nowrap;
font-weight: 800;
cursor: pointer;
}
}
}
}
}
}
div {
.modulo-verMais {
margin-top: 1rem;
background-color: $ui-light;
padding: 0.6rem 3rem;
color: $ui-lightest;
border-radius: 3rem;
width: fit-content;
font-size: 1.4rem;
text-wrap: nowrap;
}
}
}
34 changes: 34 additions & 0 deletions src/style/components/Parceiros_small.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
@import "../variables";

.parceirosS-section {
width: 100%;
.parceirosS-titulo {
padding: 2rem 0rem;
padding-top: 0rem;
font-size: 2rem;
width: 100%;
}
.parceirosS-row {
background-color: $ui-lighter;
border-radius: 1rem;
flex-direction: row;
display: flex;
width: 80%;
.parceirosS-container {
flex-direction: column;
padding: 1rem 1rem;
display: flex;
.parceirosS-head {
margin-bottom: 0.5rem;
width: fit-content;
font-size: 1.35rem;
font-weight: 600;
}
.parceirosS-texto {
font-size: 1rem;
color: $ui-dark;
width: 90%;
}
}
}
}

0 comments on commit 7a8a53a

Please sign in to comment.