From f80fd85c9e723c5e25f29f22daf22a27bc4accc3 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Wed, 10 Mar 2021 16:51:15 -0500
Subject: [PATCH] feat: create a progress bar component for sync tasks

---
 striker-ui/components/ProgressBar.tsx | 64 +++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 striker-ui/components/ProgressBar.tsx

diff --git a/striker-ui/components/ProgressBar.tsx b/striker-ui/components/ProgressBar.tsx
new file mode 100644
index 00000000..3e64e555
--- /dev/null
+++ b/striker-ui/components/ProgressBar.tsx
@@ -0,0 +1,64 @@
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import { LinearProgress, Typography } from '@material-ui/core';
+import {
+  PURPLE_OFF,
+  PANEL_BACKGROUND,
+  TEXT,
+} from '../lib/consts/DEFAULT_THEME';
+
+const BorderLinearProgress = withStyles({
+  root: {
+    height: 25,
+    borderRadius: 3,
+  },
+  colorPrimary: {
+    backgroundColor: PANEL_BACKGROUND,
+  },
+  bar: {
+    borderRadius: 3,
+    backgroundColor: PURPLE_OFF,
+  },
+})(LinearProgress);
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+  },
+  margin: {
+    margin: theme.spacing(1),
+  },
+  leftLabel: {
+    position: 'absolute',
+    color: TEXT,
+    top: 0,
+    left: '5%',
+  },
+  centerLabel: {
+    position: 'absolute',
+    color: TEXT,
+    top: 0,
+    left: '70%',
+  },
+  rightLabel: {
+    position: 'absolute',
+    color: TEXT,
+    top: 0,
+    left: '90%',
+  },
+}));
+
+const ProgressBar = ({ allocated }: { allocated: number }): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <BorderLinearProgress variant="determinate" value={allocated} />
+      <Typography className={classes.leftLabel}>53.5%</Typography>
+      <Typography className={classes.centerLabel}>570MiB/s</Typography>
+      <Typography className={classes.rightLabel}>1:15:30</Typography>
+      <LinearProgress variant="determinate" value={0} />
+    </div>
+  );
+};
+
+export default ProgressBar;