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>
|
|||
|
|
);
|
|||
|
|
}
|