Pricing Table Six

1"use client";
2 
3import { useState } from "react";
4import { Check } from "lucide-react";
5import { Button } from "@/components/ui/button";
6import { AnimatePresence, motion } from "framer-motion";
7 
8export interface PlanProps {
9  id: string;
10  title: string;
11  description: string;
12  monthlyPrice: number;
13  yearlyPrice: number;
14  features: string[];
15  isFeatured?: boolean;
16  isCustom?: boolean;
17}
18 
19export interface PricingTableSixProps {
20  plans: PlanProps[];
21  onPlanSelect: (planId: string) => void;
22}
23 
24const gradientFrom = ["from-chart-1/70", "from-chart-2/70", "from-chart-3/70"];
25 
26const getDiscountPercent = (plan: PlanProps) => {
27  return Math.min(
28    100,
29    Math.max(
30      0,
31      Math.round((1 - plan.yearlyPrice / (plan.monthlyPrice * 12)) * 100),
32    ),
33  );
34};
35 
36export function PricingTableSix({ plans, onPlanSelect }: PricingTableSixProps) {
37  const [isYearly, setIsYearly] = useState(false);
38 
39  return (
40    <section className="px-4 py-16 sm:px-6 lg:px-8">
41      <div className="mx-auto max-w-7xl">
42        {/* Header */}
43        <div className="mb-16 grid items-start gap-8 lg:grid-cols-2 lg:gap-16">
44          <div>
45            <h2 className="text-foreground text-4xl leading-tight font-bold tracking-tight sm:text-5xl lg:text-[3.5rem]">
46              Tailored plans for
47              <span className="font-light italic">every stage</span>
48            </h2>
49          </div>
50 
51          <div className="lg:pt-4">
52            <p className="text-muted-foreground mb-6 text-base leading-relaxed">
53              No matter where you are in your journey, find a plan that fits
54              your goals and budget.
55            </p>
56 
57            {/* Toggle */}
58 
59            {/* Toggle with layoutId */}
60            <div className="bg-primary-foreground/70 relative inline-flex items-center rounded-full p-1.5 dark:!shadow-[inset_0_1.5px_0_color-mix(in_oklch,_var(--primary)_15%,_transparent)]">
61              <button
62                onClick={() => setIsYearly(false)}
63                className={`text-foreground relative z-10 cursor-pointer rounded-full px-4 py-2 text-sm font-medium ${
64                  !isYearly
65                    ? "text-foreground border-muted-foreground/10 border"
66                    : "text-muted-foreground"
67                }`}
68                aria-pressed={!isYearly}
69              >
70                {!isYearly && (
71                  <motion.div
72                    layoutId="toggle-indicator"
73// … truncated