TokenPermissionSection.tsx51 lines · main

1	import { ChevronDown, ChevronRight } from 'lucide-react'
2	import { useState } from 'react'
3	import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
4
5	import { PermissionsList } from './PermissionList'
6
7	const PERMISSIONS_COLLAPSE_THRESHOLD = 5
8
9	interface TokenPermissionsSectionProps {
10	groupedPermissions: Record<string, string[]>
11	totalCount: number
12	}
13
14	export const TokenPermissionsSection = ({
15	groupedPermissions,
16	totalCount,
17	}: TokenPermissionsSectionProps) => {
18	const [permissionsOpen, setPermissionsOpen] = useState(false)
19	const shouldCollapse = totalCount > PERMISSIONS_COLLAPSE_THRESHOLD
20
21	if (totalCount === 0) return null
22
23	return (
24	<div className="pt-4 border-t border-default">
25	{shouldCollapse ? (
26	<Collapsible open={permissionsOpen} onOpenChange={setPermissionsOpen}>
27	<CollapsibleTrigger asChild>
28	<Button
29	type="text"
30	size="tiny"
31	className="w-full justify-start px-0.5 h-auto text-sm font-medium text-foreground-light hover:text-foreground"
32	>
33	<div className="flex items-center gap-1.5">
34	{permissionsOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
35	<span>Permissions assigned to this token ({totalCount})</span>
36	</div>
37	</Button>
38	</CollapsibleTrigger>
39	<CollapsibleContent className="pt-3 transition-all data-closed:animate-collapsible-up data-open:animate-collapsible-down">
40	<PermissionsList groupedPermissions={groupedPermissions} />
41	</CollapsibleContent>
42	</Collapsible>
43	) : (
44	<>
45	<h3 className="text-sm font-medium mb-3">Permissions assigned to this token:</h3>
46	<PermissionsList groupedPermissions={groupedPermissions} />
47	</>
48	)}
49	</div>
50	)
51	}