19855efacc
Some checks failed
Tests / Go Tests (push) Has been cancelled
Tests / Python Tests (push) Has been cancelled
Tests / Integration Tests (push) Has been cancelled
Tests / Go Lint (push) Has been cancelled
Tests / Python Lint (push) Has been cancelled
Tests / Security Scan (push) Has been cancelled
Tests / All Checks Passed (push) Has been cancelled
Security Scanning / Secret Scanning (push) Has been cancelled
Security Scanning / Dependency Vulnerability Scan (push) Has been cancelled
Security Scanning / Go Security Scan (push) Has been cancelled
Security Scanning / Python Security Scan (push) Has been cancelled
Security Scanning / Node.js Security Scan (push) Has been cancelled
Security Scanning / Docker Image Security (push) Has been cancelled
Security Scanning / Security Summary (push) Has been cancelled
CI/CD Pipeline / Go Tests (push) Has been cancelled
CI/CD Pipeline / Python Tests (push) Has been cancelled
CI/CD Pipeline / Website Tests (push) Has been cancelled
CI/CD Pipeline / Linting (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Docker Build & Push (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / CI Summary (push) Has been cancelled
ci/woodpecker/manual/build-ci-image Pipeline was successful
ci/woodpecker/manual/main Pipeline failed
All services: admin-v2, studio-v2, website, ai-compliance-sdk, consent-service, klausur-service, voice-service, and infrastructure. Large PDFs and compiled binaries excluded via .gitignore.
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import type { WizardStep } from './types'
|
|
|
|
interface WizardStepperProps {
|
|
steps: WizardStep[]
|
|
currentStep: number
|
|
onStepClick: (index: number) => void
|
|
}
|
|
|
|
export function WizardStepper({ steps, currentStep, onStepClick }: WizardStepperProps) {
|
|
return (
|
|
<div className="flex items-center justify-between mb-8 overflow-x-auto pb-4">
|
|
{steps.map((step, index) => (
|
|
<div key={step.id} className="flex items-center">
|
|
<button
|
|
onClick={() => onStepClick(index)}
|
|
className={`flex flex-col items-center min-w-[80px] p-2 rounded-lg transition-colors ${
|
|
index === currentStep
|
|
? 'bg-blue-100 text-blue-700'
|
|
: step.status === 'completed'
|
|
? 'bg-green-100 text-green-700 cursor-pointer hover:bg-green-200'
|
|
: step.status === 'failed'
|
|
? 'bg-red-100 text-red-700 cursor-pointer hover:bg-red-200'
|
|
: 'text-gray-400'
|
|
}`}
|
|
disabled={index > currentStep && steps[index - 1]?.status === 'pending'}
|
|
>
|
|
<span className="text-2xl mb-1">{step.icon}</span>
|
|
<span className="text-xs font-medium text-center">{step.name}</span>
|
|
{step.status === 'completed' && <span className="text-xs text-green-600">✓</span>}
|
|
{step.status === 'failed' && <span className="text-xs text-red-600">✗</span>}
|
|
</button>
|
|
{index < steps.length - 1 && (
|
|
<div className={`h-0.5 w-8 mx-1 ${
|
|
index < currentStep ? 'bg-green-400' : 'bg-gray-200'
|
|
}`} />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|