df5dd3a70e
- Adopt BoardUI (Pro init): theme tokens, Inter, .dark mode, Button, SegmentedControl, Meter, Skeleton and ThemeToggle; remap the app's color aliases onto BoardUI tokens and swap lucide for Remix icons - Retint BoardUI's neutral ramp to cool slate with a salmon accent; drop the dotted background; raise muted text contrast - Simplify the landing page and remove the overlap explorer - Planner: explicit "I have this" toggle on grocery lines, pantry panel above the menu with the staples list spelled out, sticky aisle header fix, and a "Download PDF" plan export (jsPDF, lazy-loaded) - Recipes: replace the family cabbage soup with Cade's Cabbage Soup (adds Bone-In Ham Steak to the catalog); remove Ham, Bean & Cabbage Soup - Remove unused BoardUI components, dependencies and exports Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { Meter, type MeterTone } from "@/components/base/meter/meter";
|
|
import { formatUsd } from "@/app/lib/units";
|
|
|
|
/** Success under 85%, warning up to 100%, error over budget. */
|
|
function budgetTone(spent: number, budget: number): { tone: MeterTone; text: string; label: string } {
|
|
const ratio = budget > 0 ? spent / budget : 0;
|
|
if (ratio > 1) return { tone: "error", text: "text-status-danger", label: "Over budget" };
|
|
if (ratio > 0.85) return { tone: "warning", text: "text-status-warn", label: "Close to budget" };
|
|
return { tone: "success", text: "text-status-ok", label: "Under budget" };
|
|
}
|
|
|
|
interface BudgetMeterProps {
|
|
spent: number;
|
|
budget: number;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export function BudgetMeter({ spent, budget, compact = false }: BudgetMeterProps) {
|
|
const tone = budgetTone(spent, budget);
|
|
|
|
return (
|
|
<div className={compact ? "w-full" : "w-full min-w-48"}>
|
|
<div className="flex items-baseline justify-between gap-2">
|
|
<span className={`text-body-medium tabular-nums ${tone.text}`}>{formatUsd(spent)}</span>
|
|
<span className="text-caption-1-medium text-text-secondary tabular-nums">/ {formatUsd(budget)}</span>
|
|
</div>
|
|
<Meter
|
|
className="mt-1.5"
|
|
aria-label="Budget used"
|
|
tone={tone.tone}
|
|
minValue={0}
|
|
maxValue={budget > 0 ? budget : 1}
|
|
value={Math.min(spent, budget > 0 ? budget : 0)}
|
|
valueLabel={`${formatUsd(spent)} of ${formatUsd(budget)}, ${tone.label.toLowerCase()}`}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|