Make compact
This commit is contained in:
parent
4f03104ed1
commit
ccdf9c1659
@ -26,36 +26,24 @@ export default function Network({ options, refresh = 1500 }) {
|
||||
expandedValue="-"
|
||||
expandedLabel={<FaAngleDown />}
|
||||
percentage="0"
|
||||
expanded="true"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Resource
|
||||
icon={FaNetworkWired}
|
||||
value={t("common.bits", { value: data?.network?.tx_sec })}
|
||||
label={<FaAngleUp />}
|
||||
expandedValue={t("common.bits", { value: data?.network?.rx_sec })}
|
||||
expandedLabel={<FaAngleDown />}
|
||||
percentage="0"
|
||||
expanded="true"
|
||||
>
|
||||
<div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{data.interface}</div>
|
||||
</Resource>
|
||||
|
||||
<Resource
|
||||
icon={FaNetworkWired}
|
||||
value={t("common.bbytes", { value: data?.network?.tx_bytes })}
|
||||
label={<FaAngleUp />}
|
||||
expandedValue={t("common.bbytes", { value: data?.network?.rx_bytes })}
|
||||
expandedLabel={<FaAngleDown />}
|
||||
percentage="0"
|
||||
expanded="true"
|
||||
>
|
||||
<div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{data.interface}</div>
|
||||
</Resource>
|
||||
</>
|
||||
<Resource
|
||||
icon={FaNetworkWired}
|
||||
value={`${t("common.bits", { value: data?.network?.tx_sec })} / ${t("common.bits", {
|
||||
value: data?.network?.rx_sec,
|
||||
})}`}
|
||||
label={data.interface}
|
||||
expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} / ${t("common.bbytes", {
|
||||
value: data?.network?.rx_bytes,
|
||||
})}`}
|
||||
expandedLabel={data.interface}
|
||||
expanded={options.expanded}
|
||||
wide={true}
|
||||
percentage="0"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@ export default function Resource({
|
||||
percentage,
|
||||
expanded = false,
|
||||
additionalClassNames = "",
|
||||
wide = false,
|
||||
}) {
|
||||
const Icon = icon;
|
||||
|
||||
@ -18,7 +19,11 @@ export default function Resource({
|
||||
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 min-w-[85px] ${expanded ? " expanded" : ""}`}>
|
||||
<div
|
||||
className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""} ${
|
||||
wide ? " min-w-[170px]" : ""
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user