Very rough blurb code

Blurbs.jsx

const Blurbs = ({ onChange, blurb, noscript }) => {
  return (
    <Fragment>
      {!noscript && (
        <input
          className="blurb-swapper"
          onChange={onChange}
          type="range"
          min="0"
          max={BLURBS.length - 1}
          step="1"
          value={blurb}
          title="See less/more"
        />
      )}
      {noscript && (
        <CSSBlurbSwapper blurb={blurb} data={new Array(BLURBS.length).fill()} />
      )}
      <div className="blurb__container">
        {BLURBS.map((Intro, index) => {
          return (
            <Fragment>
              <Blurb
                key={`blurb--${index}`}
                className={`blurb ${index > 2 ? "blurb--contributed" : ""}`}
                {...(!noscript && {
                  style: { display: index !== blurb ? "none" : "block" },
                })}
              >
                {index > 2 && (
                  <QuoteMarkContainer>
                    <Comma
                      viewBox="0 0 24 24"
                      style={{ marginBottom: "1.25rem" }}
                    >
                      <path d="M10,7L8,11H11V17H5V11L7,7H10M18,7L16,11H19V17H13V11L15,7H18Z" />
                    </Comma>
                  </QuoteMarkContainer>
                )}
                <Intro />
                {index > 2 && (
                  <QuoteMarkContainer>
                    <Comma viewBox="0 0 24 24">
                      <path d="M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z" />
                    </Comma>
                  </QuoteMarkContainer>
                )}
                {index > 1 && (
                  <LinkContainer>
                    <BlurbLink href="https://github.com/jh3y/blurbs">
                      Add your own blurb
                    </BlurbLink>
                  </LinkContainer>
                )}
              </Blurb>
            </Fragment>
          )
        })}
      </div>
    </Fragment>
  )
}