Spaces:
Running
Running
File size: 2,136 Bytes
d70f132 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | import clsx from "clsx";
import type { ReactNode } from "react";
import Badge from "@/components/ui/Badge";
export interface MetricDefCardProps {
/** short symbol, e.g. "CS-WER" */
abbr: string;
/** spelled-out name, e.g. "Code-switch word error rate" */
name: string;
/** mono formula line; omit on roadmap ghosts without a fixed definition */
formula?: string;
/** "lower is better" / "higher is better" */
direction?: string;
/** ghost treatment for roadmap metrics */
roadmap?: boolean;
children: ReactNode;
className?: string;
}
/** Typeset metric definition card: serif symbol, mono formula, prose gloss. */
export default function MetricDefCard({
abbr,
name,
formula,
direction,
roadmap = false,
children,
className,
}: MetricDefCardProps) {
return (
<div
className={clsx(
"flex flex-col gap-2.5 rounded-sm p-5 spotlight-card",
roadmap
? "border border-dashed border-line bg-transparent"
: "hairline depth-1 bg-surface",
className,
)}
>
<div className="flex items-baseline justify-between gap-3">
<h3
className={clsx(
"font-display text-2xl leading-none",
roadmap ? "text-muted" : "text-text",
)}
>
{abbr}
</h3>
{roadmap ? (
<Badge variant="ghost">Roadmap</Badge>
) : (
direction && (
<span className="num whitespace-nowrap text-[11px] uppercase tracking-[0.14em] text-muted">
{direction}
</span>
)
)}
</div>
<p className="text-[11px] uppercase tracking-[0.14em] text-muted">
{name}
</p>
{formula && (
<code
className={clsx(
"num block whitespace-pre-wrap rounded-sm px-3 py-2 text-[12px]",
roadmap
? "border border-dashed border-line text-muted"
: "hairline bg-surface-2 text-text",
)}
>
{formula}
</code>
)}
<p className="text-[13px] leading-relaxed text-muted">{children}</p>
</div>
);
}
|