Pricing 3

1/**
2 * Pricing 3 Component
3 *
4 * Source: https://tailark.com/preview/dusk/pricing/three
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_3_Block } from "~/payload-types";
18 
19import { cn } from "@/registry/default/utils";
20import { Button } from "@/registry/ui/button";
21import {
22	Card,
23	CardContent,
24	CardDescription,
25	CardHeader,
26	CardTitle,
27} from "@/registry/ui/card";
28 
29export * from "./config";
30 
31export default function Pricing3(props: NonNullable<Pricing_3_Block>) {
32	const popularIndex = props?.config?.popularIndex ?? -1;
33	const popularLabel = props?.config?.popularLabel ?? "Popular";
34 
35	return (
36		<section className="py-16 md:py-32">
37			<div className="mx-auto max-w-7xl px-6">
38				{/* Header Section */}
39				<div className="mx-auto max-w-3xl space-y-4 text-center">
40					{props?.header && (
41						<h2 className="text-4xl font-semibold lg:text-5xl">
42							{props.header}
43						</h2>
44					)}
45					{props?.subheader && (
46						<p className="text-muted-foreground text-lg">
47							{props.subheader}
48						</p>
49					)}
50				</div>
51 
52				{/* Pricing Cards Grid */}
53				<div className="mt-12 grid gap-6 md:mt-16 md:grid-cols-3">
54					{(props?.tiers ?? []).map((tier, index) => {
55						const isPopular = popularIndex === index;
56 
57						return (
58							<PricingCard
59								key={`pricing-3-tier-${index}`}
60								tier={tier}
61								isPopular={isPopular}
62								popularLabel={popularLabel}
63							/>
64						);
65					})}
66				</div>
67			</div>
68		</section>
69	);
70}
71 
72interface PricingCardProps {
73	tier: NonNullable<Pricing_3_Block["tiers"]>[number];
74	isPopular: boolean;
75	popularLabel: string;
76}
77 
78function PricingCard({ tier, isPopular, popularLabel }: PricingCardProps) {
79	if (!tier) return null;
80 
81	const periodLabel =
82		tier.period === "month" ? "/mo" : tier.period === "year" ? "/yr" : "";
83 
84	return (
85		<Card className="relative flex flex-col">
86			{/* Popular Badge */}
87			{isPopular && (
88				<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 ring-1 ring-white/20 ring-offset-1 ring-offset-gray-950/5 ring-inset">
89					{popularLabel}
90				</span>
91			)}
92 
93			<CardHeader>
94				{/* Plan Name */}
95// … truncated