2020-07-08 17:57:53 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
|
|
|
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
|
|
|
|
import styles from './index.module.css'
|
|
|
|
import Compute from './Compute'
|
|
|
|
import Consume from './Consume'
|
2020-07-16 13:39:02 +02:00
|
|
|
import { MetadataMarket } from '../../../@types/Metadata'
|
2020-07-21 14:04:32 +02:00
|
|
|
import { DDO } from '@oceanprotocol/lib'
|
2020-07-08 17:57:53 +02:00
|
|
|
|
|
|
|
export default function AssetActions({
|
|
|
|
metadata,
|
2020-07-21 13:21:22 +02:00
|
|
|
ddo
|
2020-07-08 17:57:53 +02:00
|
|
|
}: {
|
2020-07-16 13:39:02 +02:00
|
|
|
metadata: MetadataMarket
|
2020-07-21 13:21:22 +02:00
|
|
|
ddo: DDO
|
2020-07-08 17:57:53 +02:00
|
|
|
}): ReactElement {
|
|
|
|
const { access } = metadata.additionalInformation
|
|
|
|
const isCompute = access && access === 'Compute'
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Tabs className={styles.actions}>
|
|
|
|
<TabList className={styles.tabList}>
|
|
|
|
<Tab className={styles.tab}>Use</Tab>
|
|
|
|
<Tab className={styles.tab}>Trade</Tab>
|
|
|
|
</TabList>
|
|
|
|
<div className={styles.tabContent}>
|
|
|
|
<TabPanel>
|
|
|
|
{isCompute ? (
|
2020-07-21 13:21:22 +02:00
|
|
|
<Compute ddo={ddo} />
|
2020-07-08 17:57:53 +02:00
|
|
|
) : (
|
2020-07-21 13:21:22 +02:00
|
|
|
<Consume ddo={ddo} file={metadata.main.files[0]} />
|
2020-07-08 17:57:53 +02:00
|
|
|
)}
|
|
|
|
</TabPanel>
|
|
|
|
<TabPanel>Trade Me</TabPanel>
|
|
|
|
</div>
|
|
|
|
</Tabs>
|
|
|
|
)
|
|
|
|
}
|