chore: Apply requested changes

src/components/Step.js

@@ -1,28 +1,27 @@
 import React from 'react';
 import styles from './Step.module.scss';
 import Proptypes from 'prop-types';
+import cx from 'classnames';
 
 const Step = ({ children, number, total }) => {
-  let codeSnippet = null;
-  let childrenWithoutCodeSnippet = null;
-  if (children.length) {
-    codeSnippet = children.find((child) => child?.props?.mdxType === 'pre');
-    childrenWithoutCodeSnippet = children.filter(
-      (child) => child !== codeSnippet
-    );
-  }
+  children = React.Children.toArray(children);
+  const codeSnippet = children.find((child) => child?.props?.mdxType === 'pre');
+  const childrenWithoutCodeSnippet = children.filter(
+    (child) => child !== codeSnippet
+  );
+
   return (
     <div className={styles.wrapper}>
       <p className={styles.stepNumber}>{`Step ${number} of ${total}`}</p>
       <div className={styles.container}>
         <div
-          className={`${styles.stepDetails} ${
-            codeSnippet && styles.stepDetailsWithCode
-          }`}
+          className={cx(styles.stepDetails, {
+            [styles.stepDetailsWithCode]: codeSnippet,
+          })}
         >
-          {childrenWithoutCodeSnippet || children}
+          {childrenWithoutCodeSnippet}
         </div>
-        {codeSnippet && codeSnippet}
+        {codeSnippet}
       </div>
     </div>
   );