{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "music-cards",
  "type": "registry:component",
  "description": "A Card component with optional code display for UI blocks.",
  "dependencies": [
    "@iconify/react"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/cards/code/MusicCardsCode.tsx",
      "content": "\"use client\";\r\nimport { Icon } from \"@iconify/react\";\r\nimport Image from \"next/image\";\r\nimport React from \"react\";\r\nimport { Card } from '@/components/ui/card'\r\n/*--Music Cards--*/\r\nconst musicCard = [\r\n  {\r\n    title: \"Uptown Funk\",\r\n    subheader: \"Jon Bon Jovi\",\r\n    img: \"/images/blog/blog-img4.jpg\",\r\n  },\r\n  {\r\n    title: \"Blank Space\",\r\n    subheader: \"Madonna\",\r\n    img: \"/images/blog/blog-img5.jpg\",\r\n  },\r\n  {\r\n    title: \"Lean On\",\r\n    subheader: \"Jennifer Lopez\",\r\n    img: \"/images/blog/blog-img3.jpg\",\r\n  },\r\n];\r\n\r\nconst MusicCards = () => {\r\n  return (\r\n    <>\r\n      <div className=\"grid grid-cols-12 gap-6\">\r\n        {musicCard.map((item, i) => (\r\n          <div className=\"lg:col-span-4 col-span-12\" key={i}>\r\n            <Card className=\"overflow-hidden p-0\">\r\n              <div className=\"grid grid-cols-12 gap-6\">\r\n                <div className=\"col-span-6 p-6\">\r\n                  <h3 className=\"text-lg \">{item.title}</h3>\r\n                  <p className=\"text-darklink\">{item.subheader}</p>\r\n                  <div className=\"flex justify-between items-center pt-12 cursor-pointer\" >\r\n                    <Icon icon=\"tabler:player-skip-back\" height={22} />\r\n                    <Icon icon=\"tabler:player-play\" className=\"text-error\" height={20} />\r\n                    <Icon icon=\"tabler:player-skip-forward\" height={22} />\r\n                  </div>\r\n                </div>\r\n                <div className=\"col-span-6\">\r\n                  <Image src={item.img} alt=\"tailwindadmin\" className=\"h-full object-cover\" width=\"1080\" height=\"720\" />\r\n                </div>\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 MusicCards;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/music-cards/MusicCardsCode.tsx"
    }
  ]
}