mattrguerra/cortexmainPrivate on GitHub, published here in full

Toasts.tsx

Language TypeScript946 B30 lines

src/components/Toasts.tsx

import { usd } from '../lib/format'
import { useStore } from '../state/store'
export function Toasts() {
const toasts = useStore((s) => s.toasts)
return (
<div className="toasts" role="status" aria-live="polite">
{toasts.map((t) => (
<div key={t.id} className={`toast glass-strong ${t.tone}`}>
{t.text}
</div>
))}
</div>
)
}
export function BudgetBanner() {
const spend = useStore((s) => s.spend)
const setPanel = useStore((s) => s.setPanel)
if (!spend || spend.budget_level === 0 || spend.budget_usd == null) return null
const over = spend.budget_level === 2
return (
<div className={`budget-banner ${over ? 'over' : 'near'}`} role="alert">
{over ? 'Over' : 'Near'} this month's budget: {usd(spend.month_nanousd)} of ${spend.budget_usd.toFixed(2)}.{' '}
<button className="link" onClick={() => setPanel('usage')}>
See usage
</button>
</div>
)
}