PermissionList.tsx28 lines · main

1	interface PermissionsListProps {
2	groupedPermissions: Record<string, string[]>
3	}
4
5	export const PermissionsList = ({ groupedPermissions }: PermissionsListProps) => {
6	return (
7	<div className="gap-2 flex flex-col">
8	{Object.entries(groupedPermissions).map(([accessLevel, resources]) => (
9	<div key={accessLevel} className="flex flex-wrap gap-1.5">
10	<span className="text-xs text-foreground-lighter font-mono uppercase tracking-wide">
11	{accessLevel}:
12	</span>
13	<div className="flex flex-wrap gap-1.5">
14	{resources.map((resource, index) => (
15	<span
16	key={`${accessLevel}-${resource}`}
17	className="text-xs text-foreground capitalize"
18	>
19	{resource}
20	{index < resources.length - 1 ? ',' : '.'}
21	</span>
22	))}
23	</div>
24	</div>
25	))}
26	</div>
27	)
28	}