konnosDashboard
StorageCredItem.tsx87 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { differenceInDays } from 'date-fns'
3import { MoreVertical, TrashIcon } from 'lucide-react'
4import {
5 Button,
6 DropdownMenu,
7 DropdownMenuContent,
8 DropdownMenuItem,
9 DropdownMenuTrigger,
10 TableCell,
11 TableRow,
12} from 'ui'
13import { Input } from 'ui-patterns/DataInputs/Input'
14
15import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
16
17export const StorageCredItem = ({
18 description,
19 id,
20 created_at,
21 access_key,
22 onDeleteClick,
23}: {
24 description: string
25 id: string
26 created_at: string
27 access_key: string
28 onDeleteClick: (id: string) => void
29}) => {
30 const { can: canRemoveAccessKey } = useAsyncCheckPermissions(
31 PermissionAction.STORAGE_ADMIN_WRITE,
32 '*'
33 )
34
35 function daysSince(date: string) {
36 const now = new Date()
37 const created = new Date(date)
38 const diffInDays = differenceInDays(now, created)
39
40 if (diffInDays === 0) {
41 return 'Today'
42 } else if (diffInDays === 1) {
43 return `${diffInDays} day ago`
44 } else {
45 return `${diffInDays} days ago`
46 }
47 }
48
49 return (
50 <TableRow className="h-8 text-ellipsis group">
51 <TableCell>
52 <span className="text-foreground">{description}</span>
53 </TableCell>
54 <TableCell>
55 <Input readOnly copy value={access_key} className="font-mono" />
56 </TableCell>
57 <TableCell className="text-foreground-lighter whitespace-nowrap">
58 {daysSince(created_at)}
59 </TableCell>
60 <TableCell className="text-right">
61 {canRemoveAccessKey && (
62 <DropdownMenu>
63 <DropdownMenuTrigger asChild>
64 <Button
65 icon={<MoreVertical size={14} strokeWidth={1} />}
66 type="text"
67 className="px-1.5 text-foreground-lighter hover:text-foreground"
68 />
69 </DropdownMenuTrigger>
70 <DropdownMenuContent className="max-w-40" align="end">
71 <DropdownMenuItem
72 className="flex gap-1.5 "
73 onClick={(e) => {
74 e.preventDefault()
75 onDeleteClick(id)
76 }}
77 >
78 <TrashIcon size="14" />
79 Revoke key
80 </DropdownMenuItem>
81 </DropdownMenuContent>
82 </DropdownMenu>
83 )}
84 </TableCell>
85 </TableRow>
86 )
87}