spb/fetcha

1import * as React from "react";2import { cn } from "@/lib/utils";34export function Stat({ label, value, hint, delta, className, mono = true }: { label: React.ReactNode; value: React.ReactNode; hint?: React.ReactNode; delta?: { value: number; label?: string } | null; className?: string; mono?: boolean }) {5  return (6    <div className={cn("flex flex-col gap-1 px-5 py-4", className)}>7      <div className="text-[12px] font-medium text-fg-subtle">{label}</div>8      <div className={cn("text-[22px] font-semibold leading-none tracking-tight tabular", mono && "font-mono")}>{value}</div>9      {hint || delta ? (10        <div className="flex items-center gap-2 text-[12px] text-fg-muted">11          {delta ? <span className={cn("font-medium tabular", delta.value >= 0 ? "text-success" : "text-danger")}>{delta.value >= 0 ? "+" : ""}{delta.value.toFixed(1)}%</span> : null}12          {hint}13        </div>14      ) : null}15    </div>16  );17}1819export function StatGrid({ children, className, cols = 4 }: { children: React.ReactNode; className?: string; cols?: 2 | 3 | 4 | 5 | 6 }) {20  return (21    <div22      className={cn(23        "grid divide-y divide-border rounded-lg border border-border bg-bg-elevated shadow-xs sm:divide-y-0 sm:divide-x [&>*]:min-w-0",24        cols === 2 && "sm:grid-cols-2",25        cols === 3 && "sm:grid-cols-3",26        cols === 4 && "sm:grid-cols-2 lg:grid-cols-4 sm:[&>*:nth-child(2)]:border-r-0 lg:[&>*:nth-child(2)]:border-r sm:[&>*:nth-child(n+3)]:border-t lg:[&>*:nth-child(n+3)]:border-t-0",27        cols === 5 && "sm:grid-cols-5",28        cols === 6 && "sm:grid-cols-3 lg:grid-cols-6 sm:[&>*:nth-child(n+4)]:border-t lg:[&>*:nth-child(n+4)]:border-t-0",29        className,30      )}31    >32      {children}33    </div>34  );35}36