Desenvolvedores
src_
components_
Teste.jsx

Explicação do Código 📜

Importação de Dependências 🛠️

import React from 'react';
import { getPayloadHMR } from '@payloadcms/next/utilities';
import config from '../payload.config';
import RichTextContent from '@/components/RichTextContent';
  • React: Importa o React para a criação de componentes.
  • getPayloadHMR: Função de utilitário do Payload CMS para recuperar dados com Hot Module Replacement (HMR).
  • config: Importa a configuração do Payload CMS a partir de payload.config.
  • RichTextContent: Importa o componente que renderiza conteúdo Rich Text.

Componente CourseCard 🎓

const CourseCard = ({ course }) => (
  <div key={course.id}>
    <h2>{course.nomeCurso}</h2>
    <RichTextContent content={course.planoEnsino} />
  </div>
);
  • CourseCard: Componente funcional que recebe o course como propriedade e exibe:
    • nomeCurso: O título do curso.
    • planoEnsino: O conteúdo do plano de ensino renderizado com o componente RichTextContent.

Função Assíncrona Teste ⏳

export default async function Teste({ content }) {
  const payload = await getPayloadHMR({ config });
 
  let courses;
  try {
    courses = await payload.find({
      collection: 'cursos',
      depth: 1,
      pagination: false,
    });
  } catch (error) {
    console.error('Erro ao buscar cursos:', error);
    courses = { docs: [] }; // Fallback para evitar erros na renderização
  }
 
  return (
    <div>
      <RichTextContent content={content} />
      <h1>Cursos</h1>
      {courses.docs.length > 0 ? (
        courses.docs.map((course) => <CourseCard key={course.id} course={course} />)
      ) : (
        <p>Nenhum curso encontrado.</p>
      )}
    </div>
  );
}
  • Teste: Função assíncrona que executa a consulta de cursos a partir do Payload CMS.
    • getPayloadHMR: Utiliza a configuração do payload.config para obter a instância do Payload CMS.
    • payload.find: Busca os cursos na coleção cursos, com profundidade 1 (informações relacionadas) e sem paginação.
    • Tratamento de erro: Se ocorrer um erro, exibe a mensagem de erro e define courses.docs como um array vazio.
    • Renderização:
      • Se cursos forem encontrados, mapeia os resultados e exibe um CourseCard para cada um.
      • Caso contrário, exibe uma mensagem informando que nenhum curso foi encontrado.

Resumo ✨

O código exibe uma lista de cursos recuperados do Payload CMS, usando um componente CourseCard para renderizar informações sobre cada curso. Em caso de falha na consulta, a renderização exibe uma mensagem de erro amigável. O conteúdo de texto enriquecido, como planos de ensino, é processado e exibido usando o componente RichTextContent.

Código Completo 💻

import React from 'react';
import { getPayloadHMR } from '@payloadcms/next/utilities';
import config from '../payload.config';
import RichTextContent from '@/components/RichTextContent';
 
const CourseCard = ({ course }) => (
  <div key={course.id}>
    <h2>{course.nomeCurso}</h2>
    <RichTextContent content={course.planoEnsino} />
  </div>
);
 
export default async function Teste({ content }) {
  const payload = await getPayloadHMR({ config });
 
  let courses;
  try {
    courses = await payload.find({
      collection: 'cursos',
      depth: 1,
      pagination: false,
    });
  } catch (error) {
    console.error('Erro ao buscar cursos:', error);
    courses = { docs: [] }; // Fallback para evitar erros na renderização
  }
 
  return (
    <div>
      <RichTextContent content={content} />
      <h1>Cursos</h1>
      {courses.docs.length > 0 ? (
        courses.docs.map((course) => <CourseCard key={course.id} course={course} />)
      ) : (
        <p>Nenhum curso encontrado.</p>
      )}
    </div>
  );
}
TagSelector.jsxThemeProvider.jsx