packages/ui/src/components/metric.tsx

Metadata

• Purpose: Shared UI package for reusable design primitives/components.
• Domain: shared-packages
• Language: tsx
• Bytes: 795
• Lines: 26
• Content hash (short): ff0e5697
• Source (start): packages/ui/src/components/metric.tsx:1
• Source (end): packages/ui/src/components/metric.tsx:26

Indexed Symbols

• Metric (line 17, function) - Implements metric for module behavior.

Markdown Headings (if applicable)

No markdown headings detected.

Source Preview

import * as React from "react";

type MetricProps = {
  label: string;
  value: string;
  trend?: string;
  tone?: "neutral" | "good" | "warning" | "critical";
};

const toneClass: Record<NonNullable<MetricProps["tone"]>, string> = {
  neutral: "text-[var(--ink-muted)]",
  good: "text-[var(--accent-blue)]",
  warning: "text-[var(--accent-red)]",
  critical: "text-[var(--accent-red)]"
};

export function Metric({ label, value, trend, tone = "neutral" }: MetricProps) {
  return (
    <div className="space-y-1">
      <p className="text-xs uppercase tracking-[0.2em] text-[var(--ink-soft)]">{label}</p>
      <p className="text-3xl font-semibold leading-none text-[var(--ink-base)]">{value}</p>
      {trend ? <p className={`text-sm ${toneClass[tone]}`}>{trend}</p> : null}
    </div>
  );
}