Page templates

The templates used for all the content can be found at /src/templates

Data is passed from the GraphSQL to the component via a data prop

/src/templates/category-en.js

export const query = graphql`
  query ($CategoryId: String!) {
    strapiCategory(id: { eq: $CategoryId }) {
      id
      slug
      name
      locale
      index
      colour
      subcategory {
        name
        units {
          unit {
            id
            colour_theme
            slug
            title
            image {
              localFile {
                childImageSharp {
                  gatsbyImageData
                }
              }
            }
          }
        }
      }
    }
  }
`;

export const query = graphql`

The data from the prop is then used in the page component using a map

/src/templates/category-en.js

...

const categoryItems = data.strapiCategory.subcategory.map(
    (subcategory, cnt) => (
      <ExpansionPanel
        key={subcategory.id}
        expanded={expanded === "panel" + cnt}
        onChange={handleChange("panel" + cnt)}
      >
        <ExpansionPanelSummary
          //   className={"bg-gray-100"}
          expandIcon={<ExpandMoreIcon stroke="#AE41AD" />}
        >
          <Typography className={classes.heading}>
            {subcategory.name}
          </Typography>
        </ExpansionPanelSummary>

        <ExpansionPanelDetails className={"bg-gray-100"}>
          <div className="pt-2">
            {subcategory.units.map((item, index) => (
              <div key={item.id}>
                <div
                  key={item && item.unit && item.unit.id}
                  style={{ paddingBottom: "1em" }}
                >
                  <button
                    style={{ textDecoration: "none" }}
                    onClick={() => {
                      navigate("/en/" + item.unit.slug);
                    }}
                  >
                    <Card className={classes.card}>
                      <div
                        className={classes.cardActionBar}
                        style={{
                          background:
                            item && item.unit && item.unit.colour_theme,
                        }}
                      >
                        <Toolbar>
                          <Typography className={classes.cardTitle}>
                            {item && item.unit && item.unit.title}
                          </Typography>
                        </Toolbar>
                      </div>

                      <CardContent>
                        {item &&
                          item.unit &&
                          item.unit.image &&
                          item.unit.image[0] !== null && (
                            <GatsbyImage
                              //   className="w-full rounded-lg"
                              className={classes.cardImgsm}
                              image={getImage(
                                item && item.unit && item.unit.image.localFile
                              )}
                              alt={item && item.unit && item.unit.name}
                            />
                          )}
                      </CardContent>
                    </Card>
                  </button>
                </div>
              </div>
            ))}
          </div>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    )
  );


const CatsStrapi = ({ data }) => {