GitLab

📖 Descrição

Esta PR atualiza o componente CartItem para atender aos requisitos da issue #80 (Componente CartItem):

• Adiciona/atualiza ícones em public (capacity.svg, price.svg, trailDuration.svg, trailLength.svg, trash.svg, weekDays.svg)
• Ajusta CartItem.tsx para nova estrutura visual
• Atualiza exportações em index.ts

🔄 Mudanças

• public/: adiciona/atualiza ícones.
• src/components/cards/CartItem.tsx: reestrutura layout e estilos.
• src/components/cards/index.ts: atualiza exportações.

🧪 Como testar

📖 Descrição

Esta PR atualiza o componente CartItem para atender aos requisitos da issue #80 (Componente CartItem):

• Adiciona/atualiza ícones em public (capacity.svg, price.svg, trailDuration.svg, trailLength.svg, trash.svg, weekDays.svg)
• Ajusta CartItem.tsx para nova estrutura visual (título com margem, infos em duas colunas, preço em pill abaixo, ícone de remoção centralizado)
• Atualiza exportações em index.ts

🔄 Mudanças

• public/: adiciona/atualiza ícones.
• src/components/cards/CartItem.tsx: reestrutura layout e estilos.
• src/components/cards/index.ts: atualiza exportações.
• Não inclui mudanças em package.json, yarn.lock ou package-lock.json.

✅ Acceptance Criteria

• Exibir informações relevantes da experiência (Data, Número de pessoas, Distância da trilha, Dificuldade da trilha, Preço, Tipo do evento).
• Não implementar a lixeira ainda.
• Layout novo, diferente do Figma, mas discutido e aceito pelos AGES III e IV.

📸 Screenshots

📝 Observações

• A lixeira foi mantida no código apenas como placeholder. Pode ser ocultada se preferirmos seguir estritamente o requisito.

🔗 Issue

Closes #80

🧪 Como testar

1. Rode o projeto localmente.
2. Acesse a rota /playground para visualizar os exemplos mockados do componente.
3. Código utilizado para mock/teste:

import React from "react";
import { createFileRoute } from "@tanstack/react-router";
import CartItem, { type ExperienceDTO } from "@/components/cards/CartItem";

export const Route = createFileRoute("/playground")({
  component: Playground,
});

function Playground() {
  const experiences: ExperienceDTO[] = [
    {
      id: "t1",
      name: "Trilha do Vale Encantado",
      description: "Caminhada leve com mirantes.",
      category: "TRAIL",
      capacity: 12,
      startDate: null,
      endDate: null,
      price: 150,
      weekDays: ["SAT", "SUN"],
      durationMinutes: 240,
      trailDifficulty: "MEDIUM",
      trailLength: 7.2,
      image: {
        url: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?q=80&w=1400&auto=format&fit=crop",
      },
      imageId: null,
    },
    {
      id: "r1",
      name: "Quarto Família",
      description: "Acomoda até 4 pessoas.",
      category: "ROOM",
      capacity: 4,
      startDate: null,
      endDate: null,
      price: 320,
      weekDays: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
      durationMinutes: null,
      trailDifficulty: null,
      trailLength: null,
      image: {
        url: "https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1400&auto=format&fit=crop",
      },
      imageId: null,
    },
    {
      id: "e1",
      name: "Observação de Estrelas",
      description: "Noite de astronomia guiada.",
      category: "EVENT",
      capacity: 20,
      startDate: "2025-10-12T20:00:00.000Z",
      endDate: "2025-10-12T23:00:00.000Z",
      price: 80,
      weekDays: null,
      durationMinutes: null,
      trailDifficulty: null,
      trailLength: null,
      image: {
        url: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1400&auto=format&fit=crop",
      },
      imageId: null,
    },
  ];

  return (
    <div className="p-6 space-y-4">
      <h1 className="text-2xl font-bold">Playground (mock)</h1>

      <div className="space-y-4">
        {experiences.map((exp) => (
          <CartItem key={exp.id} experience={exp} />
        ))}
      </div>
    </div>
  );
}

---
## 🔄 Sincronizado do GitHub

- 🔗 **PR original**: https://github.com/AGES-Pro-Mata/frontend/pull/97
- 👤 **Autor**: @bycarolina
- 📅 **Criado**: 2025-09-24T21:42:11Z
- 🔢 **ID GitHub**: #97
- 🌿 **Branches**: `feature/cartitem` → `dev`
- 📊 **Estado**: open
- 🔀 **Mergeable**: unknown

*Sincronizado automaticamente do GitHub para GitLab AGES*