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

Code before:
              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
                  challengesWithCompleted={challengesWithCompleted}
                  isProjectBlock={isProjectBlock}
                  isGridMap={true}
                  blockTitle={blockTitle}
                />
              </div>
            )}
          </div>
        </ScrollableAnchor>
      </>
    );

    const blockRenderer = () => {
      const blockLayout = challenges[0].blockLayout;

      // `blockLayout` property isn't available in all challenges
      if (!blockLayout) {
        if (isProjectBlock)
          return isGridBlock ? LegacyLinkBlock : ProjectListBlock;
        return isGridBlock
          ? LegacyChallengeGridBlock
          : LegacyChallengeListBlock;
      }

      // blockLayout is only being used in new certs at the moment, so I made some new components for them for now to not interfere with the existing ones
      if (blockLayout === BlockLayouts.ChallengeGrid) return ChallengeGridBlock;
      if (blockLayout === BlockLayouts.ChallengeList) return ChallengeListBlock;
      if (blockLayout === BlockLayouts.Link) return LinkBlock;
      if (blockLayout === BlockLayouts.ProjectList) return ProjectListBlock;
      if (blockLayout === BlockLayouts.LegacyLink) return LegacyLinkBlock;
      if (blockLayout === BlockLayouts.LegacyChallengeList)
        return LegacyChallengeListBlock;
      if (blockLayout === BlockLayouts.LegacyChallengeGrid)
        return LegacyChallengeGridBlock;
    };

Review comment (suggestion):
```suggestion
```
It'll need formatting as well :(

Code after:
                {t('misc.translation-pending')}
              </Link>
            </div>
          )}
          {isExpanded && (
            <div id={`${block}-panel`} className='challenge-grid-block-panel'>
              <Challenges
                challengesWithCompleted={challengesWithCompleted}
                isProjectBlock={isProjectBlock}
                isGridMap={true}
                blockTitle={blockTitle}
              />
            </div>
          )}
        </div>
      </ScrollableAnchor>
    );

    const blockRenderer = () => {
      const blockLayout = challenges[0].blockLayout;

      // `blockLayout` property isn't available in all challenges
      if (!blockLayout) {
        if (isProjectBlock)
          return isGridBlock ? LegacyLinkBlock : ProjectListBlock;
        return isGridBlock
          ? LegacyChallengeGridBlock
          : LegacyChallengeListBlock;
      }

      // blockLayout is only being used in new certs at the moment, so I made some new components for them for now to not interfere with the existing ones
      if (blockLayout === BlockLayouts.ChallengeGrid) return ChallengeGridBlock;
      if (blockLayout === BlockLayouts.ChallengeList) return ChallengeListBlock;
      if (blockLayout === BlockLayouts.Link) return LinkBlock;
      if (blockLayout === BlockLayouts.ProjectList) return ProjectListBlock;
      if (blockLayout === BlockLayouts.LegacyLink) return LegacyLinkBlock;
      if (blockLayout === BlockLayouts.LegacyChallengeList)
        return LegacyChallengeListBlock;
      if (blockLayout === BlockLayouts.LegacyChallengeGrid)
        return LegacyChallengeGridBlock;
    };

    return (
      <>
        {blockRenderer()}
        {isGridBlock && !isProjectBlock ? null : <Spacer size='m' />}
      </>
    );
  }
}