StatsCard

statscard-1779354151811.tsx

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProps> = ({ label, value, trend, percentageChange, sparklineData }) => {
  const [animateValue, setAnimateValue] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (animateValue < value) {
        setAnimateValue(Math.min(animateValue + (value - animateValue) / 10, value));
      } else {
        clearInterval(intervalId);
      }
    }, 50);

    return () => clearInterval(intervalId);
  }, [value, animateValue]);

  return (
    <div className="bg-zinc-950 p-4 rounded-lg">
      <div className="flex justify-between mb-4">
        <h2 className="text-lg font-bold text-gray-200">{label}</h2>
        <span className={`text-lg font-bold ${trend === 'up' ? 'text-green-500' : 'text-red-500'}`}>
          {trend === 'up' ? '↑' : '↓'} {percentageChange}%
        </span>
      </div>
      <h1 className="text-5xl font-bold text-gold mb-4" style={{ transition: 'all 0.5s' }}>
        {animateValue.toLocaleString()}
      </h1>
      <svg width="100%" height="40" className="mb-4">
        <path
          d={sparklineData
            .map((y, i) => `${i * 100 / sparklineData.length}% ${100 - (y / Math.max(...sparklineData)) * 100}%`)
            .join(' L ')}
          stroke="#C9A84C"
          strokeWidth="2"
          fill="none"
          className="transition-all duration-500"
        />
      </svg>
    </div>
  );
};

const DemoStatsCard = () => {
  return (
    <StatsCard
      label="Demo Stat"
      value={12345}
      trend="up"
      percentageChange={10}
      sparklineData={[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
    />
  );
};

export default DemoStatsCard;

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Statistics card with large number and trend indicator

More from Cards

'use client';

import React from 'react';

interface Feature {
  name: string;
}

interface PricingCardProps {
  title: string;
  price: string;
  features: Feature[];
  featured?: boolean;
}

const PricingCard: React.FC<PricingCardProps> = ({ title,

PricingCard

Cards

'use client';

import React from 'react';

interface Testimonial {
  avatar: string;
  quote: string;
  rating: number;
  name: string;
  role: string;
}

const testimonials: Testimonial[] = [
  {
    avatar: 'https://via.placeholder.com/50',
    quo

TestimonialCard

Cards

'use client';

import React from 'react';

interface SocialLink {
  icon: string;
  url: string;
}

interface Profile {
  avatar: string;
  name: string;
  bio: string;
  socialLinks: SocialLink[];
}

const demoProfile: Profile = {
  avatar: 'https:/

ProfileCard

Cards

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeho

NotificationCard

Cards