50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tff1,"use client"; import NumberFlow from "@number-flow/react"; import { Box, CircleCheck, Gem, type LucideIcon, Users } from "lucide-react"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { Badge } from "@/registry/bases/radix/ui/badge"; import { Button } from "@/registry/bases/radix/ui/button"; import { Tabs, TabsList, TabsTrigger } from "@/registry/bases/radix/ui/tabs"; interface PricingPlan { name: string; description: string; price: number; isRecommended: boolean; icon: LucideIcon; features: string[]; } type BillingPeriod = "monthly" | "yearly"; const pricingPlans: PricingPlan[] = [ { name: "Basic", description: "Perfect for individuals getting started.", price: 0, isRecommended: false, icon: Box, features: [ "1 Project", "Community Support", "Basic Analytics", "Limited Components", ], }, { name: "Pro", description: "Ideal for professionals who need more power.", price: 19, isRecommended: true, icon: Gem, features: [ "Unlimited Projects", "Priority Support", "Advanced Analytics", "Access to Premium Components", "Custom Branding", ], }, { name: "Team", description: "Best for growing teams and small businesses.", price: 49, isRecommended: false, icon: Users, features: [ "Everything in Pro", "Team Collaboration", "Role-based Access", "Usage Insights", "Dedicated Support", ], }, ]; const YEARLY_DISCOUNT_PERCENTAGE = 20; const Pricing = () => { const [billingPeriod, setBillingPeriod] = useState("yearly"); const handleBillingPeriodChange = (value: string) => { setBillingPeriod(value as BillingPeriod); }; return (

Monthly Yearly

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

); }; const PlanCard = ({ plan, billingPeriod, }: { plan: PricingPlan; billingPeriod: BillingPeriod; }) => { const price = billingPeriod === "yearly" ? Math.floor((plan.price * (100 - YEARLY_DISCOUNT_PERCENTAGE)) / 100) : plan.price; return (

{plan.isRecommended && ( Most Popular )}

{plan.name}

{plan.description}

/month

{feature}

); }; export default Pricing; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@number-flow/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40number-flow%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@number-flow/react"}]]}]}]]}],["$","$L50",null,{"namespace":"@shadcnui-blocks","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/blocks/radix/pricing-07/components/pricing.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]