feat: add main pages

package.json

@@ -24,7 +24,7 @@
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-select": "^2.2.2",
-    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.2.0",
     "@reown/appkit": "^1.6.9",
@@ -34,6 +34,8 @@
     "@tanstack/react-query": "^5.74.4",
     "@tanstack/react-router": "^1.116.0",
     "@tanstack/react-router-devtools": "^1.116.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "graphql": "^16.10.0",

src/components/CopyButton.tsx

@@ -39,7 +39,11 @@ const CopyButton = ({
       <Tooltip open={showTooltip}>
         <TooltipTrigger asChild>
           <button
-            onClick={handleCopy}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleCopy();
+            }}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
             className="hover:before:bg-grey-700 active:before:bg-grey-600 relative z-0 -mx-2 -my-1 flex w-fit items-center gap-1 px-2 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-150 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"

src/components/DataTable.tsx

@@ -0,0 +1,95 @@
+import { Link } from '@tanstack/react-router';
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  tableLength?: number;
+  isLoading?: boolean;
+}
+
+export function DataTable<TData extends { destination: string }, TValue>({
+  columns,
+  data,
+  tableLength = 10,
+  isLoading,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <Table>
+      <TableHeader>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              return (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              );
+            })}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {table.getRowModel().rows.map((row) => (
+          <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+            {row.getVisibleCells().map((cell) => (
+              <TableCell key={cell.id} className="p-0">
+                <Link
+                  className="block px-5 py-6"
+                  to={cell.row.original.destination}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Link>
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+        {data.length === 0 && !isLoading && (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="text-center">
+              <span>No results.</span>
+            </TableCell>
+          </TableRow>
+        )}
+        {Array.from({
+          length:
+            tableLength -
+            data.length -
+            (data.length === 0 && !isLoading ? 1 : 0),
+        }).map((_, index) => (
+          <TableRow key={`empty-${index}`}>
+            {columns.map((_, colIndex) => (
+              <TableCell key={colIndex} className="h-12">
+                &nbsp;
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}