From 3657ef24d544d3d049cbc48224fbb8225b455fe4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Wed, 11 Oct 2023 13:30:11 +0300
Subject: [PATCH] refactor: make superblock icon a React component (#51901)

---
 .../icons/{index.tsx => superblock-icon.tsx}     | 16 ++++++++--------
 client/src/components/Map/index.tsx              |  4 ++--
 .../components/super-block-intro.tsx             |  4 ++--
 3 files changed, 12 insertions(+), 12 deletions(-)
 rename client/src/assets/icons/{index.tsx => superblock-icon.tsx} (87%)

diff --git a/client/src/assets/icons/index.tsx b/client/src/assets/icons/superblock-icon.tsx
similarity index 87%
rename from client/src/assets/icons/index.tsx
rename to client/src/assets/icons/superblock-icon.tsx
index a685b366718..d6f2a17f0b8 100644
--- a/client/src/assets/icons/index.tsx
+++ b/client/src/assets/icons/superblock-icon.tsx
@@ -40,14 +40,14 @@ const iconMap = {
   [SuperBlocks.UpcomingPython]: PythonIcon
 };
 
-const generateIconComponent = (
-  superBlock: SuperBlocks,
-  className: string
-): JSX.Element => {
+type SuperBlockIconProps = {
+  superBlock: SuperBlocks;
+} & React.SVGProps<SVGSVGElement>;
+
+export function SuperBlockIcon(props: SuperBlockIconProps): JSX.Element {
+  const { superBlock, className } = props;
   // fallback in case super block doesn't exist and for tests
   const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
 
-  return <Icon className={className} />;
-};
-
-export { generateIconComponent };
+  return <Icon className={className} {...props} />;
+}
diff --git a/client/src/components/Map/index.tsx b/client/src/components/Map/index.tsx
index c64331c409b..9c51650f981 100644
--- a/client/src/components/Map/index.tsx
+++ b/client/src/components/Map/index.tsx
@@ -8,7 +8,7 @@ import {
   getFirstNotAuditedSuperBlock,
   superBlockOrder
 } from '../../../../shared/config/superblocks';
-import { generateIconComponent } from '../../assets/icons';
+import { SuperBlockIcon } from '../../assets/icons/superblock-icon';
 import LinkButton from '../../assets/icons/link-button';
 import { Link, Spacer } from '../helpers';
 import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';
@@ -77,7 +77,7 @@ function MapLi({
       >
         <Link className='btn link-btn btn-lg' to={`/learn/${superBlock}/`}>
           <div style={linkSpacingStyle}>
-            {generateIconComponent(superBlock, 'map-icon')}
+            <SuperBlockIcon className='map-icon' superBlock={superBlock} />
             {getSuperBlockTitleForMap(superBlock)}
           </div>
           {landing && <LinkButton />}
diff --git a/client/src/templates/Introduction/components/super-block-intro.tsx b/client/src/templates/Introduction/components/super-block-intro.tsx
index e6977e2357d..81fa796a71d 100644
--- a/client/src/templates/Introduction/components/super-block-intro.tsx
+++ b/client/src/templates/Introduction/components/super-block-intro.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SuperBlocks } from '../../../../../shared/config/superblocks';
-import { generateIconComponent } from '../../../assets/icons';
+import { SuperBlockIcon } from '../../../assets/icons/superblock-icon';
 import { Spacer } from '../../../components/helpers';
 
 interface SuperBlockIntroProps {
@@ -29,7 +29,7 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
         {i18nSuperBlock}
       </h1>
       <Spacer size='medium' />
-      {generateIconComponent(superBlock, 'cert-header-icon')}
+      <SuperBlockIcon className='cert-header-icon' superBlock={superBlock} />
       <Spacer size='medium' />
       {superBlockIntroText.map((str, i) => (
         <p key={i}>{str}</p>