pricing-1

1"use client";
2import { CheckCircleIcon, StarIcon } from "lucide-react";
3import Link from "next/link";
4import React from "react";
5import { Button } from "@/components/ui/button";
6import {
7  Tooltip,
8  TooltipContent,
9  TooltipProvider,
10  TooltipTrigger,
11} from "@/components/ui/tooltip";
12import { cn } from "@/lib/utils";
13import { type FREQUENCY, FrequencyToggle } from "./frequency-toggle";
14 
15export type Plan = {
16  name: string;
17  info: string;
18  price: {
19    monthly: number;
20    yearly: number;
21  };
22  features: {
23    text: string;
24    tooltip?: string;
25  }[];
26  btn: {
27    text: string;
28    href: string;
29  };
30  highlighted?: boolean;
31};
32 
33interface PricingSectionProps extends React.ComponentProps<"div"> {
34  plans: Plan[];
35  heading: string;
36  description?: string;
37}
38 
39export function PricingSection({
40  plans,
41  heading,
42  description,
43  ...props
44}: PricingSectionProps) {
45  const [frequency, setFrequency] = React.useState<"monthly" | "yearly">(
46    "monthly"
47  );
48 
49  return (
50    <div
51      className={cn(
52        "flex w-full flex-col items-center justify-center space-y-7 p-4",
53        props.className
54      )}
55      {...props}
56    >
57      <div className="mx-auto max-w-xl space-y-2">
58        <h2 className="text-center font-bold text-2xl tracking-tight md:text-3xl lg:font-extrabold lg:text-4xl">
59          {heading}
60        </h2>
61        {description && (
62          <p className="text-center text-muted-foreground text-sm md:text-base">
63            {description}
64          </p>
65        )}
66      </div>
67 
68      <FrequencyToggle frequency={frequency} setFrequency={setFrequency} />
69      <div className="mx-auto grid w-full max-w-4xl grid-cols-1 gap-6 md:grid-cols-3">
70        {plans.map((plan) => (
71          <PricingCard frequency={frequency} key={plan.name} plan={plan} />
72        ))}
73      </div>
74    </div>
75  );
76}
77 
78type PricingCardProps = React.ComponentProps<"div"> & {
79  plan: Plan;
80  frequency?: FREQUENCY;
81};
82 
83export function PricingCard({
84  plan,
85  className,
86  frequency = "monthly",
87  ...props
88}: PricingCardProps) {
89  return (
90    <div
91      className={cn(
92        "relative flex w-full flex-col rounded-lg border shadow",
93        plan.highlighted && "scale-105",
94        className
95      )}
96      key={plan.name}
97      {...props}
98    >
99      <div
100        className={cn(
101          "rounded-t-lg border-b p-4",
102          plan.highlighted && "bg-card dark:bg-card/80"
103        )}
104      >
105        <div className="absolute top-2 right-2 z-10 flex items-center gap-2">
106// … truncated