Recent Transactions Table

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
"use client";
 
import {
  forwardRef,
  useMemo,
  useState,
  type ComponentPropsWithoutRef,
} from "react";
 
import { cn } from "@/lib/cn";
import { ChevronLeft, ChevronRight } from "lucide-react";
 
type Transaction = Readonly<{
  id: string;
  label: string;
  date: string;
  amount: number;
}>;
 
const TRANSACTIONS: Transaction[] = [
  { id: "t1", label: "Payment from Northwind", date: "Mar 8", amount: 420 },
  { id: "t2", label: "AWS infrastructure", date: "Mar 8", amount: -31.2 },
  { id: "t3", label: "Stripe payout", date: "Mar 7", amount: 890 },
  { id: "t4", label: "Refund — Order #3207", date: "Mar 6", amount: -64 },
  { id: "t5", label: "Client retainer", date: "Mar 5", amount: 250 },
  { id: "t6", label: "Figma subscription", date: "Mar 4", amount: -15 },
  { id: "t7", label: "Wire transfer", date: "Mar 3", amount: 1000 },
  { id: "t8", label: "Payroll", date: "Mar 2", amount: -890 },
];
 
const PAGE_SIZE = 5;
 
type RecentTransactionsTableProps = ComponentPropsWithoutRef<"div">;
 
// Recent transactions — Stripe-style payment list with pagination.
export const RecentTransactionsTable = forwardRef<
  HTMLDivElement,
  RecentTransactionsTableProps
>(function RecentTransactionsTable({ className, ...props }, ref) {
  const [page, setPage] = useState(0);
 
  const totalPages = Math.ceil(TRANSACTIONS.length / PAGE_SIZE);
  const slice = useMemo(
    () => TRANSACTIONS.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE),
    [page],
  );
 
  function formatAmount(n: number) {
    const abs = Math.abs(n).toFixed(2);
    return n >= 0 ? `+$${abs}` : `−$${abs}`;
  }
 
  return (
    <div
      ref={ref}
      className={cn(
        "w-full max-w-md overflow-hidden rounded-xl border border-neutral-200 bg-white",
        className,
      )}
      {...props}
    >
      <div className="border-b border-neutral-100 px-4 py-3">
        <p className="text-sm font-semibold text-neutral-900">Transactions</p>
        <p className="text-xs text-neutral-500">This month</p>
      </div>
 
      <table className="w-full border-collapse text-left text-sm">
        <thead>
          <tr className="text-xs text-neutral-500">
            <th className="px-4 py-2.5 font-medium">Description</th>
            <th className="px-3 py-2.5 font-medium">Date</th>
            <th className="px-4 py-2.5 text-right font-medium">Amount</th>
          </tr>
        </thead>
        <tbody>
          {slice.map((tx) => (
            <tr
              key={tx.id}
              className="border-t border-neutral-100 transition-colors hover:bg-neutral-50/80"
            >
              <td className="max-w-[10rem] truncate px-4 py-3 font-medium text-neutral-900">
                {tx.label}
              </td>
              <td className="px-3 py-3 text-neutral-500">{tx.date}</td>
              <td
                className={cn(
                  "px-4 py-3 text-right tabular-nums",
                  tx.amount >= 0 ? "text-neutral-900" : "text-neutral-500",
                )}
              >
                {formatAmount(tx.amount)}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
 
      <div className="flex items-center justify-between border-t border-neutral-100 px-4 py-2.5">
        <button
          type="button"
          disabled={page === 0}
          onClick={() => setPage((p) => p - 1)}
          className="flex size-7 items-center justify-center rounded-md text-neutral-500 transition-colors enabled:hover:bg-neutral-100 disabled:opacity-30"
          aria-label="Previous page"
        >
          <ChevronLeft className="size-4" strokeWidth={2} />
        </button>
        <span className="text-xs text-neutral-500">
          Page {page + 1} of {totalPages}
        </span>
        <button
          type="button"
          disabled={page >= totalPages - 1}
          onClick={() => setPage((p) => p + 1)}
          className="flex size-7 items-center justify-center rounded-md text-neutral-500 transition-colors enabled:hover:bg-neutral-100 disabled:opacity-30"
          aria-label="Next page"
        >
          <ChevronRight className="size-4" strokeWidth={2} />
        </button>
      </div>
    </div>
  );
});
 
RecentTransactionsTable.displayName = "RecentTransactionsTable";