feat(docs): act-1392 - added table component (#1439)

src/components/Faucet/TransactionTable.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from "react";
+import Link from "@docusaurus/Link";
+import Badge from "@site/src/components/Badge";
+import Table from "@site/src/components/Table";
+
+const TABLE_DATA = [
+  {
+    id: "01",
+    createdAt: "2024-06-05T13:24:49.207Z",
+    txnHash: "0x38412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    value: "0.0001",
+    status: "success",
+  },
+  {
+    id: "02",
+    createdAt: "2024-05-05T13:24:49.207Z",
+    txnHash: "0x48412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    value: "0.0002",
+    status: "failed",
+  },
+  {
+    id: "03",
+    createdAt: "2024-07-05T13:24:49.207Z",
+    txnHash: "0x58412083eb28fdf332d4ca7e1955cbb40a94adfae14ef7a3e9856f95c32b2ef2",
+    value: "0.0003",
+    status: "pending",
+  },
+];
+
+const hideCenterLetters = (word) => {
+  if (word.length < 10) return word;
+  return `${word.substring(0, 5)}...${word.substring(word.length - 4)}`;
+};
+
+const transformWordEnding = (value, end) => {
+  const upValue = Math.floor(value);
+  return `${upValue} ${end}${upValue === 1 ? "" : "s"} ago`;
+};
+
+const getDiffTime = (time) => {
+  if (!time) return "unknown";
+  const currentTime = Date.now();
+  const startTime = new Date(time).getTime();
+  const deltaTimeInSec = (currentTime - startTime) / 1000;
+  const deltaTimeInMin = deltaTimeInSec / 60;
+  const deltaTimeInHours = deltaTimeInMin / 60;
+  const deltaTimeInDays = deltaTimeInHours / 24;
+
+  if (deltaTimeInMin < 1) return transformWordEnding(deltaTimeInSec, "second");
+  if (deltaTimeInHours < 1) return transformWordEnding(deltaTimeInMin, "minute");
+  if (deltaTimeInDays < 1) return transformWordEnding(deltaTimeInHours, "hour");
+  return transformWordEnding(deltaTimeInDays, "day");
+};
+
+const renderStatus = (status) => {
+  switch (status) {
+    case "success":
+      return "success";
+    case "failed":
+      return "error";
+    default:
+      return "pending";
+  }
+};
+
+export default function TransactionTable() {
+  const dataRows = useMemo(() => {
+    return TABLE_DATA.map((item) => ({
+      cells: [
+        hideCenterLetters(item.txnHash),
+        getDiffTime(item.createdAt),
+        `${item.value} ETH`,
+        <Badge key={item.id} label={item.status} variant={renderStatus(item.status)} />,
+        <Link key={`link-${item.id}`} to="/" target="_blank" rel="noopener noreferrer">
+          View on Etherscan
+        </Link>,
+      ],
+    }));
+  }, []);
+
+  return <Table thCells={["Your Transactions", "Age", "Value", "Status", ""]} trRows={dataRows} />;
+}

src/components/Table/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styles from "./table.module.scss";
+import clsx from "clsx";
+
+type TableCell = string | React.ReactElement;
+
+interface TableRow {
+  cells: TableCell[];
+}
+
+interface ITable {
+  classes?: string;
+  thCells: TableCell[];
+  trRows?: TableRow[];
+}
+
+export default function Table({ classes, thCells = [], trRows = [] }: ITable) {
+  return (
+    <div className={clsx(styles.tableWrapper, classes)}>
+      <div className={styles.tableInner}>
+        <table className={styles.table}>
+          <thead className={styles.thead}>
+            <tr className={styles.throw}>
+              {thCells.map((cell, i) => (
+                <th className={styles.thcell} key={`th-${i}`}>{cell}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {trRows.map((row, i) => (
+              <tr key={`tr-${i}`} className={styles.trow}>
+                {row.cells.map((cell, y) => <td className={styles.tdcell} key={`td-${i}-${y}`}>{cell}</td>)}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

src/components/Table/table.module.scss

@@ -0,0 +1,70 @@
+:root {
+  --table-border-color: rgba(132, 140, 150, 0.16);
+  --table-bg-color: #FFF;
+  --table-bg-thead-color: #F2F4F6;
+}
+
+:root[data-theme='dark'] {
+  --table-border-color: rgba(132, 140, 150, 0.16);
+  --table-bg-color: #24272A;
+  --table-bg-thead-color: #24272A;
+}
+
+.tableWrapper {
+  max-width: 1014px;
+  width: 100%;
+  margin: 0 auto;
+  overflow-x: auto;
+  margin-bottom: 24px;
+}
+
+.tableInner {
+  border: 1px solid var(--table-border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  min-width: 768px;
+}
+
+.table {
+  display: table;
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  margin: 0;
+  background-color: var(--table-bg-color);
+
+  .thead {
+    background-color: var(--table-bg-thead-color);
+  }
+
+  .trow {
+    background-color: transparent;
+    border-top: 1px solid var(--table-border-color);
+  }
+}
+
+.throw {
+  background-color: transparent;
+  border: 0;
+
+  .thcell {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    padding: 16px;
+    text-align: left;
+    background-color: transparent !important;
+    border: 0;
+  }
+}
+
+.tdcell {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  padding: 16px;
+  background-color: transparent;
+  border: 0;
+}

src/pages/developer-tools/faucet.tsx

@@ -8,6 +8,7 @@ import Badge from "@site/src/components/Badge";
 import { Faq } from "@site/src/components/Faucet";
 import { useAlert } from "react-alert";
 import { AlertCommonIssue, AlertCooldown, AlertSuccess } from "@site/src/components/Faucet";
+import TransactionTable from "@site/src/components/Faucet/TransactionTable";
 
 export default function Faucet() {
   const alert = useAlert();
@@ -35,11 +36,7 @@ export default function Faucet() {
             default
           >
             <div>Ethereum Sepolia</div>
-            <ul>
-              <li><Badge variant="success" label="Successful" /></li>
-              <li><Badge variant="error" label="Failed" /></li>
-              <li><Badge label="Pending" /></li>
-            </ul>
+            <TransactionTable />
             <Faq network="sepolia" className={styles.faq}></Faq>
           </TabItem>
           <TabItem