Plan Group

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7import { PlanCardPrice } from "./plan-card";
8 
9const planGroupVariants = cva("w-full", {
10  variants: {
11    layout: {
12      horizontal: "grid gap-6",
13      vertical: "flex flex-col gap-6",
14    },
15    columns: {
16      2: "md:grid-cols-2",
17      3: "lg:grid-cols-3",
18      4: "lg:grid-cols-2 xl:grid-cols-4",
19    },
20  },
21  defaultVariants: {
22    layout: "horizontal",
23    columns: 2,
24  },
25});
26 
27type BillingPeriod = "month" | "year";
28 
29interface PlanGroupContextValue {
30  period: BillingPeriod;
31  setPeriod: (period: BillingPeriod) => void;
32}
33 
34const PlanGroupContext = React.createContext<PlanGroupContextValue | null>(
35  null,
36);
37 
38function usePlanGroup() {
39  const context = React.useContext(PlanGroupContext);
40  if (!context) {
41    throw new Error("usePlanGroup must be used within a PlanGroup");
42  }
43  return context;
44}
45 
46interface PlanGroupProps
47  extends React.HTMLAttributes<HTMLDivElement>,
48    VariantProps<typeof planGroupVariants> {
49  defaultPeriod?: BillingPeriod;
50  onPeriodChange?: (period: BillingPeriod) => void;
51}
52 
53const PlanGroup = React.forwardRef<HTMLDivElement, PlanGroupProps>(
54  (
55    {
56      className,
57      layout,
58      columns,
59      defaultPeriod = "month",
60      onPeriodChange,
61      children,
62      ...props
63    },
64    ref,
65  ) => {
66    const [period, setPeriodState] =
67      React.useState<BillingPeriod>(defaultPeriod);
68 
69    const setPeriod = React.useCallback(
70      (newPeriod: BillingPeriod) => {
71        setPeriodState(newPeriod);
72        onPeriodChange?.(newPeriod);
73      },
74      [onPeriodChange],
75    );
76 
77    return (
78      <PlanGroupContext.Provider value={{ period, setPeriod }}>
79        <div ref={ref} className={cn("space-y-8", className)} {...props}>
80          {children}
81        </div>
82      </PlanGroupContext.Provider>
83    );
84  },
85);
86PlanGroup.displayName = "PlanGroup";
87 
88const PlanGroupHeader = React.forwardRef<
89  HTMLDivElement,
90  React.HTMLAttributes<HTMLDivElement>
91>(({ className, ...props }, ref) => (
92  <div
93    ref={ref}
94    className={cn("flex flex-col items-center gap-4 text-center", className)}
95    {...props}
96  />
97));
98PlanGroupHeader.displayName = "PlanGroupHeader";
99 
100const PlanGroupTitle = React.forwardRef<
101  HTMLHeadingElement,
102  React.HTMLAttributes<HTMLHeadingElement>
103>(({ className, ...props }, ref) => (
104  <h2
105    ref={ref}
106// … truncated