preview component

src/components/pages/Publish/Preview.module.css

@@ -0,0 +1,31 @@
+.preview {
+  font-size: var(--font-size-small);
+  margin-bottom: var(--spacer);
+}
+
+.preview header {
+  margin-bottom: var(--spacer);
+}
+
+.metaFull {
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: 1fr 1fr;
+}
+
+.preview h2 {
+  font-size: var(--font-size-h3);
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.preview h3 {
+  margin-bottom: calc(var(--spacer) / 12);
+}
+
+.preview [class*='MetaItem-module--metaItem'] {
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.file {
+  margin-bottom: calc(var(--spacer) / 2);
+}

src/components/pages/Publish/Preview.tsx

@@ -0,0 +1,48 @@
+import React, { ReactElement } from 'react'
+import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
+import Markdown from '../../atoms/Markdown'
+import Tags from '../../atoms/Tags'
+import MetaItem from '../../organisms/AssetContent/MetaItem'
+import styles from './Preview.module.css'
+import File from '../../atoms/File'
+import { MetadataPublishForm } from '../../../@types/Metadata'
+
+export default function Preview({
+  values
+}: {
+  values: MetadataPublishForm
+}): ReactElement {
+  return (
+    <div className={styles.preview}>
+      <header>
+        <h2>{values.name}</h2>
+        {values.description && <Markdown text={values.description} />}
+        {values.files && values.files.length && (
+          <File
+            file={values.files[0] as FileMetadata}
+            className={styles.file}
+            small
+          />
+        )}
+        {values.tags && <Tags items={values.tags.split(',')} />}
+      </header>
+
+      <div className={styles.metaFull}>
+        {Object.entries(values)
+          .filter(
+            ([key, value]) =>
+              !(
+                key.includes('name') ||
+                key.includes('description') ||
+                key.includes('tags') ||
+                key.includes('files') ||
+                key.includes('termsAndConditions')
+              )
+          )
+          .map(([key, value]) => (
+            <MetaItem key={key} title={key} content={value} />
+          ))}
+      </div>
+    </div>
+  )
+}

src/components/pages/Publish/index.module.css

@@ -15,34 +15,3 @@
     top: calc(var(--spacer) / 2);
   }
 }
-
-.preview {
-  font-size: var(--font-size-small);
-  margin-bottom: var(--spacer);
-}
-
-.preview header {
-  margin-bottom: var(--spacer);
-}
-
-.metaFull {
-  display: grid;
-  gap: var(--spacer);
-  grid-template-columns: 1fr 1fr;
-}
-
-.preview h2 {
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
-.preview h3 {
-  margin-bottom: calc(var(--spacer) / 12);
-}
-
-.preview [class*='MetaItem-module--metaItem'] {
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
-.file {
-  margin-bottom: calc(var(--spacer) / 2);
-}

src/components/pages/Publish/index.tsx

@@ -1,22 +1,17 @@
 import React, { ReactElement } from 'react'
 import { useNavigate } from '@reach/router'
-import PublishForm from './PublishForm'
+import { toast } from 'react-toastify'
-import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
+import { Formik } from 'formik'
+import { usePublish } from '@oceanprotocol/react'
 import styles from './index.module.css'
+import PublishForm from './PublishForm'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import { FormContent } from '../../../@types/Form'
-import { Formik } from 'formik'
 import { initialValues, validationSchema } from './validation'
-import { usePublish } from '@oceanprotocol/react'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { MetadataPublishForm } from '../../../@types/Metadata'
 import { transformPublishFormToMetadata } from './utils'
-import { toast } from 'react-toastify'
+import Preview from './Preview'
-import Markdown from '../../atoms/Markdown'
-import Tags from '../../atoms/Tags'
-import MetaItem from '../../organisms/AssetContent/MetaItem'
-import FileInfo from '../../molecules/FormFields/FilesInput/Info'
-import File from '../../atoms/File'
 
 export default function PublishPage({
   content
@@ -84,39 +79,7 @@ export default function PublishPage({
             <PublishForm content={content.form} />
             <aside>
               <div className={styles.sticky}>
-                <div className={styles.preview}>
+                <Preview values={values} />
-                  <header>
-                    <h2>{values.name}</h2>
-                    {values.description && (
-                      <Markdown text={values.description} />
-                    )}
-                    {values.files && values.files.length && (
-                      <File
-                        file={values.files[0] as FileMetadata}
-                        className={styles.file}
-                        small
-                      />
-                    )}
-                    {values.tags && <Tags items={values.tags.split(',')} />}
-                  </header>
-
-                  <div className={styles.metaFull}>
-                    {Object.entries(values)
-                      .filter(
-                        ([key, value]) =>
-                          !(
-                            key.includes('name') ||
-                            key.includes('description') ||
-                            key.includes('tags') ||
-                            key.includes('files') ||
-                            key.includes('termsAndConditions')
-                          )
-                      )
-                      .map(([key, value]) => (
-                        <MetaItem key={key} title={key} content={value} />
-                      ))}
-                  </div>
-                </div>
                 <Web3Feedback />
               </div>
             </aside>