extraído de climatempo

Quadro de Métricas

Grupos de métricas em listas rótulo → valor, cada termo com a sua explicação. Os grupos viram colunas conforme a largura.

Variações

Tela

Abrir em nova aba ↗

Playground

grupos (quantidade)

Props

Geradas dos tipos TypeScript do componente; a descrição vem dos comentários /** */.

<QuadroMetricas>

Grupos de métricas em listas "rótulo → valor", cada termo com a sua explicação. Os grupos se distribuem em colunas conforme a largura disponível.

Prop	Tipo	Padrão	Descrição
gruposobrigatória	GrupoDeMetricas[]	—

Código

stories.tsx tem os exemplos usados no preview e no playground.

quadro-metricas/QuadroMetricas.tsx

import { Termo } from "@/library/dica/Dica";

export type LinhaDeMetrica = {
  rotulo: string;
  /** Já formatado: "0,62 °C", "91,7%". */
  valor: string;
  /** Explicação do termo, mostrada num tooltip ao lado do rótulo. */
  dica?: string;
};

export type GrupoDeMetricas = { titulo: string; linhas: LinhaDeMetrica[] };

function Grupo({ titulo, linhas }: GrupoDeMetricas) {
  return (
    <div>
      <h3 className="border-b-2 border-rule-strong pb-2 font-display text-base font-bold">{titulo}</h3>
      <dl>
        {linhas.map((l) => (
          <div key={l.rotulo} className="flex justify-between gap-4 border-b border-rule py-2.5 text-base">
            <dt className="text-ink-2">{l.dica ? <Termo dica={l.dica}>{l.rotulo}</Termo> : l.rotulo}</dt>
            <dd className="font-medium tabular-nums">{l.valor}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}

/**
 * Grupos de métricas em listas "rótulo → valor", cada termo com a sua explicação.
 * Os grupos se distribuem em colunas conforme a largura disponível.
 */
export function QuadroMetricas({ grupos }: { grupos: GrupoDeMetricas[] }) {
  return (
    <div className="grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] gap-x-8 gap-y-10">
      {grupos.map((g) => (
        <Grupo key={g.titulo} {...g} />
      ))}
    </div>
  );
}

quadro-metricas/stories.tsx

import { defineStories } from "@/registry/stories";
import { QuadroMetricas, type GrupoDeMetricas } from "./QuadroMetricas";

const GRUPOS: GrupoDeMetricas[] = [
  {
    titulo: "Vendas",
    linhas: [
      { rotulo: "Receita", valor: "R$ 48.210" },
      { rotulo: "Pedidos", valor: "1.284" },
      { rotulo: "Ticket médio", valor: "R$ 37,55", dica: "Receita dividida pelo número de pedidos." },
    ],
  },
  {
    titulo: "Clientes",
    linhas: [
      { rotulo: "Novos", valor: "412" },
      { rotulo: "Recorrentes", valor: "68%" },
      { rotulo: "NPS", valor: "+64", dica: "O quanto os clientes recomendariam a loja, de −100 a 100." },
    ],
  },
  {
    titulo: "Operação",
    linhas: [
      { rotulo: "Entrega média", valor: "2,4 dias" },
      { rotulo: "Devoluções", valor: "1,8%" },
    ],
  },
  {
    titulo: "Site",
    linhas: [
      { rotulo: "Visitas", valor: "40.125" },
      { rotulo: "Conversão", valor: "3,2%" },
      { rotulo: "Carrinhos abandonados", valor: "71%" },
    ],
  },
];

export default defineStories({
  args: { grupos: 4 },
  controls: { grupos: { type: "number", label: "grupos (quantidade)", min: 1, max: 4 } },
  render: (a) => (
    <div className="w-full">
      <QuadroMetricas grupos={GRUPOS.slice(0, a.grupos)} />
    </div>
  ),
  stories: [{ name: "Quatro grupos" }, { name: "Dois grupos", args: { grupos: 2 } }],
});

Para usar em outro projeto, copie também

Os componentes de que este depende e o tema. O CSS do tema é um arquivo só: importe depois do Tailwind.

Componentes da biblioteca (diretos e indiretos)

Dica e Termo

Tema escolhido no cabeçalho (com a ponte para o Tailwind)

Ver o CSS do tema

tema-editorial.css · Editorial

/* Tema "Editorial", gerado no Component Vault.
   Importe depois de @import "tailwindcss". Carregue as fontes "Archivo" e "Inter" no projeto. */
@theme inline {
  --color-page: var(--page);
  --color-surface: var(--surface);
  --color-track: var(--track);
  --color-grid: var(--grid);
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-muted: var(--muted);
  --color-rule: var(--rule);
  --color-rule-strong: var(--rule-strong);
  --color-axis: var(--axis);
  --color-accent: var(--accent);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-critical: var(--critical);
  --font-display: var(--fonte-titulo);
  --shadow-flutuante: var(--sombra-flutuante);
}

:root {
  color-scheme: light dark;
  --page: light-dark(#ffffff, #0f0f0e);
  --surface: light-dark(#f5f5f5, #1a1a19);
  --track: light-dark(#f0f0f0, #262624);
  --grid: light-dark(#ededed, #232321);
  --ink: light-dark(#111111, #f0efec);
  --ink-2: light-dark(#4a4a4a, #c3c2b7);
  --muted: light-dark(#666666, #a3a29a);
  --rule: light-dark(#e3e3e3, #2c2c2a);
  --rule-strong: light-dark(#111111, #f0efec);
  --axis: light-dark(#9a9a9a, #6b6a64);
  --accent: light-dark(#1a56db, #7aa2f7);
  --success: light-dark(#13865c, #3fc48f);
  --warning: #fab219;
  --critical: #d03b3b;
  --series-1: light-dark(#2a78d6, #3987e5);
  --series-2: light-dark(#eb6834, #d95926);
  --series-3: light-dark(#1baf7a, #199e70);
  --series-4: light-dark(#eda100, #c98500);
  --series-5: light-dark(#e87ba4, #d55181);
  --series-6: #008300;
  --series-7: light-dark(#6250d6, #9085e9);
  --series-8: light-dark(#e34948, #e66767);
  --fonte-titulo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spacing: 0.25rem;
  --text-xs: 0.8rem;
  --text-sm: 0.8944rem;
  --text-base: 1rem;
  --text-lg: 1.118rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5625rem;
  --text-3xl: 1.9531rem;
  --text-4xl: 2.4414rem;
  --text-5xl: 3.0518rem;
  --text-6xl: 3.8147rem;
  --text-7xl: 4.7684rem;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --sombra-flutuante: 0 8px 24px -6px rgb(0 0 0 / 0.14), 0 2px 6px -2px rgb(0 0 0 / 0.08);
  color: var(--ink);
  font-family: var(--fonte-texto);
}

Na vitrine, a ponte com o Tailwind fica em src/themes/tokens.css:

src/themes/tokens.css

/* Ponte entre os tokens do tema e o Tailwind.

   Os componentes da biblioteca usam classes comuns do Tailwind (p-5, text-sm,
   rounded-xl...) e as cores semânticas abaixo (bg-page, text-ink...). Dentro de
   [data-theme="vault"], o tema redefine as variáveis que essas classes leem:
   --spacing, --text-*, --radius-* e as cores. Os valores vêm do tema escolhido
   na vitrine (src/themes/presets.ts) e são gerados por themeCss(). */
@theme inline {
  --color-page: var(--page);
  --color-surface: var(--surface);
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-muted: var(--muted);
  --color-rule: var(--rule);
  --color-rule-strong: var(--rule-strong);
  --color-track: var(--track);
  --color-grid: var(--grid);
  --color-axis: var(--axis);
  --color-accent: var(--accent);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-critical: var(--critical);
  --font-display: var(--fonte-titulo);
  --shadow-flutuante: var(--sombra-flutuante);
}

Prop

Tipo

Padrão

Descrição

gruposobrigatória

GrupoDeMetricas[]

—

import { Termo } from "@/library/dica/Dica"; export type LinhaDeMetrica = { rotulo: string; /** Já formatado: "0,62 °C", "91,7%". */ valor: string; /** Explicação do termo, mostrada num tooltip ao lado do rótulo. */ dica?: string; }; export type GrupoDeMetricas = { titulo: string; linhas: LinhaDeMetrica[] }; function Grupo({ titulo, linhas }: GrupoDeMetricas) { return ( <div> <h3 className="border-b-2 border-rule-strong pb-2 font-display text-base font-bold">{titulo}</h3> <dl> {linhas.map((l) => ( <div key={l.rotulo} className="flex justify-between gap-4 border-b border-rule py-2.5 text-base"> <dt className="text-ink-2">{l.dica ? <Termo dica={l.dica}>{l.rotulo}</Termo> : l.rotulo}</dt> <dd className="font-medium tabular-nums">{l.valor}</dd> </div> ))} </dl> </div> ); } /** * Grupos de métricas em listas "rótulo → valor", cada termo com a sua explicação. * Os grupos se distribuem em colunas conforme a largura disponível. */ export function QuadroMetricas({ grupos }: { grupos: GrupoDeMetricas[] }) { return ( <div className="grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] gap-x-8 gap-y-10"> {grupos.map((g) => ( <Grupo key={g.titulo} {...g} /> ))} </div> ); }

import { defineStories } from "@/registry/stories"; import { QuadroMetricas, type GrupoDeMetricas } from "./QuadroMetricas"; const GRUPOS: GrupoDeMetricas[] = [ { titulo: "Vendas", linhas: [ { rotulo: "Receita", valor: "R$ 48.210" }, { rotulo: "Pedidos", valor: "1.284" }, { rotulo: "Ticket médio", valor: "R$ 37,55", dica: "Receita dividida pelo número de pedidos." }, ], }, { titulo: "Clientes", linhas: [ { rotulo: "Novos", valor: "412" }, { rotulo: "Recorrentes", valor: "68%" }, { rotulo: "NPS", valor: "+64", dica: "O quanto os clientes recomendariam a loja, de −100 a 100." }, ], }, { titulo: "Operação", linhas: [ { rotulo: "Entrega média", valor: "2,4 dias" }, { rotulo: "Devoluções", valor: "1,8%" }, ], }, { titulo: "Site", linhas: [ { rotulo: "Visitas", valor: "40.125" }, { rotulo: "Conversão", valor: "3,2%" }, { rotulo: "Carrinhos abandonados", valor: "71%" }, ], }, ]; export default defineStories({ args: { grupos: 4 }, controls: { grupos: { type: "number", label: "grupos (quantidade)", min: 1, max: 4 } }, render: (a) => ( <div className="w-full"> <QuadroMetricas grupos={GRUPOS.slice(0, a.grupos)} /> </div> ), stories: [{ name: "Quatro grupos" }, { name: "Dois grupos", args: { grupos: 2 } }], });

/* Tema "Editorial", gerado no Component Vault. Importe depois de @import "tailwindcss". Carregue as fontes "Archivo" e "Inter" no projeto. */ @theme inline { --color-page: var(--page); --color-surface: var(--surface); --color-track: var(--track); --color-grid: var(--grid); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-muted: var(--muted); --color-rule: var(--rule); --color-rule-strong: var(--rule-strong); --color-axis: var(--axis); --color-accent: var(--accent); --color-success: var(--success); --color-warning: var(--warning); --color-critical: var(--critical); --font-display: var(--fonte-titulo); --shadow-flutuante: var(--sombra-flutuante); } :root { color-scheme: light dark; --page: light-dark(#ffffff, #0f0f0e); --surface: light-dark(#f5f5f5, #1a1a19); --track: light-dark(#f0f0f0, #262624); --grid: light-dark(#ededed, #232321); --ink: light-dark(#111111, #f0efec); --ink-2: light-dark(#4a4a4a, #c3c2b7); --muted: light-dark(#666666, #a3a29a); --rule: light-dark(#e3e3e3, #2c2c2a); --rule-strong: light-dark(#111111, #f0efec); --axis: light-dark(#9a9a9a, #6b6a64); --accent: light-dark(#1a56db, #7aa2f7); --success: light-dark(#13865c, #3fc48f); --warning: #fab219; --critical: #d03b3b; --series-1: light-dark(#2a78d6, #3987e5); --series-2: light-dark(#eb6834, #d95926); --series-3: light-dark(#1baf7a, #199e70); --series-4: light-dark(#eda100, #c98500); --series-5: light-dark(#e87ba4, #d55181); --series-6: #008300; --series-7: light-dark(#6250d6, #9085e9); --series-8: light-dark(#e34948, #e66767); --fonte-titulo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --spacing: 0.25rem; --text-xs: 0.8rem; --text-sm: 0.8944rem; --text-base: 1rem; --text-lg: 1.118rem; --text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 1.9531rem; --text-4xl: 2.4414rem; --text-5xl: 3.0518rem; --text-6xl: 3.8147rem; --text-7xl: 4.7684rem; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-4xl: 32px; --sombra-flutuante: 0 8px 24px -6px rgb(0 0 0 / 0.14), 0 2px 6px -2px rgb(0 0 0 / 0.08); color: var(--ink); font-family: var(--fonte-texto); }

/* Ponte entre os tokens do tema e o Tailwind. Os componentes da biblioteca usam classes comuns do Tailwind (p-5, text-sm, rounded-xl...) e as cores semânticas abaixo (bg-page, text-ink...). Dentro de [data-theme="vault"], o tema redefine as variáveis que essas classes leem: --spacing, --text-*, --radius-* e as cores. Os valores vêm do tema escolhido na vitrine (src/themes/presets.ts) e são gerados por themeCss(). */ @theme inline { --color-page: var(--page); --color-surface: var(--surface); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-muted: var(--muted); --color-rule: var(--rule); --color-rule-strong: var(--rule-strong); --color-track: var(--track); --color-grid: var(--grid); --color-axis: var(--axis); --color-accent: var(--accent); --color-success: var(--success); --color-warning: var(--warning); --color-critical: var(--critical); --font-display: var(--fonte-titulo); --shadow-flutuante: var(--sombra-flutuante); }