Nós iremos criar agora a nossa seção de lançamentos, que nem fizemos lá na nossa “homeNoAuth”. Será algo bem simples e rápido, pois nós já temos tudo criado (Slide, método no service, responsividade, etc...)
Nós vamos então na página “homeAuth”, nela nós iremos criar uma pasta chamada “newestCategory”. Não iremos criar um arquivo visual por enquanto.
const NewestCategory = function () {
return <></>;
};
export default NewestCategory;
Nós podemos copiar de “featuredSection” o fetch com o SWR, já que foi exatamente a mesma coisa, só iremos mudar o método que estamos puxando para o método ser o “getNewestCourses”.
import useSWR from "swr";
import courseService from "../../../services/courseService";
import SwrSpinner from "../../common/swrSpinner";
const NewestCategory = function () {
const { data, error } = useSWR("/newest", courseService.getNewestCourses);
if (error) return error;
if (!data) return <SwrSpinner />;
Nós iremos agora fazer o uso do “data” dentro do SlideComponent, que nem fizemos na página “homeNoAuth” com os lançamentos.
return (
<>
<p className={styles.titleCategory}>LANÇAMENTOS</p>
<SlideComponent course={data.data} />
</>
);
Agora nós vamos em “home.tsx” para colocar essa nova seção.
return (
<>
<main>
<FeaturedSection />
<NewestCategory />
</main>
</>
);
Para o nosso scss, nós iremos ter apenas a manipulação do nosso título, e isso vai estar presente em todas as categorias, então nós iremos em “styles” criar um arquivo chamado “slideCategory.module.scss” e iremos importar ele no topo do nosso “newestCourse”
import styles from "../../../../styles/slideCategory.module.scss";
Agora, nós podemos manipular o nosso título.
.titleCategory {
font-size: 24px;
font-weight: bold;
margin: 40px 0px 0px 7%;
}
Agora, nós podemos ver que temos tudo pronto para essa nossa categoria.
Com a nossa seção de lançamentos finalizada, podemos então dar o seu commit.
git add -A
git commit -m "Criação dos elementos da seção de lançamento, do seu estilo visual - Seção lançamento"
O que foi feito/visto nessa aula: