8f26a2b3e9
Animated numbers: - New useAnimatedCounter hook (requestAnimationFrame, ease-out cubic) - New AnimatedNumber component with tabular-nums - Applied to: DashboardPage (4 stats), UserProfilePageHeader (3 stats), StatCard, AdminDashboardStatCard (numeric values auto-animate) Navigation progress bar: - YouTube/GitHub-style thin bar at top of page - Simulated progress on route changes (framer-motion) - Primary color with glow shadow - Integrated into Layout as first child Co-authored-by: Cursor <cursoragent@cursor.com>
16 lines
537 B
TypeScript
16 lines
537 B
TypeScript
import { useAnimatedCounter } from '@/hooks/useAnimatedCounter';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface AnimatedNumberProps {
|
|
value: number;
|
|
duration?: number;
|
|
className?: string;
|
|
format?: (n: number) => string;
|
|
}
|
|
|
|
export function AnimatedNumber({ value, duration = 1000, className, format }: AnimatedNumberProps) {
|
|
const count = useAnimatedCounter({ end: value, duration });
|
|
const display = format ? format(count) : count.toLocaleString();
|
|
|
|
return <span className={cn('tabular-nums', className)}>{display}</span>;
|
|
}
|