Dateien nach "competitor-analysis/components" hochladen

2026-01-09 17:41:40 +00:00
parent be6b83ea9b
commit 53bf584835
3 changed files with 222 additions and 0 deletions
--- a/competitor-analysis/components/StepIndicator.tsx
+++ b/competitor-analysis/components/StepIndicator.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface StepIndicatorProps {
+    currentStep: number;
+    highestStep: number;
+    onStepClick: (step: number) => void;
+    t: {
+        title: string;
+        steps: string[];
+    }
+}
+
+const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep, highestStep, onStepClick, t }) => {
+    
+    const steps = t.steps.map((name, index) => ({ id: index + 1, name }));
+
+    return (
+        <div className="bg-light-secondary dark:bg-brand-secondary p-4 rounded-lg shadow-md border border-light-accent dark:border-brand-accent">
+            <h3 className="font-bold text-lg mb-4">{t.title}</h3>
+            <ol className="space-y-3">
+                {steps.map((step) => {
+                    const isCompleted = step.id < currentStep;
+                    const isActive = step.id === currentStep;
+                    const isClickable = step.id <= highestStep;
+
+                    return (
+                        <li 
+                            key={step.id} 
+                            className={`flex items-center p-1 rounded-md transition-colors ${isClickable ? 'cursor-pointer hover:bg-light-accent dark:hover:bg-brand-accent' : 'cursor-default'}`}
+                            onClick={() => isClickable && onStepClick(step.id)}
+                        >
+                            <span className={`flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full mr-3 text-sm font-bold ${
+                                isCompleted ? 'bg-green-500 text-white' : 
+                                isActive ? 'bg-brand-highlight text-white ring-2 ring-offset-2 ring-offset-light-secondary dark:ring-offset-brand-secondary ring-brand-highlight' : 
+                                'bg-light-accent dark:bg-brand-accent text-light-text dark:text-brand-text'
+                            }`}>
+                                {isCompleted ? '✓' : step.id}
+                            </span>
+                            <span className={`font-medium ${isActive ? 'text-light-text dark:text-white' : 'text-light-subtle dark:text-brand-light'}`}>
+                                {step.name}
+                            </span>
+                        </li>
+                    )
+                })}
+            </ol>
+        </div>
+    );
+};
+
+export default StepIndicator;