"use client"; import { useState, useEffect, useRef, useCallback } from "react"; import { Footprints } from "lucide-react"; /** * Props for the StepsCard component */ interface StepsCardProps { /** Current step count */ steps: number; /** Daily step goal (default: 10000) */ goal?: number; /** Date label to display */ date?: string; /** Additional CSS classes to apply */ className?: string; } const StepsCard = ({ steps, goal = 10000, date = "Today", className = "", }: StepsCardProps) => { const [displaySteps, setDisplaySteps] = useState(0); const percentage = Math.min((steps / goal) * 100, 100); const animatedStepsRef = useRef(null); const timerRef = useRef(null); const animateSteps = useCallback((targetSteps: number) => { if (timerRef.current) { clearInterval(timerRef.current); } // Reset display steps setDisplaySteps(0); const duration = 2000; const increment = targetSteps / (duration / 16); let current = 0; timerRef.current = setInterval(() => { current += increment; if (current >= targetSteps) { setDisplaySteps(targetSteps); if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } } else { setDisplaySteps(Math.floor(current)); } }, 16); }, []); useEffect(() => { if (animatedStepsRef.current !== steps) { animatedStepsRef.current = steps; animateSteps(steps); } return () => { if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } }; }, [steps, animateSteps]); const getStatusColor = () => { if (percentage >= 100) return "#10b981"; if (percentage >= 75) return "#677ee6"; if (percentage >= 50) return "#f59e0b"; return "#ef4444"; }; const statusColor = getStatusColor(); return (

{date}

{percentage >= 100 ? "Goal Reached! 🎉" : `${Math.round(percentage)}%`}

{displaySteps.toLocaleString()}

Steps

Goal: {goal.toLocaleString()} {steps >= goal ? "✓" : `${(goal - steps).toLocaleString()} to go`}

); }; export { StepsCard };

Prop	Type	Default	Description
`steps`	`number`	`-`	Current step count
`goal`	`number`	`10000`	Daily step goal
`date`	`string`	`"Today"`	Date label to display
`className`	`string`	`""`	Additional CSS classes to apply

Steps Card

Props