1.先看效果

2.源代码

import React, { useState } from 'react'
import { Check, X } from 'lucide-react'


type Plan = {
  name: string
  price: {
    monthly: number
    yearly: number
  }
  features: string[]
  recommended?: boolean
}


const plans: Plan[] = [
  {
    name: 'Basic',
    price: { monthly: 9, yearly: 90 },
    features: ['1 user', '10 projects', '5GB storage', 'Basic support']
  },
  {
    name: 'Pro',
    price: { monthly: 19, yearly: 190 },
    features: ['5 users', 'Unlimited projects', '50GB storage', 'Priority support', 'Advanced analytics'],
    recommended: true
  },
  {
    name: 'Enterprise',
    price: { monthly: 49, yearly: 490 },
    features: ['Unlimited users', 'Unlimited projects', '500GB storage', '24/7 support', 'Custom integrations', 'Dedicated account manager']
  }
]


export default function PricingPlans() {
  const [isYearly, setIsYearly] = useState(false)


  return (
    

      
Choose Your Plan
      
      

        

           setIsYearly(false)}
          >
            Monthly
          
           setIsYearly(true)}
          >
            Yearly
          
        
      


      

        {plans.map((plan, index) => (
          

            {plan.recommended && (
              

                Recommended
              
            )}
            

              
{plan.name}
              

                
                  ${isYearly ? plan.price.yearly : plan.price.monthly}
                
                /{isYearly ? 'year' : 'month'}
              
              

                {plan.features.map((feature, featureIndex) => (
                  

                    
                    {feature}
                  
                ))}
              
              
                Choose Plan
              
            
          
        ))}
      
    
  )
}