Progress Component - V1 (#180)

src/components/ui/Progress/Progress.stories.js

@@ -0,0 +1,24 @@
+
+import Progress from './Progress';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'UI/Data Display/Progress',
+    component: Progress,
+    render: (args) => <SandboxEditor>
+        <div className='text-gray-950 my-10'>
+            <Progress {...args} />
+        </div>
+    </SandboxEditor>,
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const All = {
+    args: {
+        label: 'progress label',
+        maxValue: 100,
+        value: 45,
+    },
+};

src/components/ui/Progress/Progress.tsx

@@ -0,0 +1,34 @@
+import React, {useState, useEffect} from 'react';
+
+interface ProgressProps {
+  value: number;
+  maxValue: number;
+  label: string;
+}
+
+const Progress: React.FC<ProgressProps> = ({value, maxValue, label}) => {
+    console.log(label);
+    const [percentage, setPercentage] = useState(0);
+
+    useEffect(() => {
+        const calculatedPercentage = (value / maxValue) * 100;
+        setPercentage(calculatedPercentage);
+    }, [value, maxValue]);
+
+    return (
+        <div className="bg-gray-300 rounded-md">
+            <div
+                role="progressbar"
+                className='bg-red-800 rounded-md text-right'
+                aria-valuenow={value}
+                aria-valuemax={maxValue}
+                aria-valuemin={0}
+                style={{width: `${percentage}%`}}
+            >
+                <span className='text-gray-1000 p-2 text-sm'>{label}</span>
+            </div>
+        </div>
+    );
+};
+
+export default Progress;