44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
"use client"
|
|
|
|
import { motion } from "framer-motion"
|
|
|
|
export interface VocalCardProps {
|
|
letra: string
|
|
fonema: string
|
|
palabra: string
|
|
imageEmoji: string
|
|
color?: string
|
|
onClick: () => void
|
|
disabled?: boolean
|
|
}
|
|
|
|
export default function VocalCard({
|
|
letra,
|
|
fonema,
|
|
palabra,
|
|
imageEmoji,
|
|
color = "#8CB8A0",
|
|
onClick,
|
|
disabled = false,
|
|
}: VocalCardProps) {
|
|
return (
|
|
<motion.button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={`touch-target-lg rounded-3xl flex flex-col items-center justify-center gap-3 p-6 shadow-md ${disabled ? "opacity-40" : ""}`}
|
|
style={{ backgroundColor: color }}
|
|
whileTap={{ scale: 0.92 }}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
>
|
|
<span className="text-5xl font-display font-bold text-white drop-shadow-sm">
|
|
{letra.toUpperCase()}
|
|
</span>
|
|
<span className="text-3xl">{imageEmoji}</span>
|
|
<span className="text-white/90 text-lg font-display font-medium">
|
|
{palabra}
|
|
</span>
|
|
</motion.button>
|
|
)
|
|
}
|