Pricing 1

1import type { ComponentPropsWithRef } from "react";
2 
3import { Check } from "lucide-react";
4import Link from "next/link";
5 
6import type { Pricing_1_Block } from "~/payload-types";
7 
8import { cn } from "@/registry/default/utils";
9import { Button } from "@/registry/ui/button";
10import {
11	Card,
12	CardContent,
13	CardDescription,
14	CardHeader,
15	CardTitle,
16} from "@/registry/ui/card";
17 
18export * from "./config";
19 
20export default function Pricing(props: NonNullable<Pricing_1_Block>) {
21	return (
22		<section className="py-16 md:py-32">
23			<div className="mx-auto max-w-6xl px-6">
24				<div className="mx-auto max-w-2xl space-y-6 text-center">
25					<h1 className="text-center text-4xl font-semibold lg:text-5xl">
26						{props?.header ?? ""}
27					</h1>
28					<p>{props?.subheader ?? ""}</p>
29				</div>
30 
31				<div className="mt-8 justify-center gap-6 md:mt-20 md:flex">
32					{(props?.tiers ?? []).map((tier, index) => (
33						<PricingTier
34							focusedTier={{
35								index: props?.config?.focusIndex ?? -1,
36								label: props?.config?.focusLabel ?? "Popular",
37							}}
38							index={index}
39							key={`Pricing_1_Block-${index}`}
40							tier={tier}
41						/>
42					))}
43				</div>
44			</div>
45		</section>
46	);
47}
48 
49function PricingTier({
50	index,
51	focusedTier = {
52		index: -1,
53		label: "Popular",
54	},
55	tier,
56	...divProps
57}: ComponentPropsWithRef<"div"> & {
58	focusedTier?: {
59		index: number;
60		label: string;
61	};
62	index: number;
63	tier: NonNullable<Pricing_1_Block["tiers"]>[number];
64}) {
65	if (!tier) {return null;}
66 
67	const annualPricing = tier.pricing.annual;
68	const monthlyPricing = tier.pricing.monthly;
69	const isFocused = focusedTier.index === index;
70 
71	return (
72		<Card className="relative my-8 basis-1/2 md:my-0" {...divProps}>
73			<span
74				className={cn(
75					"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",
76					!isFocused && "hidden",
77				)}
78			>
79				{focusedTier.label}
80			</span>
81			<CardHeader>
82				<CardTitle className="font-medium">{tier.label}</CardTitle>
83 
84				<span className="my-3 block text-2xl font-semibold">
85					${tier.pricing.value}
86					{annualPricing ? " / yr" : monthlyPricing ? " / mo" : ""}
87				</span>
88 
89				{tier.description && (
90					<CardDescription className="text-sm">
91						{tier.description}
92					</CardDescription>
93				)}
94				<Button
95					asChild
96					className="mt-4 w-full"
97// … truncated