Agora com a conexão concluída, nós iremos importar o tipo do curso no arquivo “slideCard”, e iremos colocar dentro de props, pois quando for feito o fetch, nós iremos receber aqui as informações do curso.

import { CourseType } from "../../../services/courseService";

interface props {
  course: CourseType;
}

Nós vamos começar então a utilizar essa prop. Nós iremos envolver o nosso slide com um link, pois assim que a pessoa clicar no slide, ela será enviada para o curso.

1. Nós não temos essa rota que vamos colocar no link criada, mas deixaremos já aqui para quando estiver criada.
2. Nós vamos estar pegando as informações criadas no “courseType” e colocando aqui, por isso teremos “.id”, “.name”, “.synopsis”
3. Nós precisamos colocar o mesmo “process.env” que colocamos na api antes de puxarmos a thumb, da mesma forma vamos fazer para puxar os episódios.

const SlideCard = function ({ course }: props) {
  return (
    <>
      <Link href={`/courses/${course.id}`}>
        <div className={styles.slide}>
          <img
            src={`${process.env.NEXT_PUBLIC_BASEURL}/${course.thumbnailUrl}`}
            alt={course.name}
            className={styles.slideImg}
          />
          <p className={styles.slideTitle}>{course.name}</p>
          <p className={styles.slideDescription}>{course.synopsis}</p>
        </div>
      </Link>
    </>
  );
};

export default SlideCard;

Agora, nós iremos no arquivo de “SlideComponent” e lá nós iremos importar e criar também uma props para o course. Só que nós iremos colocar o courseType sendo um array, pois nós iremos ter um array de cursos.

interface props {
  course: CourseType[];
}

Agora, nós iremos fazer um map para esse array, pois é assim que nós faremos a chamada de cada curso, e nós iremos colocar o “slideCard” dentro desse array, poir ele vai receber essas informações e nós iremos tratar lá no “slideCard”

const SlideComponent = function ({ course }: props) {
  return (
    <>
      <div>
        <Splide
          options={{
            type: "loop",
            perPage: 4,
            perMove: 1,
            pagination: false,
          }}
        >
          {course?.map((course) => (
            <SplideSlide key={course.id}>
              <SlideCard course={course} />
            </SplideSlide>
          ))}
        </Splide>
      </div>
    </>
  );
};

export default SlideComponent;