76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr";
|
|
import styles from "./conceptSection.module.css";
|
|
|
|
interface ConceptPillar {
|
|
number: string;
|
|
title: string;
|
|
points: string[];
|
|
}
|
|
|
|
interface ConceptResults {
|
|
heading: string;
|
|
intro: string;
|
|
points: string[];
|
|
}
|
|
|
|
interface ConceptSectionProps {
|
|
heading: string;
|
|
lead: string;
|
|
pillars: ConceptPillar[];
|
|
results: ConceptResults;
|
|
}
|
|
|
|
export default function ConceptSection({
|
|
heading,
|
|
lead,
|
|
pillars,
|
|
results,
|
|
}: ConceptSectionProps) {
|
|
return (
|
|
<section className={styles.concept} aria-labelledby="concept-heading">
|
|
<div className={styles.inner}>
|
|
<div className={styles.intro}>
|
|
<h2 id="concept-heading" className={styles.heading}>
|
|
{heading}
|
|
</h2>
|
|
<p className={styles.lead}>{lead}</p>
|
|
</div>
|
|
|
|
<div className={styles.bento}>
|
|
{pillars.map((pillar) => (
|
|
<article key={pillar.number} className={styles.pillarCard}>
|
|
<span className={styles.number}>{pillar.number}</span>
|
|
<h3 className={styles.pillarTitle}>{pillar.title}</h3>
|
|
<ul className={styles.pointList}>
|
|
{pillar.points.map((point) => (
|
|
<li key={point} className={styles.point}>
|
|
<span className={styles.pointIcon} aria-hidden="true">
|
|
<CheckCircleIcon size={16} weight="duotone" />
|
|
</span>
|
|
{point}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
))}
|
|
|
|
<article className={styles.resultsCard}>
|
|
<h3 className={styles.resultsHeading}>{results.heading}</h3>
|
|
<p className={styles.resultsIntro}>{results.intro}</p>
|
|
<ul className={styles.pointList}>
|
|
{results.points.map((point) => (
|
|
<li key={point} className={styles.point}>
|
|
<span className={styles.pointIcon} aria-hidden="true">
|
|
<CheckCircleIcon size={16} weight="duotone" />
|
|
</span>
|
|
{point}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|