fix: redesign

2026-07-10 16:01:27 +03:30
parent 05262b7636
commit a447222201
31 changed files with 1426 additions and 1738 deletions
@@ -0,0 +1,61 @@
+'use client';
+
+interface Step {
+    label: string;
+    isCompleted: boolean;
+    isCurrent: boolean;
+}
+
+interface StepIndicatorProps {
+    steps: Step[];
+}
+
+export default function StepIndicator({ steps }: StepIndicatorProps) {
+    return (
+        <div className="flex items-center gap-0 w-full max-w-2xl">
+            {steps.map((step, index) => (
+                <div key={index} className="flex items-center flex-1 last:flex-none">
+                    <div className="flex flex-col items-center">
+                        <div
+                            className={`flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-all duration-200 ${
+                                step.isCompleted
+                                    ? 'bg-indigo-600 text-white shadow-sm shadow-indigo-500/30'
+                                    : step.isCurrent
+                                    ? 'bg-indigo-100 dark:bg-indigo-500/15 text-indigo-700 dark:text-indigo-400 ring-2 ring-indigo-600 dark:ring-indigo-400'
+                                    : 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
+                            }`}
+                        >
+                            {step.isCompleted ? (
+                                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                            ) : (
+                                index + 1
+                            )}
+                        </div>
+                        <span
+                            className={`mt-1.5 text-xs font-medium whitespace-nowrap ${
+                                step.isCurrent
+                                    ? 'text-indigo-700 dark:text-indigo-400'
+                                    : step.isCompleted
+                                    ? 'text-gray-600 dark:text-gray-300'
+                                    : 'text-gray-400 dark:text-gray-500'
+                            }`}
+                        >
+                            {step.label}
+                        </span>
+                    </div>
+                    {index < steps.length - 1 && (
+                        <div
+                            className={`flex-1 h-0.5 mx-2 mb-5 rounded-full transition-colors ${
+                                step.isCompleted
+                                    ? 'bg-indigo-600'
+                                    : 'bg-gray-200 dark:bg-gray-800'
+                            }`}
+                        />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+}