23 lines
638 B
TypeScript
23 lines
638 B
TypeScript
import { GlassSurface } from "@nodedc/ui-react";
|
|
|
|
export interface MetricCardProps {
|
|
eyebrow: string;
|
|
value: string;
|
|
unit?: string;
|
|
detail: string;
|
|
featured?: boolean;
|
|
}
|
|
|
|
export function MetricCard({ eyebrow, value, unit, detail, featured = false }: MetricCardProps) {
|
|
return (
|
|
<GlassSurface className="metric-card" padding="md" data-featured={featured ? "true" : undefined}>
|
|
<span className="metric-card__eyebrow">{eyebrow}</span>
|
|
<div className="metric-card__reading">
|
|
<strong>{value}</strong>
|
|
{unit ? <span>{unit}</span> : null}
|
|
</div>
|
|
<p>{detail}</p>
|
|
</GlassSurface>
|
|
);
|
|
}
|