Step Progress Timeline

export default function StepProgressTimelineExample() {

const steps = [
    { step: 1, stepName: "Initializing system", duration: 2000, status: "waiting..." as const },
    { step: 2, stepName: "Loading dependencies", duration: 3000, status: "waiting..." as const },
    { step: 3, stepName: "Processing request", duration: 2500, status: "waiting..." as const },
    { step: 4, stepName: "Generating content", duration: 4000, status: "waiting..." as const },
    { step: 5, stepName: "Optimizing output", duration: 2000, status: "waiting..." as const },
    { step: 6, stepName: "Finalizing results", duration: 1500, status: "waiting..." as const },
  ]

  const handleGenerationStart = () => {
    console.log('Generation started')
  }

  const handleGenerationComplete = () => {
    console.log('Generation completed')
  }

  const handleGenerationStop = () => {
    console.log('Generation stopped')
  }

  return (
    <StepProgressTimeline
      steps={steps}
      externalStart={true}
      externalStop={false}
      scrollSpeed="normal"
      onGenerationStart={handleGenerationStart}
      onGenerationComplete={handleGenerationComplete}
      onGenerationStop={handleGenerationStop}
      className="w-full"
    />
  )
}

type StepProps = {
  step?: number
  stepName?: string
  duration?: number
  status: "waiting..." | "generating..." | "completed"
}

type StepProgressTimelineProps = {
  steps: StepProps[]
  onGenerationStart?: () => void
  onGenerationComplete?: () => void
  onGenerationStop?: () => void
  externalStop?: boolean
  externalStart?: boolean
  className?: string
  scrollSpeed?: "fast" | "normal" | "slow"
}