28 lines
1.3 KiB
TypeScript
28 lines
1.3 KiB
TypeScript
import Link from "next/link";
|
|
import type { Plan } from "@/lib/pricing";
|
|
|
|
export default function Pricing({ plans }: { plans: Plan[] }) {
|
|
return (
|
|
<section className="container py-14">
|
|
<h2 className="text-2xl font-semibold tracking-tight">Simple, flat pricing</h2>
|
|
<div className="mt-6 grid gap-6 sm:grid-cols-3">
|
|
{plans.map((p) => (
|
|
<div key={p.id} className={`card ${p.popular ? "ring-2 ring-primary" : ""}`}>
|
|
{p.popular && <div className="mb-2 inline-block rounded-full bg-primary px-3 py-1 text-xs text-primary-foreground">Most popular</div>}
|
|
<div className="text-lg font-semibold">{p.name}</div>
|
|
<div className="mt-2 flex items-baseline gap-1">
|
|
<div className="text-3xl font-bold">{p.price}</div>
|
|
{p.periodicity && <div className="text-sm text-muted-foreground">{p.periodicity}</div>}
|
|
</div>
|
|
<p className="mt-2 text-sm text-muted-foreground">{p.description}</p>
|
|
<ul className="mt-4 space-y-2 text-sm">
|
|
{p.features.map((f, i) => <li key={i}>• {f}</li>)}
|
|
</ul>
|
|
<Link href={p.cta.href} className="btn-primary mt-6 no-underline w-full text-center">{p.cta.label}</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|