open-source-mirrors
/
homepage
mirror of https://github.com/benphelps/homepage
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Further improvements to simplify information widgets

Browse Source 
Signed-off-by: Denis Papec <denis.papec@gmail.com>
pull/1603/head
Denis Papec 1 year ago
parent cd5162e39c
commit 6f750dd83c
No known key found for this signature in database
GPG Key ID: DE0912C69A47222C
12 changed files with 181 additions and 267 deletions
Show Stats Download Patch File Download Diff File

130
src/components/widgets/glances/glances.jsx
Unescape View File

@ -4,12 +4,8 @@ import { FaMemory, FaRegClock, FaThermometerHalf } from "react-icons/fa";
import { FiCpu, FiHardDrive } from "react-icons/fi"; import { FiCpu, FiHardDrive } from "react-icons/fi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import UsageBar from "../resources/usage-bar";
import Error from "../widget/error"; import Error from "../widget/error";
import SingleResource from "../widget/single_resource"; import Resource from "../widget/resource";
import WidgetIcon from "../widget/widget_icon";
import ResourceValue from "../widget/resource_value";
import ResourceLabel from "../widget/resource_label";
import Resources from "../widget/resources"; import Resources from "../widget/resources";
import WidgetLabel from "../widget/widget_label"; import WidgetLabel from "../widget/widget_label";
@ -37,31 +33,11 @@ export default function Widget({ options }) {
if (!data) { if (!data) {
return <Resources options={options}> return <Resources options={options}>
<SingleResource> <Resource icon={FiCpu} label={t("glances.wait")} percentage="0" />
<WidgetIcon icon={FiCpu} /> <Resource icon={FaMemory} label={t("glances.wait")} percentage="0" />
<ResourceLabel>{t("glances.wait")}</ResourceLabel> { options.cputemp && <Resource icon={FaThermometerHalf} label={t("glances.wait")} percentage="0" /> }
<UsageBar percent="0" /> { options.uptime && <Resource icon={FaRegClock} label={t("glances.wait")} percentage="0" /> }
</SingleResource> { options.label && <WidgetLabel label={options.label} /> }
<SingleResource>
<WidgetIcon icon={FaMemory} />
<ResourceLabel>{t("glances.wait")}</ResourceLabel>
<UsageBar percent="0" />
</SingleResource>
{options.cputemp &&
<SingleResource>
<WidgetIcon icon={FaThermometerHalf} />
<ResourceLabel>{t("glances.wait")}</ResourceLabel>
<UsageBar percent="0" />
</SingleResource>
}
{options.uptime &&
<SingleResource>
<WidgetIcon icon={FaRegClock} />
<ResourceLabel>{t("glances.wait")}</ResourceLabel>
<UsageBar percent="0" />
</SingleResource>
}
{options.label && <WidgetLabel label={options.label} />}
</Resources>; </Resources>;
} }
@ -93,77 +69,81 @@ export default function Widget({ options }) {
return ( return (
<Resources options={options} target={settings.target ?? "_blank"}> <Resources options={options} target={settings.target ?? "_blank"}>
<SingleResource> <Resource
<WidgetIcon icon={FiCpu} /> icon={FiCpu}
<ResourceValue>{t("common.number", { value={t("common.number", {
value: data.cpu.total, value: data.cpu.total,
style: "unit", style: "unit",
unit: "percent", unit: "percent",
maximumFractionDigits: 0, maximumFractionDigits: 0,
})}</ResourceValue> })}
<ResourceLabel>{t("glances.cpu")}</ResourceLabel> label={t("glances.cpu")}
<ResourceValue>{t("common.number", { expandedValue={t("common.number", {
value: data.load.min15, value: data.load.min15,
style: "unit", style: "unit",
unit: "percent", unit: "percent",
maximumFractionDigits: 0, maximumFractionDigits: 0
})}</ResourceValue> })}
<ResourceLabel>{t("glances.load")}</ResourceLabel> expandedLabel={t("glances.load")}
<UsageBar percent={data.cpu.total} /> percentage={data.cpu.total}
</SingleResource> expanded={options.expanded}
<SingleResource> />
<WidgetIcon icon={FaMemory} /> <Resource
<ResourceValue>{t("common.bytes", { icon={FaMemory}
value={t("common.bytes", {
value: data.mem.free, value: data.mem.free,
maximumFractionDigits: 1, maximumFractionDigits: 1,
binary: true, binary: true,
})}</ResourceValue> })}
<ResourceLabel>{t("glances.free")}</ResourceLabel> label={t("glances.free")}
<ResourceValue>{t("common.bytes", { expandedValue={t("common.bytes", {
value: data.mem.total, value: data.mem.total,
maximumFractionDigits: 1, maximumFractionDigits: 1,
binary: true, binary: true,
})}</ResourceValue> })}
<ResourceLabel>{t("glances.total")}</ResourceLabel> expandedLabel={t("glances.total")}
<UsageBar percent={data.mem.percent} /> percentage={data.mem.percent}
</SingleResource> expanded={options.expanded}
/>
{disks.map((disk) => ( {disks.map((disk) => (
<SingleResource key={disk.mnt_point}> <Resource key={disk.mnt_point}
<WidgetIcon icon={FiHardDrive} /> icon={FiHardDrive}
<ResourceValue>{t("common.bytes", { value: disk.free })}</ResourceValue> value={t("common.bytes", { value: disk.free })}
<ResourceLabel>{t("glances.free")}</ResourceLabel> label={t("glances.free")}
<ResourceValue>{t("common.bytes", { value: disk.size })}</ResourceValue> expandedValue={t("common.bytes", { value: disk.size })}
<ResourceLabel>{t("glances.total")}</ResourceLabel> expandedLabel={t("glances.total")}
<UsageBar percent={disk.percent} /> percentage={disk.percent}
</SingleResource> expanded={options.expanded}
/>
))} ))}
{options.cputemp && mainTemp > 0 && {options.cputemp && mainTemp > 0 &&
<SingleResource> <Resource
<WidgetIcon icon={FaThermometerHalf} /> icon={FaThermometerHalf}
<ResourceValue>{t("common.number", { value={t("common.number", {
value: mainTemp, value: mainTemp,
maximumFractionDigits: 1, maximumFractionDigits: 1,
style: "unit", style: "unit",
unit unit
})}</ResourceValue> })}
<ResourceLabel>{t("glances.temp")}</ResourceLabel> label={t("glances.temp")}
<ResourceValue>{t("common.number", { expandedValue={t("common.number", {
value: maxTemp, value: maxTemp,
maximumFractionDigits: 1, maximumFractionDigits: 1,
style: "unit", style: "unit",
unit unit
})}</ResourceValue> })}
<ResourceLabel>{t("glances.warn")}</ResourceLabel> expandedLabel={t("glances.warn")}
<UsageBar percent={tempPercent} /> percentage={tempPercent}
</SingleResource> expanded={options.expanded}
/>
} }
{options.uptime && data.uptime && {options.uptime && data.uptime &&
<SingleResource> <Resource
<WidgetIcon icon={FaRegClock} /> icon={FaRegClock}
<ResourceValue>{data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}</ResourceValue> value={data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}
<ResourceLabel>{t("glances.uptime")}</ResourceLabel> label={t("glances.uptime")}
<UsageBar percent={Math.round((new Date().getSeconds() / 60) * 100)} /> percentage={Math.round((new Date().getSeconds() / 60) * 100).toString()}
</SingleResource> />
} }
{options.label && <WidgetLabel label={options.label} />} {options.label && <WidgetLabel label={options.label} />}
</Resources> </Resources>

25
src/components/widgets/longhorn/node.jsx
Unescape View File

@ -1,23 +1,20 @@
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { FaThermometerHalf } from "react-icons/fa"; import { FaThermometerHalf } from "react-icons/fa";
import UsageBar from "../resources/usage-bar"; import Resource from "../widget/resource";
import SingleResource from "../widget/single_resource";
import WidgetIcon from "../widget/widget_icon";
import ResourceValue from "../widget/resource_value";
import ResourceLabel from "../widget/resource_label";
import WidgetLabel from "../widget/widget_label"; import WidgetLabel from "../widget/widget_label";
export default function Node({ data, expanded, labels }) { export default function Node({ data, expanded, labels }) {
const { t } = useTranslation(); const { t } = useTranslation();
return <SingleResource expanded={expanded}> return <Resource
<WidgetIcon icon={FaThermometerHalf} /> icon={FaThermometerHalf}
<ResourceValue>{t("common.bytes", { value: data.node.available })}</ResourceValue> value={t("common.bytes", { value: data.node.available })}
<ResourceLabel>{t("resources.free")}</ResourceLabel> label={t("resources.free")}
<ResourceValue>{t("common.bytes", { value: data.node.maximum })}</ResourceValue> expandedValue={t("common.bytes", { value: data.node.maximum })}
<ResourceLabel>{t("resources.total")}</ResourceLabel> expandedLabel={t("resources.total")}
<UsageBar percent={Math.round(((data.node.maximum - data.node.available) / data.node.maximum) * 100)} /> percentage={Math.round(((data.node.maximum - data.node.available) / data.node.maximum) * 100)}
{ labels && <WidgetLabel label={data.node.id} /> } expanded={expanded}
</SingleResource> >{ labels && <WidgetLabel label={data.node.id} /> }
</Resource>
} }

54
src/components/widgets/resources/cpu.jsx
Unescape View File

@ -2,14 +2,9 @@ import useSWR from "swr";
import { FiCpu } from "react-icons/fi"; import { FiCpu } from "react-icons/fi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import SingleResource from "../widget/single_resource"; import Resource from "../widget/resource";
import WidgetIcon from "../widget/widget_icon";
import ResourceValue from "../widget/resource_value";
import ResourceLabel from "../widget/resource_label";
import Error from "../widget/error"; import Error from "../widget/error";
import UsageBar from "./usage-bar";
export default function Cpu({ expanded }) { export default function Cpu({ expanded }) {
const { t } = useTranslation(); const { t } = useTranslation();
@ -22,34 +17,25 @@ export default function Cpu({ expanded }) {
} }
if (!data) { if (!data) {
return <SingleResource expanded={expanded}> return <Resource icon={FiCpu} value="-" label={t("resources.cpu")} expandedValue="-"
<WidgetIcon icon={FiCpu} /> expandedLabel={t("resources.load")} percentage="0" expanded={expanded} />
<ResourceValue>-</ResourceValue>
<ResourceLabel>{t("resources.cpu")}</ResourceLabel>
<ResourceValue>-</ResourceValue>
<ResourceLabel>{t("resources.load")}</ResourceLabel>
<UsageBar percent={0} />
</SingleResource>
} }
return <SingleResource expanded={expanded}> return <Resource
<WidgetIcon icon={FiCpu} /> icon={FiCpu}
<ResourceValue> value={t("common.number", {
{t("common.number", { value: data.cpu.usage,
value: data.cpu.usage, style: "unit",
style: "unit", unit: "percent",
unit: "percent", maximumFractionDigits: 0,
maximumFractionDigits: 0, })}
})} label={t("resources.cpu")}
</ResourceValue> expandedValue={t("common.number", {
<ResourceLabel>{t("resources.cpu")}</ResourceLabel> value: data.cpu.load,
<ResourceValue> maximumFractionDigits: 2,
{t("common.number", { })}
value: data.cpu.load, expandedLabel={t("resources.load")}
maximumFractionDigits: 2, percentage={data.cpu.usage}
})} expanded={expanded}
</ResourceValue> />
<ResourceLabel>{t("resources.load")}</ResourceLabel>
<UsageBar percent={data.cpu.usage} />
</SingleResource>
} }

63
src/components/widgets/resources/cputemp.jsx
Unescape View File

@ -2,14 +2,9 @@ import useSWR from "swr";
import { FaThermometerHalf } from "react-icons/fa"; import { FaThermometerHalf } from "react-icons/fa";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import SingleResource from "../widget/single_resource"; import Resource from "../widget/resource";
import WidgetIcon from "../widget/widget_icon";
import ResourceValue from "../widget/resource_value";
import ResourceLabel from "../widget/resource_label";
import Error from "../widget/error"; import Error from "../widget/error";
import UsageBar from "./usage-bar";
function convertToFahrenheit(t) { function convertToFahrenheit(t) {
return t * 9/5 + 32 return t * 9/5 + 32
} }
@ -26,13 +21,14 @@ export default function CpuTemp({ expanded, units }) {
} }
if (!data || !data.cputemp) { if (!data || !data.cputemp) {
return <SingleResource expanded={expanded}> return <Resource
<WidgetIcon icon={FaThermometerHalf} /> icon={FaThermometerHalf}
<ResourceValue>-</ResourceValue> value="-"
<ResourceLabel>{t("resources.temp")}</ResourceLabel> label={t("resources.temp")}
<ResourceValue>-</ResourceValue> expandedValue="-"
<ResourceLabel>{t("resources.max")}</ResourceLabel> expandedLabel={t("resources.max")}
</SingleResource> expanded={expanded}
/>;
} }
let mainTemp = data.cputemp.main; let mainTemp = data.cputemp.main;
@ -43,26 +39,23 @@ export default function CpuTemp({ expanded, units }) {
mainTemp = (unit === "celsius") ? mainTemp : convertToFahrenheit(mainTemp); mainTemp = (unit === "celsius") ? mainTemp : convertToFahrenheit(mainTemp);
const maxTemp = (unit === "celsius") ? data.cputemp.max : convertToFahrenheit(data.cputemp.max); const maxTemp = (unit === "celsius") ? data.cputemp.max : convertToFahrenheit(data.cputemp.max);
return <SingleResource expanded={expanded}> return <Resource
<WidgetIcon icon={FaThermometerHalf} /> icon={FaThermometerHalf}
<ResourceValue> value={t("common.number", {
{t("common.number", { value: mainTemp,
value: mainTemp, maximumFractionDigits: 1,
maximumFractionDigits: 1, style: "unit",
style: "unit", unit
unit })}
})} label={t("resources.temp")}
</ResourceValue> expandedValue={t("common.number", {
<ResourceLabel>{t("resources.temp")}</ResourceLabel> value: maxTemp,
<ResourceValue> maximumFractionDigits: 1,
{t("common.number", { style: "unit",
value: maxTemp, unit
maximumFractionDigits: 1, })}
style: "unit", expandedLabel={t("resources.max")}
unit percentage={Math.round((mainTemp / maxTemp) * 100)}
})} expanded={expanded}
</ResourceValue> />;
<ResourceLabel>{t("resources.max")}</ResourceLabel>
<UsageBar percent={Math.round((mainTemp / maxTemp) * 100)} />
</SingleResource>;
} }

41
src/components/widgets/resources/disk.jsx
Unescape View File

@ -2,14 +2,9 @@ import useSWR from "swr";
import { FiHardDrive } from "react-icons/fi"; import { FiHardDrive } from "react-icons/fi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import SingleResource from "../widget/single_resource"; import Resource from "../widget/resource";
import WidgetIcon from "../widget/widget_icon";
import ResourceValue from "../widget/resource_value";
import ResourceLabel from "../widget/resource_label";
import Error from "../widget/error"; import Error from "../widget/error";
import UsageBar from "./usage-bar";
export default function Disk({ options, expanded }) { export default function Disk({ options, expanded }) {
const { t } = useTranslation(); const { t } = useTranslation();
@ -22,25 +17,27 @@ export default function Disk({ options, expanded }) {
} }
if (!data) { if (!data) {
return <SingleResource expanded={expanded}> return <Resource
<WidgetIcon icon={FiHardDrive} /> icon={FiHardDrive}
<ResourceValue>-</ResourceValue> value="-"
<ResourceLabel>{t("resources.free")}</ResourceLabel> label={t("resources.free")}
<ResourceValue>-</ResourceValue> expandedValue="-"
<ResourceLabel>{t("resources.total")}</ResourceLabel> expandedLabel={t("resources.total")}
<UsageBar percent={0} /> expanded={expanded}
</SingleResource>; percentage="0"
/>;
} }
// data.drive.used not accurate? // data.drive.used not accurate?
const percent = Math.round(((data.drive.size - data.drive.available) / data.drive.size) * 100); const percent = Math.round(((data.drive.size - data.drive.available) / data.drive.size) * 100);
return <SingleResource expanded={expanded}> return <Resource
<WidgetIcon icon={FiHardDrive} /> icon={FiHardDrive}
<ResourceValue>{t("common.bytes", { value: data.drive.available })}</ResourceValue> value={t("common.bytes", { value: data.drive.available })}
<ResourceLabel>{t("resources.free")}</ResourceLabel> label={t("resources.free")}
<ResourceValue>{t("common.bytes", { value: data.drive.size })}</ResourceValue> expandedValue={t("common.bytes", { value: data.drive.size })}
<ResourceLabel>{t("resources.total")}</ResourceLabel> expandedLabel={t("resources.total")}
<UsageBar percent={percent} /> percentage={percent}
</SingleResource>; expanded={expanded}
/>;
} }

