1 files changed, 52 insertions, 0 deletions
diff --git a/src/ToDo-UI/averageTime.jsx b/src/ToDo-UI/averageTime.jsx
new file mode 100644
index 0000000..688522b
--- /dev/null
+++ b/src/ToDo-UI/averageTime.jsx
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { get_average_time_function } from "../api/axios_methods";
+
+function write_average_time(prefix, time) {
+    return (
+        <>
+            <p>{prefix}</p>
+            <p>{time}</p>
+        </>
+    );
+}
+
+export function Average() {
+    const get_av_time_api = get_average_time_function();
+
+    const [time_all, set_time_all] = useState("");
+    const [time_low, set_time_low] = useState("");
+    const [time_med, set_time_med] = useState("");
+    const [time_high, set_time_high] = useState("");
+
+    get_av_time_api(set_time_all, "All");
+    get_av_time_api(set_time_low, "Low");
+    get_av_time_api(set_time_med, "Medium");
+    get_av_time_api(set_time_high, "High");
+
+    return (
+        <div
+            className="container mt-3 mb-3"
+            style={{
+                border: "2px solid black",
+                textAlign: "center",
+                padding: "15px",
+            }}
+        >
+            <div className="row">
+                {write_average_time("Average time to finish tasks:", time_all)}
+            </div>
+
+            <div className="row">
+                <div className="col">
+                    {write_average_time("Low Priority:", time_low)}
+                </div>
+                <div className="col">
+                    {write_average_time("Medium Priority:", time_med)}
+                </div>
+                <div className="col">
+                    {write_average_time("High Priority:", time_high)}
+                </div>
+            </div>
+        </div>
+    );
+}