Add a tabs components

src/cryptometrics/components/tabs/Tab.js

+import classNames from "classnames";
+import React, { useState, useEffect } from "react";
+
+export function Tabs({ children }) {
+  const [tab, setTab] = useState("card-view");
+  useEffect(() => {
+    console.log(tab);
+  }, [tab]);
+
+  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 }) {
+  return (
+    <button
+      className={classNames(
+        "h-10 py-2 px-6 mx-1 rounded-2xl text-white font-semibold hover:bg-dark-800",
+        {
+          "bg-dark-800": activeTab === id,
+        }
+      )}
+      onClick={() => onClick(id)}
+    >
+      {content}
+    </button>
+  );
+}