47
src/components/widgets/resources/memory.jsx
Unescape View File

@ -2,14 +2,9 @@ import useSWR from "swr";
import { FaMemory } from "react-icons/fa"; import { FaMemory } from "react-icons/fa";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import SingleResource from "../widget/single_resource"; import Resource from "../widget/resource";
import WidgetIcon from "../widget/widget_icon";
import ResourceValue from "../widget/resource_value";
import ResourceLabel from "../widget/resource_label";
import Error from "../widget/error"; import Error from "../widget/error";
import UsageBar from "./usage-bar";
export default function Memory({ expanded }) { export default function Memory({ expanded }) {
const { t } = useTranslation(); const { t } = useTranslation();
@ -22,30 +17,26 @@ export default function Memory({ expanded }) {
} }
if (!data) { if (!data) {
return <SingleResource expanded={expanded}> return <Resource
<WidgetIcon icon={FaMemory} /> icon={FaMemory}
<ResourceValue>-</ResourceValue> value="-"
<ResourceLabel>{t("resources.free")}</ResourceLabel> label={t("resources.free")}
<ResourceValue>-</ResourceValue> expandedValue="-"
<ResourceLabel>{t("resources.total")}</ResourceLabel> expandedLabel={t("resources.total")}
<UsageBar percent={0} /> expanded={expanded}
</SingleResource>; percentage="0"
/>;
} }
const percent = Math.round((data.memory.active / data.memory.total) * 100); const percent = Math.round((data.memory.active / data.memory.total) * 100);
return <SingleResource expanded={expanded}> return <Resource
<WidgetIcon icon={FaMemory} /> icon={FaMemory}
<ResourceValue>{t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}</ResourceValue> value={t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}
<ResourceLabel>{t("resources.free")}</ResourceLabel> label={t("resources.free")}
<ResourceValue> expandedValue={t("common.bytes", { value: data.memory.total, maximumFractionDigits: 1, binary: true })}
{t("common.bytes", { expandedLabel={t("resources.total")}
value: data.memory.total, percentage={percent}
maximumFractionDigits: 1, expanded={expanded}
binary: true, />;
})}
</ResourceValue>
<ResourceLabel>{t("resources.total")}</ResourceLabel>
<UsageBar percent={percent} />
</SingleResource>;
} }

