count0/HabitGrid
1
0
Fork 0
mirror of https://github.com/nagaoo0/HabbitGrid.git synced 2026-04-19 15:23:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add counter animations

Browse Source
This commit is contained in:
_count0
2025-10-15 18:21:24 +02:00
parent cf9730086f
commit d273c976e8
7 changed files with 120 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/HabitCard.jsx
View File

@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
import { ChevronRight, Flame } from 'lucide-react';
import { Button } from './ui/button';
import MiniGrid from './MiniGrid';
import AnimatedCounter from './AnimatedCounter';
const HabitCard = ({ habit, onUpdate }) => {
const navigate = useNavigate();
@@ -27,10 +28,10 @@ const HabitCard = ({ habit, onUpdate }) => {
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<div className="flex items-center gap-1">
<Flame className="w-4 h-4 text-orange-500" />
<span>{habit.currentStreak || 0} day streak</span>
<span><AnimatedCounter value={habit.currentStreak || 0} duration={800} /> day streak</span>
</div>
<span>•</span>
<span>Personal Record: {habit.longestStreak || 0} days</span>
<span>Personal Record: <AnimatedCounter value={habit.longestStreak || 0} duration={800} /> days</span>
</div>
</div>
<Button