feat: 补全剩余 6 个 StreamField Block 前端渲染 (ProductCard/Pricing/Timeline/Team/TechStack/Video)
- types/wagtail.ts 新增对应 6 个 Block 值类型接口及 StreamFieldBlock 联合类型分支 - 新建 6 个渲染组件:ProductCardGrid/Pricing/Timeline/Team/TechStack/Video,风格与既有 Block 一致 - BlockRenderer.tsx 映射表接入新组件,key 与后端 COMMON_BLOCKS 保持一致 - lint/build 均验证通过
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
import Link from "next/link";
|
||||
import type { PricingBlockValue } from "@/types/wagtail";
|
||||
|
||||
export default function Pricing({ value }: { value: PricingBlockValue }) {
|
||||
return (
|
||||
<section className="bg-slate-50 py-24">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
{value.heading && (
|
||||
<h2 className="mb-16 text-center text-4xl font-bold text-slate-900">
|
||||
{value.heading}
|
||||
</h2>
|
||||
)}
|
||||
<div className="grid gap-8 lg:grid-cols-3">
|
||||
{value.plans?.map((plan, index) => (
|
||||
<div
|
||||
key={`${plan.name}-${index}`}
|
||||
className={`flex flex-col rounded-3xl border p-8 shadow-sm ${
|
||||
plan.highlighted
|
||||
? "border-primary bg-white ring-2 ring-primary"
|
||||
: "border-slate-100 bg-white"
|
||||
}`}
|
||||
>
|
||||
<h3 className="mb-2 text-xl font-semibold text-slate-900">
|
||||
{plan.name}
|
||||
</h3>
|
||||
<div className="mb-6 text-3xl font-bold text-primary">{plan.price}</div>
|
||||
<ul className="mb-8 flex-1 space-y-3">
|
||||
{plan.features?.map((feature, featureIndex) => (
|
||||
<li
|
||||
key={`${feature}-${featureIndex}`}
|
||||
className="text-sm text-slate-600"
|
||||
>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{plan.button && (
|
||||
<Link
|
||||
href={plan.button.link}
|
||||
className="rounded-2xl bg-primary px-6 py-3 text-center text-white"
|
||||
>
|
||||
{plan.button.text}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user