TableContainer.tsx45 lines · main

1	import { Card, CardContent, cn } from 'ui'
2	import {
3	Table,
4	TableBody,
5	TableHead,
6	TableHeader,
7	TableHeadSort,
8	TableRow,
9	} from 'ui/src/components/shadcn/ui/table'
10
11	import { AccessTokenSort, AccessTokenSortColumn } from '../AccessToken.types'
12
13	const tableHeaderClass = 'text-left font-mono uppercase text-xs text-foreground-lighter py-2'
14
15	interface TableContainerProps {
16	children: React.ReactNode
17	sort: AccessTokenSort
18	onSortChange: (column: AccessTokenSortColumn) => void
19	}
20
21	export const TableContainer = ({ children, sort, onSortChange }: TableContainerProps) => (
22	<Card className="w-full overflow-hidden">
23	<CardContent className="p-0">
24	<Table className="p-5 table-auto">
25	<TableHeader>
26	<TableRow className="bg-200">
27	<TableHead className={tableHeaderClass}>Token</TableHead>
28	<TableHead className={tableHeaderClass}>
29	<TableHeadSort column="last_used_at" currentSort={sort} onSortChange={onSortChange}>
30	Last used
31	</TableHeadSort>
32	</TableHead>
33	<TableHead className={tableHeaderClass}>
34	<TableHeadSort column="expires_at" currentSort={sort} onSortChange={onSortChange}>
35	Expires
36	</TableHeadSort>
37	</TableHead>
38	<TableHead className={cn(tableHeaderClass, 'text-right!')} />
39	</TableRow>
40	</TableHeader>
41	<TableBody>{children}</TableBody>
42	</Table>
43	</CardContent>
44	</Card>
45	)