{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-accordion-9","type":"registry:block","title":"User list accordion with avatars and role indicators","description":"User list accordion with avatars and role indicators","dependencies":[],"registryDependencies":["accordion","avatar","@reui/badge","@reui/frame"],"files":[{"path":"c-accordion-9.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\nimport { Frame, FramePanel } from \"@/components/reui/frame\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\n\nconst users = [\n  {\n    id: \"1\",\n    name: \"Alex Johnson\",\n    email: \"alex@apple.com\",\n    role: \"Admin\",\n    avatar:\n      \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n    initials: \"AJ\",\n    content:\n      \"Alex has full administrative access to the platform, including billing management, user provisioning, and security configurations.\",\n  },\n  {\n    id: \"2\",\n    name: \"Sarah Chen\",\n    email: \"sarah@openai.com\",\n    role: \"Viewer\",\n    avatar:\n      \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n    initials: \"SC\",\n    content:\n      \"Sarah has read-only access to projects and reports. She cannot modify settings or invite new members.\",\n  },\n  {\n    id: \"3\",\n    name: \"Michael Rodriguez\",\n    email: \"michael@meta.com\",\n    role: \"Editor\",\n    avatar:\n      \"https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80\",\n    initials: \"MR\",\n    content:\n      \"Michael is part of the design team and has permissions to edit projects, manage assets, and update design system components.\",\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto mb-auto w-full max-w-lg\">\n      <Frame stacked spacing=\"sm\">\n        {users.map((user) => (\n          <FramePanel key={user.id}>\n            <Accordion\n              multiple={false}\n              defaultValue={[\"1\"]}\n              className=\"border-none\"\n            >\n              <AccordionItem\n                value={user.id}\n                className=\"border-none bg-transparent p-0 **:data-[slot=accordion-content]:p-0!\"\n              >\n                <AccordionTrigger className=\"items-center px-1 py-1 hover:no-underline\">\n                  <div className=\"flex items-center gap-2\">\n                    <Avatar className=\"size-8 border\">\n                      <AvatarImage src={user.avatar} alt={user.name} />\n                      <AvatarFallback className=\"text-xs\">\n                        {user.initials}\n                      </AvatarFallback>\n                    </Avatar>\n                    <div className=\"inline-flex items-center gap-2\">\n                      <span className=\"text-foreground/90 font-semibold tracking-tight\">\n                        {user.name}\n                      </span>\n                      <Badge\n                        variant={\n                          user.role === \"Admin\" ? \"success-light\" : \"secondary\"\n                        }\n                        size=\"sm\"\n                      >\n                        {user.role}\n                      </Badge>\n                    </div>\n                  </div>\n                </AccordionTrigger>\n                <AccordionContent className=\"text-muted-foreground py-0 pl-11\">\n                  {user.content}\n                </AccordionContent>\n              </AccordionItem>\n            </Accordion>\n          </FramePanel>\n        ))}\n      </Frame>\n    </div>\n  )\n}","target":"components/examples/c-accordion-9.tsx"}],"meta":{"order":9,"label":"User List"}}