Add ProgressBar Component

GTBitsOfGood · Sep 5, 2024 · 537448a · 537448a
1 parent b209839
commit 537448a
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/web/components/atoms/ProgressBar.tsx b/web/components/atoms/ProgressBar.tsx
@@ -0,0 +1,16 @@
+interface Props {
+	color?: string;
+	/** A number between 0 and 100 indicating the progress percentage */
+	progress: number;
+}
+
+export default function ProgressBar({
+	color,
+	progress
+}: Props) {
+	return (
+		<div className="h-[6px] relative rounded-full">
+			<div style={{ backgroundColor: color, width: `${progress}%` }} className="rounded-full absolute top-0 left-0 bottom-0 transition-all" />
+		</div>
+	)
+}