41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import processingStepsStyles from "~/styles/components/processing-steps.css?url";
|
|
|
|
export interface Step {
|
|
title: string;
|
|
description: string;
|
|
status: 'waiting' | 'active' | 'done' | 'error';
|
|
}
|
|
|
|
interface ProcessingStepsProps {
|
|
steps: Step[];
|
|
className?: string;
|
|
}
|
|
|
|
export function links() {
|
|
return [{ rel: "stylesheet", href: processingStepsStyles }];
|
|
}
|
|
|
|
export function ProcessingSteps({ steps, className = "" }: ProcessingStepsProps) {
|
|
return (
|
|
<div className={`steps-container-horizontal ${className}`}>
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={index}
|
|
className={`step-item-horizontal ${step.status}`}
|
|
data-step={index + 1}
|
|
>
|
|
<div className="step-icon-horizontal">
|
|
{step.status === 'done' && <i className="ri-check-line"></i>}
|
|
{step.status === 'error' && <i className="ri-close-line"></i>}
|
|
{step.status === 'active' && <span className="loading-spinner"></span>}
|
|
{step.status === 'waiting' && <span>{index + 1}</span>}
|
|
</div>
|
|
<div className="step-content-horizontal">
|
|
<div className="step-title-horizontal">{step.title}</div>
|
|
<div className="step-description-horizontal">{step.description}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|