26 lines
1.0 KiB
TypeScript
26 lines
1.0 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { motion, AnimatePresence } from "framer-motion";
|
||
|
|
import { Flame } from "lucide-react";
|
||
|
|
|
||
|
|
// نشان استریک روزانه؛ تریگر بیرونی کلاسیک برای برگشت روزانهی کاربر (Hook Model).
|
||
|
|
// وقتی عدد عوض میشه یه بار کوچیک pop میزنه تا حس جایزه گرفتن بده.
|
||
|
|
export function StreakBadge({ count }: { count: number }) {
|
||
|
|
if (count <= 0) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AnimatePresence mode="popLayout">
|
||
|
|
<motion.div
|
||
|
|
key={count}
|
||
|
|
initial={{ scale: 0.6, opacity: 0 }}
|
||
|
|
animate={{ scale: 1, opacity: 1 }}
|
||
|
|
transition={{ type: "spring", stiffness: 400, damping: 15 }}
|
||
|
|
className="flex items-center gap-1 rounded-(--radius-full) bg-amber-50 border border-amber-200 px-2.5 py-1 text-amber-600"
|
||
|
|
>
|
||
|
|
<Flame size={13} fill="currentColor" className="text-amber-500" />
|
||
|
|
<span className="text-[12px] font-extrabold">{count.toLocaleString("fa-IR")}</span>
|
||
|
|
</motion.div>
|
||
|
|
</AnimatePresence>
|
||
|
|
);
|
||
|
|
}
|