AuthorizedAppRow.tsx50 lines · main

1	import { Trash } from 'lucide-react'
2	import { Button, TableCell, TableRow } from 'ui'
3	import { TimestampInfo } from 'ui-patterns'
4
5	import CopyButton from '@/components/ui/CopyButton'
6	import type { AuthorizedApp } from '@/data/oauth/authorized-apps-query'
7
8	export interface AuthorizedAppRowProps {
9	app: AuthorizedApp
10	onSelectRevoke: () => void
11	}
12
13	export const AuthorizedAppRow = ({ app, onSelectRevoke }: AuthorizedAppRowProps) => {
14	return (
15	<TableRow>
16	<TableCell className="w-[62px] min-w-[62px] max-w-[62px]">
17	<div
18	className="w-[30px] h-[30px] rounded-full bg-no-repeat bg-cover bg-center border border-control flex items-center justify-center text-xs"
19	style={{ backgroundImage: app.icon ? `url('${app.icon}')` : 'none' }}
20	>
21	{!!app.icon ? '' : `${app.name[0]}`}
22	</div>
23	</TableCell>
24	<TableCell>
25	<p className="truncate" title={app.name}>
26	{app.name}
27	</p>
28	</TableCell>
29	<TableCell>{app.created_by}</TableCell>
30	<TableCell>
31	<div className="flex items-center gap-x-2">
32	<p className="text-xs font-mono truncate" title={app.app_id}>
33	{app.app_id}
34	</p>
35	<CopyButton iconOnly type="default" text={app.app_id} className="px-1" />
36	</div>
37	</TableCell>
38	<TableCell>
39	<TimestampInfo
40	utcTimestamp={app.authorized_at ?? ''}
41	labelFormat="DD/MM/YYYY, HH:mm:ss"
42	className="text-sm"
43	/>
44	</TableCell>
45	<TableCell className="text-right">
46	<Button type="default" icon={<Trash />} className="px-1" onClick={() => onSelectRevoke()} />
47	</TableCell>
48	</TableRow>
49	)
50	}