diff --git a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx index 4b5fdfc0..b6452465 100644 --- a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx +++ b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx @@ -1,4 +1,4 @@ -import { H3, H4, Separator, Text, XStack, YStack } from "tamagui"; +import { H3, H4, Paragraph, Separator, Text, XStack, YStack } from "tamagui"; import { IconText } from "../../../../components/IconText/IconText"; import { ShadowBox } from "../../../../components/ShadowBox"; @@ -8,16 +8,22 @@ const StatisticBox = ({ stateIcon, stateText, additionalStateText, + children, ...props }) => { return ( - + -

{title}

-

{memory}

+ + {title} + + + {memory} +
+ {children !== undefined ? children : null}
diff --git a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx index f74c3fa9..a13aae27 100644 --- a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx +++ b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx @@ -1,5 +1,6 @@ -import { XStack, YStack } from "tamagui"; +import { Image, Paragraph, XStack, YStack } from "tamagui"; import { StatisticBox } from "./StatisticBox/StatisticBox"; +import { Icon } from "../../../components/Icon"; const StatisticBoxes = () => { return ( @@ -15,7 +16,16 @@ const StatisticBoxes = () => { stateIcon="/icons/warning.png" stateText="Poor" additionalStateText="86% Utilization" - /> + > + + + + + { memory="30 GB" stateIcon="/icons/active.png" stateText="Fair" - /> + > + + Uptime + 23:20:02 + +
);