43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import styles from "./processSection.module.css";
|
|
|
|
interface ProcessStep {
|
|
number: string;
|
|
title: string;
|
|
}
|
|
|
|
interface ProcessSectionProps {
|
|
heading: string;
|
|
lead: string;
|
|
steps: ProcessStep[];
|
|
}
|
|
|
|
export default function ProcessSection({
|
|
heading,
|
|
lead,
|
|
steps,
|
|
}: ProcessSectionProps) {
|
|
return (
|
|
<section className={styles.process} aria-labelledby="process-heading">
|
|
<div className={styles.inner}>
|
|
<div className={styles.intro}>
|
|
<h2 id="process-heading" className={styles.heading}>
|
|
{heading}
|
|
</h2>
|
|
<p className={`lead ${styles.lead}`}>{lead}</p>
|
|
</div>
|
|
|
|
<div className={styles.steps}>
|
|
{steps.map((step) => (
|
|
<div key={step.number} className={styles.step}>
|
|
<span className={styles.stepNumber} aria-hidden="true">
|
|
{step.number}
|
|
</span>
|
|
<span className={styles.stepTitle}>{step.title}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|