Make Tabs component modular

src/cryptometrics/components/tabs/Tab.js

 import classNames from "classnames";
-import React, { useState } from "react";
+import React from "react";
 
-export function Tabs({ children }) {
-  const [tab, setTab] = useState("card-view");
-
-  return (
-    <div>
-      <div className="flex align-middle w-fit bg-dark-600 rounded-3xl py-2 px-2">
-        {children.map((child) => {
-          const { id } = child.props;
-          return (
-            <Tab key={id} {...child.props} activeTab={tab} onClick={setTab} />
-          );
-        })}
-      </div>
-      {children.map((child) => {
-        if (child.props.id !== tab) return undefined;
-        return child.props.children;
-      })}
-    </div>
-  );
-}
-
-export function Tab({ id, content, activeTab, onClick }) {
+function Tab({ id, content, activeTab, onClick }) {
   return (
     <button
       className={classNames(
@@ -37,3 +16,5 @@ export function Tab({ id, content, activeTab, onClick }) {
     </button>
   );
 }
+
+export default Tab;

src/cryptometrics/components/tabs/Tabs.js

+import React, { useState } from "react";
+import Tab from "./Tab";
+
+function Tabs({ children }) {
+  const [tab, setTab] = useState("card-view");
+
+  return (
+    <div>
+      <div className="flex align-middle w-fit bg-dark-600 rounded-3xl py-2 px-2">
+        {children.map((child) => {
+          const { id } = child.props;
+          return (
+            <Tab key={id} {...child.props} activeTab={tab} onClick={setTab} />
+          );
+        })}
+      </div>
+      {children.map((child) => {
+        if (child.props.id !== tab) return undefined;
+        return child.props.children;
+      })}
+    </div>
+  );
+}
+
+export default Tabs;

src/cryptometrics/components/tabs/index.js

+import Tabs from "./Tabs";
+import Tab from "./Tab";
+
+export { Tab, Tabs };

src/cryptometrics/pages/index.js

@@ -10,7 +10,7 @@ import { useCryptoList } from "../queries";
 import numeral from "numeral";
 import Wrapper from "../components/content/Wrapper";
 import Sidebar from "../components/sidebar/Sidebar";
-import { Tabs, Tab } from "../components/tabs/Tab";
+import { Tabs, Tab } from "../components/tabs";
 import {
   CollectionIcon,
   PlusIcon,