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

Code before:
              >
                {t('misc.translation-pending')}
              </Link>
            </div>
          )}
          {isExpanded && (
            <div id={`${block}-panel`}>
              <Challenges
                challengesWithCompleted={challengesWithCompleted}
                isProjectBlock={isProjectBlock}
              />
            </div>
          )}
        </div>
      </ScrollableAnchor>
    );

    /**
     * LinkBlock displays the block as a single link.
     * This layout is used if the block has a single challenge.
     * Created for the new Full Stack Developer Certification,
     * so we can play with it without affecting the existing block layouts.
     */
    const LinkBlock = (
      <ScrollableAnchor id={block}>
        <div className='block block-grid grid-project-block grid-project-block-no-margin link-block'>
          <div className='tags-wrapper'>
            {!isAudited && (
              <Link
                className='cert-tag'
                to={t('links:help-translate-link-url')}
              >
                {t('misc.translation-pending')}{' '}
              </Link>
            )}
          </div>
          <div className='title-wrapper map-title'>
            <h3 className='block-grid-title'>
              <Link
                className='block-header'
                onClick={() => {
                  this.handleBlockClick();
                }}
                to={challengesWithCompleted[0].fields.slug}
              >
                <CheckMark isCompleted={isBlockCompleted} />
                {blockType && <BlockLabel blockType={blockType} />}
                {blockTitle}
              </Link>
            </h3>
          </div>

Review comment (suggestion):
```suggestion
        <div className='block block-grid grid-project-block grid-project-block-no-margin'>
```

Code after:
            percentageCompleted={percentageCompleted}
            blockIntroArr={blockIntroArr}
          />
          {!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`}>
              <Challenges
                challenges={extendedChallenges}
                isProjectBlock={isProjectBlock}
              />
            </div>
          )}
        </div>
      </ScrollableAnchor>
    );

    /**
     * LinkBlock displays the block as a single link.
     * This layout is used if the block has a single challenge.
     * Created for the new Full Stack Developer Certification,
     * so we can play with it without affecting the existing block layouts.
     */
    const LinkBlock = (
      <ScrollableAnchor id={block}>
        <div className='block block-grid grid-project-block grid-project-block-no-margin'>
          <div className='tags-wrapper'>
            {!isAudited && (
              <Link
                className='cert-tag'
                to={t('links:help-translate-link-url')}
              >
                {t('misc.translation-pending')}{' '}
              </Link>
            )}
          </div>
          <div className='title-wrapper map-title'>
            <h3 className='block-grid-title'>
              <Link
                className='block-header'
                onClick={() => {
                  this.handleBlockClick();
                }}