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,40 @@
|
||||
import Image from "next/image";
|
||||
import type { TeamBlockValue } from "@/types/wagtail";
|
||||
|
||||
export default function Team({ value }: { value: TeamBlockValue }) {
|
||||
return (
|
||||
<section className="py-24">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
{value.heading && (
|
||||
<h2 className="mb-16 text-4xl font-bold text-slate-900">{value.heading}</h2>
|
||||
)}
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{value.members?.map((member) => (
|
||||
<div key={member.id} className="text-center">
|
||||
{member.photo ? (
|
||||
<Image
|
||||
src={member.photo.url}
|
||||
alt={member.photo.title}
|
||||
width={200}
|
||||
height={200}
|
||||
className="mx-auto mb-4 h-40 w-40 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="mx-auto mb-4 h-40 w-40 rounded-full bg-slate-100" />
|
||||
)}
|
||||
<div className="text-lg font-semibold text-slate-900">
|
||||
{member.name}
|
||||
</div>
|
||||
{member.role && (
|
||||
<div className="mb-2 text-sm text-primary">{member.role}</div>
|
||||
)}
|
||||
{member.bio && (
|
||||
<p className="text-sm text-slate-600">{member.bio}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user