function CounterBadge({
  label,
  value,
  delta,
}: {
  label: string;
  value: number;
  delta?: string;
}) {
  return (
    <div className="flex items-center gap-4 border border-[#1111111A] bg-[#FAFAF8] px-5 py-4">
      <div
        className="text-[#111111] tracking-[-0.02em]"
        style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: 40,
          lineHeight: 1,
        }}
      >
        {value}
      </div>
      <div>
        <div className="font-mono text-[10px] uppercase tracking-[0.14em] text-[#6B6B66]">
          {label}
        </div>
        {delta && (
          <div className="font-mono text-[11px] text-[#2A3D2F] mt-0.5">
            {delta}
          </div>
        )}
      </div>
    </div>
  );
}

export function SerifCounterBadge() {
  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <CounterBadge label="Components" value={124} delta="+12 this week" />
        <CounterBadge label="Templates"  value={11}  delta="+1 this month"  />
        <CounterBadge label="Studios"    value={284} delta="+8 today"       />
      </div>
    </div>
  );
}
Serif Counter Badge
