{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-07",
  "title": "Pricing 07",
  "description": "A simple pricing block",
  "dependencies": [
    "@number-flow/react"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/pricing-07/components/pricing.tsx",
      "content": "\"use client\";\n\nimport NumberFlow from \"@number-flow/react\";\nimport { Box, CircleCheck, Gem, type LucideIcon, Users } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\";\n\ninterface PricingPlan {\n  name: string;\n  description: string;\n  price: number;\n  isRecommended: boolean;\n  icon: LucideIcon;\n  features: string[];\n}\ntype BillingPeriod = \"monthly\" | \"yearly\";\n\nconst pricingPlans: PricingPlan[] = [\n  {\n    name: \"Basic\",\n    description: \"Perfect for individuals getting started.\",\n    price: 0,\n    isRecommended: false,\n    icon: Box,\n    features: [\n      \"1 Project\",\n      \"Community Support\",\n      \"Basic Analytics\",\n      \"Limited Components\",\n    ],\n  },\n  {\n    name: \"Pro\",\n    description: \"Ideal for professionals who need more power.\",\n    price: 19,\n    isRecommended: true,\n    icon: Gem,\n    features: [\n      \"Unlimited Projects\",\n      \"Priority Support\",\n      \"Advanced Analytics\",\n      \"Access to Premium Components\",\n      \"Custom Branding\",\n    ],\n  },\n  {\n    name: \"Team\",\n    description: \"Best for growing teams and small businesses.\",\n    price: 49,\n    isRecommended: false,\n    icon: Users,\n    features: [\n      \"Everything in Pro\",\n      \"Team Collaboration\",\n      \"Role-based Access\",\n      \"Usage Insights\",\n      \"Dedicated Support\",\n    ],\n  },\n];\n\nconst YEARLY_DISCOUNT_PERCENTAGE = 20;\n\nconst Pricing = () => {\n  const [billingPeriod, setBillingPeriod] = useState<BillingPeriod>(\"yearly\");\n\n  const handleBillingPeriodChange = (value: string) => {\n    setBillingPeriod(value as BillingPeriod);\n  };\n\n  return (\n    <section className=\"mx-auto flex max-w-6xl flex-col gap-12 px-6 py-16\">\n      <Tabs\n        className=\"mx-auto\"\n        defaultValue=\"yearly\"\n        onValueChange={handleBillingPeriodChange}\n        value={billingPeriod}\n      >\n        <TabsList>\n          <TabsTrigger className=\"px-4\" value=\"monthly\">\n            Monthly\n          </TabsTrigger>\n          <TabsTrigger className=\"px-4\" value=\"yearly\">\n            Yearly\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n\n      <div className=\"grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2 md:grid-cols-3\">\n        {pricingPlans.map((plan) => (\n          <PlanCard billingPeriod={billingPeriod} key={plan.name} plan={plan} />\n        ))}\n      </div>\n    </section>\n  );\n};\n\nconst PlanCard = ({\n  plan,\n  billingPeriod,\n}: {\n  plan: PricingPlan;\n  billingPeriod: BillingPeriod;\n}) => {\n  const price =\n    billingPeriod === \"yearly\"\n      ? Math.floor((plan.price * (100 - YEARLY_DISCOUNT_PERCENTAGE)) / 100)\n      : plan.price;\n\n  return (\n    <div\n      className={cn(\"rounded-lg bg-card p-6 shadow-xs/3 ring ring-border/85\", {\n        \"relative bg-primary/5 ring-2 ring-primary\": plan.isRecommended,\n      })}\n    >\n      {plan.isRecommended && (\n        <Badge className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n          Most Popular\n        </Badge>\n      )}\n      <plan.icon className=\"mb-4 text-primary\" />\n      <div className=\"flex items-center gap-1\">\n        <h3 className=\"font-medium text-2xl tracking-tight\">{plan.name}</h3>\n      </div>\n      <p className=\"mt-2 min-h-[2lh] text-muted-foreground\">\n        {plan.description}\n      </p>\n      <p className=\"mt-4 font-semibold text-4xl\">\n        <NumberFlow className=\"font-satoshi\" prefix=\"$\" value={price} />\n        <span className=\"ms-0.5 font-normal text-lg text-muted-foreground tracking-tight\">\n          /month\n        </span>\n      </p>\n      <Button className=\"mt-6 mb-8 h-10 w-full\" size=\"lg\">\n        Get Started\n      </Button>\n      <ul className=\"space-y-2\">\n        {plan.features.map((feature) => (\n          <li className=\"flex items-center gap-2\" key={feature}>\n            <CircleCheck className=\"size-4 shrink-0 text-primary\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default Pricing;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}