Import source: src/components/common/resource-meter
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,25 @@
|
|||||||
|
import { Progress } from "@/components/ui/progress";
|
||||||
|
import { StatusBadge } from "@/components/common/status-badge";
|
||||||
|
import { percent } from "@/lib/utils";
|
||||||
|
import type { ResourceUsage } from "@/api/contracts/models";
|
||||||
|
|
||||||
|
export function ResourceMeter({ resource }: { resource: ResourceUsage }) {
|
||||||
|
const value = percent(resource.used, resource.limit);
|
||||||
|
return (
|
||||||
|
<div className="space-y-2 rounded-md border border-border/60 bg-card/50 p-3 transition-colors hover:border-border">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<span className="text-sm font-medium">{resource.label}</span>
|
||||||
|
<StatusBadge status={resource.status} />
|
||||||
|
</div>
|
||||||
|
<Progress value={value} />
|
||||||
|
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||||
|
<span className="font-mono">
|
||||||
|
{resource.used.toLocaleString()} {resource.unit}
|
||||||
|
</span>
|
||||||
|
<span className="font-mono">
|
||||||
|
{resource.limit.toLocaleString()} {resource.unit}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user