{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-links",
  "type": "registry:block",
  "title": "Social links",
  "description": "Social links",
  "files": [
    {
      "path": "components/usages/sociallinksusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { SocialLinks } from \"@/registry/open-source/social-links\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<SocialLinks\r\n\t\t\t\tsocials={[\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tname: \"Instagram\",\r\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tname: \"LinkedIn\",\r\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tname: \"Spotify\",\r\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tname: \"TikTok\",\r\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\r\n\t\t\t\t\t},\r\n\t\t\t\t]}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/sociallinksusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { SocialLinks } from \"@/registry/open-source/social-links\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<SocialLinks\r\n\t\t\t\tsocials={[\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tname: \"Instagram\",\r\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tname: \"LinkedIn\",\r\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tname: \"Spotify\",\r\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tname: \"TikTok\",\r\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\r\n\t\t\t\t\t},\r\n\t\t\t\t]}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/social-links.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\n// Credit:\n// https://21st.dev/serafimcloud/social-links/default\n\ninterface Social {\n\tname: string;\n\timage: string;\n}\n\ninterface SocialLinksProps extends React.HTMLAttributes<HTMLDivElement> {\n\tsocials: Social[];\n}\n\nexport function SocialLinks({\n\tsocials,\n\tclassName,\n\t...props\n}: SocialLinksProps) {\n\tconst [hoveredSocial, setHoveredSocial] = React.useState<string | null>(\n\t\tnull\n\t);\n\tconst [rotation, setRotation] = React.useState<number>(0);\n\tconst [clicked, setClicked] = React.useState<boolean>(false);\n\n\tconst animation = {\n\t\tscale: clicked ? [1, 1.3, 1] : 1,\n\t\ttransition: { duration: 0.3 },\n\t};\n\n\tReact.useEffect(() => {\n\t\tconst handleClick = () => {\n\t\t\tsetClicked(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetClicked(false);\n\t\t\t}, 200);\n\t\t};\n\t\twindow.addEventListener(\"click\", handleClick);\n\t\treturn () => window.removeEventListener(\"click\", handleClick);\n\t}, [clicked]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex items-center justify-center gap-0\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{socials.map((social, index) => (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"relative cursor-pointer px-5 py-2 transition-opacity duration-200\",\n\t\t\t\t\t\thoveredSocial && hoveredSocial !== social.name\n\t\t\t\t\t\t\t? \"opacity-50\"\n\t\t\t\t\t\t\t: \"opacity-100\"\n\t\t\t\t\t)}\n\t\t\t\t\tkey={index + \"social-links\"}\n\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\tsetHoveredSocial(social.name);\n\t\t\t\t\t\tsetRotation(Math.random() * 20 - 10);\n\t\t\t\t\t}}\n\t\t\t\t\tonMouseLeave={() => setHoveredSocial(null)}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetClicked(true);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"block text-lg font-medium\">{social.name}</span>\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{hoveredSocial === social.name && (\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tclassName=\"absolute bottom-0 left-0 right-0 flex h-full w-full items-center justify-center\"\n\t\t\t\t\t\t\t\tanimate={animation}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\t\t\tkey={social.name}\n\t\t\t\t\t\t\t\t\tsrc={social.image}\n\t\t\t\t\t\t\t\t\talt={social.name}\n\t\t\t\t\t\t\t\t\tclassName=\"size-16\"\n\t\t\t\t\t\t\t\t\tinitial={{\n\t\t\t\t\t\t\t\t\t\ty: -40,\n\t\t\t\t\t\t\t\t\t\trotate: rotation,\n\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\tfilter: \"blur(2px)\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tanimate={{ y: -50, opacity: 1, filter: \"blur(0px)\" }}\n\t\t\t\t\t\t\t\t\texit={{ y: -40, opacity: 0, filter: \"blur(2px)\" }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.2 }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}