Criação da seção de slides destaque (Elementos e estilo)

1. Essa nossa criação de destaque será bem simples e rápida. Nós vamos na pasta “homeAuth” criar uma pasta chamada “featuredCategory”, importando o scss do styles.

   import styles from '../../../../styles/slideCategory.module.scss'
   
   const FeaturedCategory = function () {
     return <></>;
   };
   
   export default FeaturedCategory;
   

2. Agora, nós iremos copiar o uso do SWR de “featuredSection”, não mudaremos nada do SWR em si.

   import styles from "../../../../styles/slideCategory.module.scss";
   import useSWR from "swr";
   import courseService from "../../../services/courseService";
   import SwrSpinner from "../../common/swrSpinner";
   
   const FeaturedCategory = function () {
   const { data, error } = useSWR("/featured", courseService.getFeaturedCourses);
   
   if (error) return error;
   if (!data) return <SwrSpinner />;
   

3. Agora, nós iremos importar o “SlideComponent” e fazer igual ao que fizemos nos lançamentos.

   return (
   	<>
   	  <p className={styles.titleCategory}>EM DESTAQUE</p>
       <SlideComponent course={data.data} />
     </>
   );
   

4. Agora vamos colocar ele junto com os outros em “home.tsx”

   return (
   	<>
   	  <main>
   	    <FeaturedSection />
         <NewestCategory />
         <FeaturedCategory />
       </main>
   	</>
   );
   

5. Com isso, vemos que está tudo pronto para essa categoria também.

Commit do git

1. Com a nossa seção de destaque finalizada, podemos então dar o seu commit.

   git add -A
   

   git commit -m "Criação dos elementos da seção de destaque, do seu estilo visual - Seção destaque"
   

Conclusão

O que foi feito/visto nessa aula:

1. Criação da estrutura de destaque
2. Utilização do SWR para a categoria de destaque