mirror of
https://github.com/community-scripts/ProxmoxVE.git
synced 2025-07-03 04:27:38 +00:00
0067075ed1
* Update ScriptAccordion and ScriptItem components for improved styling * Add README.md for Proxmox VE Helper-Scripts Frontend * Remove testing dependencies and related test files from the frontend project * Update analytics URL in siteConfig to point to community-scripts.org * Refactor ESLint configuration to have one source of truth and run "npm lint" to apply new changes * Update lint script in package.json to remove npm * Add 'next' option to ESLint configuration for improved compatibility * Update package dependencies and versions in package.json and package-lock.json * Refactor theme provider import and enhance calendar component for dynamic icon rendering * rename sidebar, alerts and buttons * rename description and interfaces files * rename more files * change folder name * Refactor tooltip logic to improve updateable condition handling * Enhance CommandMenu to prevent duplicate scripts across categories * Remove test step from frontend CI/CD workflow
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { CPUIcon, HDDIcon, RAMIcon } from "@/components/icons/resource-icons";
|
|
import { getDisplayValueFromRAM } from "@/lib/utils/resource-utils";
|
|
|
|
type ResourceDisplayProps = {
|
|
title: string;
|
|
cpu: number | null;
|
|
ram: number | null;
|
|
hdd: number | null;
|
|
};
|
|
|
|
type IconTextProps = {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
};
|
|
|
|
function IconText({ icon, label }: IconTextProps) {
|
|
return (
|
|
<span className="inline-flex items-center gap-1.5 rounded-md bg-accent/20 px-2 py-1 text-sm">
|
|
{icon}
|
|
<span className="text-foreground/90">{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function ResourceDisplay({ title, cpu, ram, hdd }: ResourceDisplayProps) {
|
|
const hasCPU = typeof cpu === "number" && cpu > 0;
|
|
const hasRAM = typeof ram === "number" && ram > 0;
|
|
const hasHDD = typeof hdd === "number" && hdd > 0;
|
|
|
|
if (!hasCPU && !hasRAM && !hasHDD)
|
|
return null;
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-sm font-medium text-muted-foreground">{title}</span>
|
|
<div className="flex flex-wrap gap-2">
|
|
{hasCPU && <IconText icon={<CPUIcon />} label={`${cpu} vCPU`} />}
|
|
{hasRAM && <IconText icon={<RAMIcon />} label={getDisplayValueFromRAM(ram!)} />}
|
|
{hasHDD && <IconText icon={<HDDIcon />} label={`${hdd} GB`} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|