@@ -66,11 +41,16 @@ const ExtrasSection = ({ selectedExtras, onToggleExtra }: ExtrasSectionProps) =>
{/* Products grid */}
- {extraProducts.map((product) => (
+ {extras.map((extra) => (
))}
@@ -80,4 +60,6 @@ const ExtrasSection = ({ selectedExtras, onToggleExtra }: ExtrasSectionProps) =>
);
};
+
+
export default ExtrasSection;
diff --git a/zoe-kids-zone-main/src/pages/Index.tsx b/zoe-kids-zone-main/src/pages/Index.tsx
index 7964138..0a1236e 100644
--- a/zoe-kids-zone-main/src/pages/Index.tsx
+++ b/zoe-kids-zone-main/src/pages/Index.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
import Header from "@/components/Header";
import HeroSection from "@/components/HeroSection";
import GallerySection from "@/components/GallerySection";
@@ -9,6 +9,7 @@ import CartSummary from "@/components/CartSummary";
import TrustSection from "@/components/TrustSection";
import Footer from "@/components/Footer";
import { toast } from "@/hooks/use-toast";
+import type { Extra } from '@/components/ExtrasSection'
interface CartItem {
id: string;
@@ -21,18 +22,12 @@ const planDetails: Record = {
"12months": { name: "Plano Anual (12 meses)", price: 119.9 },
};
-const extraDetails: Record = {
- device: { name: "Novo Dispositivo ZOE", price: 29.9 },
- license: { name: "Licença Adicional", price: 19.9 },
- book1: { name: "Livro de Atividades Vol. 1", price: 34.9 },
- book2: { name: "Livro de Atividades Vol. 2", price: 34.9 },
-};
-
const Index = () => {
const [selectedPlanId, setSelectedPlanId] = useState();
const [selectedExtras, setSelectedExtras] = useState([]);
const [isCartOpen, setIsCartOpen] = useState(false);
const plansSectionRef = useRef(null);
+ const [extras, setExtras] = useState([]);
const scrollToPlans = useCallback(() => {
plansSectionRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -66,10 +61,12 @@ const Index = () => {
}
selectedExtras.forEach((extraId) => {
- if (extraDetails[extraId]) {
+ const extra = extras.find((e) => e.id === extraId);
+ if (extra) {
items.push({
- id: extraId,
- ...extraDetails[extraId],
+ id: extra.id,
+ name: extra.name,
+ price: extra.price,
});
}
});
@@ -95,6 +92,28 @@ const Index = () => {
setSelectedExtras([]);
}, []);
+ useEffect(() => {
+ async function loadExtras() {
+ const api_endpoint = import.meta.env.VITE_API_URL;
+ const res = await fetch(`${api_endpoint}/courses/list`);
+ const data = await res.json();
+
+ if (!data.ok) return;
+
+ const mapped = data.cursos.map((c: any) => ({
+ id: String(c.id),
+ name: c.nome,
+ description: c.descricao,
+ price: c.preco,
+ icon: c.icone,
+ }));
+
+ setExtras(mapped);
+ }
+
+ loadExtras();
+ }, []);
+
const cartItems = getCartItems();
const cartItemCount = cartItems.length;
@@ -117,6 +136,7 @@ const Index = () => {
/>
diff --git a/zoe-kids-zone-main/src/utils/iconMap.tsx b/zoe-kids-zone-main/src/utils/iconMap.tsx
new file mode 100644
index 0000000..4f3de63
--- /dev/null
+++ b/zoe-kids-zone-main/src/utils/iconMap.tsx
@@ -0,0 +1,10 @@
+import { Smartphone, Users, BookOpen, Gift } from "lucide-react";
+import React from "react";
+
+
+export const iconMap: Record = {
+ smartphone: ,
+ users: ,
+ book: ,
+ gift: ,
+};
\ No newline at end of file