43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { site } from "@/content/site";
|
||
|
||
type Report = (typeof site.intelligentReport.reports)[number];
|
||
|
||
type SkillExampleContentProps = {
|
||
report: Report;
|
||
};
|
||
|
||
/**
|
||
* 示例报告内容渲染 — 卡片弹窗与详情页「示例报告」tab 共用同一套结构与样式。
|
||
* 外层（overlay/dialog/footer）由各自调用方自行包裹。
|
||
*/
|
||
export function SkillExampleContent({ report }: SkillExampleContentProps) {
|
||
return (
|
||
<div className="report-example-content">
|
||
<header className="report-example-content__header flex flex-col gap-3">
|
||
<p className="type-mono-caps-label text-body">{report.audience}</p>
|
||
<h3 className="report-example-content__title type-display-lg text-balance text-ink">
|
||
{report.example.title}
|
||
</h3>
|
||
<p className="type-mono-caption text-body">{report.example.meta}</p>
|
||
</header>
|
||
<div className="report-example-content__body">
|
||
{report.example.sections.map((sec) => (
|
||
<section key={sec.heading} className="report-example-section">
|
||
<h4 className="type-caption-strong text-ink">{sec.heading}</h4>
|
||
{"body" in sec && sec.body ? (
|
||
<p className="type-body-md text-body">{sec.body}</p>
|
||
) : null}
|
||
{"bullets" in sec && sec.bullets ? (
|
||
<ul className="report-example-list">
|
||
{sec.bullets.map((item) => (
|
||
<li key={item}>{item}</li>
|
||
))}
|
||
</ul>
|
||
) : null}
|
||
</section>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|