progress on Create New Monitor page

Client/src/Components/RadioButton/index.jsx

@@ -0,0 +1,52 @@
+/**
+ * RadioButton component.
+ *
+ * @component
+ * @example
+ * // Usage:
+ * <RadioButton
+ *   title="Radio Button Title"
+ *   desc="Radio Button Description"
+ *   size="small"
+ * />
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.title - The title of the radio button.
+ * @param {string} [props.desc] - The description of the radio button.
+ * @param {string} [props.size="small"] - The size of the radio button.
+ * @returns {JSX.Element} - The rendered RadioButton component.
+ */
+
+import { FormControlLabel, Radio } from "@mui/material";
+import React from "react";
+import PropTypes from "prop-types";
+
+function RadioButton(props) {
+  return (
+    <div className="custom-radio-button">
+      <FormControlLabel
+        value="check"
+        control={<Radio size={props.size} />}
+        label={
+          <div>
+            <div className="service-check-list-title">{props.title}</div>
+            <div className="service-check-list-desc">{props.desc}</div>
+          </div>
+        }
+        labelPlacement="end"
+      />
+    </div>
+  );
+}
+
+RadioButton.propTypes = {
+  title: PropTypes.string.isRequired,
+  desc: PropTypes.string,
+  size: PropTypes.string,
+};
+
+RadioButton.defaultProps = {
+  size: "small",
+};
+
+export default RadioButton;

Client/src/Pages/Monitors/CreateNewMonitor.jsx

@@ -2,6 +2,7 @@ import ConfigBox from "../../Components/ConfigBox";
 import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField";
 import "./index.css";
 import React from "react";
+import RadioButton from "../../Components/RadioButton";
 
 const CreateNewMonitor = () => {
   return (
@@ -47,6 +48,25 @@ const CreateNewMonitor = () => {
             </div>
           </div>
         }
+        rightLayout={
+          <div className="service-check-list">
+            <RadioButton
+              title="HTTP/website monitoring"
+              desc="Use HTTP(s) to monitor your website or API endpoint."
+            />
+            <div className="monitors-gaps-medium"></div>
+            <RadioButton
+              title="Ping monitoring"
+              desc="Check whether your server is available or not."
+            />
+            <div className="monitors-gaps-medium"></div>
+            <RadioButton
+              title="Port monitoring"
+              desc="Monitor a specific service on your server."
+            />
+            <div className="monitors-gaps-medium"></div>
+          </div>
+        }
       />
       <div className="monitors-gaps-medium"></div>
       <div className="monitors-gaps-medium"></div>

Client/src/Pages/Monitors/index.css

@@ -29,3 +29,13 @@
   font-size: var(--env-var-font-size-large-plus);
   font-weight: 600;
 }
+
+.service-check-list-title {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-medium);
+}
+
+.service-check-list-desc {
+  color: var(--env-var-color-25);
+  font-size: var(--env-var-font-size-small);
+}

Client/src/Pages/Monitors/index.jsx

@@ -1,11 +1,13 @@
-import CurrentStats from "./CurrentStats";
+import CreateNewMonitor from "./CreateNewMonitor";
+// import CurrentStats from "./CurrentStats";
 import "./index.css";
 import React from "react";
 
 const Monitors = () => {
   return (
     <div className="monitors">
-      <CurrentStats />
+      {/* <CurrentStats /> */}
+      <CreateNewMonitor />
     </div>
   );
 };