Separate statistic boxes

src/pages/DeviceHealthCheck/StatisticBox/StatisticBox.jsx

@@ -1,7 +0,0 @@
-import { ShadowBox } from "../../../components/ShadowBox";
-
-const StatisticBox = ({ children, ...props }) => {
-  return <ShadowBox {...props}>{children}</ShadowBox>;
-};
-
-export { StatisticBox };

src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx

@@ -0,0 +1,34 @@
+import { H3, H4, Separator, Text, XStack, YStack } from "tamagui";
+import { IconText } from "../../../../components/IconText/IconText";
+import { ShadowBox } from "../../../../components/ShadowBox";
+
+const StatisticBox = ({
+  title,
+  memory,
+  stateIcon,
+  stateText,
+  additionalStateText,
+  ...props
+}) => {
+  return (
+    <ShadowBox {...props}>
+      <YStack>
+        <XStack space={"$6"}>
+          <YStack space={"$2"} style={{ padding: "8px 16px" }}>
+            <H4 color={"#09101C"}>{title}</H4>
+            <H3 color={"#09101C"}>{memory}</H3>
+          </YStack>
+        </XStack>
+        <Separator borderColor={"#e3e3e3"} marginVertical={5} />
+        <XStack space={"$4"} style={{ padding: "5px 16px 10px 16px" }}>
+          <IconText icon={stateIcon} text={stateText} fontWeight={"bold"} />
+          {additionalStateText && (
+            <Text color={"#E95460"}>{additionalStateText}</Text>
+          )}
+        </XStack>
+      </YStack>
+    </ShadowBox>
+  );
+};
+
+export { StatisticBox };

src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx

@@ -0,0 +1,44 @@
+import { XStack, YStack } from "tamagui";
+import { StatisticBox } from "./StatisticBox/StatisticBox";
+
+const StatisticBoxes = () => {
+  return (
+    <YStack space={"$3"}>
+      <XStack space={"$3"}>
+        <StatisticBox
+          style={{
+            border: "1px solid #D92344",
+            backgroundColor: "#F3EAEB",
+          }}
+          title="Storage"
+          memory="30 GB"
+          stateIcon="/icons/warning.png"
+          stateText="Poor"
+          additionalStateText="86% Utilization"
+        />
+        <StatisticBox
+          title="CPU"
+          memory="30 GB"
+          stateIcon="/icons/check-circle.png"
+          stateText="Good"
+        />
+      </XStack>
+      <XStack space={"$3"}>
+        <StatisticBox
+          title="Memory"
+          memory="30 GB"
+          stateIcon="/icons/check-circle.png"
+          stateText="Good"
+        />
+        <StatisticBox
+          title="Network"
+          memory="30 GB"
+          stateIcon="/icons/active.png"
+          stateText="Fair"
+        />
+      </XStack>
+    </YStack>
+  );
+};
+
+export { StatisticBoxes };

src/pages/DeviceHealthCheck/StatisticBoxes/index.jsx

@@ -0,0 +1 @@
+export { StatisticBoxes } from "./StatisticBoxes";