React components
Automatic guidance
A component visualizing a step-by-step automated workflow.
Overview
The AutomaticGuidance component demonstrates an automated process, such as lead processing. It cycles through a list of steps, showing "Processing" and "Done" states for each step with animations.
Usage
import { AutomaticGuidance } from '@/components/core/features/automatic-guidance';
const steps = ['Step 1', 'Step 2', 'Step 3'];
function WorkflowDemo() {
return <AutomaticGuidance data={steps} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data? | string[] | ['...'] | List of steps to cycle through. |
processingDuration? | number | 2000 | Processing time duration in milliseconds (ms). |
delayDuration? | number | 800 | Delay time before continue to next steps in milliseconds (ms). |
resetDelay? | number | 1000 | Time to wait before reset steps in milliseconds (ms). |
className? | string | - | Optional CSS class names. |