Add table header component

src/cryptometrics/components/table/Table.js

@@ -18,6 +18,19 @@ export function TableRow({ children, className }) {
   );
 }
 
+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

src/cryptometrics/pages/index.js

@@ -21,7 +21,12 @@ import { useFilters, useOnClickOutside } from "../hooks";
 import { Filter, FilterButton, Filters } from "../components/filters/Filter";
 import { FilterDropdown } from "../components/dropdown/FilterDropdown";
 import { filterOptions } from "../constants";
-import { Table, TableCell, TableRow } from "../components/table/Table";
+import {
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+} from "../components/table/Table";
 import Image from "next/image";
 import CryptoRowLineChart from "../components/charts/CryptoRowLineChart";
 import classNames from "classnames";
@@ -166,8 +171,8 @@ export default function Home() {
               >
                 <Table>
                   {/* Table Header */}
-                  <TableRow className="h-14 items-center sticky top-0 z-40">
-                    <TableCell className="w-6 h-10"></TableCell>
+                  <TableHeader className="h-14 items-center sticky top-0 z-40">
+                    <TableCell className="w-6 h-10 text-center">Icon</TableCell>
                     <TableCell className="w-24 h-10">
                       <p className="font-medium text-base text-center">Name</p>
                     </TableCell>
@@ -196,7 +201,7 @@ export default function Home() {
                         </p>
                       </div>
                     </TableCell>
-                  </TableRow>
+                  </TableHeader>
 
                   {/* Table Content */}
                   {!listOfCoins.isLoading &&