42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr";
|
|
import styles from "./maintenanceCleaningSection.module.css";
|
|
|
|
interface MaintenanceCleaningSectionProps {
|
|
heading: string;
|
|
lead: string;
|
|
requirements: string[];
|
|
}
|
|
|
|
export default function MaintenanceCleaningSection({
|
|
heading,
|
|
lead,
|
|
requirements,
|
|
}: MaintenanceCleaningSectionProps) {
|
|
return (
|
|
<section
|
|
className={styles.maintenanceCleaning}
|
|
aria-labelledby="maintenance-cleaning-heading"
|
|
>
|
|
<div className={styles.inner}>
|
|
<div className={styles.intro}>
|
|
<h3 id="maintenance-cleaning-heading" className={styles.heading}>
|
|
{heading}
|
|
</h3>
|
|
<p className={`lead ${styles.lead}`}>{lead}</p>
|
|
</div>
|
|
|
|
<div className={styles.grid}>
|
|
{requirements.map((requirement) => (
|
|
<article key={requirement} className={styles.card}>
|
|
<span className={styles.iconWrap} aria-hidden="true">
|
|
<CheckCircleIcon size={24} weight="duotone" />
|
|
</span>
|
|
<p className={styles.cardText}>{requirement}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|