24 lines
767 B
TypeScript
24 lines
767 B
TypeScript
"use client"
|
|
|
|
import { Flame } from "lucide-react"
|
|
import { motion } from "framer-motion"
|
|
|
|
interface StreakCounterProps {
|
|
streak: number
|
|
}
|
|
|
|
export function StreakCounter({ streak }: StreakCounterProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ scale: 0.5, opacity: 0, y: -10 }}
|
|
animate={{ scale: 1, opacity: 1, y: 0 }}
|
|
whileHover={{ scale: 1.1, rotate: [0, -5, 5, -5, 0] }}
|
|
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-orange-500/10 border border-orange-500/20 text-orange-500 font-bold shadow-[0_0_10px_-2px_rgba(249,115,22,0.5)] cursor-default"
|
|
>
|
|
<Flame size={18} className="animate-pulse" />
|
|
<span>{streak}</span>
|
|
</motion.div>
|
|
)
|
|
}
|