22
src/components/widgets/resources/uptime.jsx
Unescape View File

@ -2,14 +2,9 @@ import useSWR from "swr";
import { FaRegClock } from "react-icons/fa"; import { FaRegClock } from "react-icons/fa";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import SingleResource from "../widget/single_resource"; import Resource from "../widget/resource";
import WidgetIcon from "../widget/widget_icon";
import ResourceValue from "../widget/resource_value";
import ResourceLabel from "../widget/resource_label";
import Error from "../widget/error"; import Error from "../widget/error";
import UsageBar from "./usage-bar";
export default function Uptime() { export default function Uptime() {
const { t } = useTranslation(); const { t } = useTranslation();
@ -22,11 +17,7 @@ export default function Uptime() {
} }
if (!data) { if (!data) {
return <SingleResource> return <Resource icon={FaRegClock} value="-" label={t("resources.uptime")} percentage="0" />;
<WidgetIcon icon={FaRegClock} />
<ResourceValue>-</ResourceValue>
<ResourceLabel>{t("resources.uptime")}</ResourceLabel>
</SingleResource>;
} }
const mo = Math.floor(data.uptime / (3600 * 24 * 31)); const mo = Math.floor(data.uptime / (3600 * 24 * 31));
@ -39,12 +30,7 @@ export default function Uptime() {
else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`; else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`;
else uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`; else uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`;
const percent = Math.round((new Date().getSeconds() / 60) * 100); const percent = Math.round((new Date().getSeconds() / 60) * 100).toString();
return <SingleResource> return <Resource icon={FaRegClock} value={uptime} label={t("resources.uptime")} percentage={percent} />;
<WidgetIcon icon={FaRegClock} />
<ResourceValue>{uptime}</ResourceValue>
<ResourceLabel>{t("resources.uptime")}</ResourceLabel>
<UsageBar percent={percent} />
</SingleResource>;
} }

