wagtailcms-frontend/blocks/pricing/Pricing.tsx

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