verpfuschter stand von codex

resources/js/components/ui/Steps.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+interface Step {
+  id: string
+  title: string
+  description: string
+}
+
+interface StepsProps {
+  steps: Step[]
+  currentStep: number
+  className?: string
+}
+
+const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
+  ({ steps, currentStep, className }, ref) => {
+    return (
+      <div ref={ref} className={cn("flex items-center justify-between w-full mb-6", className)}>
+        {steps.map((step, index) => (
+          <div key={step.id} className="flex-1 flex flex-col items-center">
+            <div
+              className={cn(
+                "w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-colors",
+                index <= currentStep
+                  ? "bg-blue-500 text-white border-blue-500"
+                  : "bg-gray-200 text-gray-500 border-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-700"
+              )}
+            >
+              {index + 1}
+            </div>
+            <div className="mt-2 text-xs font-medium text-center">
+              <p className={cn(index === currentStep ? "text-blue-600" : "text-gray-500")}>
+                {step.title}
+              </p>
+              <p className="text-xs text-gray-400">{step.description}</p>
+            </div>
+            {index < steps.length - 1 && (
+              <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700 mx-2">
+                <div
+                  className={cn(
+                    "h-full transition-all duration-300",
+                    index < currentStep ? "bg-blue-500" : "bg-transparent"
+                  )}
+                  style={{ width: index < currentStep ? '100%' : '0%' }}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    )
+  }
+)
+Steps.displayName = "Steps"
+
+export { Steps }