Personal-site/components/CaseSection.js

import PropTypes from "prop-types";
import React from "react";
import styles from "./modules/CaseSection.module.css";
import Section from "./Section";
import CaseCard from "./CaseCard";

export default function CaseSection(props) {
  return (
    <Section>
      <div className={styles.bg} />
      <div className={styles.content}>
        <h1 className={styles.title}>Case Studies</h1>
        <div className={styles.cardRow}>
          {props.caseStudies.map((study) => (
            <CaseCard key={study.title} study={props.caseStudies[props.caseStudies.indexOf(study)]} />
          ))}
        </div>
      </div>
    </Section>
  );
}

CaseSection.propTypes = {
  caseStudies: PropTypes.arrayOf(PropTypes.object).isRequired,
};