created a common tabs component

Author: Nebyt

src/App.js

@@ -4,6 +4,10 @@ import MainTab from './components/tabs/mainTab'
 import TabsComponent from './components/tabs/tabsComponent'
 import useYoroi from './hooks/yoroiProvider'
 import {CONNECTED, NO_CARDANO} from './utils/connectionStates'
+import Cip30Tab from './components/tabs/subtabs/cip30Tab'
+import Cip95Tab from './components/tabs/subtabs/cip95Tab'
+import Cip95TabTools from './components/tabs/subtabs/cip95ToolsTab'
+import NFTTab from './components/tabs/subtabs/NFTTab'
 
 const App = () => {
   const {connectionState} = useYoroi()
@@ -15,11 +19,34 @@ const App = () => {
     isNotCardanoWallet,
   }
 
+  const data = [
+    {
+      label: 'CIP-30',
+      value: 'cip30',
+      children: <Cip30Tab />,
+    },
+    {
+      label: 'CIP-95',
+      value: 'cip95',
+      children: <Cip95Tab />,
+    },
+    {
+      label: 'CIP-95 Tools',
+      value: 'cip95Tools',
+      children: <Cip95TabTools />,
+    },
+    {
+      label: 'NFTs',
+      value: 'nfts',
+      children: <NFTTab />,
+    },
+  ]
+
   return (
     <div className="min-h-screen bg-gray-800">
       <AccessButton />
       <MainTab {...mainTabProps} />
-      <TabsComponent />
+      <TabsComponent tabsData={data} />
     </div>
   )
 }

src/components/tabs/tabsComponent.js

@@ -1,53 +1,27 @@
 import React, {useState} from 'react'
 import {Tabs, TabsHeader, TabsBody, Tab, TabPanel} from '@material-tailwind/react'
-import Cip30Tab from './subtabs/cip30Tab'
-import Cip95Tab from './subtabs/cip95Tab'
-import Cip95TabTools from './subtabs/cip95ToolsTab'
-import NFTTab from './subtabs/NFTTab'
 
-const TabsComponent = () => {
-  const [activeTab, setActiveTab] = useState('cip30')
-  const data = [
-    {
-      label: 'CIP-30',
-      value: 'cip30',
-      children: <Cip30Tab />,
-    },
-    {
-      label: 'CIP-95',
-      value: 'cip95',
-      children: <Cip95Tab />,
-    },
-    {
-      label: 'CIP-95 Tools',
-      value: 'cip95Tools',
-      children: <Cip95TabTools />,
-    },
-    {
-      label: 'NFTs',
-      value: 'nfts',
-      children: <NFTTab />,
-    },
-  ]
+const TabsComponent = ({tabsData}) => {
+  const [activeTab, setActiveTab] = useState(tabsData[0].value)
 
   return (
     <Tabs value={activeTab}>
-      <TabsHeader
-        className="rounded-none border-b-2 border-gray-700 bg-transparent p-0"
-      >
-        {data.map(({label, value}) => (
+      <TabsHeader className="rounded-none border-b-2 border-gray-700 bg-transparent p-0">
+        {tabsData.map(({label, value}) => (
           <Tab
             key={value}
             value={value}
-            className={activeTab === value ? 'bg-orange-700 hover:bg-orange-800 text-white rounded-t-lg' : 'text-gray-300'}
+            className={
+              activeTab === value ? 'bg-orange-700 text-white rounded-t-lg' : 'text-gray-300 border-x border-gray-700'
+            }
             onClick={() => setActiveTab(value)}
-        >
+          >
             {label}
           </Tab>
         ))}
       </TabsHeader>
       <TabsBody>
-        {data.map(({value, children}) => (
+        {tabsData.map(({value, children}) => (
           <TabPanel key={value} value={value} children={children} />
         ))}
       </TabsBody>