remove non-JSX codeblock from Icon component preview

renderer/src/builtins/dashboard/pages/docs/components/Icons.jsx

@@ -1,12 +1,13 @@
 import { ContentSidebar, Section, Content, Layout } from '@vizality/components/dashboard';
 import { Icon, CodeBlock, ComponentPreview, FilterInput } from '@vizality/components';
+import { getRandomItem } from '@vizality/util/array';
 import { joinClassNames } from '@vizality/util/dom';
 import { getModule } from '@vizality/webpack';
 import React, { memo, useState } from 'react';
 import { useFilter } from '@vizality/hooks';
 
 /**
- * 
+ *
  * @component
  * @private
  * @returns
@@ -24,26 +25,24 @@ const Search = memo(({ query, handleQueryChange }) => (
 ));
 
 /**
- * 
+ *
  * @component
  * @private
  * @returns
  */
-const DocsIcon = memo(({ icon, selectedIcon, handleSelectedIcon }) => {
-  return (
-    <Icon
-      name={icon}
-      tooltip={icon}
-      vz-active={Boolean(selectedIcon === icon) && ''}
-      className='vz-docs-components-icons-icon-wrapper'
-      iconClassName='vz-docs-components-icons-icon'
-      onClick={() => handleSelectedIcon(icon)}
-    />
-  );
-});
+const DocsIcon = memo(({ icon, selectedIcon, handleSelectedIcon }) => (
+  <Icon
+    name={icon}
+    tooltip={icon}
+    vz-active={Boolean(selectedIcon === icon) && ''}
+    className='vz-docs-components-icons-icon-wrapper'
+    iconClassName='vz-docs-components-icons-icon'
+    onClick={() => handleSelectedIcon(icon)}
+  />
+));
 
 /**
- * 
+ *
  * @component
  * @private
  * @returns
@@ -74,32 +73,20 @@ const Preview = memo(({ icons, query, selectedIcon, handleSelectedIcon }) => {
 });
 
 /**
- * 
+ *
  * @component
  * @private
  * @returns
  */
-const CodeBlocks = memo(({ selectedIcon }) => {
-  return (
-    <>
-      <CodeBlock language='js' header='JSX' content={
-        `import React from 'react';\n` +
-        `import { Icon } from '@vizality/components';\n\n` +
-        `<Icon name='${selectedIcon}' />`}
-      />
-      <CodeBlock language='js' header='React' content={
-        `import React from 'react';\n` +
-        `import { Icon } from '@vizality/components';\n\n` +
-        `React.createElement(Icon, {\n` +
-        `  name: '${selectedIcon}'\n` +
-        `});`}
-      />
-    </>
-  );
-});
+const CodeBlocks = memo(({ selectedIcon }) => (
+  <CodeBlock language='js' header='JSX' content={
+    `import { Icon } from '@vizality/components';\n\n` +
+    `<Icon name='${selectedIcon}' />`}
+  />
+));
 
 /**
- * 
+ *
  * @component
  * @private
  * @returns
@@ -125,29 +112,30 @@ const Aside = memo(({ selectedIcon }) => {
 });
 
 /**
- * 
+ *
  * @component
  * @returns
  */
 export default memo(() => {
-  const [ selectedIcon, setSelectedIcon ] = useState(Icon.Names[0]);
+  const [ selectedIcon, setSelectedIcon ] = useState(getRandomItem(Icon.Names));
   const [ query, setQuery, filteredResults ] = useFilter({ data: Icon.Names });
 
   /**
-   * 
-   * @param {*} query 
-   * @returns 
+   *
+   * @param {*} query
+   * @returns
    */
   const handleQueryChange = query => {
     return setQuery(query);
   };
 
   /**
-   * 
-   * @param {*} icon 
-   * @returns 
+   *
+   * @param {*} icon
+   * @returns
    */
   const handleSelectedIcon = icon => {
+    console.log(icon);
     return setSelectedIcon(icon);
   };