Refactored information widgets, improve widget-boxed style

Signed-off-by: Denis Papec <denis.papec@gmail.com>
This commit is contained in:
Denis Papec 2023-06-03 01:10:15 +01:00
parent c79d45f91e
commit d4fd923be5
No known key found for this signature in database
GPG key ID: DE0912C69A47222C
37 changed files with 701 additions and 858 deletions

View file

@ -0,0 +1,28 @@
import UsageBar from "../resources/usage-bar";
import WidgetIcon from "./widget_icon";
import ResourceValue from "./resource_value";
import ResourceLabel from "./resource_label";
import Raw from "./raw";
export default function SingleResource({ children, key, expanded = false }) {
const values = children.filter(child => child.type === ResourceValue);
const labels = children.filter(child => child.type === ResourceLabel);
return <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
{children.find(child => child.type === WidgetIcon)}
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
{values.pop()}
{labels.pop()}
</div>
{ expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
{values.pop()}
{labels.pop()}
</div>
}
{children.find(child => child.type === UsageBar)}
</div>
{children.find(child => child.type === Raw)}
</div>;
}