mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
tabs component
This commit is contained in:
parent
5bb3744dc3
commit
bc30a13597
25
src/components/atoms/Tabs.module.css
Normal file
25
src/components/atoms/Tabs.module.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.tabList {
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid var(--brand-grey-lighter);
|
||||||
|
padding-top: calc(var(--spacer) / 2);
|
||||||
|
padding-bottom: calc(var(--spacer) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: inline-block;
|
||||||
|
padding: calc(var(--spacer) / 12) var(--spacer);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--brand-grey-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab[aria-selected='true'] {
|
||||||
|
background: var(--brand-black);
|
||||||
|
color: var(--brand-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabContent {
|
||||||
|
padding: var(--spacer);
|
||||||
|
}
|
34
src/components/atoms/Tabs.tsx
Normal file
34
src/components/atoms/Tabs.tsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import React, { ReactElement, ReactNode } from 'react'
|
||||||
|
import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs'
|
||||||
|
import styles from './Tabs.module.css'
|
||||||
|
import shortid from 'shortid'
|
||||||
|
|
||||||
|
interface TabsItem {
|
||||||
|
title: string
|
||||||
|
content: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Tabs({
|
||||||
|
items,
|
||||||
|
className
|
||||||
|
}: {
|
||||||
|
items: TabsItem[]
|
||||||
|
className?: string
|
||||||
|
}): ReactElement {
|
||||||
|
return (
|
||||||
|
<ReactTabs className={`${className && className}`}>
|
||||||
|
<TabList className={styles.tabList}>
|
||||||
|
{items.map((item) => (
|
||||||
|
<Tab className={styles.tab} key={shortid.generate()}>
|
||||||
|
{item.title}
|
||||||
|
</Tab>
|
||||||
|
))}
|
||||||
|
</TabList>
|
||||||
|
<div className={styles.tabContent}>
|
||||||
|
{items.map((item) => (
|
||||||
|
<TabPanel key={shortid.generate()}>{item.content}</TabPanel>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ReactTabs>
|
||||||
|
)
|
||||||
|
}
|
@ -4,29 +4,3 @@
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabList {
|
|
||||||
text-align: center;
|
|
||||||
border-bottom: 1px solid var(--brand-grey-lighter);
|
|
||||||
padding-top: calc(var(--spacer) / 2);
|
|
||||||
padding-bottom: calc(var(--spacer) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
display: inline-block;
|
|
||||||
padding: calc(var(--spacer) / 12) var(--spacer);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
text-transform: uppercase;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--brand-grey-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab[aria-selected='true'] {
|
|
||||||
background: var(--brand-black);
|
|
||||||
color: var(--brand-white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabContent {
|
|
||||||
padding: var(--spacer);
|
|
||||||
}
|
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
|
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import Compute from './Compute'
|
import Compute from './Compute'
|
||||||
import Consume from './Consume'
|
import Consume from './Consume'
|
||||||
import { MetadataMarket } from '../../../@types/Metadata'
|
import { MetadataMarket } from '../../../@types/Metadata'
|
||||||
import { DDO } from '@oceanprotocol/lib'
|
import { DDO } from '@oceanprotocol/lib'
|
||||||
|
import Tabs from '../../atoms/Tabs'
|
||||||
|
|
||||||
export default function AssetActions({
|
export default function AssetActions({
|
||||||
metadata,
|
metadata,
|
||||||
@ -15,23 +15,22 @@ export default function AssetActions({
|
|||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { access } = metadata.additionalInformation
|
const { access } = metadata.additionalInformation
|
||||||
const isCompute = access && access === 'Compute'
|
const isCompute = access && access === 'Compute'
|
||||||
|
const UseContent = isCompute ? (
|
||||||
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 ? (
|
|
||||||
<Compute ddo={ddo} />
|
<Compute ddo={ddo} />
|
||||||
) : (
|
) : (
|
||||||
<Consume ddo={ddo} file={metadata.main.files[0]} />
|
<Consume ddo={ddo} file={metadata.main.files[0]} />
|
||||||
)}
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel>Trade Me</TabPanel>
|
|
||||||
</div>
|
|
||||||
</Tabs>
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{
|
||||||
|
title: 'Use',
|
||||||
|
content: UseContent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Trade',
|
||||||
|
content: 'Trade Me'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return <Tabs items={tabs} className={styles.actions} />
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user