konnosDashboard
TokenCells.tsx62 lines · main
1import dayjs from 'dayjs'
2import { TimestampInfo } from 'ui-patterns/TimestampInfo'
3import { TableCell } from 'ui/src/components/shadcn/ui/table'
4
5interface TokenNameCellProps {
6 name: string
7 tokenAlias: string
8}
9
10export const TokenNameCell = ({ name, tokenAlias }: TokenNameCellProps) => (
11 <TableCell className="w-auto max-w-96">
12 <p className="truncate" title={name}>
13 {name}
14 </p>
15 <p
16 className="font-mono text-foreground-lighter truncate text-xs mt-1 max-w-32 sm:max-w-48 lg:max-w-full"
17 title={tokenAlias}
18 >
19 {tokenAlias}
20 </p>
21 </TableCell>
22)
23
24interface LastUsedCellProps {
25 lastUsedAt: string | null | undefined
26}
27
28export const LastUsedCell = ({ lastUsedAt }: LastUsedCellProps) => (
29 <TableCell className="text-foreground-light min-w-28">
30 {lastUsedAt ? (
31 <TimestampInfo
32 utcTimestamp={lastUsedAt}
33 label={dayjs(lastUsedAt).fromNow()}
34 className="text-sm"
35 />
36 ) : (
37 <p className="text-foreground-light text-sm">Never used</p>
38 )}
39 </TableCell>
40)
41
42interface ExpiresCellProps {
43 expiresAt: string | null | undefined
44}
45
46export const ExpiresCell = ({ expiresAt }: ExpiresCellProps) => (
47 <TableCell className="min-w-28 text-foreground-light">
48 {expiresAt ? (
49 dayjs(expiresAt).isBefore(dayjs()) ? (
50 <TimestampInfo utcTimestamp={expiresAt} label="Expired" className="text-sm" />
51 ) : (
52 <TimestampInfo
53 utcTimestamp={expiresAt}
54 label={dayjs(expiresAt).format('DD MMM YYYY')}
55 className="text-sm"
56 />
57 )
58 ) : (
59 <p className="text-foreground-light text-sm">Never</p>
60 )}
61 </TableCell>
62)