From 8acee02c7bc821d99082ab6b065c84a647d46a19 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Thu, 17 Mar 2022 00:09:56 -0400
Subject: [PATCH] Add table header component
---
src/cryptometrics/components/table/Table.js | 13 +++++++++++++
src/cryptometrics/pages/index.js | 13 +++++++++----
2 files changed, 22 insertions(+), 4 deletions(-)
diff --git a/src/cryptometrics/components/table/Table.js b/src/cryptometrics/components/table/Table.js
index 92d9e8a..aaa7d31 100644
--- a/src/cryptometrics/components/table/Table.js
+++ b/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
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 5612e72..3627429 100644
--- a/src/cryptometrics/pages/index.js
+++ b/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 &&
--
GitLab