From f015db378639e9509ec46bf381d1f31dfefeeaef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20CHAUVIN?= <chloe.chauvin@epitech.eu>
Date: Tue, 13 Sep 2022 12:09:28 +0200
Subject: [PATCH] [ADD] progress bar component

---
 front/components/progressBar.tsx | 48 ++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 front/components/progressBar.tsx

diff --git a/front/components/progressBar.tsx b/front/components/progressBar.tsx
new file mode 100644
index 0000000..c5997df
--- /dev/null
+++ b/front/components/progressBar.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+
+const ProgressBar = (
+  props: { 
+    progress: number; 
+    maxValue: number; 
+    barWidth: number;
+  }) =>
+{
+    const { progress, maxValue, barWidth } = props;
+
+    const containerStyles = {
+        height: 20,
+        width: `${barWidth}%`,
+        backgroundColor: "#e0e0de",
+        borderRadius: 50,
+        margin: 50
+      }
+    
+      function computePercent(progress: number, maxValue: number) 
+      {
+        return progress * 100 / maxValue;;
+      }
+
+      const fillerStyles = {
+        height: '100%',
+        width: `${computePercent(progress, maxValue)}%`,
+        backgroundColor: "#18A558",
+        borderRadius: 'inherit',
+        textAlign: 'center'
+      }
+    
+      const labelStyles = {
+        padding: 5,
+        color: 'white',
+        fontWeight: 'bold'
+      }
+
+    return (
+        <div style={containerStyles}>
+          <div style={fillerStyles}>
+            <span style={labelStyles}>{`${computePercent(progress, maxValue)}%`}</span>
+          </div>
+        </div>
+    );
+}
+
+export default ProgressBar;
\ No newline at end of file