Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/block.tsx (TypeScript)

Code before:
              blockDashed={block}
              blockTitle={blockTitle}
              blockType={blockType}
              completedCount={completedCount}
              courseCompletionStatus={courseCompletionStatus()}
              handleClick={this.handleBlockClick}
              isCompleted={isBlockCompleted}
              isExpanded={isExpanded}
              percentageCompleted={percentageCompleted}
              blockIntroArr={showIntroInBlockHeader ? blockIntroArr : undefined}
            />
            {!isAudited && (
              <div className='tags-wrapper'>
                <Link
                  className='cert-tag'
                  to={t('links:help-translate-link-url')}
                >
                  {t('misc.translation-pending')}
                </Link>
              </div>
            )}
            {isExpanded && (
              <div id={`${block}-panel`} className='challenge-grid-block-panel'>
                {!showIntroInBlockHeader && (
                  <BlockIntros intros={blockIntroArr} />
                )}
                <Challenges
                  challengesWithCompleted={challengesWithCompleted}
                  isProjectBlock={isProjectBlock}
                  isGridMap={true}
                  blockTitle={blockTitle}
                />
              </div>
            )}
          </div>
        </ScrollableAnchor>
      </>
    );

    /**
     * LegacyLinkBlock displays the block as a single link.
     * This layout is used if the block has a single challenge.
     * Example: https://www.freecodecamp.org/learn/2022/responsive-web-design/#build-a-survey-form-project
     */
    const LegacyLinkBlock = (
      <ScrollableAnchor id={block}>
        <div className='block block-grid grid-project-block'>
          <div className='tags-wrapper'>
            <span className='cert-tag' aria-hidden='true'>
              {t('misc.certification-project')}
            </span>

Review comment (suggestion):
We are using `ChallengeGridBlock` for both the existing grid-based blocks and FSD grid-based blocks, and I'm only applying the change to FSD blocks, so the `showIntroInBlockHeader` flag is needed. 

But I'm very uncomfortable with this change as the code is too messy.

I think we should either clone `ChallengeGridBlock`, too, just like what we did with `LegacyLinkBlock` and `LegacyChallengeListBlock`. Or we apply the change to all grid-based blocks and remove the `showIntroInBlockHeader` flag.

Code after:
            <div className='tags-wrapper'>
              <Link
                className='cert-tag'
                to={t('links:help-translate-link-url')}
              >
                {t('misc.translation-pending')}
              </Link>
            </div>
          )}
          {isExpanded && (
            <div id={`${block}-panel`}>
              <BlockIntros intros={blockIntroArr} />
              <Challenges
                challengesWithCompleted={challengesWithCompleted}
                isProjectBlock={isProjectBlock}
                isGridMap={true}
                blockTitle={blockTitle}
              />
            </div>
          )}
        </div>
      </ScrollableAnchor>
    );

    /**
     * LegacyLinkBlock displays the block as a single link.
     * This layout is used if the block has a single challenge.
     * Example: https://www.freecodecamp.org/learn/2022/responsive-web-design/#build-a-survey-form-project
     */
    const LegacyLinkBlock = (
      <ScrollableAnchor id={block}>
        <div className='block block-grid grid-project-block'>
          <div className='tags-wrapper'>
            <span className='cert-tag' aria-hidden='true'>
              {t('misc.certification-project')}
            </span>
            {!isAudited && (
              <Link
                className='cert-tag'
                to={t('links:help-translate-link-url')}
              >
                {t('misc.translation-pending')}{' '}
                <span className='sr-only'>
                  {blockTitle} {t('misc.certification-project')}
                </span>
              </Link>
            )}
          </div>
          <div className='title-wrapper map-title'>
            {blockType && <BlockLabel blockType={blockType} />}
            <h3 className='block-grid-title'>