Pool Table

1"use client";
2 
3import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
4import React from "react";
5import { TokenIconGroup } from "@/registry/sol/token-icon-group";
6import {
7  Table,
8  TableBody,
9  TableCell,
10  TableHead,
11  TableHeader,
12  TableRow,
13} from "@/components/ui/table";
14import type { SortDirection } from "@/registry/lib/sort-utils";
15import { compareValues } from "@/registry/lib/sort-utils";
16import { cn } from "@/lib/utils";
17 
18interface PoolTableColumn {
19  key: string;
20  label: string;
21  className?: string;
22}
23 
24interface PoolTableRow {
25  icons: { src: string; alt?: string }[];
26  name?: string;
27  data: Record<string, string>;
28}
29 
30interface PoolTableProps {
31  columns: PoolTableColumn[];
32  rows: PoolTableRow[];
33  actions?: React.ReactNode[];
34  className?: string;
35}
36 
37const PoolTable = ({ columns, rows, actions, className }: PoolTableProps) => {
38  const showActions = actions && actions.length > 0;
39  const [sortKey, setSortKey] = React.useState<string | null>(null);
40  const [sortDirection, setSortDirection] = React.useState<SortDirection>(null);
41 
42  const handleSort = (key: string) => {
43    if (sortKey !== key) {
44      setSortKey(key);
45      setSortDirection("asc");
46    } else if (sortDirection === "asc") {
47      setSortDirection("desc");
48    } else {
49      setSortKey(null);
50      setSortDirection(null);
51    }
52  };
53 
54  const sortedIndices = React.useMemo(() => {
55    const indices = rows.map((_, i) => i);
56    if (!sortKey || !sortDirection) return indices;
57 
58    return indices.sort((a, b) => {
59      let valA: string;
60      let valB: string;
61 
62      if (sortKey === "__name__") {
63        valA =
64          rows[a].name ??
65          rows[a].icons
66            .map((t) => t.alt)
67            .filter(Boolean)
68            .join("/");
69        valB =
70          rows[b].name ??
71          rows[b].icons
72            .map((t) => t.alt)
73            .filter(Boolean)
74            .join("/");
75      } else {
76        valA = rows[a].data[sortKey] ?? "";
77        valB = rows[b].data[sortKey] ?? "";
78      }
79 
80      const result = compareValues(valA, valB);
81      return sortDirection === "desc" ? -result : result;
82    });
83  }, [rows, sortKey, sortDirection]);
84 
85  return (
86    <Table className={className}>
87      <TableHeader>
88        <TableRow>
89          <TableHead>
90            <button
91              type="button"
92              onClick={() => handleSort("__name__")}
93              className={cn(
94// … truncated