From 54fa2b9c06b4bfe3ce9158d0410b555d23f47452 Mon Sep 17 00:00:00 2001
From: Ed Castro <ed.sdr@outlook.com>
Date: Wed, 2 Oct 2024 18:42:08 -0300
Subject: [PATCH] feat(ui): Add table component and updated in community
 validator

---
 .../src/app/components/delegated-list.tsx     | 218 ++++++++++--------
 packages/ui/src/components/index.ts           |  10 +
 packages/ui/src/components/table.tsx          | 120 ++++++++++
 3 files changed, 253 insertions(+), 95 deletions(-)
 create mode 100644 packages/ui/src/components/table.tsx

diff --git a/apps/commune-validator/src/app/components/delegated-list.tsx b/apps/commune-validator/src/app/components/delegated-list.tsx
index d7c0166..3c4d795 100644
--- a/apps/commune-validator/src/app/components/delegated-list.tsx
+++ b/apps/commune-validator/src/app/components/delegated-list.tsx
@@ -5,7 +5,15 @@ import { usePathname, useRouter } from "next/navigation";
 import { ChevronUpIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 import { useCommune } from "@commune-ts/providers/use-commune";
-import { cn } from "@commune-ts/ui";
+import {
+  cn,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@commune-ts/ui";
 import { formatToken, smallAddress } from "@commune-ts/utils";
 
 import { useDelegateModuleStore } from "~/stores/delegateModuleStore";
@@ -418,99 +426,115 @@ export function DelegatedList() {
           </div>
           {isOpen && (
             <div className="mb-2 flex animate-fade-up flex-col divide-white/20 rounded-3xl border border-white/20 bg-[#898989]/5 p-4 font-semibold text-white backdrop-blur-md">
-              <div className="mb-2 grid grid-cols-3 gap-6 border-b border-white/20 pb-2 text-sm font-semibold text-gray-400 md:grid-cols-4">
-                <div>{activeTab === "modules" ? "Module" : "Subnet"}</div>
-                <div className="hidden md:block">Name</div>
-                <div>{activeTab === "modules" ? "Address" : "Founder"}</div>
-                <div>Percentage</div>
-              </div>
-              {activeTab === "modules" ? (
-                delegatedModules.length ? (
-                  delegatedModules.map((module) => (
-                    <div
-                      key={module.id}
-                      className="mb-2 grid animate-fade-up grid-cols-3 items-center gap-6 border-b border-white/20 pb-2 text-sm animate-delay-100 md:grid-cols-4"
-                    >
-                      <div className="text-white">{module.title}</div>
-                      <div className="hidden text-white md:block">
-                        {module.name}
-                      </div>
-                      <div className="text-gray-400">
-                        {smallAddress(module.address)}
-                      </div>
-                      <div className="flex items-center">
-                        <input
-                          type="number"
-                          value={module.percentage}
-                          onChange={(e) =>
-                            handlePercentageChange(
-                              module.id,
-                              Number(e.target.value),
-                            )
-                          }
-                          className="mr-1 w-12 bg-[#898989]/10 p-1 text-white"
-                          min="0"
-                          max="100"
-                        />
-                        <span className="mr-2 text-white">%</span>
-                        <button
-                          onClick={() => removeModule(module.id)}
-                          className="ml-2 flex items-center rounded-full bg-red-500/10 p-1 text-red-500 hover:bg-red-500/20 hover:text-red-400"
-                        >
-                          <XMarkIcon className="h-4 w-4" />
-                        </button>
-                      </div>
-                    </div>
-                  ))
-                ) : (
-                  <div className="py-6 text-white">
-                    No modules found. Select a module to allocate weight through
-                    the modules page and they will appear here.
-                  </div>
-                )
-              ) : delegatedSubnets.length ? (
-                delegatedSubnets.map((subnet) => (
-                  <div
-                    key={subnet.id}
-                    className="mb-2 grid animate-fade-up grid-cols-3 items-center gap-6 border-b border-white/20 pb-2 text-sm animate-delay-100 md:grid-cols-4"
-                  >
-                    <div className="text-white">{subnet.name}</div>
-                    <div className="hidden text-white md:block">
-                      {subnet.name}
-                    </div>
-                    <div className="text-gray-400">
-                      {smallAddress(subnet.founder)}
-                    </div>
-                    <div className="flex items-center">
-                      <input
-                        type="number"
-                        value={subnet.percentage}
-                        onChange={(e) =>
-                          handlePercentageChange(
-                            subnet.id,
-                            Number(e.target.value),
-                          )
-                        }
-                        className="mr-1 w-12 bg-[#898989]/10 p-1 text-white"
-                        min="0"
-                        max="100"
-                      />
-                      <span className="mr-2 text-white">%</span>
-                      <button
-                        onClick={() => removeSubnet(subnet.id)}
-                        className="ml-2 flex items-center rounded-full bg-red-500/10 p-1 text-red-500 hover:bg-red-500/20 hover:text-red-400"
-                      >
-                        <XMarkIcon className="h-4 w-4" />
-                      </button>
-                    </div>
-                  </div>
-                ))
-              ) : (
-                <div className="py-6 text-white">
-                  No subnets found. Select a subnet to allocate weight through
-                  the subnets page and they will appear here.
-                </div>
-              )}
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>
+                      {activeTab === "modules" ? "Module" : "Subnet"}
+                    </TableHead>
+                    <TableHead className="hidden md:table-cell">Name</TableHead>
+                    <TableHead>
+                      {activeTab === "modules" ? "Address" : "Founder"}
+                    </TableHead>
+                    <TableHead>Percentage</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {activeTab === "modules" ? (
+                    delegatedModules.length ? (
+                      delegatedModules.map((module) => (
+                        <TableRow key={module.id}>
+                          <TableCell className="font-medium">
+                            {module.title}
+                          </TableCell>
+                          <TableCell className="hidden md:table-cell">
+                            {module.name}
+                          </TableCell>
+                          <TableCell className="text-gray-400">
+                            {smallAddress(module.address)}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex items-center">
+                              <input
+                                type="number"
+                                value={module.percentage}
+                                onChange={(e) =>
+                                  handlePercentageChange(
+                                    module.id,
+                                    Number(e.target.value),
+                                  )
+                                }
+                                className="mr-1 w-12 bg-[#898989]/10 p-1 text-white"
+                                min="0"
+                                max="100"
+                              />
+                              <span className="mr-2 text-white">%</span>
+                              <button
+                                onClick={() => removeModule(module.id)}
+                                className="ml-2 flex items-center rounded-full bg-red-500/10 p-1 text-red-500 hover:bg-red-500/20 hover:text-red-400"
+                              >
+                                <XMarkIcon className="h-4 w-4" />
+                              </button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <TableCell colSpan={4} className="text-center">
+                          No modules found. Select a module to allocate weight
+                          through the modules page and they will appear here.
+                        </TableCell>
+                      </TableRow>
+                    )
+                  ) : delegatedSubnets.length ? (
+                    delegatedSubnets.map((subnet) => (
+                      <TableRow key={subnet.id}>
+                        <TableCell className="font-medium">
+                          {subnet.name}
+                        </TableCell>
+                        <TableCell className="hidden md:table-cell">
+                          {subnet.name}
+                        </TableCell>
+                        <TableCell className="text-gray-400">
+                          {smallAddress(subnet.founder)}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center">
+                            <input
+                              type="number"
+                              value={subnet.percentage}
+                              onChange={(e) =>
+                                handlePercentageChange(
+                                  subnet.id,
+                                  Number(e.target.value),
+                                )
+                              }
+                              className="mr-1 w-12 bg-[#898989]/10 p-1 text-white"
+                              min="0"
+                              max="100"
+                            />
+                            <span className="mr-2 text-white">%</span>
+                            <button
+                              onClick={() => removeSubnet(subnet.id)}
+                              className="ml-2 flex items-center rounded-full bg-red-500/10 p-1 text-red-500 hover:bg-red-500/20 hover:text-red-400"
+                            >
+                              <XMarkIcon className="h-4 w-4" />
+                            </button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell colSpan={4} className="text-center">
+                        No subnets found. Select a subnet to allocate weight
+                        through the subnets page and they will appear here.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
               <div className="flex flex-row gap-3">
                 <button
                   onClick={handleAutoCompletePercentage}
@@ -538,7 +562,11 @@ export function DelegatedList() {
                   disabled={submitStatus.disabled}
                   title={submitStatus.disabled ? submitStatus.message : ""}
                 >
-                  {isSubmitting ? "Submitting..." : "Submit"}
+                  {isSubmitting
+                    ? "Submitting..."
+                    : activeTab === "modules"
+                      ? "Submit Modules"
+                      : "Submit Subnets"}
                 </button>
               </div>
             </div>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 89d514e..f12ef24 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -124,3 +124,13 @@ export {
   SheetDescription,
 } from "./sheet";
 export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from "./table";
diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
new file mode 100644
index 0000000..d13e28a
--- /dev/null
+++ b/packages/ui/src/components/table.tsx
@@ -0,0 +1,120 @@
+import * as React from "react";
+
+import { cn } from ".";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-white/20 transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};