Programação B

Extraindo o Card em um Componente

O JSX dentro do events.map está ficando grande. Vamos extrair o card em seu próprio componente. Crie src/EventCard.tsx:

import { Event } from "./types";

function EventCard({ event }: { event: Event }) {
  return (
    <article className="event-card">
      <h2>{event.title}</h2>
      <time dateTime={event.date}>
        {new Date(event.date).toLocaleString("pt-BR", {
          dateStyle: "short",
          timeStyle: "short",
        })}
      </time>
      <p>{event.description}</p>
      <p>📍 {event.location}</p>
      <p>
        Vagas: {event.capacity} · Organizado por {event.organizer_name}
      </p>
    </article>
  );
}

export default EventCard;

E simplifique o EventList:

{events.map((ev) => (
  <EventCard key={ev.id} event={ev} />
))}

O EventCard recebe um evento via props — parâmetros que o componente pai passa ao filho. Props são somente leitura: o EventCard lê event.title, mas nunca modifica o objeto event. Se os dados mudarem, o componente pai re-renderiza o EventCard com novos props, e a tela se atualiza.

Essa divisão não é só estética. Se amanhã precisarmos de um card com layout diferente (uma versão compacta para uma sidebar, por exemplo), basta criar outro componente que recebe os mesmos props. A lógica de fetch fica no EventList, o layout fica no card.