From 57568e61c22c41c073f4db59992735387e8372fe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 5 Apr 2022 23:01:32 +0200
Subject: chore: add a ProgressBar component

---
 src/components/atoms/loaders/progress-bar.tsx | 55 +++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/components/atoms/loaders/progress-bar.tsx

(limited to 'src/components/atoms/loaders/progress-bar.tsx')

diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
new file mode 100644
index 0000000..fa4e09d
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import styles from './progress-bar.module.scss';
+
+export type ProgressBarProps = {
+  /**
+   * Accessible progress bar name.
+   */
+  ariaLabel?: string;
+  /**
+   * Current value.
+   */
+  current: number;
+  /**
+   * Additional information to display before progress bar.
+   */
+  info?: string;
+  /**
+   * Minimal value.
+   */
+  min: number;
+  /**
+   * Maximal value.
+   */
+  max: number;
+};
+
+/**
+ * ProgressBar component
+ *
+ * Render a progress bar.
+ */
+const ProgressBar: FC<ProgressBarProps> = ({
+  ariaLabel,
+  current,
+  info,
+  min,
+  max,
+}) => {
+  return (
+    <div className={styles.progress}>
+      {info && <div className={styles.progress__info}>{info}</div>}
+      <progress
+        className={styles.progress__bar}
+        max={max}
+        value={current}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={current}
+        aria-label={ariaLabel}
+      ></progress>
+    </div>
+  );
+};
+
+export default ProgressBar;
-- 
cgit v1.2.3