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;
|
||||
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 { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
|
||||
import styles from './index.module.css'
|
||||
import Compute from './Compute'
|
||||
import Consume from './Consume'
|
||||
import { MetadataMarket } from '../../../@types/Metadata'
|
||||
import { DDO } from '@oceanprotocol/lib'
|
||||
import Tabs from '../../atoms/Tabs'
|
||||
|
||||
export default function AssetActions({
|
||||
metadata,
|
||||
@ -15,23 +15,22 @@ export default function AssetActions({
|
||||
}): 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 ? (
|
||||
const UseContent = isCompute ? (
|
||||
<Compute ddo={ddo} />
|
||||
) : (
|
||||
<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