{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-cards",
  "type": "registry:component",
  "description": "A Card component with optional code display for UI blocks.",
  "dependencies": [
    "@iconify/react",
    "react-icons"
  ],
  "registryDependencies": [
    "card",
    "badge"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/cards/code/BlogCardsCode.tsx",
      "content": "\"use client\";\r\nimport React from \"react\";\r\nimport { Card } from '@/components/ui/card'\r\nimport Image from \"next/image\";\r\nimport { TbPoint } from \"react-icons/tb\";\r\nimport { Icon } from \"@iconify/react\";\r\nimport Link from \"next/link\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\n\r\nconst BlogCardsData = [\r\n  {\r\n    avatar: \"/images/profile/user-6.jpg\",\r\n    coveravatar: \"/images/blog/blog-img1.jpg\",\r\n    read: \"2 min Read\",\r\n    title: \"As yen tumbles, gadget-loving Japan goes for secondhand iPhones\",\r\n    category: \"Social\",\r\n    name: \"Georgeanna Ramero\",\r\n    view: \"9,125\",\r\n    comments: \"3\",\r\n    time: \"Mon, Dec 19\",\r\n    url: ''\r\n  },\r\n  {\r\n    avatar: \"/images/profile/user-2.jpg\",\r\n    coveravatar: \"/images/blog/blog-img2.jpg\",\r\n    read: \"2 min Read\",\r\n    title:\r\n      \"Intel loses bid to revive antitrust case against patent foe Fortress\",\r\n    category: \"Gadget\",\r\n    name: \"Georgeanna Ramero\",\r\n    view: \"4,150\",\r\n    comments: \"38\",\r\n    time: \"Sun, Dec 18\",\r\n    url: ''\r\n  },\r\n  {\r\n    avatar: \"/images/profile/user-3.jpg\",\r\n    coveravatar: \"/images/blog/blog-img3.jpg\",\r\n    read: \"2 min Read\",\r\n    title: \"COVID outbreak deepens as more lockdowns loom in China\",\r\n    category: \"Health\",\r\n    name: \"Georgeanna Ramero\",\r\n    view: \"9,480\",\r\n    comments: \"12\",\r\n    time: \"Sat, Dec 17\",\r\n    url: ''\r\n  },\r\n];\r\n\r\nconst BlogCardsCode = () => {\r\n  return (\r\n    <>\r\n      <div className=\"grid grid-cols-12 gap-6 mt-[30px]\">\r\n        {BlogCardsData.map((item, i) => (\r\n          <div className=\"lg:col-span-4 col-span-12\" key={i}>\r\n            <Link href={item.url} className=\"group\">\r\n              <Card className=\"p-0 overflow-hidden \">\r\n                <div className=\"relative\">\r\n                  <Image src={item.coveravatar} alt=\"tailwindadmin\" width={400} height={250} />\r\n                  <Badge\r\n                    variant={\"white\"}\r\n                    className=\"absolute bottom-5 end-5 rounded-md font-semibold\"\r\n                  >\r\n                    {item.read}\r\n                  </Badge>\r\n                </div>\r\n                <div className=\"px-6 pb-6\">\r\n                  <Image\r\n                    src={item.avatar}\r\n                    className=\"h-10 w-10 rounded-full -mt-7 relative z-1\"\r\n                    alt=\"user\"\r\n                    width={40}\r\n                    height={40}\r\n                  />\r\n                  <Badge variant={\"white\"} className=\"mt-6 rounded-md\">\r\n                    {item.category}\r\n                  </Badge>\r\n                  <p className=\"text-lg my-6 text-inherit group-hover:text-primary line-clamp-2\">{item.title}</p>\r\n                  <div className=\"flex\">\r\n                    <div className=\"flex gap-2 me-6 items-center\">\r\n                      <Icon icon=\"tabler:eye\" height={18} className=\"text-ld\" />\r\n                      <span className=\"text-sm text-darklink\">{item.view}</span>\r\n                    </div>\r\n                    <div className=\"flex gap-2 items-center\">\r\n                      <Icon icon=\"tabler:message-2\" height={18} className=\"text-ld\" />\r\n                      <span className=\"text-sm text-darklink\">{item.view}</span>\r\n                    </div>\r\n                    <div className=\"flex gap-1 items-center ms-auto\">\r\n                      <TbPoint\r\n                        size={15}\r\n                        className=\"text-ld\"\r\n                      />{\" \"}\r\n                      <span className=\"text-sm text-darklink\">{item.time}</span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </Card>\r\n            </Link>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default BlogCardsCode;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/blog-cards/BlogCardsCode.tsx"
    }
  ]
}