{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-cards",
  "type": "registry:component",
  "description": "A Card component with optional code display for UI blocks.",
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/cards/code/UserCardsCode.tsx",
      "content": "\"use client\";\r\nimport React from \"react\";\r\nimport Image from \"next/image\";\r\nimport { Card } from '@/components/ui/card'\r\nimport { Button } from \"@/components/ui/button\";\r\nconst Usercards = [\r\n  {\r\n    title: \"Andrew Grant\",\r\n    subtitle: \"3 mutual friends\",\r\n    avatar: \"/images/profile/user-6.jpg\",\r\n    userGroup: [\r\n      {\r\n        icon: \"/images/profile/user-6.jpg\",\r\n      },\r\n      {\r\n        icon: \"/images/profile/user-2.jpg\",\r\n      },\r\n      {\r\n        icon: \"/images/profile/user-3.jpg\",\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    title: \"Leo Pratt\",\r\n    subtitle: \"3 mutual friends\",\r\n    avatar: \"/images/profile/user-2.jpg\",\r\n    userGroup: [\r\n      {\r\n        icon: \"/images/profile/user-6.jpg\",\r\n      },\r\n      {\r\n        icon: \"/images/profile/user-2.jpg\",\r\n      },\r\n      {\r\n        icon: \"/images/profile/user-3.jpg\",\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    title: \"Charles Nunez\",\r\n    subtitle: \"3 mutual friends\",\r\n    avatar: \"/images/profile/user-3.jpg\",\r\n    userGroup: [\r\n      {\r\n        icon: \"/images/profile/user-6.jpg\",\r\n      },\r\n      {\r\n        icon: \"/images/profile/user-2.jpg\",\r\n      },\r\n      {\r\n        icon: \"/images/profile/user-3.jpg\",\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    title: \"Lora Powers\",\r\n    subtitle: \"3 mutual friends\",\r\n    avatar: \"/images/profile/user-4.jpg\",\r\n    userGroup: [\r\n      {\r\n        icon: \"/images/profile/user-6.jpg\",\r\n      },\r\n      {\r\n        icon: \"/images/profile/user-2.jpg\",\r\n      },\r\n      {\r\n        icon: \"/images/profile/user-3.jpg\",\r\n      },\r\n    ],\r\n  },\r\n];\r\n\r\nconst UserCards = () => {\r\n  return (\r\n    <>\r\n      <div className=\"grid grid-cols-12 gap-6\">\r\n        {Usercards.map((item, i) => (\r\n          <div className=\"lg:col-span-3 md:col-span-6 col-span-12\" key={i}>\r\n            <Card className=\"flex flex-col gap-2\">\r\n              <Image\r\n                src={item.avatar}\r\n                alt=\"materialm\"\r\n                className=\"h-20 w-20 rounded-full mb-4\"\r\n                height={80}\r\n                width={80}\r\n              />\r\n              <p className=\"text-lg text-inherit\">{item.title}</p>\r\n              <div className=\"flex justify-start gap-2 items-center mb-4\">\r\n                <div className=\"flex ms-2\">\r\n                  {item.userGroup.map((user, index) => (\r\n                    <div className=\"-ms-2  h-8 w-8\" key={index}>\r\n                      <Image\r\n                        src={user.icon}\r\n                        className=\"border-2 border-white dark:border-darkborder rounded-full h-8 w-8\"\r\n                        alt=\"icon\"\r\n                        height={32}\r\n                        width={32}\r\n                      />\r\n                    </div>\r\n                  ))}\r\n                </div>\r\n                <p className=\"text-sm text-daarklink\">{item.subtitle}</p>\r\n              </div>\r\n              <div className=\"flex flex-col gap-4\">\r\n                <Button>Add Friend</Button>\r\n                <Button variant={\"secondary\"}>Remove</Button>\r\n              </div>\r\n            </Card>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default UserCards;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/user-cards/UserCardsCode.tsx"
    }
  ]
}