{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "top-cards",
  "type": "registry:component",
  "description": "A Card component with optional code display for UI blocks.",
  "dependencies": [
    "swiper"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/cards/code/TopCardsCode.tsx",
      "content": "\"use client\"\r\nimport Image from \"next/image\"\r\n// Import Swiper React components\r\nimport { Swiper, SwiperSlide } from 'swiper/react';\r\nimport { Autoplay } from \"swiper/modules\";\r\nimport { Card } from \"@/components/ui/card\"\r\n\r\n// Import Swiper styles\r\nimport 'swiper/css';\r\nimport Link from \"next/link\"\r\n\r\nconst TopCards = () => {\r\n\r\n    const TopCardInfo = [\r\n        {\r\n            key: \"card1\",\r\n            title: \"Invoices\",\r\n            desc: \"59\",\r\n            img: \"/images/svgs/icon-connect.svg\",\r\n            bgcolor: \"bg-lightprimary dark:bg-lightprimary \",\r\n            textclr: \"text-primary dark:text-primary\",\r\n            url: \"/apps/invoice/list\"\r\n        },\r\n        {\r\n            key: \"card2\",\r\n            title: \"Chats\",\r\n            desc: \"3,560\",\r\n            img: \"/images/svgs/icon-speech-bubble.svg\",\r\n            bgcolor: \"bg-lightsuccess dark:bg-lightsuccess\",\r\n            textclr: \"text-success dark:text-success\",\r\n            url: \"/apps/chats\"\r\n        },\r\n        {\r\n            key: \"card3\",\r\n            title: \"Blogs\",\r\n            desc: \"696\",\r\n            img: \"/images/svgs/icon-favorites.svg\",\r\n            bgcolor: \"bg-lighterror dark:bg-lighterror\",\r\n            textclr: \"text-error dark:text-error\",\r\n            url: \"/apps/blog/post\"\r\n        },\r\n        {\r\n            key: \"card4\",\r\n            title: \"Emails\",\r\n            desc: \"356\",\r\n            img: \"/images/svgs/icon-mailbox.svg\",\r\n            bgcolor: \"bg-lightsecondary dark:bg-lightsecondary\",\r\n            textclr: \"text-secondary dark:text-secondary\",\r\n            url: \"/apps/email\"\r\n        },\r\n        {\r\n            key: \"card5\",\r\n            title: \"Products\",\r\n            desc: \"$96k\",\r\n            img: \"/images/svgs/icon-briefcase.svg\",\r\n            bgcolor: \"bg-lightwarning dark:bg-lightwarning\",\r\n            textclr: \"text-warning dark:text-warning\",\r\n            url: \"/apps/ecommerce/shop\"\r\n\r\n        },\r\n        {\r\n            key: \"card6\",\r\n            title: \"Followers\",\r\n            desc: \"96\",\r\n            img: \"/images/svgs/icon-user-male.svg\",\r\n            bgcolor: \"bg-lightprimary dark:bg-lightprimary\",\r\n            textclr: \"text-primary dark:text-primary\",\r\n            url: \"/apps/user-profile/followers\"\r\n        },\r\n        {\r\n            key: \"card7\",\r\n            title: \"Blogs\",\r\n            desc: \"696\",\r\n            img: \"/images/svgs/icon-favorites.svg\",\r\n            bgcolor: \"bg-lighterror dark:bg-lighterror\",\r\n            textclr: \"text-error dark:text-error\",\r\n            url: \"/apps/blog/post\"\r\n        },\r\n    ]\r\n\r\n\r\n    return (\r\n        <>\r\n            <div>\r\n                <Swiper\r\n                    slidesPerView={6}\r\n                    spaceBetween={24}\r\n                    loop={true}\r\n                    freeMode={false}\r\n                    grabCursor={true}\r\n                    speed={5000}\r\n                    autoplay={{\r\n                        delay: 0,\r\n                        disableOnInteraction: false,\r\n                    }}\r\n                    modules={[Autoplay]}\r\n                    breakpoints={{\r\n                        0: { slidesPerView: 1, spaceBetween: 10 },\r\n                        640: { slidesPerView: 2, spaceBetween: 14 },\r\n                        768: { slidesPerView: 3, spaceBetween: 18 },\r\n                        1030: { slidesPerView: 4, spaceBetween: 18 },\r\n                        1200: { slidesPerView: 6, spaceBetween: 24 },\r\n                    }}\r\n                    className=\"mySwiper\"\r\n                >\r\n                    {\r\n                        TopCardInfo.map((item) => {\r\n                            return (\r\n                                <SwiperSlide key={item.key} >\r\n                                    <Link href={item.url} >\r\n                                        <Card className={`shadow-none ${item.bgcolor} border-0 w-full`}>\r\n                                            <div className=\"text-center\">\r\n                                                <div className=\"flex justify-center\">\r\n                                                    <Image src={item.img}\r\n                                                        width=\"50\" height=\"50\" className=\"mb-3\" alt=\"profile-image !w-full !h-auto\" />\r\n                                                </div>\r\n                                                <p className={`font-semibold ${item.textclr} mb-1`}>\r\n                                                    {item.title}\r\n                                                </p>\r\n                                                <h5 className={`text-lg font-semibold ${item.textclr} mb-0`}>{item.desc}</h5>\r\n                                            </div>\r\n                                        </Card>\r\n                                    </Link>\r\n                                </SwiperSlide>\r\n                            )\r\n                        })\r\n                    }\r\n\r\n                </Swiper>\r\n            </div>\r\n        </>\r\n    )\r\n}\r\nexport default TopCards",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/top-cards/TopCards.tsx"
    }
  ]
}