"use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowRightIcon, CheckIcon } from "@radix-ui/react-icons" import { cn } from "@/lib/utils" interface Feature { name: string description: string included: boolean } interface PricingTier { name: string price: { monthly: number yearly: number } description: string features: Feature[] highlight?: boolean badge?: string icon: React.ReactNode } interface PricingSectionProps { tiers: PricingTier[] className?: string } function PricingSection({ tiers, className }: PricingSectionProps) { const [isYearly, setIsYearly] = useState(false) const buttonStyles = { default: cn( "h-12 bg-white dark:bg-zinc-900", "hover:bg-zinc-50 dark:hover:bg-zinc-800", "text-zinc-900 dark:text-zinc-100", "border border-zinc-200 dark:border-zinc-800", "hover:border-zinc-300 dark:hover:border-zinc-700", "shadow-sm hover:shadow-md", "text-sm font-medium", ), highlight: cn( "h-12 bg-zinc-900 dark:bg-zinc-100", "hover:bg-zinc-800 dark:hover:bg-zinc-300", "text-white dark:text-zinc-900", "shadow-[0_1px_15px_rgba(0,0,0,0.1)]", "hover:shadow-[0_1px_20px_rgba(0,0,0,0.15)]", "font-semibold text-base", ), } const badgeStyles = cn( "px-4 py-1.5 text-sm font-medium", "bg-zinc-900 dark:bg-zinc-100", "text-white dark:text-zinc-900", "border-none shadow-lg", ) return (

Simple, transparent pricing

{["Monthly", "Yearly"].map((period) => ( ))}

{tiers.map((tier) => (

{tier.badge && tier.highlight && (

{tier.badge}

)}

{tier.icon}

{tier.name}

${isYearly ? tier.price.yearly : tier.price.monthly} /{isYearly ? "year" : "month"}

{tier.description}

{tier.features.map((feature) => (

{feature.name}

{feature.description}

))}

) } export { PricingSection }