nyx-dashboard/components/StatCard.js

import {
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  StatGroup,
} from "@chakra-ui/react";

import React from "react";
import { motion } from "framer-motion";

const container = {
  hidden: { opacity: 1, scale: 0 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      delayChildren: 0.4,
      staggerChildren: 0.3,
    },
  },
};

const item = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
  },
};

const MotionStatGroup = motion(StatGroup);
const MotionStat = motion(Stat);

function StatCard() {
  return (
    <MotionStatGroup
      display="flex"
      flexDirection="column"
      style={{ gap: "10px" }}
      variants={container}
    >
      <MotionStat
        background="gray.900"
        width={300}
        height={150}
        p="5"
        borderRadius="15px"
        flexShrink={1}
        variants={item}
      >
        <StatLabel>User Growth</StatLabel>
        <StatNumber>77</StatNumber>
        <StatHelpText>
          <StatArrow type="increase" />
          11.36%
        </StatHelpText>
      </MotionStat>

      <MotionStat
        background="gray.900"
        width={300}
        height={150}
        p="5"
        borderRadius="15px"
        flexShrink={1}
        variants={item}
      >
        <StatLabel>Activity</StatLabel>
        <StatNumber>45 messages</StatNumber>
        <StatHelpText>
          <StatArrow type="decrease" />
          9.05%
        </StatHelpText>
      </MotionStat>
    </MotionStatGroup>
  );
}

export default StatCard;