konnosDashboard
AccessTokenNewBanner.tsx68 lines · main
1import { X } from 'lucide-react'
2import { toast } from 'sonner'
3import { Button } from 'ui'
4import { Admonition } from 'ui-patterns'
5import { Input } from 'ui-patterns/DataInputs/Input'
6
7import { useGroupedPermissions } from '../hooks/useGroupedPermissions'
8import { TokenPermissionsSection } from './TokenPermissionSection'
9
10interface AccessTokenNewBannerProps<T> {
11 token: T
12 onClose: () => void
13 getTokenValue: (token: T) => string
14 getTokenPermissions?: (token: T) => string[] | undefined
15 title?: string
16 description?: string
17}
18
19export const AccessTokenNewBanner = <T,>({
20 token,
21 onClose,
22 getTokenValue,
23 getTokenPermissions,
24 title = 'Successfully generated a new token!',
25 description = 'Copy this access token and store it in a secure place. You will not be able to see it again.',
26}: AccessTokenNewBannerProps<T>) => {
27 const tokenPermissions = getTokenPermissions?.(token)
28 const { groupedPermissions, totalCount } = useGroupedPermissions(tokenPermissions)
29
30 return (
31 <Admonition
32 type="tip"
33 title={title}
34 className="mb-6 relative"
35 actions={
36 <Button
37 type="text"
38 icon={<X />}
39 className="w-7 h-7 absolute top-2.5 right-2.5"
40 onClick={onClose}
41 />
42 }
43 >
44 <div className="space-y-4">
45 <p className="text-sm text-foreground-light">{description}</p>
46 <div className="w-full pb-2">
47 <Input
48 copy
49 readOnly
50 size="small"
51 className="w-full input-mono"
52 id="access-token-value"
53 value={getTokenValue(token)}
54 onChange={() => {}}
55 onCopy={() => toast.success('Token copied to clipboard')}
56 />
57 </div>
58
59 {tokenPermissions && tokenPermissions.length > 0 && (
60 <TokenPermissionsSection
61 groupedPermissions={groupedPermissions}
62 totalCount={totalCount}
63 />
64 )}
65 </div>
66 </Admonition>
67 )
68}