diff --git a/src/assets/feather/clock.svg b/src/assets/feather/clock.svg new file mode 100644 index 0000000..ea3f5e5 --- /dev/null +++ b/src/assets/feather/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/feather/user.svg b/src/assets/feather/user.svg new file mode 100644 index 0000000..7bb5f29 --- /dev/null +++ b/src/assets/feather/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ModulosEducacionais_small.tsx b/src/components/ModulosEducacionais_small.tsx index 951ca78..f102f6e 100644 --- a/src/components/ModulosEducacionais_small.tsx +++ b/src/components/ModulosEducacionais_small.tsx @@ -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

Loading...

; + //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 ( +

+ Carregando Modulos.... +

+ ); + } else if (isError) { + return ( +

+ Error: {error.message} +

+ ); } return ( <> -

ModulosEducacionais_small

-
-
Mais populares
- {/* Conteúdo paginado */} +
+

Modulos Educacionais

-
    - {data?.map((data: any) => { - return ( -
  1. - - {data.id} +
    +
      +
    • +
      • - ); - })} +
    • + +
      • +
    • + +
      • +
    +
    +
      + {data?.map((data: any) => { + return ( +
    1. +
      +
      + Capa do moódulo (imagem) +
      +
      + {data.titulo} + {data.parceiros} +
      +
      + + {data.matriculados} +
      +
      + + {data.duracao} +
      +
      + + {data.avaliacao} +
      +
      + +
      +
      +
      2. + ); + })} +
    +
    2. +
    +
    -
    - Ver mais + ); } diff --git a/src/components/Parceiros_small.tsx b/src/components/Parceiros_small.tsx index 2ad2331..ac03a60 100644 --- a/src/components/Parceiros_small.tsx +++ b/src/components/Parceiros_small.tsx @@ -1,7 +1,40 @@ +import "../style/components/Parceiros_small.scss"; + function Parceiros_small() { return ( -
    Parceiros_small
    - ) + <> +
    +

    Parceiros

    +
    +
    +

    Governo do RN

    +

    + Governo do Estado do Rio Grande o Norte +

    +
    +
    +

    SESAP

    +

    + Secretaria de Saúde Pública do Estado do Rio Grande do norte +

    +
    +
    +

    UFRN

    +

    + Universidade Federal do Rio Grande do Norte +

    +
    +
    +

    HUOL

    +

    + Hospital Onofre Lopes: Hospital Universitário da UFRN Universidade + Federal do Rio Grande do Norte +

    +
    +
    +
    + + ); } -export default Parceiros_small \ No newline at end of file +export default Parceiros_small; diff --git a/src/services/ApiAvasus.ts b/src/services/ApiAvasus.ts index d84b5a4..e69de29 100644 --- a/src/services/ApiAvasus.ts +++ b/src/services/ApiAvasus.ts @@ -1,5 +0,0 @@ -import axios from "axios"; - -export default function ApiAvasus(url: string) { - return axios.get(url).then((response) => response.data); -} diff --git a/src/style/components/ImageSlider.scss b/src/style/components/ImageSlider.scss index 684ba18..7981857 100644 --- a/src/style/components/ImageSlider.scss +++ b/src/style/components/ImageSlider.scss @@ -13,6 +13,7 @@ width: 100%; height: 33rem; overflow: hidden; + margin-bottom: 1rem; .img-slider-img { display: block; object-fit: cover; diff --git a/src/style/components/ModulosEducacionais_small.scss b/src/style/components/ModulosEducacionais_small.scss new file mode 100644 index 0000000..19f857e --- /dev/null +++ b/src/style/components/ModulosEducacionais_small.scss @@ -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; + } + } +} diff --git a/src/style/components/Parceiros_small.scss b/src/style/components/Parceiros_small.scss new file mode 100644 index 0000000..680552e --- /dev/null +++ b/src/style/components/Parceiros_small.scss @@ -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%; + } + } + } +}