{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-links-01",
  "title": "Social Links 01",
  "author": "ncdai <dai@chanhdai.com>",
  "description": "A social links section with a lined grid layout.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://chanhdai.com/r/style.json"
  ],
  "files": [
    {
      "path": "src/registry/blocks/social-links-01/social-links-01.tsx",
      "content": "import { ArrowUpRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function SocialLinks01() {\n  return (\n    <div className=\"max-w-screen overflow-x-clip\">\n      <div className=\"container mx-auto px-4\">\n        <div className=\"relative border-x border-line\">\n          <div className=\"pointer-events-none absolute inset-0 -z-1 hidden gap-2 sm:grid sm:grid-cols-2 md:grid-cols-3\">\n            <div className=\"border-r border-line\" />\n            <div className=\"border-l border-line md:border-x\" />\n            <div className=\"border-l border-line max-md:hidden\" />\n          </div>\n\n          <ul className=\"grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3\">\n            {SOCIAL_LINKS.map((link, index) => {\n              return (\n                <li\n                  key={index}\n                  className={cn(\n                    \"max-sm:screen-line-top max-sm:screen-line-bottom\",\n                    \"sm:max-md:nth-[2n+1]:screen-line-top sm:max-md:nth-[2n+1]:screen-line-bottom\",\n                    \"md:nth-[3n+1]:screen-line-top md:nth-[3n+1]:screen-line-bottom\"\n                  )}\n                >\n                  <SocialLinkItem {...link} />\n                </li>\n              )\n            })}\n          </ul>\n        </div>\n      </div>\n    </div>\n  )\n}\n\ntype SocialLink = {\n  icon: string\n  title: string\n  href: string\n}\n\nfunction SocialLinkItem({ icon, title, href }: SocialLink) {\n  return (\n    <div className=\"relative flex cursor-pointer items-center gap-4 p-4 pr-2 transition-[background-color] ease-out hover:bg-accent/50 dark:hover:bg-accent/20\">\n      <div className=\"relative shrink-0 [--image-radius:var(--radius-lg)]\">\n        <img\n          className=\"size-8 rounded-(--image-radius) select-none\"\n          src={icon}\n          alt={`${title} logo`}\n        />\n        <div className=\"pointer-events-none absolute inset-0 rounded-(--image-radius) inset-ring-1 inset-ring-black/10 dark:inset-ring-white/15\" />\n      </div>\n\n      <h3 className=\"flex-1 font-medium\">\n        <a href={href} target=\"_blank\" rel=\"noopener\">\n          <span className=\"absolute inset-0\" aria-hidden />\n          {title}\n        </a>\n      </h3>\n\n      <ArrowUpRightIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n    </div>\n  )\n}\n\nconst SOCIAL_LINKS: SocialLink[] = [\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/x.webp\",\n    title: \"X\",\n    href: \"https://x.com/iamncdai\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/github.webp\",\n    title: \"GitHub\",\n    href: \"https://github.com/ncdai\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/linkedin.webp\",\n    title: \"LinkedIn\",\n    href: \"https://linkedin.com/in/ncdai\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/dailydotdev.webp\",\n    title: \"daily.dev\",\n    href: \"https://app.daily.dev/ncdai\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/discord.webp\",\n    title: \"Discord\",\n    href: \"https://discord.com/users/1186630645443739651\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/youtube.webp\",\n    title: \"YouTube\",\n    href: \"https://www.youtube.com/@ncdai\",\n  },\n]\n",
      "type": "registry:component",
      "target": "@components/social-links-01.tsx"
    }
  ],
  "meta": {
    "createdAt": "2026-06-16",
    "previewClassName": "min-h-svh content-center-safe"
  },
  "categories": [
    "marketing"
  ],
  "type": "registry:block"
}