Pricing Card

1"use client";
2 
3import type { FC, ReactNode } from "react";
4import { CheckmarkCircle02Icon, HugeiconsIcon } from "@/components/icons";
5import { cn } from "@/lib/utils";
6import { RaisedButton } from "@/registry/new-york/ui/raised-button";
7 
8export interface PricingFeature {
9	text: string;
10	icon?: ReactNode;
11}
12 
13export interface PricingCardProps {
14	/** Plan title (e.g., "Free", "Pro", "Enterprise") */
15	title: string;
16	/** Price amount (e.g., 0, 9.99, 29) */
17	price: number;
18	/** Currency symbol (default: "$") */
19	currency?: string;
20	/** Original price before discount (shows strikethrough on yearly) */
21	originalPrice?: number;
22	/** Plan description/subtitle — always reserves two lines for row alignment */
23	description?: string;
24	/** Features included in this plan */
25	features?: (string | PricingFeature)[];
26	/** Custom label above features list (rendered uppercase, muted) */
27	featuresTitle?: ReactNode;
28	/** Billing period: true for monthly, false for yearly */
29	isMonthly?: boolean;
30	/** Show "Current Plan" badge */
31	isCurrentPlan?: boolean;
32	/** Show "Popular" badge in header */
33	isPopular?: boolean;
34	/** Marks this card as the highlighted Pro tier (tints feature icons) */
35	isPro?: boolean;
36	/** Marks this card as the Enterprise tier (changes accent + suffix copy) */
37	isEnterprise?: boolean;
38	/** Optional plan illustration shown above the price */
39	planImage?: string;
40	/** Override the price display (e.g., "Custom") */
41	priceLabel?: string;
42	/** Override the line beneath the price (defaults to "/ per month" etc.) */
43	priceSuffix?: ReactNode;
44	/** Button label (default depends on plan + state) */
45	buttonLabel?: string;
46	/** Small text rendered under the CTA button */
47	buttonFootnote?: ReactNode;
48	/** Button click handler */
49	onButtonClick?: () => void;
50	/** Whether button is disabled */
51	isDisabled?: boolean;
52	/** Whether button is in loading state */
53	isLoading?: boolean;
54	/** Accent color for button (CSS color value) */
55	accentColor?: string;
56	/** Additional CSS classes */
57	className?: string;
58}
59 
60const formatPrice = (amount: number, currency: string): string => {
61	if (amount === 0) return `${currency}0`;
62	return `${currency}${amount.toFixed(amount % 1 === 0 ? 0 : 2)}`;
63};
64 
65export const PricingCard: FC<PricingCardProps> = ({
66	title,
67	price,
68	currency = "$",
69	originalPrice,
70	description,
71	features,
72	featuresTitle,
73	isMonthly = true,
74	isCurrentPlan = false,
75	isPopular = false,
76	isPro = false,
77	isEnterprise = false,
78	planImage,
79	priceLabel,
80	priceSuffix,
81// … truncated