67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
import React from "react";
|
|
import { Card } from "./ui/card";
|
|
|
|
export const StatCard = ({
|
|
title,
|
|
value,
|
|
icon: Icon,
|
|
iconBgClass,
|
|
dataTestId,
|
|
}) => {
|
|
const valueString = value == null ? "" : String(value);
|
|
|
|
const digitCount =
|
|
valueString.replace(/\D/g, "").length || valueString.length;
|
|
|
|
const getValueFontSize = () => {
|
|
switch (true) {
|
|
case digitCount <= 2:
|
|
// 3.75rem for 3 or fewer digits
|
|
return "3.75rem";
|
|
case digitCount <= 6:
|
|
// Scale down for more digits
|
|
return "clamp(2rem, 5cqi, 3rem)";
|
|
case digitCount <= 9:
|
|
return "clamp(1.5rem, 4cqi, 2.5rem)";
|
|
default:
|
|
return "clamp(1.25rem, 3cqi, 2rem)";
|
|
}
|
|
};
|
|
const valueFontSize = getValueFontSize();
|
|
|
|
return (
|
|
<Card
|
|
className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
|
|
data-testid={dataTestId}
|
|
>
|
|
<div className="flex items-start gap-4 mb-4 justify-between">
|
|
<div
|
|
className="space-y-8 "
|
|
style={{
|
|
containerType: "inline-size",
|
|
maxWidth: "200px",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<p
|
|
className="font-semibold text-[var(--purple-ink)] mb-1"
|
|
style={{ fontSize: valueFontSize, lineHeight: 1 }}
|
|
>
|
|
{value}
|
|
</p>
|
|
</div>
|
|
|
|
<div className={`${iconBgClass} px-3 py-2 rounded-lg `}>
|
|
<Icon className="size-[valueFontSize]" />
|
|
</div>
|
|
</div>
|
|
<p
|
|
className="text-sm text-brand-purple "
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
>
|
|
{title}
|
|
</p>
|
|
</Card>
|
|
);
|
|
};
|