{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "recent-messages",
  "type": "registry:component",
  "description": "A Card component with optional code display for UI blocks.",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/cards/code/RecentMessagesCode.tsx",
      "content": "\"use client\";\r\nimport { Card } from \"@/components/ui/card\";\r\nimport Image from \"next/image\";\r\n\r\nconst messages = [\r\n    {\r\n        id: 1,\r\n        name: \"Pavan Kumar\",\r\n        email: \"info@wrappixel.com\",\r\n        avatar: \"/images/profile/user-1.jpg\",\r\n        status: \"online\",\r\n    },\r\n    {\r\n        id: 2,\r\n        name: \"Els Idunn\",\r\n        email: \"pamela1987@gmail.com\",\r\n        avatar: \"/images/profile/user-2.jpg\",\r\n        status: \"away\",\r\n    },\r\n    {\r\n        id: 3,\r\n        name: \"Arijit Sinh\",\r\n        email: \"cruise1298.fplip@gmail.com\",\r\n        avatar: \"/images/profile/user-3.jpg\",\r\n        status: \"away\",\r\n    },\r\n    {\r\n        id: 4,\r\n        name: \"Micheal Doe\",\r\n        email: \"kat@gmail.com\",\r\n        avatar: \"/images/profile/user-4.jpg\",\r\n        status: \"away\",\r\n    },\r\n    {\r\n        id: 5,\r\n        name: \"Alexandra\",\r\n        email: \"pamela1987@gmail.com\",\r\n        avatar: \"/images/profile/user-5.jpg\",\r\n        status: \"away\",\r\n    },\r\n    {\r\n        id: 6,\r\n        name: \"James Smith\",\r\n        email: \"info@wrappixel.com\",\r\n        avatar: \"/images/profile/user-6.jpg\",\r\n        status: \"online\",\r\n    },\r\n];\r\n\r\nconst statusColors: Record<string, string> = {\r\n    online: \"bg-green-500\",\r\n    away: \"bg-orange-500\",\r\n};\r\n\r\nconst RecentMessagess = () => {\r\n    return (\r\n        <Card className=\"pb-4 p-0\">\r\n            <h3 className=\"text-lg font-semibold text-dark dark:text-white p-7\">Messages</h3>\r\n            <div className=\"h-[350px] overflow-y-auto\">\r\n                <ul className=\"divide-y\">\r\n                    {messages.map((msg) => (\r\n                        <li key={msg.id} className=\"flex items-center gap-5 p-4 px-6\">\r\n                            <div className=\"relative\">\r\n                                <Image\r\n                                    src={msg.avatar}\r\n                                    alt={msg.name}\r\n                                    width={40}\r\n                                    height={40}\r\n                                    className=\"rounded-full\"\r\n                                />\r\n                                <span\r\n                                    className={`absolute top-0.5 right-0.5 block h-1.5 w-1.5 rounded-full ring-2 ring-white ${statusColors[msg.status]}`}\r\n                                />\r\n                            </div>\r\n                            <div>\r\n                                <h4 className=\"text-base\">{msg.name}</h4>\r\n                                <p className=\"text-sm text-darklink\">{msg.email}</p>\r\n                            </div>\r\n                        </li>\r\n                    ))}\r\n                </ul>\r\n            </div>\r\n        </Card>\r\n    );\r\n};\r\n\r\nexport default RecentMessagess;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/recent-messages/RecentMessagesCode.tsx"
    }
  ]
}