Table

1import {
2  Table,
3  TableBody,
4  TableCaption,
5  TableCell,
6  TableFooter,
7  TableHead,
8  TableHeader,
9  TableRow,
10} from "passport-ui";

1<div className="w-md">
2  <Table>
3    <TableCaption>A list of recent invoices.</TableCaption>
4    <TableHeader>
5      <TableRow>
6        <TableHead className="w-[100px]">Invoice</TableHead>
7        <TableHead>Status</TableHead>
8        <TableHead>Method</TableHead>
9        <TableHead className="text-right">Amount</TableHead>
10      </TableRow>
11    </TableHeader>
12    <TableBody>
13      <TableRow>
14        <TableCell className="font-medium">INV001</TableCell>
15        <TableCell>Paid</TableCell>
16        <TableCell>Credit Card</TableCell>
17        <TableCell className="text-right">$250.00</TableCell>
18      </TableRow>
19      <TableRow>
20        <TableCell className="font-medium">INV002</TableCell>
21        <TableCell>Pending</TableCell>
22        <TableCell>PayPal</TableCell>
23        <TableCell className="text-right">$150.00</TableCell>
24      </TableRow>
25    </TableBody>
26    <TableFooter>
27      <TableRow>
28        <TableCell colSpan={3}>Total</TableCell>
29        <TableCell className="text-right">$2,250.00</TableCell>
30      </TableRow>
31    </TableFooter>
32  </Table>
33</div>