67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { motion } from "framer-motion"
|
|
import { speak } from "@/lib/speech"
|
|
import { GatoMascota } from "@/components/child/gato-mascota"
|
|
import TrazoLetra from "@/components/child/trazo-letra"
|
|
import type { Exercise } from "@/curriculum/types"
|
|
|
|
interface Props {
|
|
exercise: Exercise
|
|
onComplete: (correct: boolean) => void
|
|
}
|
|
|
|
export default function EjercicioTrazo({ exercise, onComplete }: Props) {
|
|
const { content } = exercise
|
|
const charToTrace = content.text && content.text.length === 1
|
|
? content.text.toUpperCase()
|
|
: null
|
|
|
|
const handleAudio = async () => {
|
|
if (content.audioText) await speak(content.audioText)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-6">
|
|
<GatoMascota mood="coach" message={content.instruction} size="sm" />
|
|
|
|
{charToTrace ? (
|
|
<>
|
|
<TrazoLetra
|
|
letra={charToTrace}
|
|
color={content.color || '#8CB8A0'}
|
|
onComplete={() => onComplete(true)}
|
|
promptLevel={0}
|
|
/>
|
|
{content.audioText && (
|
|
<button
|
|
onClick={handleAudio}
|
|
className="text-sm text-primary underline"
|
|
>
|
|
Escuchar instrucción
|
|
</button>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
{content.emoji && (
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="text-6xl"
|
|
>
|
|
{content.emoji}
|
|
</motion.div>
|
|
)}
|
|
<button
|
|
onClick={() => onComplete(true)}
|
|
className="bg-primary text-primary-foreground touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold"
|
|
>
|
|
¡Lo hice!
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|