oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

preview component

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-07-17 16:52:39 +02:00
parent 5bac951c66
commit c4f2df15e5
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 85 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/pages/Publish/Preview.module.css Normal file
View File

@ -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);
}

48
src/components/pages/Publish/Preview.tsx Normal file
View File

@ -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>
)
}

31
src/components/pages/Publish/index.module.css
View File

@ -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);
}

49
src/components/pages/Publish/index.tsx
View File

@ -1,22 +1,17 @@
import React, { ReactElement } from 'react'
import { useNavigate } from '@reach/router'
import PublishForm from './PublishForm'
import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
import { toast } from 'react-toastify'
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 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'
import Preview from './Preview'
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}>
<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>
<Preview values={values} />
<Web3Feedback />
</div>
</aside>