Add additional data about statistic boxes

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 (
     <ShadowBox {...props}>
       <YStack>
-        <XStack space={"$6"}>
+        <XStack space={"$4"}>
           <YStack space={"$2"} style={{ padding: "8px 16px" }}>
-            <H4 color={"#09101C"}>{title}</H4>
-            <H3 color={"#09101C"}>{memory}</H3>
+            <Paragraph color={"#09101C"} size={"$6"} fontWeight={"600"}>
+              {title}
+            </Paragraph>
+            <Paragraph color={"#09101C"} size={"$8"} fontWeight={"700"}>
+              {memory}
+            </Paragraph>
           </YStack>
+          {children !== undefined ? children : null}
         </XStack>
         <Separator borderColor={"#e3e3e3"} marginVertical={5} />
         <XStack space={"$4"} style={{ padding: "5px 16px 10px 16px" }}>

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"
-        />
+        >
+          <XStack space={"$2"}>
+            <Image
+              source={{ uri: "/icons/storage-circle.png" }}
+              width={75}
+              height={75}
+            />
+            <Icon source={"/icons/alert.png"} />
+          </XStack>
+        </StatisticBox>
         <StatisticBox
           title="CPU"
           memory="30 GB"
@@ -35,7 +45,12 @@ const StatisticBoxes = () => {
           memory="30 GB"
           stateIcon="/icons/active.png"
           stateText="Fair"
-        />
+        >
+          <YStack space={"$2"}>
+            <Paragraph color={"black"}>Uptime</Paragraph>
+            <Paragraph color={"black"}>23:20:02</Paragraph>
+          </YStack>
+        </StatisticBox>
       </XStack>
     </YStack>
   );