openstatus.dev
Openstatus
www.openstatus.dev
1import { Progress } from "@/components/ui/progress";
2
3interface BillingProgressProps {
4 label: string;
5 value: number;
6 max: number;
7}
8
9export function BillingProgress({ label, value, max }: BillingProgressProps) {
10 return (
11 <div className="flex flex-col gap-2">
12 <div className="flex flex-col gap-0.5">
13 <div className="flex justify-between text-muted-foreground text-sm">
14 <div className="font-medium">{label}</div>
15 <div className="font-mono">
16 <span className="text-foreground">
17 {new Intl.NumberFormat("de-DE").format(value)}
18 </span>
19 /{new Intl.NumberFormat("de-DE").format(max)}
20 </div>
21 </div>
22 <Progress value={(value / max) * 100} />
23 </div>
24 </div>
25 );
26}