tabs component

src/components/atoms/Tabs.module.css

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

src/components/atoms/Tabs.tsx

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

src/components/organisms/AssetActions/index.module.css

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

src/components/organisms/AssetActions/index.tsx

@@ -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 ? (
-            <Compute ddo={ddo} />
-          ) : (
-            <Consume ddo={ddo} file={metadata.main.files[0]} />
-          )}
-        </TabPanel>
-        <TabPanel>Trade Me</TabPanel>
-      </div>
-    </Tabs>
+  const UseContent = isCompute ? (
+    <Compute ddo={ddo} />
+  ) : (
+    <Consume ddo={ddo} file={metadata.main.files[0]} />
   )
+
+  const tabs = [
+    {
+      title: 'Use',
+      content: UseContent
+    },
+    {
+      title: 'Trade',
+      content: 'Trade Me'
+    }
+  ]
+
+  return <Tabs items={tabs} className={styles.actions} />
 }