39 lines
1.1 KiB
TypeScript
39 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>
|
|
{metrics.length > 0 && (
|
|
<dl className="page-summary-strip" aria-label={`${title} 快速状态`}>
|
|
{metrics.map((metric) => (
|
|
<div key={metric.label} className={cx("page-summary-chip", `summary-tone-${metric.tone}`)}>
|
|
<dt>{metric.label}</dt>
|
|
<dd>{metric.value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|