first commit

2026-07-11 14:56:10 +08:00
commit 7e05d0a4e7
660 changed files with 78119 additions and 0 deletions
@@ -0,0 +1,36 @@
+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>
+  );
+}