Make table more modular

src/cryptometrics/components/table/Table.js

 import classNames from "classnames";
 import React from "react";
 
-export function Table({ children, className }) {
+function Table({ children, className }) {
   return <table className={classNames("w-full", className)}>{children}</table>;
 }
 
-export function TableRow({ children, className }) {
-  return (
-    <tr
-      className={classNames(
-        "w-full flex justify-between dark:bg-dark-600 my-4 mx-2 px-6 rounded-2xl cursor-pointer text-slate-900 dark:text-white hover:dark:bg-slate-900",
-        className
-      )}
-    >
-      {children}
-    </tr>
-  );
-}
-
-export function TableHeader({ children, className }) {
-  return (
-    <th
-      className={classNames(
-        "w-full flex justify-between dark:bg-dark-800 shadow-lg shadow-dark-800 my-4 mx-2 px-6 text-slate-900 dark:text-white",
-        className
-      )}
-    >
-      {children}
-    </th>
-  );
-}
-
-export function TableCell({ children, className }) {
-  return (
-    <td
-      className={classNames(
-        "flex flex-col justify-center items-center align-middle h-20 px-4 font-semibold",
-        className
-      )}
-    >
-      {children}
-    </td>
-  );
-}
+export default Table;

src/cryptometrics/components/table/TableCell.js

+import classNames from "classnames";
+import React from "react";
+
+function TableCell({ children, className }) {
+  return (
+    <td
+      className={classNames(
+        "flex flex-col justify-center items-center align-middle h-20 px-4 font-semibold",
+        className
+      )}
+    >
+      {children}
+    </td>
+  );
+}
+
+export default TableCell;

src/cryptometrics/components/table/TableHeader.js

+import classNames from "classnames";
+import React from "react";
+
+function TableHeader({ children, className }) {
+  return (
+    <th
+      className={classNames(
+        "w-full flex justify-between dark:bg-dark-800 shadow-lg shadow-dark-800 my-4 mx-2 px-6 text-slate-900 dark:text-white",
+        className
+      )}
+    >
+      {children}
+    </th>
+  );
+}
+
+export default TableHeader;

src/cryptometrics/components/table/TableRow.js

+import classNames from "classnames";
+import React from "react";
+
+function TableRow({ children, className }) {
+  return (
+    <tr
+      className={classNames(
+        "w-full flex justify-between dark:bg-dark-600 my-4 mx-2 px-6 rounded-2xl cursor-pointer text-slate-900 dark:text-white hover:dark:bg-slate-900",
+        className
+      )}
+    >
+      {children}
+    </tr>
+  );
+}
+export default TableRow;

src/cryptometrics/components/table/index.js

+import Table from "./Table";
+import TableCell from "./TableCell";
+import TableRow from "./TableRow";
+import TableHeader from "./TableHeader";
+
+export { Table, TableHeader, TableRow, TableCell };

src/cryptometrics/pages/index.js

@@ -21,12 +21,7 @@ import { useFilters, useOnClickOutside } from "../hooks";
 import { Filter, Filters } from "../components/filters";
 import FilterDropdown from "../components/dropdown/FilterDropdown";
 import { filterOptions } from "../constants";
-import {
-  Table,
-  TableCell,
-  TableHeader,
-  TableRow,
-} from "../components/table/Table";
+import { Table, TableCell, TableHeader, TableRow } from "../components/table";
 import Image from "next/image";
 import CryptoRowLineChart from "../components/charts/CryptoRowLineChart";
 import classNames from "classnames";