import * as React from "react"; import { Activity, CloudLightning, GlobeLock, Headphones } from "lucide-react"; import { SubscriptionPlanUsageMeteredCalculatorTwo } from "@/registry/subscription-plan-usage-metered-calculator-two/subscription-plan-usage-metered-calculator-two"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; const planTiers = [ { id: "starter", name: "Starter", description: "Launch prototypes", badge: "Usage based", highlight: "Includes shared sandbox", supportIncluded: "Email support, 24h response", savingsLabel: "Save 15% annual", baseFee: 49, multiplier: 1, summary: [ { id: "quota", label: "Included quota", value: "25K requests & 10GB inference output", }, ], }, { id: "scale", name: "Scale", description: "Predictable growth", highlight: "Adaptive bursting", supportIncluded: "Slack channel & solution hours", savingsLabel: "Save 22% annual", baseFee: 249, multiplier: 0.85, summary: [ { id: "priority", label: "Priority support", value: "Named CSM with quarterly architecture reviews", }, { id: "limits", label: "Usage headroom", value: "500K requests & 100GB embedding storage", }, ], }, { id: "enterprise", name: "Enterprise", description: "Mission critical", badge: "Custom", highlight: "SLA-backed", supportIncluded: "24/7 hotline & dedicated TAM", baseFee: 999, multiplier: 0.7, summary: [ { id: "compliance", label: "Compliance", value: "SOC 2 + regional isolation + KMS rotation", }, { id: "network", label: "Reserved throughput", value: "10M requests, dedicated GPU pool, burst credit bank", }, ], }, ]; const metrics = [ { id: "requests", label: "API requests", description: "Number of inference or orchestration calls per month.", min: 1000, max: 2000000, step: 1000, unit: "requests", defaultValue: 45000, pricePerUnit: 0.0025, includedUnits: 10000, }, { id: "tokens", label: "Generative tokens", description: "Text generation or embedding tokens processed monthly.", min: 500000, max: 50000000, step: 500000, unit: "tokens", defaultValue: 5000000, pricePerUnit: 0.0004, includedUnits: 1000000, }, { id: "storage", label: "Vector storage", description: "Persistent embedding storage capacity.", min: 5, max: 500, step: 5, unit: "GB", defaultValue: 60, pricePerUnit: 0.45, includedUnits: 10, }, ]; const presets = [ { id: "builder", label: "Indie builder", emoji: "🛠", description: "Solo developer publishing pilot apps.", supportTier: "Starter tier", values: { requests: 12000, tokens: 1000000, storage: 12, }, }, { id: "platform", label: "Scaleup platform", emoji: "🚀", description: "Growth stage SaaS streaming realtime insights.", supportTier: "Scale success", values: { requests: 180000, tokens: 7200000, storage: 80, }, }, { id: "enterprise", label: "Enterprise ops", emoji: "🏢", description: "Global workloads with regulated data controls.", supportTier: "Enterprise success", values: { requests: 1200000, tokens: 32000000, storage: 240, }, }, ]; const rateGroups = [ { id: "usage", title: "Usage ceilings", rows: [ { id: "burst", label: "Burst capacity", values: [ { tierId: "starter", value: "Up to 2x base" }, { tierId: "scale", value: "Up to 5x base" }, { tierId: "enterprise", value: "Reserved lanes" }, ], }, { id: "latency", label: "Latency SLA", values: [ { tierId: "starter", value: "Best effort" }, { tierId: "scale", value: "< 180ms" }, { tierId: "enterprise", value: "< 120ms" }, ], }, ], }, { id: "security", title: "Security & support", rows: [ { id: "compliance", label: "Compliance", values: [ { tierId: "starter", value: "SOC 2 report" }, { tierId: "scale", value: "SOC 2 + HIPAA BAA" }, { tierId: "enterprise", value: "Custom attestations" }, ], }, { id: "support", label: "Support response", values: [ { tierId: "starter", value: "24h business" }, { tierId: "scale", value: "4h priority" }, { tierId: "enterprise", value: "15m on-call" }, ], }, ], }, ]; const highlights = [ { id: "share", label: "Shareable link", helperText: "Scenario persists in URL params for async review.", }, { id: "billing", label: "Billing insight", helperText: "Annual toggle surfaces savings messaging for finance teams.", }, ]; const currencyOptions = [ { code: "USD", label: "USD", symbol: "$", locale: "en-US", multiplier: 1 }, { code: "EUR", label: "EUR", symbol: "€", locale: "de-DE", multiplier: 0.94 }, { code: "GBP", label: "GBP", symbol: "£", locale: "en-GB", multiplier: 0.79 }, ]; export function SubscriptionPlanUsageMeteredCalculatorTwoDemo() { const [scenarioSaved, setScenarioSaved] = React.useState(false); return (

setScenarioSaved(true)} />

); } export default SubscriptionPlanUsageMeteredCalculatorTwoDemo;

Simple