37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { MoonStar } from "lucide-react";
|
|
|
|
import type { PageMetric } from "../contracts/page";
|
|
import { cx } from "../utils/classes";
|
|
|
|
interface PageFrameProps {
|
|
kicker: string;
|
|
title: string;
|
|
status: string;
|
|
metrics: PageMetric[];
|
|
}
|
|
|
|
export function PageFrame({ kicker, title, status, metrics }: PageFrameProps) {
|
|
return (
|
|
<section className="page-frame" aria-labelledby="page-title">
|
|
<header className="page-header">
|
|
<div>
|
|
<p className="page-kicker">{kicker}</p>
|
|
<h1 id="page-title" className="page-title">
|
|
<MoonStar size={22} aria-hidden="true" />
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
<span className="page-status">{status}</span>
|
|
</header>
|
|
<div className="metric-grid">
|
|
{metrics.map((metric) => (
|
|
<article key={metric.label} className={cx("metric-card", `metric-tone-${metric.tone}`)}>
|
|
<span className="metric-label">{metric.label}</span>
|
|
<strong className="metric-value">{metric.value}</strong>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|