Zhengen
4bbd6947da
- types/wagtail.ts 新增对应 6 个 Block 值类型接口及 StreamFieldBlock 联合类型分支 - 新建 6 个渲染组件：ProductCardGrid/Pricing/Timeline/Team/TechStack/Video，风格与既有 Block 一致 - BlockRenderer.tsx 映射表接入新组件，key 与后端 COMMON_BLOCKS 保持一致 - lint/build 均验证通过
29 lines
989 B
TypeScript
29 lines
989 B
TypeScript
import type { TechStackBlockValue } from "@/types/wagtail";
|
|
|
|
export default function TechStack({ value }: { value: TechStackBlockValue }) {
|
|
return (
|
|
<section className="bg-slate-50 py-24">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
{value.heading && (
|
|
<h2 className="mb-16 text-center text-4xl font-bold text-slate-900">
|
|
{value.heading}
|
|
</h2>
|
|
)}
|
|
<div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
|
|
{value.items?.map((item, index) => (
|
|
<div
|
|
key={`${item.label}-${index}`}
|
|
className="flex flex-col items-center gap-3 rounded-2xl bg-white p-6 text-center shadow-sm"
|
|
>
|
|
{item.icon && <span className="text-3xl">{item.icon}</span>}
|
|
<span className="text-sm font-medium text-slate-700">
|
|
{item.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|