homepage-plus/src/components/widgets/widget/resource.jsx

42 lines
1.3 KiB
JavaScript

import UsageBar from "../resources/usage-bar";
export default function Resource({
children,
icon,
value,
label,
expandedValue = "",
expandedLabel = "",
percentage,
expanded = false,
additionalClassNames = "",
wide = false,
}) {
const Icon = icon;
return (
<div
className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${additionalClassNames}`}
>
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
<div
className={`flex flex-col ml-3 text-left ${expanded ? " expanded" : ""} ${
wide ? " min-w-[120px]" : "min-w-[85px]"
}`}
>
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">{value}</div>
<div className="pr-1">{label}</div>
</div>
{expanded && (
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">{expandedValue}</div>
<div className="pr-1">{expandedLabel}</div>
</div>
)}
{percentage >= 0 && <UsageBar percent={percentage} additionalClassNames="resource-usage" />}
{children}
</div>
</div>
);
}