34 lines
981 B
TypeScript
34 lines
981 B
TypeScript
|
import type { ReactNode } from 'react';
|
||
|
|
|
||
|
|
interface Step {
|
||
|
|
title: string;
|
||
|
|
content: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface StepGuideProps {
|
||
|
|
steps: Step[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function StepGuide({ steps }: StepGuideProps) {
|
||
|
|
return (
|
||
|
|
<div className="space-y-0 my-6">
|
||
|
|
{steps.map((step, index) => (
|
||
|
|
<div key={index} className="flex gap-4">
|
||
|
|
<div className="flex flex-col items-center">
|
||
|
|
<div className="w-8 h-8 rounded-full bg-accent text-white flex items-center justify-center text-sm font-bold flex-shrink-0">
|
||
|
|
{index + 1}
|
||
|
|
</div>
|
||
|
|
{index < steps.length - 1 && (
|
||
|
|
<div className="w-0.5 flex-1 bg-accent/20 mt-2" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="pb-8 flex-1 min-w-0">
|
||
|
|
<h4 className="font-semibold text-text-primary mb-2">{step.title}</h4>
|
||
|
|
<div className="text-sm text-text-secondary">{step.content}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|