Stats.tsx

import React from "react";

interface Props {
  children?: React.ReactNode;
  className?: string;
  icon?: JSX.Element;
  title?: string;
  value?: string;
  desc?: string;
  iconColor?: string;
  valueColor?: string;
  descColor?: string;
}

const Stats = (props: Props) => { 
  const {
    children,
    className = "",
    iconColor,
    valueColor,
    descColor,
    icon,
    title,
    value,
    desc,
  } = props;
  
  return (
    <div className={`stats shadow ${className}`}>
      <div className="stat">
        {icon ? (
          <div className={`stat-figure ${iconColor}`}>{icon}</div>
        ) : (
          <></>
        )}
        <div className="stat-title">{title}</div>
        <div className={`stat-value ${valueColor}`}>{value}</div>
        {desc ? <div className={`stat-desc ${descColor}`}>{desc}</div> : <></>}
        {children ? <div className="stat-actions">{children}</div> : <></>}
      </div>
    </div>
  );
};

export default Stats;