"use client" import * as React from "react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { CheckIcon, ArrowRightIcon } from "@radix-ui/react-icons" import NumberFlow from "@number-flow/react" export type PlanLevel = "starter" | "pro" | "all" | string export interface PricingFeature { name: string included: PlanLevel | null } export interface PricingPlan { name: string level: PlanLevel price: { monthly: number yearly: number } popular?: boolean } export interface PricingTableProps extends React.HTMLAttributes { features: PricingFeature[] plans: PricingPlan[] onPlanSelect?: (plan: PlanLevel) => void defaultPlan?: PlanLevel defaultInterval?: "monthly" | "yearly" containerClassName?: string buttonClassName?: string } export function PricingTable({ features, plans, onPlanSelect, defaultPlan = "pro", defaultInterval = "monthly", className, containerClassName, buttonClassName, ...props }: PricingTableProps) { const [isYearly, setIsYearly] = React.useState(defaultInterval === "yearly") const [selectedPlan, setSelectedPlan] = React.useState(defaultPlan) const handlePlanSelect = (plan: PlanLevel) => { setSelectedPlan(plan) onPlanSelect?.(plan) } return (

{plans.map((plan) => ( ))}

Features

{plans.map((plan) => (

{plan.name}

))}

{features.map((feature) => (

{feature.name}

{plans.map((plan) => (

{shouldShowCheck(feature.included, plan.level) ? ( ) : ( - )}

))}

) } function shouldShowCheck( included: PricingFeature["included"], level: string, ): boolean { if (included === "all") return true if (included === "pro" && (level === "pro" || level === "all")) return true if ( included === "starter" && (level === "starter" || level === "pro" || level === "all") ) return true return false }