refactor(welcome): Improve readability of sections

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

@@ -1,22 +1,26 @@
 import { memo } from 'react';
 
-function ProgressBar({ count, currentTab, switchTab }) {
+const Step = memo(({ isActive, index, onClick }) => {
+  const className = isActive ? 'step active' : 'step';
+
+  return (
+    <div className={className} onClick={onClick}>
+      <span>{index + 1}</span>
+    </div>
+  );
+});
+
+function ProgressBar({ numberOfTabs, currentTab, switchTab }) {
   return (
     <div className="progressbar">
-      {count.map((num) => {
-        let className = 'step';
-
-        const index = count.indexOf(num);
-        if (index === currentTab) {
-          className = 'step active';
-        }
-
-        return (
-          <div className={className} key={index} onClick={() => switchTab(index)}>
-            <span>{index + 1}</span>
-          </div>
-        );
-      })}
+      {Array.from({ length: numberOfTabs }, (_, index) => (
+        <Step
+          key={index}
+          isActive={index === currentTab}
+          index={index}
+          onClick={() => switchTab(index)}
+        />
+      ))}
     </div>
   );
 }

src/features/modals/welcome/components/Layout/Content.jsx

@@ -0,0 +1,7 @@
+const Content = ({ children }) => {
+    return (
+        <div className="content">{children}</div>
+    )
+}
+
+export { Content as default, Content };

src/features/modals/welcome/components/Layout/Panel.jsx

@@ -1,12 +1,6 @@
 const Panel = ({ children, type }) => (
   <section className={type}>
-    {type === 'content' ? (
-      <div className="content">{children}</div>
-    ) : type === 'aside' ? (
-      <>{children}</>
-    ) : (
-      children
-    )}
+    {children}
   </section>
 );
 

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

@@ -1,3 +1,4 @@
 export * from './Wrapper';
 export * from './Panel';
-export * from './Header';
+export * from './Header';
+export * from './Content';