{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-cards",
  "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/SocialCardsCode.tsx",
      "content": "\"use client\";\r\nimport React from \"react\";\r\nimport {\r\n  TbBrandFacebook,\r\n  TbBrandGithub,\r\n  TbBrandInstagram,\r\n  TbBrandTwitter,\r\n} from \"react-icons/tb\";\r\nimport Image from \"next/image\";\r\nimport Link from \"next/link\";\r\nimport { Card } from '@/components/ui/card'\r\n\r\nconst profileCards = [\r\n  {\r\n    title: \"Andrew Grant\",\r\n    subtitle: \"Technology Director\",\r\n    avatar: \"/images/profile/user-6.jpg\",\r\n  },\r\n  {\r\n    title: \"Leo Pratt\",\r\n    subtitle: \"Telecom Analyst\",\r\n    avatar: \"/images/profile/user-2.jpg\",\r\n  },\r\n  {\r\n    title: \"Charles Nunez\",\r\n    subtitle: \"Environmental Specialist\",\r\n    avatar: \"/images/profile/user-3.jpg\",\r\n  },\r\n];\r\n\r\n/*--Social Cards--*/\r\nconst socialiconCard = [\r\n  {\r\n    icon: <TbBrandFacebook size={17} />,\r\n    color: \"primary\",\r\n  },\r\n  {\r\n    icon: <TbBrandInstagram size={17} />,\r\n    color: \"error\",\r\n  },\r\n  {\r\n    icon: <TbBrandGithub size={17} />,\r\n    color: \"info\",\r\n  },\r\n  {\r\n    icon: <TbBrandTwitter size={17} />,\r\n    color: \"secondary\",\r\n  },\r\n];\r\nconst SocialCards = () => {\r\n  return (\r\n    <>\r\n      <div className=\"grid grid-cols-12 gap-6\">\r\n        {profileCards.map((item, i) => (\r\n          <div\r\n            className=\"lg:col-span-4  col-span-12 text-center\"\r\n            key={i}\r\n          >\r\n            <Card className=\"px-0 pb-4\">\r\n              <Image\r\n                src={item.avatar}\r\n                alt=\"materialm\"\r\n                className=\"h-20 w-20 rounded-full mx-auto\"\r\n                width={80}\r\n                height={80}\r\n              />\r\n              <div>\r\n                <p className=\"text-lg mt-3 text-inherit\">{item.title}</p>\r\n                <p className=\"text-xs text-darklink\">{item.subtitle}</p>\r\n              </div>\r\n              <div className=\"flex justify-center gap-4 items-center border-t border-ld mt-4 pt-4\">\r\n                {socialiconCard.map((soc, index) => (\r\n                  <Link href={\"\"} className={`text-${soc.color}`} key={index}>{soc.icon}</Link>\r\n                ))}\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 SocialCards;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/social-cards/SocialCardsCode.tsx"
    }
  ]
}