refactor(welcome): Move image to component

src/features/modals/welcome/Welcome.jsx

@@ -4,7 +4,7 @@ import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-ic
 
 import EventBus from 'utils/eventbus';
 
-import { ProgressBar } from './components/Elements';
+import { ProgressBar, AsideImage } from './components/Elements';
 import { Button } from 'components/Elements';
 import { Wrapper, Panel } from './components/Layout';
 
@@ -24,20 +24,10 @@ class WelcomeModal extends PureComponent {
   constructor() {
     super();
     this.state = {
-      image: '/src/assets/icons/undraw_celebration.svg',
       currentTab: 0,
       finalTab: 5,
       buttonText: variables.getMessage('modals.welcome.buttons.next'),
     };
-    this.images = [
-      '/src/assets/icons/undraw_celebration.svg',
-      '/src/assets/icons/undraw_around_the_world_modified.svg',
-      '/src/assets/icons/undraw_add_files_modified.svg',
-      '/src/assets/icons/undraw_dark_mode.svg',
-      '/src/assets/icons/undraw_making_art.svg',
-      '/src/assets/icons/undraw_private_data_modified.svg',
-      '/src/assets/icons/undraw_upgrade_modified.svg',
-    ];
   }
 
   changeTab(minus) {
@@ -122,12 +112,7 @@ class WelcomeModal extends PureComponent {
     return (
       <Wrapper>
         <Panel type="aside">
-          <img
-            className="showcaseimg"
-            alt="sidebar icon"
-            draggable={false}
-            src={this.state.image}
-          />
+          <AsideImage currentTab={this.state.currentTab} />
           <ProgressBar
             count={this.images}
             currentTab={this.state.currentTab}

src/features/modals/welcome/components/Elements/AsideImage/AsideImage.jsx

@@ -0,0 +1,31 @@
+const images = [
+  '/src/assets/icons/undraw_celebration.svg',
+  '/src/assets/icons/undraw_around_the_world_modified.svg',
+  '/src/assets/icons/undraw_add_files_modified.svg',
+  '/src/assets/icons/undraw_dark_mode.svg',
+  '/src/assets/icons/undraw_making_art.svg',
+  '/src/assets/icons/undraw_private_data_modified.svg',
+  '/src/assets/icons/undraw_upgrade_modified.svg',
+];
+
+function AsideImage({ currentTab }) {
+  const altTexts = [
+    'Celebration icon',
+    'Around the world icon',
+    'Add files icon',
+    'Dark mode icon',
+    'Making art icon',
+    'Private data icon',
+    'Upgrade icon',
+  ];
+  return (
+    <img
+      className="showcaseimg"
+      alt={altTexts[currentTab]}
+      draggable={false}
+      src={images[currentTab]}
+    />
+  );
+}
+
+export { AsideImage as default, AsideImage };

src/features/modals/welcome/components/Elements/AsideImage/index.jsx

@@ -0,0 +1 @@
+export * from './AsideImage';

src/features/modals/welcome/components/Elements/index.jsx

@@ -1 +1,2 @@
-export * from './ProgressBar';
+export * from './ProgressBar';
+export * from './AsideImage';