feat: finish my pages overview page according to wireframe

components/TempDesignSystem/ProgressBar/index.tsx

@@ -0,0 +1,12 @@
+import styles from "./progressbar.module.css"
+
+import type { ProgressbarProps } from "./progressbar"
+
+export default function ProgressBar({ className, progress }: ProgressbarProps) {
+  className = className ?? ""
+  return (
+    <div className={`${className} ${styles.bar}`}>
+      <div className={styles.progress} style={{ width: `${progress}%` }} />
+    </div>
+  )
+}

components/TempDesignSystem/ProgressBar/progressbar.module.css

@@ -0,0 +1,12 @@
+.bar {
+  background-color: var(--some-white-color, #fff);
+  border-radius: 4rem;
+  height: 2rem;
+  width: 100%;
+}
+
+.progress {
+  background-color: var(--some-black-color, #1f1f1f);
+  border-radius: 4rem;
+  height: 2rem;
+}

components/TempDesignSystem/ProgressBar/progressbar.ts

@@ -0,0 +1,3 @@
+export interface ProgressbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  progress: number
+}