Stats.tsx

import React from "react"

interface Props {
    children?: React.ReactNode
    className?: string
    icon?: JSX.Element
    title?: string
    value?: string
    description?: string
    iconColor?: string
    valueColor?: string
    descriptionColor?: string
}

const Stats = (props: Props) => {
    const {
        children,
        className = "",
        iconColor,
        valueColor,
        descriptionColor,
        icon,
        title,
        value,
        description,
    } = 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>
                {description ? (
                    <div className={`stat-description ${descriptionColor}`}>{description}</div>
                ) : (
                    <></>
                )}
                {children ? (
                    <div className="stat-actions">{children}</div>
                ) : (
                    <></>
                )}
            </div>
        </div>
    )
}

export default Stats