61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { motion, AnimatePresence } from "framer-motion"
|
|
import { speak } from "@/lib/speech"
|
|
import { GatoMascota } from "@/components/child/gato-mascota"
|
|
import type { Exercise } from "@/curriculum/types"
|
|
|
|
interface Props {
|
|
exercise: Exercise
|
|
onComplete: (correct: boolean) => void
|
|
}
|
|
|
|
export default function EjercicioPalabra({ exercise, onComplete }: Props) {
|
|
const { content } = exercise
|
|
const options = content.options || []
|
|
|
|
const handleChoose = async (opt: (typeof options)[0]) => {
|
|
if (opt.id === "escuchar") {
|
|
if (content.audioText) await speak(content.audioText)
|
|
return
|
|
}
|
|
onComplete(opt.correct)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-6">
|
|
<GatoMascota mood="coach" message={content.instruction} size="sm" />
|
|
|
|
{content.imageEmoji && (
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="text-6xl"
|
|
>
|
|
{content.imageEmoji}
|
|
</motion.div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap gap-4 justify-center max-w-md">
|
|
{options.map((opt, i) => (
|
|
<motion.button
|
|
key={`${opt.label}-${i}`}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: i * 0.08 }}
|
|
onClick={() => handleChoose(opt)}
|
|
className={`touch-target-lg rounded-2xl px-8 py-6 text-xl font-display font-bold shadow-md active:scale-95 transition-transform ${
|
|
opt.id === "escuchar"
|
|
? "bg-accent text-accent-foreground"
|
|
: "bg-white"
|
|
}`}
|
|
>
|
|
{opt.label}
|
|
</motion.button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|