// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Pricing 02 * @description A detailed pricing comparison table with feature matrix. * Shows feature availability across different tiers with check/x indicators. * * @slots pricing, pricing-container, pricing-header, pricing-heading, * pricing-description, pricing-table, pricing-tier-header, * pricing-category, pricing-feature-row, pricing-cta-row * @variant comparison * * @registryDependencies button-link button * @dependencies lucide-react */ import * as React from "react" import { Check, Minus } from "lucide-react" import { cn } from "@/registry/lib/utils" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface PricingTier { /** Unique identifier for list key */ id: string /** Display name */ name: string /** Price display (e.g., "$29") */ price: string /** Billing period */ period?: string /** CTA button text */ cta: string /** CTA link destination */ href?: string /** Whether this tier is highlighted */ highlighted?: boolean } interface FeatureValue { /** Whether feature is available */ available: boolean /** Optional text value instead of check/x */ text?: string } interface PricingFeature { /** Unique identifier for list key */ id: string /** Feature name */ name: string /** Values per tier (keyed by tier id) */ tiers: Record } interface FeatureCategory { /** Unique identifier for list key */ id: string /** Category name */ name: string /** Features in this category */ features: PricingFeature[] } interface Pricing02Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Pricing tiers */ tiers?: PricingTier[] /** Feature categories with features */ categories?: FeatureCategory[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultTiers: PricingTier[] = [ { id: "starter", name: "Starter", price: "$9", period: "/month", cta: "Get started", href: "#", }, { id: "pro", name: "Pro", price: "$29", period: "/month", cta: "Start free trial", href: "#", highlighted: true, }, { id: "enterprise", name: "Enterprise", price: "$99", period: "/month", cta: "Contact sales", href: "#", }, ] const defaultCategories: FeatureCategory[] = [ { id: "usage", name: "Usage", features: [ { id: "projects", name: "Projects", tiers: { starter: "5", pro: "Unlimited", enterprise: "Unlimited" }, }, { id: "team-members", name: "Team members", tiers: { starter: "1", pro: "10", enterprise: "Unlimited" }, }, { id: "storage", name: "Storage", tiers: { starter: "1 GB", pro: "10 GB", enterprise: "Unlimited" }, }, ], }, { id: "features", name: "Features", features: [ { id: "analytics", name: "Analytics", tiers: { starter: "Basic", pro: "Advanced", enterprise: "Custom" }, }, { id: "branding", name: "Custom branding", tiers: { starter: false, pro: true, enterprise: true }, }, { id: "api", name: "API access", tiers: { starter: false, pro: true, enterprise: true }, }, { id: "webhooks", name: "Webhooks", tiers: { starter: false, pro: true, enterprise: true }, }, ], }, { id: "support", name: "Support", features: [ { id: "email-support", name: "Email support", tiers: { starter: true, pro: true, enterprise: true }, }, { id: "priority-support", name: "Priority support", tiers: { starter: false, pro: true, enterprise: true }, }, { id: "account-manager", name: "Dedicated account manager", tiers: { starter: false, pro: false, enterprise: true }, }, { id: "sla", name: "SLA guarantee", tiers: { starter: false, pro: false, enterprise: true }, }, ], }, ] // ============================================================================ // HELPER COMPONENTS // ============================================================================ function FeatureCell({ value }: { value: FeatureValue | boolean | string }) { if (typeof value === "string") { return ( {value} ) } if (typeof value === "boolean") { return value ? ( ) : ( ) } if (value.text) { return ( {value.text} ) } return value.available ? ( ) : ( ) } // ============================================================================ // COMPONENT // ============================================================================ function Pricing02({ heading = "Compare plans", description = "Find the perfect plan for your needs with our detailed feature comparison.", tiers = defaultTiers, categories = defaultCategories, className, idBase, }: Pricing02Props) { const headingId = `${idBase ?? "pricing-02"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Comparison Table */}

{/* Tier Headers */}

{tiers.map((tier) => (

{tier.name}

{tier.price} {tier.period && ( {tier.period} )}

))}

{/* Feature Categories */} {categories.map((category) => (

{/* Category Header */}

{category.name}

{/* Features */}

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

{feature.name}

{tiers.map((tier) => (

))}

))} {/* CTA Buttons */}

{tiers.map((tier) => ( {tier.cta} ))}

) } export default Pricing02 export { Pricing02, type Pricing02Props, type PricingTier, type PricingFeature, type FeatureCategory, type FeatureValue }