From 486547f6886992ad92275e2907c1914af955a99a Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Thu, 20 Jun 2024 19:53:08 +0330
Subject: [PATCH] progress on Create New Monitor page

---
 Client/src/Components/RadioButton/index.jsx   | 52 +++++++++++++++++++
 .../src/Pages/Monitors/CreateNewMonitor.jsx   | 20 +++++++
 Client/src/Pages/Monitors/index.css           | 10 ++++
 Client/src/Pages/Monitors/index.jsx           |  6 ++-
 4 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 Client/src/Components/RadioButton/index.jsx

diff --git a/Client/src/Components/RadioButton/index.jsx b/Client/src/Components/RadioButton/index.jsx
new file mode 100644
index 000000000..038871647
--- /dev/null
+++ b/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;
diff --git a/Client/src/Pages/Monitors/CreateNewMonitor.jsx b/Client/src/Pages/Monitors/CreateNewMonitor.jsx
index 43c853748..1c927ffdf 100644
--- a/Client/src/Pages/Monitors/CreateNewMonitor.jsx
+++ b/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>
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index a5778c488..eef1c33d5 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/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);
+}
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 153ac852c..fbc0413d0 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/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>
   );
 };