22
src/components/widgets/widget/resource.jsx
Unescape View File

@ -0,0 +1,22 @@
import UsageBar from "../resources/usage-bar";
export default function Resource({ children, icon, value, label, expandedValue, expandedLabel, percentage, key, expanded = false }) {
const Icon = icon;
return <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5"/>
<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">
<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 && <UsageBar percent={percentage} /> }
{ children }
</div>
</div>;
}

5
src/components/widgets/widget/resource_label.jsx
Unescape View File

@ -1,5 +0,0 @@
export default function ResourceLabel({ children }) {
return (
<div className="pr-1">{children}</div>
);
}

5
src/components/widgets/widget/resource_value.jsx
Unescape View File

@ -1,5 +0,0 @@
export default function ResourceValue({ children }) {
return (
<div className="pl-0.5">{children}</div>
);
}

6
src/components/widgets/widget/resources.jsx
Unescape View File

@ -1,5 +1,5 @@
import ContainerLink from "./container_link"; import ContainerLink from "./container_link";
import SingleResource from "./single_resource"; import Resource from "./resource";
import Raw from "./raw"; import Raw from "./raw";
import WidgetLabel from "./widget_label"; import WidgetLabel from "./widget_label";
@ -7,9 +7,9 @@ export default function Resources({ options, children, target }) {
return <ContainerLink options={options} target={target}> return <ContainerLink options={options} target={target}>
<Raw> <Raw>
<div className="flex flex-row self-center flex-wrap justify-between"> <div className="flex flex-row self-center flex-wrap justify-between">
{children.filter(child => child && child.type === SingleResource)} { children.filter(child => child && child.type === Resource) }
</div> </div>
{children.filter(child => child && child.type === WidgetLabel)} { children.filter(child => child && child.type === WidgetLabel) }
</Raw> </Raw>
</ContainerLink>; </ContainerLink>;
} }

28
src/components/widgets/widget/single_resource.jsx
Unescape View File

@ -1,28 +0,0 @@
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>;
}
Write Preview
Loading…
Cancel
Save