From c02c18f4f4ea131acb18890c677ffff463f8261b Mon Sep 17 00:00:00 2001
From: Allison Hong <allisonhong1023@berkeley.edu>
Date: Thu, 7 Nov 2024 22:42:50 -0800
Subject: [PATCH] [feat] create ProgressBar component

---
 components/ProgressBar/ProgressBar.tsx | 12 ++++++++++++
 components/ProgressBar/styles.ts       | 20 ++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 components/ProgressBar/ProgressBar.tsx
 create mode 100644 components/ProgressBar/styles.ts

diff --git a/components/ProgressBar/ProgressBar.tsx b/components/ProgressBar/ProgressBar.tsx
new file mode 100644
index 0000000..1535174
--- /dev/null
+++ b/components/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import * as styles from './styles';
+
+const ProgressBar: React.FC = () => {
+  return (
+    <styles.ProgressBarContainer>
+      <styles.ProgressBarFiller progress={20}></styles.ProgressBarFiller>
+    </styles.ProgressBarContainer>
+  );
+};
+
+export default ProgressBar;
diff --git a/components/ProgressBar/styles.ts b/components/ProgressBar/styles.ts
new file mode 100644
index 0000000..740b4e3
--- /dev/null
+++ b/components/ProgressBar/styles.ts
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+
+export const ProgressBarContainer = styled.div`
+  display: inline;
+  width: 100%;
+  height: 2px;
+  background-color: ${COLORS.gray4};
+  border-radius: 2px;
+  margin-bottom: 2rem;
+`;
+
+export const ProgressBarFiller = styled.div<{
+  progress: number;
+}>`
+  height: 100%;
+  width: ${props => props.progress}%;
+  background-color: ${COLORS.gray12};
+  transition: width 0.25s ease-in-out;
+`;