Pricing Card

1import * as React from "react";
2import { Check } from "lucide-react";
3import { Badge } from "@/components/ui/atoms/badge";
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardFooter,
9  CardHeader,
10  CardHeading,
11  CardTitle,
12  type CardProps,
13} from "@/components/ui/atoms/card";
14import { cn } from "@/lib/utils";
15 
16export interface PricingCardProps extends Omit<CardProps, "title"> {
17  name?: string;
18  title?: string;
19  price: string;
20  period?: string;
21  description?: string;
22  features: string[];
23  action?: React.ReactNode;
24  popular?: boolean;
25  highlighted?: boolean;
26}
27const PricingCard = React.forwardRef<HTMLDivElement, PricingCardProps>(
28  (
29    {
30      action,
31      className,
32      description,
33      features,
34      highlighted,
35      name,
36      period,
37      popular,
38      price,
39      title,
40      ...props
41    },
42    ref,
43  ) => {
44    const featured = popular ?? highlighted ?? false;
45    return (
46      <Card
47        ref={ref}
48        variant={featured ? "interactive" : "default"}
49        className={cn(featured && "border-primary/35 shadow-md", className)}
50        {...props}
51      >
52        <CardHeader>
53          <CardHeading>
54            <div className="flex items-center gap-2">
55              <CardTitle>{name ?? title ?? "Plan"}</CardTitle>
56              {featured && <Badge>Popular</Badge>}
57            </div>
58            <div className="mt-3 flex items-baseline gap-1">
59              <span className="text-3xl font-bold">{price}</span>
60              {period && <span className="text-xs text-muted-foreground">/{period}</span>}
61            </div>
62            {description && <CardDescription>{description}</CardDescription>}
63          </CardHeading>
64        </CardHeader>
65        <CardContent>
66          <ul className="space-y-2.5">
67            {features.map((feature) => (
68              <li key={feature} className="flex items-start gap-2 text-sm">
69                <Check className="mt-0.5 size-4 shrink-0 text-success-icon" />
70                {feature}
71              </li>
72            ))}
73          </ul>
74        </CardContent>
75        {action && <CardFooter>{action}</CardFooter>}
76      </Card>
77    );
78  },
79);
80PricingCard.displayName = "PricingCard";
81export { PricingCard };