Pricing cards

1"use client"
2 
3import * as React from "react"
4import { CheckIcon } from "lucide-react"
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardFooter,
10  CardHeader,
11  CardTitle,
12} from "@/registry/new-york/ui/card"
13import { Badge } from "@/registry/new-york/ui/badge"
14import { Button } from "@/registry/new-york/ui/button"
15import { Skeleton } from "@/registry/new-york/ui/skeleton"
16import { cn } from "@/lib/utils"
17import type { PriceData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types"
18 
19/** Props for the `PricingTierCard` component. */
20export type PricingTierCardProps = {
21  name: string
22  priceData?: PriceData
23  description?: string
24  features?: string[]
25  badge?: string
26  icon?: React.ReactNode
27  onSelect?: () => void
28  ctaLabel?: string
29  isSelected?: boolean
30  isCurrent?: boolean
31  currentPlanLabel?: string
32  badgePosition?: "left" | "center" | "right"
33  loading?: boolean
34  className?: string
35}
36 
37export function PricingTierCard({
38  name,
39  priceData,
40  description,
41  features,
42  badge,
43  icon,
44  onSelect,
45  ctaLabel,
46  isSelected,
47  isCurrent = false,
48  currentPlanLabel = "Current plan",
49  badgePosition = "center",
50  loading = false,
51  className,
52}: PricingTierCardProps) {
53  const { total, originalTotal, interval, trialPeriod } = priceData ?? {}
54 
55  // undefined = checkout mode; defined (true/false) = selection mode
56  const isSelectionVariant = isSelected !== undefined
57  const resolvedCtaLabel =
58    ctaLabel ??
59    (isCurrent
60      ? currentPlanLabel
61      : isSelected
62        ? "Selected"
63        : isSelectionVariant
64          ? "Select plan"
65          : "Subscribe")
66 
67  const showBadges = badge || isCurrent
68 
69  // Custom onSelect (e.g. "Contact Sales") stays active on current plan
70  const isDisabled = isCurrent && !onSelect
71 
72  const ctaVariant = isCurrent ? "secondary" : isSelected ? "default" : "outline"
73 
74  if (loading) {
75    return (
76      <Card className={cn("relative flex flex-col", className)}>
77        <CardHeader className="pb-2">
78          <div className="flex items-start gap-3">
79            {icon && <Skeleton className="size-10 rounded-md shrink-0" />}
80            <div className="flex-1 space-y-2">
81              <Skeleton className="h-5 w-24" />
82              <Skeleton className="h-4 w-full" />
83            </div>
84          </div>
85        </CardHeader>
86        <CardContent className="flex-1 space-y-3 pb-3">
87          <div className="flex items-baseline gap-1">
88            <Skeleton className="h-8 w-20" />
89// … truncated