Make this nice

This commit is contained in:
shamoon 2024-11-24 22:16:44 -08:00
parent e7c5158c60
commit 9fe2622a04
No known key found for this signature in database
2 changed files with 14 additions and 16 deletions

View File

@ -1,5 +1,5 @@
import useSWR from "swr"; import useSWR from "swr";
import { FaNetworkWired, FaAngleUp, FaAngleDown } from "react-icons/fa"; import { FaNetworkWired } from "react-icons/fa";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import Resource from "../widget/resource"; import Resource from "../widget/resource";
@ -7,6 +7,7 @@ import Error from "../widget/error";
export default function Network({ options, refresh = 1500 }) { export default function Network({ options, refresh = 1500 }) {
const { t } = useTranslation(); const { t } = useTranslation();
// eslint-disable-next-line no-param-reassign
if (options.network === true) options.network = "default"; if (options.network === true) options.network = "default";
const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, { const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, {
@ -21,11 +22,12 @@ export default function Network({ options, refresh = 1500 }) {
return ( return (
<Resource <Resource
icon={FaNetworkWired} icon={FaNetworkWired}
value="-" value="-"
label={<FaAngleUp />} label="- ↓"
expandedValue="-" expandedValue="-"
expandedLabel={<FaAngleDown />} expandedLabel="- ↓"
percentage="0" percentage="0"
wide
/> />
); );
} }
@ -33,16 +35,12 @@ export default function Network({ options, refresh = 1500 }) {
return ( return (
<Resource <Resource
icon={FaNetworkWired} icon={FaNetworkWired}
value={`${t("common.byterate", { value: data?.network?.tx_sec })} / ${t("common.byterate", { value={`${t("common.byterate", { value: data?.network?.tx_sec })} ↑`}
value: data?.network?.rx_sec, label={`${t("common.byterate", { value: data?.network?.rx_sec })} ↓`}
})}`} expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} ↑`}
label={data.interface} expandedLabel={`${t("common.bbytes", { value: data?.network?.rx_bytes })} ↓`}
expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} / ${t("common.bbytes", {
value: data?.network?.rx_bytes,
})}`}
expandedLabel={data.interface}
expanded={options.expanded} expanded={options.expanded}
wide={true} wide
percentage="0" percentage="0"
/> />
); );

View File

@ -20,8 +20,8 @@ export default function Resource({
> >
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" /> <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
<div <div
className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""} ${ className={`flex flex-col ml-3 text-left ${expanded ? " expanded" : ""} ${
wide ? " min-w-[170px]" : "" 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="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">