Refactor project stepper

src/components/Projects/ProjectStepper.tsx

@@ -1,7 +1,54 @@
-import { Flag, Hammer, Play, PlayCircle } from 'lucide-react';
+import {
+  Blocks,
+  Check,
+  Flag,
+  Hammer,
+  type LucideIcon,
+  Play,
+  PlayCircle,
+} from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../lib/classname.ts';
 
+type StepperActionProps = {
+  isActive?: boolean;
+  isCompleted?: boolean;
+  icon: LucideIcon;
+  text: string;
+  number: number;
+};
+
+function StepperAction(props: StepperActionProps) {
+  const { isActive, isCompleted, icon: DisplayIcon, text, number } = props;
+
+  if (isActive) {
+    return (
+      <button className="flex items-center gap-1.5 rounded-xl bg-purple-600 py-1 pl-2 pr-2.5 text-sm text-white hover:bg-purple-700">
+        <DisplayIcon size={13} />
+        <span>Start Building</span>
+      </button>
+    );
+  }
+
+  if (isCompleted) {
+    return (
+      <span className="flex cursor-default items-center gap-1.5 text-sm font-medium text-green-600">
+        <Check size={14} strokeWidth={3} />
+        <span>{text}</span>
+      </span>
+    );
+  }
+
+  return (
+    <span className="flex cursor-default items-center gap-1.5 text-sm text-gray-400">
+      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-400/70 text-xs text-white">
+        {number}
+      </span>
+      <span>{text}</span>
+    </span>
+  );
+}
+
 export function ProjectStepper() {
   const stickyElRef = useRef<HTMLDivElement>(null);
   const [isSticky, setIsSticky] = useState(false);
@@ -24,32 +71,32 @@ export function ProjectStepper() {
     <div
       ref={stickyElRef}
       className={cn(
-        'sticky top-0 -mx-2 -mt-2 mb-5 overflow-hidden rounded-lg border bg-white px-3 py-3 transition-all',
+        'sticky top-0 -mx-2 -mt-2 mb-5 overflow-hidden rounded-lg border bg-white transition-all',
         {
-          '-mx-5 rounded-none border-x-0 border-t-0 bg-gray-50 px-4 py-5': isSticky,
+          '-mx-5 rounded-none border-x-0 border-t-0 bg-gray-50': isSticky,
         },
       )}
     >
       <div
-        className={cn('-mx-4 -mt-3 pt-2 mb-4 border-b px-4 pb-2 text-sm text-gray-500 bg-gray-100 transition-colors', {
+        className={cn(
-          '-mt-5 bg-black text-white': isSticky,
+          'border-b bg-gray-100 px-4 py-2 text-sm text-gray-500 transition-colors',
-        })}
+          {
+            'bg-purple-600 text-white': isSticky,
+          },
+        )}
       >
         Start building, submit solution and get feedback from the community.
       </div>
 
-      <div className="flex items-center justify-between gap-3">
+      <div className="flex min-h-[60px] items-center justify-between gap-3 px-4">
-        <button className="flex items-center gap-1.5 rounded-xl bg-green-600 py-1 pl-2 pr-2.5 text-sm text-white hover:bg-green-700">
+        <StepperAction
-          <Play size={13} />
+          isCompleted={true}
-          <span>Start Building</span>
+          icon={Play}
-        </button>
+          text={'Start Building'}
+          number={1}
+        />
         <hr className="flex-grow border border-gray-300" />
-        <button className="flex items-center gap-1.5 text-sm text-gray-400">
+        <StepperAction icon={Blocks} text={'Submit Solution'} number={2} />
-          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-400/70 text-xs text-white">
-            2
-          </span>
-          <span>Submit Solution</span>
-        </button>
         <hr className="flex-grow border border-gray-300" />
         <button className="flex items-center gap-1.5 text-sm text-gray-400">
           <Flag size={14} />