// title: Permissions matrix with role access details per cell import { CheckIcon, MinusIcon } from "lucide-react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; type Access = "full" | "read" | "none"; type Permission = { resource: string; admin: Access; editor: Access; viewer: Access; detail: string; }; const permissions: Permission[] = [ { admin: "full", detail: "Create, update, and delete workspace members and their roles.", editor: "none", resource: "Members", viewer: "none", }, { admin: "full", detail: "Publish, archive, and permanently remove documents.", editor: "full", resource: "Documents", viewer: "read", }, { admin: "full", detail: "Manage API keys, OAuth apps, and third-party connections.", editor: "read", resource: "Integrations", viewer: "none", }, { admin: "full", detail: "View and export activity logs for auditing.", editor: "read", resource: "Audit Logs", viewer: "none", }, ]; const roles = ["admin", "editor", "viewer"] as const; function AccessCell({ access, detail }: { access: Access; detail: string }) { const icon = access === "full" ? ( ) : access === "read" ? ( ) : ( ); const label = access === "full" ? "Full access" : access === "read" ? "Read only" : "No access"; return ( {icon}

{label}

{detail}

); } export function Pattern() { return (

{roles.map((role) => ( ))} {permissions.map(({ resource, admin, editor, viewer, detail }) => ( ))}

Resource	{role}
{resource}

); }