30 lines
775 B
TypeScript
30 lines
775 B
TypeScript
import React from 'react';
|
|
|
|
interface StepGuideProps {
|
|
steps: { num: number; title: string; desc: string }[];
|
|
color: string;
|
|
}
|
|
|
|
export const StepGuide: React.FC<StepGuideProps> = ({ steps, color }) => {
|
|
return (
|
|
<ol className="step-guide">
|
|
{steps.map((s, i) => (
|
|
<li className="step-guide-item" key={s.num}>
|
|
<div className="step-guide-rail">
|
|
<span className="step-guide-num" style={{ background: color }}>
|
|
{s.num}
|
|
</span>
|
|
{i < steps.length - 1 && <span className="step-guide-line" />}
|
|
</div>
|
|
<div className="step-guide-body">
|
|
<h4>{s.title}</h4>
|
|
<p>{s.desc}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
);
|
|
};
|
|
|
|
export default StepGuide;
|