{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "recent-comments",
  "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/RecentCommentsCardsCode.tsx",
      "content": "import { Card } from '@/components/ui/card'\r\nimport Image from \"next/image\";\r\nimport { Badge, BadgeProps } from \"@/components/ui/badge\";\r\nimport { format } from \"date-fns\";\r\nimport { Icon } from \"@iconify/react/dist/iconify.js\";\r\n\r\nconst RecentCommentData = [\r\n    {\r\n        profileimg: \"/images/profile/user-3.jpg\",\r\n        name: \"James Anderson\",\r\n        descp: \"Lorem Ipsum is simply dummy text of the printing and type etting industry\",\r\n        tag: \"Pending\",\r\n        tagVariant: \"lightSecondary\",\r\n        date: \"2025-06-12\",\r\n    },\r\n    {\r\n        profileimg: \"/images/profile/user-4.jpg\",\r\n        name: \"Michael Jorden\",\r\n        descp: \"Lorem Ipsum is simply dummy text of the printing and type etting industry\",\r\n        tag: \"Approved\",\r\n        tagVariant: \"lightSuccess\",\r\n        date: \"2025-03-24\",\r\n    },\r\n    {\r\n        profileimg: \"/images/profile/user-5.jpg\",\r\n        name: \"Johnathan Doeting\",\r\n        descp: \"Lorem Ipsum is simply dummy text of the printing and type etting industry\",\r\n        tag: \"Rejected\",\r\n        tagVariant: \"lightError\",\r\n        date: \"2025-02-18\",\r\n    },\r\n    {\r\n        profileimg: \"/images/profile/user-2.jpg\",\r\n        name: \"James Anderson\",\r\n        descp: \"Lorem Ipsum is simply dummy text of the printing and type etting industry\",\r\n        tag: \"Pending\",\r\n        tagVariant: \"lightSecondary\",\r\n        date: \"2025-02-01\",\r\n    },\r\n];\r\n\r\nconst RecentCommentsCards = () => {\r\n    return (\r\n        <>\r\n            <Card className=\"pb-4 p-0\">\r\n                <h3 className=\"font-semibold text-lg text-inherit p-7\">Recent Comments</h3>\r\n                <div className=\"h-[450px] overflow-y-auto\">\r\n                    {RecentCommentData.map((item, i) => {\r\n                        return (\r\n                            <div key={i} className=\"flex gap-3.5 p-4 not-last:border-b border-gray-200 dark:border-white/15\">\r\n                                <div>\r\n                                    <Image src={item?.profileimg} alt=\"profile-img\" width={50} height={50} className=\"rounded-full\" />\r\n                                </div>\r\n                                <div className=\"group flex flex-col gap-1\">\r\n                                    <h4 className=\"text-base\">{item?.name}</h4>\r\n                                    <p className=\"text-sm text-darklink\">{item?.descp}</p>\r\n                                    <div className=\"flex items-center gap-4 mt-2\">\r\n                                        <Badge variant={item?.tagVariant as BadgeProps['variant']} className=\"w-fit border-0 py-1\">\r\n                                            {item?.tag}\r\n                                        </Badge>\r\n                                        <div className={`${item?.tag == 'Approved' ? 'flex' : 'group-hover:flex hidden'} items-center gap-4`}>\r\n                                            <Icon icon=\"solar:pen-new-square-linear\" width=\"16\" height=\"16\" className=\"hover:text-primary cursor-pointer\" />\r\n                                            <Icon icon=\"solar:unread-linear\" width=\"22\" height=\"22\" className=\"hover:text-primary cursor-pointer\" />\r\n                                            <Icon icon=\"solar:heart-linear\" width=\"18\" height=\"18\" className={`${item?.tag == 'Approved' ? 'text-error' : 'hover:text-primary'} cursor-pointer`} />\r\n                                        </div>\r\n                                    </div>\r\n                                    <p className=\"text-sm flex justify-end\">{format(new Date(item?.date), \"MMM dd, yyyy\")}</p>\r\n                                </div>\r\n                            </div>\r\n                        )\r\n                    })}\r\n                </div>\r\n            </Card>\r\n        </>\r\n    );\r\n};\r\n\r\nexport default RecentCommentsCards;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/recent-comments/RecentCommentsCardsCode.tsx"
    }
  ]
}