Stats.tsx

import { graphql, useStaticQuery } from "gatsby"
import React from "react"
import { twMerge } from "tailwind-merge"

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

const Stats = (props: Props) => {
    const getStats = useStaticQuery(graphql`
        query getStats {
            directus {
                counts(filter: { status: { _eq: "published" } }, sort: "sort") {
                    id
                    name
                    value
                    description
                    sort
                }
            }
        }
    `)

    const stats = getStats.directus.counts

    const {
        children,
        className = "",
        iconColor,
        valueColor,
        descriptionColor,
        icon,
        title = "Données disponibles sur la plateforme",
    } = props

    const options = props.options ?? {}
    const oClass = options.class || {}

    return (
        <div className={twMerge("bg-primary w-full py-24", oClass.main)}>
            <h3
                className={twMerge(
                    "text-base-100 mt-3 flex justify-center text-center text-4xl md:text-6xl",
                    oClass.title,
                    oClass.titleStats // Deprecated
                )}
            >
                {title}
            </h3>
            <div
                className={twMerge(
                    "stats mx-auto my-3 flex max-w-3xl flex-col justify-center overflow-hidden border-none bg-transparent pt-10 shadow-none md:flex-row md:justify-between",
                    className,
                    oClass.stats
                )}
            >
                {stats.map((stat: any) => (
                    <div
                        key={stat.id}
                        className={twMerge(
                            "stat md:border-base-100 w-full place-items-center justify-center md:place-items-center",
                            oClass.stat,
                            oClass.containtStats // Deprecated
                        )}
                    >
                        {icon ? (
                            <div
                                className={twMerge(
                                    "stat-figure",
                                    iconColor,
                                    oClass.icon
                                )}
                            >
                                {icon}
                            </div>
                        ) : (
                            <></>
                        )}
                        <div
                            className={twMerge(
                                "stat-title text-base-100 text-2xl",
                                oClass.name
                            )}
                        >
                            {stat.name}
                        </div>
                        <div
                            className={twMerge(
                                "stat-value text-base-100 text-6xl",
                                valueColor,
                                oClass.value
                            )}
                        >
                            {stat.value}
                        </div>
                        {stat.description ? (
                            <div
                                className={twMerge(
                                    "stat-description",
                                    descriptionColor,
                                    oClass.description
                                )}
                            >
                                {stat.description}
                            </div>
                        ) : (
                            <></>
                        )}
                        {children ? (
                            <div
                                className={twMerge(
                                    "stat-actions",
                                    oClass.children,
                                    oClass.action
                                )}
                            >
                                {children}
                            </div>
                        ) : (
                            <></>
                        )}
                    </div>
                ))}
            </div>
        </div>
    )
}

export default Stats