`components/StepTabs.tsx`

71 lines
'use client'

interface Props {
  currentStep: number
  stepStatuses: Record<number, string>
  onStepClick: (step: number) => void
}

const steps = [
  { number: 1, icon: '📝', label: 'PRD Generator' },
  { number: 2, icon: '🔄', label: 'Ralph Convert' },
  { number: 3, icon: '🤖', label: 'Run Ralphy Boy' },
]

export default function StepTabs({ currentStep, stepStatuses, onStepClick }: Props) {
  return (
    <div className="flex items-center bg-[var(--surface)] border border-[var(--border)] rounded-xl overflow-hidden">
      {steps.map((step, index) => {
        const status = stepStatuses[step.number]
        const isActive = currentStep === step.number
        const isCompleted = status === 'completed'
        const isPending = status === 'pending'

        return (
          <button
            key={step.number}
            onClick={() => onStepClick(step.number)}
            disabled={isPending}
            className={`flex-1 flex items-center justify-center gap-3 py-4 px-6 transition-all relative
              ${isActive ? 'bg-[var(--surface-alt)]' : ''}
              ${isCompleted ? 'text-[var(--success)]' : ''}
              ${isPending ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[var(--surface-alt)] cursor-pointer'}
            `}
          >
            {/* Step Number/Check */}
            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold
              ${isCompleted ? 'bg-[var(--success)] text-white' : ''}
              ${isActive && !isCompleted ? 'bg-[var(--primary)] text-white' : ''}
              ${isPending ? 'bg-[var(--surface-elevated)] text-[var(--foreground-tertiary)]' : ''}
            `}>
              {isCompleted ? (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                </svg>
              ) : (
                step.number
              )}
            </div>

            {/* Label */}
            <div className="flex items-center gap-2">
              <span className="text-lg">{step.icon}</span>
              <span className="font-medium hidden sm:inline">{step.label}</span>
            </div>

            {/* Active Indicator */}
            {isActive && (
              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--primary)]" />
            )}

            {/* Connector */}
            {index < steps.length - 1 && (
              <div className="absolute right-0 top-1/2 -translate-y-1/2 w-px h-8 bg-[var(--border)]" />
            )}
          </button>
        )
      })}
    </div>
  )
}