1// Today's Jev budget, where Jev's calls happen: the booth's title row
2// (JevPane.jsx), in words from budget.mjs.
3import { useSyncExternalStore } from 'react';
4import { account } from './account.mjs';
5import { budgetText } from './budget.mjs';
6
7export function JevBudget() {
8  const state = useSyncExternalStore(account.subscribe, account.get, account.get);
9  if (!state.ready) return null;
10  const { text, title, spent } = budgetText(state);
11  return (
12    <span
13      className="text-xs whitespace-nowrap opacity-70"
14      style={{ color: spent ? '#f87171' : undefined }}
15      title={title}
16      data-testid="jev-budget-pane"
17    >
18      {text}
19    </span>
20  );
21}