"use client"; import { DollarSign, Smartphone, Star, Users } from "lucide-react"; import { motion, useInView } from "motion/react"; import React, { useRef } from "react"; const STAGGER_DELAY = 0.1; const ICON_STAGGER_OFFSET = 0.2; const VALUE_DELAY_OFFSET = 0.3; const TREND_STAGGER_OFFSET = 0.5; interface StatsCardsProps { title?: string; description?: string; stats?: Array<{ value: string; label: string; description?: string; icon?: string; trend?: { value: string; direction: "up" | "down"; }; }>; } const iconMap = { DollarSign, Users, Star, Smartphone, }; export function StatsCards({ title = "Key Metrics", description = "Track your success with these important numbers", stats = [ { value: "2.5M", label: "Revenue", description: "Annual recurring revenue", icon: "DollarSign", trend: { value: "+12%", direction: "up" }, }, { value: "45K", label: "Customers", description: "Happy customers worldwide", icon: "Users", trend: { value: "+8%", direction: "up" }, }, { value: "98%", label: "Satisfaction", description: "Customer satisfaction rate", icon: "Star", trend: { value: "+2%", direction: "up" }, }, { value: "1.2M", label: "Downloads", description: "Total app downloads", icon: "Smartphone", trend: { value: "+15%", direction: "up" }, }, ], }: StatsCardsProps) { const ref = useRef(null); const isInView = useInView(ref, { once: true }); return (

{title}

{description}

{stats.map((stat, index) => ( {/* Icon */} {React.createElement( iconMap[stat.icon as keyof typeof iconMap] || DollarSign, { className: "h-8 w-8", } )} {/* Value */} {stat.value} {/* Label */}

{stat.label}

{/* Description */} {stat.description && (

{stat.description}

)} {/* Trend */} {stat.trend && ( {stat.trend.direction === "up" ? "↗" : "↘"} {stat.trend.value} )} {/* Hover effect background */} ))}

); } export default StatsCards;

Stats Blocks

Stats Blocks

Stats Grid

Installation

Stats Cards

Installation