Pricing 2

1/**
2 * Pricing 2 Component
3 *
4 * Source: https://tailark.com/preview/dusk/pricing/two
5 * License: Free Tier
6 * Adapted from: Tailark
7 *
8 * Modifications:
9 * - Integrated with PayloadCMS block system
10 * - Replaced hardcoded content with dynamic props
11 */
12 
13 
14import { Check } from "lucide-react";
15import Link from "next/link";
16 
17import type { Pricing_2_Block } from "~/payload-types";
18 
19import { cn } from "@/registry/default/utils";
20import { Button } from "@/registry/ui/button";
21 
22export * from "./config";
23 
24export default function Pricing2(props: NonNullable<Pricing_2_Block>) {
25	return (
26		<section className="py-16 md:py-32">
27			<div className="mx-auto max-w-6xl px-6">
28				<div className="mx-auto max-w-2xl space-y-6 text-center">
29					<h1 className="text-center text-4xl font-semibold lg:text-5xl">
30						{props?.header ?? ""}
31					</h1>
32					<p>{props?.subheader ?? ""}</p>
33				</div>
34 
35				<div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-3">
36					{(props?.tiers ?? []).map((tier, index) => (
37						<PricingCard key={`pricing-2-tier-${index}`} tier={tier} />
38					))}
39				</div>
40			</div>
41		</section>
42	);
43}
44 
45function PricingCard({
46	tier,
47}: {
48	tier: NonNullable<Pricing_2_Block["tiers"]>[number];
49}) {
50	if (!tier) {
51		return null;
52	}
53 
54	return (
55		<div className="relative flex flex-col rounded-xl border bg-muted shadow-sm">
56			{tier.isPopular && (
57				<span className="absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full bg-linear-to-br/increasing from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950">
58					Popular
59				</span>
60			)}
61 
62			<div className="flex flex-col gap-1.5 p-6">
63				<h3 className="font-medium leading-none tracking-tight">{tier.name}</h3>
64				<span className="my-3 block text-2xl font-semibold">
65					${tier.price} / {tier.period}
66				</span>
67				{tier.description && (
68					<p className="text-sm text-muted-foreground">{tier.description}</p>
69				)}
70			</div>
71 
72			<div className="space-y-4 p-6 pt-0">
73				<hr className="border-dashed" />
74				<ul className="list-outside space-y-3 text-sm">
75					{(tier.features ?? []).map((feature, idx) => (
76						<li
77							className="flex items-center gap-2"
78							key={`pricing-2-tier-${tier.name}-feature-${idx}`}
79						>
80							<Check className="size-3" />
81							{feature.text}
82						</li>
83					))}
84				</ul>
85			</div>
86 
87			<div className="mt-auto flex items-center p-6 pt-0">
88				<Button
89					asChild
90					className="w-full"
91					variant={tier.isPopular ? "default" : "outline"}
92				>
93// … truncated