Plan Card

1import { cva, type VariantProps } from "class-variance-authority";
2import { Check, X } from "lucide-react";
3import * as React from "react";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7 
8const planCardVariants = cva(
9  "relative rounded-2xl border bg-card text-card-foreground transition-all duration-200",
10  {
11    variants: {
12      variant: {
13        default: "border-border",
14        highlighted:
15          "border-primary shadow-lg shadow-primary/10 ring-1 ring-primary",
16        compact: "border-border p-4",
17      },
18      size: {
19        default: "p-6",
20        lg: "p-8",
21      },
22      layout: {
23        vertical: "flex flex-col min-w-[280px]",
24        horizontal: "flex flex-row items-center gap-6 w-full",
25      },
26    },
27    defaultVariants: {
28      variant: "default",
29      size: "default",
30      layout: "vertical",
31    },
32  },
33);
34 
35interface PlanCardProps
36  extends React.HTMLAttributes<HTMLDivElement>,
37    VariantProps<typeof planCardVariants> {}
38 
39const PlanCard = React.forwardRef<HTMLDivElement, PlanCardProps>(
40  ({ className, variant, size, layout, ...props }, ref) => (
41    <div
42      ref={ref}
43      className={cn(planCardVariants({ variant, size, layout, className }))}
44      {...props}
45    />
46  ),
47);
48PlanCard.displayName = "PlanCard";
49 
50const PlanCardHeader = React.forwardRef<
51  HTMLDivElement,
52  React.HTMLAttributes<HTMLDivElement>
53>(({ className, ...props }, ref) => (
54  <div ref={ref} className={cn("flex flex-col gap-2", className)} {...props} />
55));
56PlanCardHeader.displayName = "PlanCardHeader";
57 
58interface PlanCardBadgeProps
59  extends React.ComponentPropsWithoutRef<typeof Badge> {}
60 
61const PlanCardBadge = React.forwardRef<HTMLDivElement, PlanCardBadgeProps>(
62  ({ className, ...props }, ref) => (
63    <Badge ref={ref} className={cn("w-fit", className)} {...props} />
64  ),
65);
66PlanCardBadge.displayName = "PlanCardBadge";
67 
68const PlanCardTitle = React.forwardRef<
69  HTMLHeadingElement,
70  React.HTMLAttributes<HTMLHeadingElement>
71>(({ className, ...props }, ref) => (
72  <h3
73    ref={ref}
74    className={cn("text-2xl font-bold tracking-tight", className)}
75    {...props}
76  />
77));
78PlanCardTitle.displayName = "PlanCardTitle";
79 
80const PlanCardDescription = React.forwardRef<
81  HTMLParagraphElement,
82  React.HTMLAttributes<HTMLParagraphElement>
83>(({ className, ...props }, ref) => (
84  <p
85    ref={ref}
86    className={cn("text-sm text-muted-foreground", className)}
87    {...props}
88  />
89));
90// … truncated