konnosDashboard
AWSPrivateLinkAccountItem.tsx81 lines · main
1import { Edit, MoreVertical, Trash } from 'lucide-react'
2import {
3 Badge,
4 Button,
5 CardContent,
6 DropdownMenu,
7 DropdownMenuContent,
8 DropdownMenuItem,
9 DropdownMenuSeparator,
10 DropdownMenuTrigger,
11} from 'ui'
12
13interface AWSPrivateLinkAccountItemProps {
14 aws_account_id: string
15 account_name?: string
16 status:
17 | 'CREATING'
18 | 'READY'
19 | 'ASSOCIATION_REQUEST_EXPIRED'
20 | 'ASSOCIATION_ACCEPTED'
21 | 'CREATION_FAILED'
22 | 'DELETING'
23 shared_at: string | null
24 onEdit: () => void
25 onDelete: () => void
26}
27
28export const AWSPrivateLinkAccountItem = ({
29 aws_account_id,
30 account_name,
31 status,
32 onEdit,
33 onDelete,
34}: AWSPrivateLinkAccountItemProps) => {
35 const getStatusBadge = () => {
36 switch (status) {
37 case 'ASSOCIATION_ACCEPTED':
38 return <Badge variant="success">Connected</Badge>
39 case 'READY':
40 return <Badge variant="success">Ready</Badge>
41 case 'CREATING':
42 return <Badge variant="warning">Creating</Badge>
43 case 'DELETING':
44 return <Badge variant="destructive">Deleting</Badge>
45 case 'ASSOCIATION_REQUEST_EXPIRED':
46 return <Badge variant="destructive">Expired</Badge>
47 case 'CREATION_FAILED':
48 return <Badge variant="destructive">Failed</Badge>
49 default:
50 return <Badge>Unknown</Badge>
51 }
52 }
53
54 return (
55 <CardContent className="flex items-center justify-between text-sm gap-4">
56 <div className="flex-1">
57 <div>{aws_account_id}</div>
58 <div className="text-sm text-foreground-lighter">{account_name || 'No description'}</div>
59 </div>
60
61 {getStatusBadge()}
62
63 <DropdownMenu>
64 <DropdownMenuTrigger asChild>
65 <Button type="text" className="px-1" icon={<MoreVertical />} />
66 </DropdownMenuTrigger>
67 <DropdownMenuContent align="end" className="w-40">
68 <DropdownMenuItem onClick={onEdit} className="gap-x-2">
69 <Edit size={14} />
70 <span>View account</span>
71 </DropdownMenuItem>
72 <DropdownMenuSeparator />
73 <DropdownMenuItem onClick={onDelete} className="gap-x-2">
74 <Trash size={14} />
75 <span>Delete account</span>
76 </DropdownMenuItem>
77 </DropdownMenuContent>
78 </DropdownMenu>
79 </CardContent>
80 )
81}