Desenvolvedores
src_
components_
CourseList.jsx

Explicação Inicial 📚

O código apresentado define um componente CourseList que exibe uma lista de cursos em um layout responsivo. Durante o processo de carregamento, ele exibe esqueleto de carregamento utilizando o componente Skeleton.

Importações 📦

import React from "react";
import CourseCard from "@/components/CourseCard";
import { Skeleton } from "@/components/ui/skeleton";
  • React: Importa o React para poder utilizar JSX, necessário para construir os componentes.
  • CourseCard: Importa um componente CourseCard que será utilizado para exibir cada curso de forma individual.
  • Skeleton: Importa o componente Skeleton que simula o carregamento de dados enquanto a informação real não está disponível.

Função Principal do Componente 🎯

const CourseList = ({ courses, loading }) => {
  //content
};

A função CourseList recebe duas props:

  • courses: uma lista de cursos que será exibida.
  • loading: um booleano que indica se os dados estão sendo carregados.

Condição de Carregamento ⏳

if (loading) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {Array.from({ length: 6 }).map((_, index) => (
        <div key={index} className="w-full">
          <Skeleton className="h-48 w-full rounded-tl-lg rounded-tr-lg" />
          <div className="p-4">
            <Skeleton className="h-6 w-3/4 mb-2" />
            <Skeleton className="h-4 w-full mb-2" />
            <Skeleton className="h-10 w-full lg:w-auto mt-4" />
          </div>
        </div>
      ))}
    </div>
  );
}

Quando o estado de loading é true, a função retorna uma estrutura de esqueleto, utilizando o Skeleton para representar os cursos enquanto eles estão sendo carregados:

  • grid-cols-1 md:grid-cols-2 lg:grid-cols-3: Essas classes de grid garantem que a estrutura seja responsiva, exibindo 1 coluna em telas pequenas, 2 em médias e 3 em grandes.
  • Array.from({ length: 6 }): Gera um array de 6 elementos para simular a exibição de 6 cursos.
  • Cada esqueleto tem diferentes dimensões e estilos aplicados para simular o conteúdo real do curso.

Renderização dos Cursos 📜

return (
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {courses.map((course) => (
      <CourseCard key={course.id} course={course} />
    ))}
  </div>
);

Se loading for false (ou seja, os dados já estão carregados), o código entra na segunda parte e exibe os cursos reais:

  • courses.map((course) => ...): Para cada curso na lista courses, o componente CourseCard é renderizado, passando os dados do curso.
  • key={course.id}: A chave única id é passada para garantir que o React possa otimizar a renderização de cada item.

Código Completo 🖥️

import React from "react";
import CourseCard from "@/components/CourseCard";
import { Skeleton } from "@/components/ui/skeleton";
 
const CourseList = ({ courses, loading }) => {
  if (loading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {Array.from({ length: 6 }).map((_, index) => (
          <div key={index} className="w-full">
            <Skeleton className="h-48 w-full rounded-tl-lg rounded-tr-lg" />
            <div className="p-4">
              <Skeleton className="h-6 w-3/4 mb-2" />
              <Skeleton className="h-4 w-full mb-2" />
              <Skeleton className="h-10 w-full lg:w-auto mt-4" />
            </div>
          </div>
        ))}
      </div>
    );
  }
 
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {courses.map((course) => (
        <CourseCard key={course.id} course={course} />
      ))}
    </div>
  );
};
 
export default CourseList;
CourseCard.jsxIconHome.jsx