diff --git a/client/src/components/templates/Asset/AssetDetails.tsx b/client/src/components/templates/Asset/AssetDetails.tsx index 222143f..03ffc49 100644 --- a/client/src/components/templates/Asset/AssetDetails.tsx +++ b/client/src/components/templates/Asset/AssetDetails.tsx @@ -5,6 +5,7 @@ import Markdown from '../../atoms/Markdown' import CategoryLink from '../../atoms/CategoryLink' import styles from './AssetDetails.module.scss' import AssetFilesDetails from './AssetFilesDetails' +import Report from './Report' interface AssetDetailsProps { metadata: MetaData @@ -58,6 +59,8 @@ export default class AssetDetails extends PureComponent { /> )} + +

{ files={base.files ? base.files : []} ddo={ddo} /> - - {/*
-                    {JSON.stringify(metadata, null, 2)}
-                
*/} ) } diff --git a/client/src/components/templates/Asset/Report.module.scss b/client/src/components/templates/Asset/Report.module.scss new file mode 100644 index 0000000..ab68549 --- /dev/null +++ b/client/src/components/templates/Asset/Report.module.scss @@ -0,0 +1,33 @@ +@import '../../../styles/variables'; + +.actions { + text-align: right; + margin-top: $spacer; +} + +.openLink { + margin: 0; + font-size: $font-size-small; +} + +.info { + padding: $spacer; + border: 1px solid $brand-grey-lighter; + border-radius: $border-radius; + margin-bottom: $spacer; + + h3 { + font-size: $font-size-base; + margin-top: 0; + margin-bottom: $spacer / 4; + } + + p { + border-bottom: 1px solid $brand-grey-lighter; + padding-bottom: $spacer / 2; + } + + code { + padding: 0; + } +} diff --git a/client/src/components/templates/Asset/Report.tsx b/client/src/components/templates/Asset/Report.tsx new file mode 100644 index 0000000..b49f8d2 --- /dev/null +++ b/client/src/components/templates/Asset/Report.tsx @@ -0,0 +1,56 @@ +import React, { PureComponent } from 'react' +import Modal from '../../atoms/Modal' +import styles from './Report.module.scss' +import Button from '../../atoms/Button' +import Input from '../../atoms/Form/Input' +import Form from '../../atoms/Form/Form' + +export default class Report extends PureComponent< + { did: string; title: string }, + { isModalOpen: boolean } +> { + public state = { + isModalOpen: false + } + + public toggleModal = () => { + this.setState({ isModalOpen: !this.state.isModalOpen }) + } + + public render() { + return ( +
+ + +
+

{this.props.title}

+

+ {this.props.did} +

+ +
+ + +
+
+
+
+ ) + } +}