diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx index eb35db950341ae9ec61b63ee1ab1dd698dbca065..c1196456964790961296818ec677a8d78b0e9167 100644 --- a/src/components/Stats.tsx +++ b/src/components/Stats.tsx @@ -1,5 +1,6 @@ import { graphql, useStaticQuery } from "gatsby" import React from "react" +import { twMerge } from "tailwind-merge" interface Props { children?: React.ReactNode @@ -9,6 +10,7 @@ interface Props { iconColor?: string valueColor?: string descriptionColor?: string + options: any } const Stats = (props: Props) => { @@ -37,12 +39,29 @@ const Stats = (props: Props) => { title = "Données disponibles sur la plateforme", } = props + const options = props.options ?? {} + const oClass = options.class || {} + return ( - <div className="mx-auto py-24"> - <h3 className="mt-3 text-xl"> {title} </h3> - <div className={`stats my-3 shadow ${className}`}> + <div className={twMerge("mx-auto py-24", oClass.main)}> + <h3 className={twMerge("mt-3 text-xl", oClass.titleStats)}> + {" "} + {title}{" "} + </h3> + <div + className={twMerge( + "stats ${className} my-3 shadow", + oClass.stats + )} + > {stats.map((stat: any) => ( - <div key={stat.id} className="stat w-64 place-items-center"> + <div + key={stat.id} + className={twMerge( + "stat w-64 place-items-center", + oClass.containtStats + )} + > {icon ? ( <div className={`stat-figure ${iconColor}`}> {icon} @@ -50,8 +69,15 @@ const Stats = (props: Props) => { ) : ( <></> )} - <div className="stat-title">{stat.name}</div> - <div className={`stat-value ${valueColor}`}> + <div className={twMerge("stat-title", oClass.name)}> + {stat.name} + </div> + <div + className={twMerge( + "stat-value ${valueColor}", + oClass.value + )} + > {stat.value} </div> {stat.description ? (