{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "members-02",
  "title": "Members 02",
  "description": "A simple members block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "table"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/members-02/components/members.tsx",
      "content": "import { Dot, Eye, Pencil, Search, ShieldCheck, UserPlus } from \"lucide-react\";\nimport { Avatar, AvatarFallback } from \"@/registry/bases/radix/ui/avatar\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\";\n\nexport default function Members() {\n  return (\n    <div className=\"px-6 py-12\">\n      <div className=\"mx-auto max-w-3xl\">\n        <div className=\"flex justify-between gap-4 rounded-lg bg-muted/90 px-6 py-5 max-[32rem]:flex-col min-[32rem]:items-center\">\n          <div>\n            <h2 className=\"font-medium text-lg\">Members</h2>\n            <div className=\"mt-0.5 flex items-center text-muted-foreground text-sm\">\n              <span>Team Avengers</span> <Dot /> <span>10 Members</span>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Button size=\"icon\" variant=\"outline\">\n              <Search />\n            </Button>\n            <Button>\n              <UserPlus /> Invite Members\n            </Button>\n          </div>\n        </div>\n\n        <Table className=\"mt-5 px-6\">\n          <TableHeader>\n            <TableRow className=\"*:py-3 *:first:ps-6 *:last:pe-6\">\n              <TableHead>Name</TableHead>\n              <TableHead>Email</TableHead>\n              <TableHead>Role</TableHead>\n              <TableHead>Joined</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {members.map((member) => {\n              const RoleIcon = roleIcons[member.role as keyof typeof roleIcons];\n\n              return (\n                <TableRow\n                  className=\"*:py-3 *:first:ps-6 *:last:pe-6\"\n                  key={member.name}\n                >\n                  <TableCell>\n                    <div className=\"flex items-center gap-1\">\n                      <Avatar className=\"size-7\">\n                        <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>\n                      </Avatar>\n                      <span className=\"ml-2\">{member.name}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell>{member.email}</TableCell>\n                  <TableCell>\n                    <div className=\"flex items-center gap-2\">\n                      <RoleIcon className=\"size-4.5\" />\n                      <span>{member.role}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell>{member.joined}</TableCell>\n                </TableRow>\n              );\n            })}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n}\n\nconst roleIcons = {\n  Admin: ShieldCheck,\n  Editor: Pencil,\n  Viewer: Eye,\n};\nconst members = [\n  {\n    name: \"Sarah Chen\",\n    email: \"sarah.chen@company.com\",\n    role: \"Admin\",\n    joined: \"2021-01-01\",\n  },\n  {\n    name: \"Michael Rodriguez\",\n    email: \"michael.rodriguez@company.com\",\n    role: \"Editor\",\n    joined: \"2021-01-02\",\n  },\n  {\n    name: \"Emily Johnson\",\n    email: \"emily.johnson@company.com\",\n    role: \"Viewer\",\n    joined: \"2021-01-03\",\n  },\n  {\n    name: \"David Kim\",\n    email: \"david.kim@company.com\",\n    role: \"Viewer\",\n    joined: \"2021-01-04\",\n  },\n  {\n    name: \"Lisa Thompson\",\n    email: \"lisa.thompson@company.com\",\n    role: \"Viewer\",\n    joined: \"2021-01-05\",\n  },\n];\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}