refactor: join-us

package.json

@@ -20,7 +20,8 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.3",
     "react-icons": "^4.12.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",

src/app/(account)/join-us/ProgressBar.tsx

@@ -1,31 +1,32 @@
 import Image from 'next/image';
 
-interface ProgressBarProps {
-    ducksFilled: number;
-}
-
-function ProgressBar({ ducksFilled }: ProgressBarProps) {
-    const renderDucks = () => {
-        const ducks = [];
-        for (let i = 1; i <= 4; i++) {
-            const duckColor = i <= ducksFilled ? 'yellowDuck.svg' : 'greyDuckOutline.svg';
-            ducks.push(
-                <div key={i} className="flex items-center justify-center">
-                    <Image
-                        src={`/images/${duckColor}`}
-                        alt={i <= ducksFilled ? 'Yellow Duck' : 'Grey Duck Outline'}
-                        className="h-10 md:h-12 scale-x-[-1]"
-                        height={100}
-                        width={100}
-                    />
-                    <div className="absolute mt-20 text-bla ck font-bold">{i}</div>
-                </div>
-            );
-        }
-        return ducks;
-    };
+function Duck({ filled, index }: { filled?: boolean; index: number }) {
+    const duckImageName = filled ? 'yellowDuck.svg' : 'greyDuckOutline.svg';
+    const duckImageAlt = filled ? 'Yellow Duck' : 'Grey Duck Outline';
 
-    return <div className="flex items-end justify-center mt-4 mb-12">{renderDucks()}</div>;
+    return (
+        <div className="flex items-center justify-center">
+            <Image
+                src={`/images/${duckImageName}`}
+                alt={duckImageAlt}
+                className="h-10 md:h-12 scale-x-[-1]"
+                height={100}
+                width={100}
+            />
+            <div className="absolute mt-20 text-black font-bold">{index}</div>
+        </div>
+    );
 }
 
-export default ProgressBar;
+export default function ProgressBar({ step }: { step: number }) {
+    return (
+        <div className="flex items-end justify-center mt-4 mb-12">
+            {new Array(step).fill(null).map((_, i) => (
+                <Duck filled index={i + 1} key={i} />
+            ))}
+            {new Array(4 - step).fill(null).map((_, i) => (
+                <Duck index={step + i + 1} key={i} />
+            ))}
+        </div>
+    );
+}