Cost meter is a production-ready ai component from BJORK UI, packaged for shadcn registries.
Loading preview...
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { CostMeter, SAMPLE_USAGE, type CostPeriod } from "@/components/ui/bjork-cost-meter";
function Demo({
period,
extra,
onPeriodChange,
}: {
period: CostPeriod;
extra: number;
onPeriodChange: (period: CostPeriod) => void;
}) {
const isPreview = false;
const usage = SAMPLE_USAGE.periods[period];
if (isPreview) {
// Posed frame: 30 days at 72% of the budget, crosshair on Oct 4.
const p = SAMPLE_USAGE.periods["30d"];
return (
<div className="w-[min(520px,calc(100vw-56px))]">
<CostMeter
spend={p.spend}
budget={p.budget}
breakdown={p.breakdown}
history={SAMPLE_USAGE.history}
defaultPeriod="30d"
defaultActivePoint={9}
/>
</div>
);
}
return (
<div className="flex w-[min(520px,calc(100vw-56px))] flex-col items-stretch gap-6">
<CostMeter
spend={usage.spend + extra}
budget={usage.budget}
breakdown={usage.breakdown}
history={SAMPLE_USAGE.history}
period={period}
onPeriodChange={onPeriodChange}
/>
</div>
);
}
function SourceDemo(){
const [period, setPeriod] = useState<CostPeriod>("30d");
const [extra, setExtra] = useState(0);
const usage = SAMPLE_USAGE.periods[period];
const reset = () => setExtra(0);
return <>
<Demo
period={period}
extra={extra}
onPeriodChange={(p) => {
setPeriod(p);
setExtra(0);
}}
/>
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}