Upload beautify

resources/js/components/upload/UploadStepper.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+export default function UploadStepper({ steps = [], activeStep = 1, highestUnlockedStep = 1, onStepClick }) {
+  const safeActive = Math.max(1, Math.min(steps.length || 1, activeStep))
+
+  return (
+    <nav aria-label="Upload steps" className="rounded-xl border border-white/50 bg-slate-900/70 px-3 py-3 sm:px-4">
+      <ol className="flex flex-nowrap items-center gap-2 overflow-x-auto sm:gap-3">
+        {steps.map((step, index) => {
+          const number = index + 1
+          const isActive = number === safeActive
+          const isComplete = number < safeActive
+          const isLocked = number > highestUnlockedStep
+          const canNavigate = number < safeActive && !isLocked
+
+          const baseBtn = 'inline-flex items-center gap-2 rounded-full border px-2.5 py-1.5 text-xs sm:px-3'
+          const stateClass = isActive
+            ? 'border-sky-300/80 bg-sky-500/30 text-white shadow-[0_8px_24px_rgba(14,165,233,0.12)]'
+            : isComplete
+              ? 'border-emerald-300/30 bg-emerald-500/15 text-emerald-100 hover:bg-emerald-500/25'
+              : isLocked
+                ? 'cursor-default border-white/50 bg-white/5 text-white/40'
+                : 'border-white/10 bg-white/5 text-white/80 hover:bg-white/10'
+
+          const circleClass = isComplete
+            ? 'border-emerald-300/60 bg-emerald-500/20 text-emerald-100'
+            : isActive
+              ? 'border-sky-300/60 bg-sky-500/30 text-white'
+              : 'border-white/20 bg-white/5 text-white/80'
+
+          return (
+            <li key={step.key} className="flex min-w-0 items-center gap-2">
+              <button
+                type="button"
+                onClick={() => canNavigate && onStepClick?.(number)}
+                disabled={isLocked}
+                aria-disabled={isLocked ? 'true' : 'false'}
+                aria-current={isActive ? 'step' : undefined}
+                className={`${baseBtn} ${stateClass}`}
+              >
+                <span className={`grid h-5 w-5 place-items-center rounded-full border text-[11px] ${circleClass}`}>
+                  {isComplete ? '✓' : number}
+                </span>
+                <span className="whitespace-nowrap">{step.label}</span>
+              </button>
+              {index < steps.length - 1 && <span className="text-white/50">→</span>}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}