57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { motion } from "framer-motion"
|
|
|
|
interface GatoMascotaProps {
|
|
mood?: "happy" | "thinking" | "celebrate" | "coach"
|
|
message?: string
|
|
size?: "sm" | "md" | "lg"
|
|
}
|
|
|
|
const moods = {
|
|
happy: {
|
|
emoji: "😺",
|
|
animation: { y: [0, -5, 0] },
|
|
transition: { repeat: Infinity, duration: 2 },
|
|
},
|
|
thinking: {
|
|
emoji: "🤔",
|
|
animation: { rotate: [0, -10, 10, 0] },
|
|
transition: { repeat: Infinity, duration: 1.5 },
|
|
},
|
|
celebrate: {
|
|
emoji: "🎉",
|
|
animation: { scale: [1, 1.2, 1] },
|
|
transition: { repeat: Infinity, duration: 0.8 },
|
|
},
|
|
coach: {
|
|
emoji: "🐱",
|
|
animation: { y: 0 },
|
|
transition: { duration: 0 },
|
|
},
|
|
}
|
|
|
|
export function GatoMascota({ mood = "happy", message, size = "md" }: GatoMascotaProps) {
|
|
const config = moods[mood]
|
|
const sizeClass = size === "sm" ? "text-3xl" : size === "lg" ? "text-7xl" : "text-5xl"
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-2">
|
|
<motion.span
|
|
className={`${sizeClass} block select-none`}
|
|
animate={config.animation}
|
|
transition={config.transition}
|
|
>
|
|
{config.emoji}
|
|
</motion.span>
|
|
{message && (
|
|
<p className="text-foreground/80 text-lg font-display font-medium text-center max-w-xs">
|
|
{message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default GatoMascota
|