shadcn blocks for usage, costs and budgets.

import { useBudgetsView } from "@usagekit/react";
import type { Scope } from "@usagekit/core";
// Bar, Money and Notice are your own components.

type Props = { scope: Scope };

export function SpendBudget({ scope }: Props) {
  // Equal reads share one cache entry.
  const { data, state, refresh } = useBudgetsView({
    scope,
    surface: "app",
    units: ["cents"],
  });

  if (state === "loading") return <Notice busy />;
  if (state !== "ok" || !data) return (
    <Notice state={state} onRetry={refresh} />
  );

  return data.rows.map((row) => (
    <section key={row.id} data-level={row.level}>
      <Money amount={row.remaining} /> left
      <Bar geometry={row.bar} />
    </section>
  ));
}