feat(#19): add table components

- add a basic table component
- add a tree table component

dashboard/src/components/Table/Table.tsx

@@ -0,0 +1,27 @@
+import type { ReactElement } from "react";
+
+import { Table, TableHead, TableHeader, TableRow } from "../ui/table"
+
+interface IBaseTable {
+  headers: string[];
+  body: ReactElement;
+}
+
+const BaseTable = ({headers, body}: IBaseTable) : JSX.Element => {
+  return (
+    <div>
+    <Table className="rounded-lg text-black bg-white w-full">
+      <TableHeader className="bg-mediumGray">
+        <TableRow>
+          {headers.map((column) => (
+            <TableHead className="text-black border-b border-darkGray" key={column}>{column}</TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      {body}
+    </Table>
+    </div>
+  );
+};
+
+export default BaseTable;

dashboard/src/components/Table/TreeTable.tsx

@@ -0,0 +1,97 @@
+import { useMemo } from "react";
+
+import { TableRow, TableCell } from "../ui/table";
+
+import BaseTable from "./Table";
+
+interface ITreeTableBody {
+  name: string;
+  branch: string;
+  commit: string;
+  buildStatus: string;
+  testStatus: string;
+}
+
+const treeTableColumns = [
+  "Tree",
+  "Branch",
+  "Commit/tag",
+  "Build Status",
+  "Test Status",
+];
+
+const treeTableRows: ITreeTableBody[] = [
+  {
+    name: "stable-rc",
+    branch: "linux-5.15",
+    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+    buildStatus: "150 completed",
+    testStatus: "80 completed"
+  },
+  {
+    name: "stable-rc",
+    branch: "linux-5.15",
+    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+    buildStatus: "10 completed",
+    testStatus: "150 completed"
+  },
+  {
+    name: "stable-rc",
+    branch: "linux-5.15",
+    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+    buildStatus: "10 completed",
+    testStatus: "150 completed"
+  },
+  {
+    name: "stable-rc",
+    branch: "linux-5.15",
+    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+    buildStatus: "10 completed",
+    testStatus: "150 completed"
+  },
+  {
+    name: "stable-rc",
+    branch: "linux-5.15",
+    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+    buildStatus: "10 completed",
+    testStatus: "150 completed"
+  }
+];
+
+const TreeTableRow = (row: ITreeTableBody): JSX.Element => {
+  return (
+    <TableRow>
+      <TableCell>{row.name}</TableCell>
+      <TableCell>{row.branch}</TableCell>
+      <TableCell>{row.commit}</TableCell>
+      <TableCell><div className="bg-lightGray w-fit h-fit p-1 rounded-lg">{row.buildStatus}</div></TableCell>
+      <TableCell><div className="bg-lightGray w-fit h-fit p-1 rounded-lg">{row.testStatus}</div></TableCell>
+    </TableRow>
+  );
+};
+
+const TreeTable = () : JSX.Element => {
+  const treeTableBody = useMemo(() => {
+    return (
+      treeTableRows.map((row: ITreeTableBody) => (
+        <TreeTableRow 
+          key={row.commit} 
+          name={row.name}
+          branch={row.branch}
+          commit={row.commit}
+          buildStatus={row.buildStatus}
+          testStatus={row.testStatus}/>
+      ))
+    );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeTableRows]);
+
+  return(
+    BaseTable({
+      headers: treeTableColumns,
+      body: <>{treeTableBody}</>
+    })
+  );
+}
+
+export default TreeTable;

dashboard/src/components/ui/table.tsx

@@ -6,7 +6,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className="relative w-full overflow-auto rounded-lg border-t border-x border-darkGray">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}
@@ -20,7 +20,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn("[&_tr]:border-b border-darkGray", className)} {...props} />
 ))
 TableHeader.displayName = "TableHeader"
 

dashboard/tailwind.config.js

@@ -31,6 +31,13 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      colors: {
+        "white": '#FFFFFF',
+        "lightGray": '#F4F4F4',
+        "mediumGray": '#EAEAEA',
+        "darkGray": '#D6D6D6',
+        "black": '#000000'
+      }
     },
   },
   plugins: [require("tailwindcss-animate")],