{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "following-pointer",
  "type": "registry:block",
  "title": "Following pointer",
  "description": "Following pointer",
  "files": [
    {
      "path": "components/usages/followingpointerusage.tsx",
      "content": "import { FollowerPointerCard } from \"@/registry/open-source/following-pointer\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"mx-auto w-80\">\n\t\t\t<FollowerPointerCard\n\t\t\t\ttitle={\n\t\t\t\t\t<TitleComponent\n\t\t\t\t\t\ttitle={blogContent.author}\n\t\t\t\t\t\tavatar={blogContent.authorAvatar}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<div className=\"group relative h-full overflow-hidden rounded-2xl border border-zinc-100 bg-background transition duration-200 hover:shadow-xl\">\n\t\t\t\t\t<div className=\"relative aspect-16/10 w-full overflow-hidden rounded-tl-lg rounded-tr-lg bg-background\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={blogContent.image}\n\t\t\t\t\t\t\talt=\"thumbnail\"\n\t\t\t\t\t\t\tclassName=\"h-full transform object-cover transition duration-200 group-hover:scale-95 group-hover:rounded-2xl\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"p-4\">\n\t\t\t\t\t\t<h2 className=\"my-4 text-lg font-bold text-secondary\">\n\t\t\t\t\t\t\t{blogContent.title}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<h2 className=\"my-4 text-sm font-normal text-secondary\">\n\t\t\t\t\t\t\t{blogContent.description}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<div className=\"mt-10 flex flex-row items-center justify-between\">\n\t\t\t\t\t\t\t<span className=\"text-sm text-secondary\">\n\t\t\t\t\t\t\t\t{blogContent.date}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<div className=\"relative z-10 block rounded-xl bg-background px-6 py-2 text-xs font-bold text-secondary\">\n\t\t\t\t\t\t\t\tRead More\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</FollowerPointerCard>\n\t\t</div>\n\t);\n}\n\nexport const blogContent = {\n\tslug: \"amazing-tailwindcss-grid-layouts\",\n\tauthor: \"Manu Arora\",\n\tdate: \"28th March, 2023\",\n\ttitle: \"Amazing Tailwindcss Grid Layout Usages\",\n\tdescription:\n\t\t\"Grids are cool, but Tailwindcss grids are cooler. In this article, we will learn how to create amazing Grid layouts with Tailwindcs grid and React.\",\n\timage: \"/itjustworks.jpg\",\n\tauthorAvatar: \"/itjustworks.jpg\",\n};\n\nexport const TitleComponent = ({\n\ttitle,\n\tavatar,\n}: {\n\ttitle: string;\n\tavatar: string;\n}) => (\n\t<div className=\"flex items-center space-x-2\">\n\t\t<img\n\t\t\tsrc={avatar}\n\t\t\theight=\"20\"\n\t\t\twidth=\"20\"\n\t\t\talt=\"thumbnail\"\n\t\t\tclassName=\"rounded-full border-2 border-white\"\n\t\t/>\n\t\t<p>{title}</p>\n\t</div>\n);\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/followingpointerusage.tsx",
      "content": "import { FollowerPointerCard } from \"@/registry/open-source/following-pointer\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"mx-auto w-80\">\n\t\t\t<FollowerPointerCard\n\t\t\t\ttitle={\n\t\t\t\t\t<TitleComponent\n\t\t\t\t\t\ttitle={blogContent.author}\n\t\t\t\t\t\tavatar={blogContent.authorAvatar}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<div className=\"group relative h-full overflow-hidden rounded-2xl border border-zinc-100 bg-background transition duration-200 hover:shadow-xl\">\n\t\t\t\t\t<div className=\"relative aspect-16/10 w-full overflow-hidden rounded-tl-lg rounded-tr-lg bg-background\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={blogContent.image}\n\t\t\t\t\t\t\talt=\"thumbnail\"\n\t\t\t\t\t\t\tclassName=\"h-full transform object-cover transition duration-200 group-hover:scale-95 group-hover:rounded-2xl\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"p-4\">\n\t\t\t\t\t\t<h2 className=\"my-4 text-lg font-bold text-secondary\">\n\t\t\t\t\t\t\t{blogContent.title}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<h2 className=\"my-4 text-sm font-normal text-secondary\">\n\t\t\t\t\t\t\t{blogContent.description}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<div className=\"mt-10 flex flex-row items-center justify-between\">\n\t\t\t\t\t\t\t<span className=\"text-sm text-secondary\">\n\t\t\t\t\t\t\t\t{blogContent.date}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<div className=\"relative z-10 block rounded-xl bg-background px-6 py-2 text-xs font-bold text-secondary\">\n\t\t\t\t\t\t\t\tRead More\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</FollowerPointerCard>\n\t\t</div>\n\t);\n}\n\nexport const blogContent = {\n\tslug: \"amazing-tailwindcss-grid-layouts\",\n\tauthor: \"Manu Arora\",\n\tdate: \"28th March, 2023\",\n\ttitle: \"Amazing Tailwindcss Grid Layout Usages\",\n\tdescription:\n\t\t\"Grids are cool, but Tailwindcss grids are cooler. In this article, we will learn how to create amazing Grid layouts with Tailwindcs grid and React.\",\n\timage: \"/itjustworks.jpg\",\n\tauthorAvatar: \"/itjustworks.jpg\",\n};\n\nexport const TitleComponent = ({\n\ttitle,\n\tavatar,\n}: {\n\ttitle: string;\n\tavatar: string;\n}) => (\n\t<div className=\"flex items-center space-x-2\">\n\t\t<img\n\t\t\tsrc={avatar}\n\t\t\theight=\"20\"\n\t\t\twidth=\"20\"\n\t\t\talt=\"thumbnail\"\n\t\t\tclassName=\"rounded-full border-2 border-white\"\n\t\t/>\n\t\t<p>{title}</p>\n\t</div>\n);\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/following-pointer.tsx",
      "content": "// Core component that receives mouse positions and renders pointer and content\r\n\r\nimport React, { useEffect, useState } from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { AnimatePresence, motion, useMotionValue } from \"motion/react\";\r\n\r\n// https://ui.aceternity.com/components/following-pointer\r\n\r\nexport const FollowerPointerCard = ({\r\n\tchildren,\r\n\tclassName,\r\n\ttitle,\r\n}: {\r\n\tchildren: React.ReactNode;\r\n\tclassName?: string;\r\n\ttitle?: string | React.ReactNode;\r\n}) => {\r\n\tconst x = useMotionValue(0);\r\n\tconst y = useMotionValue(0);\r\n\tconst ref = React.useRef<HTMLDivElement>(null);\r\n\tconst [rect, setRect] = useState<DOMRect | null>(null);\r\n\tconst [isInside, setIsInside] = useState<boolean>(false); // Add this line\r\n\r\n\tuseEffect(() => {\r\n\t\tif (ref.current) {\r\n\t\t\tsetRect(ref.current.getBoundingClientRect());\r\n\t\t}\r\n\t}, []);\r\n\r\n\tconst handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\r\n\t\tif (rect) {\r\n\t\t\tconst scrollX = window.scrollX;\r\n\t\t\tconst scrollY = window.scrollY;\r\n\t\t\tx.set(e.clientX - rect.left + scrollX);\r\n\t\t\ty.set(e.clientY - rect.top + scrollY);\r\n\t\t}\r\n\t};\r\n\tconst handleMouseLeave = () => {\r\n\t\tsetIsInside(false);\r\n\t};\r\n\r\n\tconst handleMouseEnter = () => {\r\n\t\tsetIsInside(true);\r\n\t};\r\n\treturn (\r\n\t\t<div\r\n\t\t\tonMouseLeave={handleMouseLeave}\r\n\t\t\tonMouseEnter={handleMouseEnter}\r\n\t\t\tonMouseMove={handleMouseMove}\r\n\t\t\tstyle={{\r\n\t\t\t\tcursor: \"none\",\r\n\t\t\t}}\r\n\t\t\tref={ref}\r\n\t\t\tclassName={cn(\"relative\", className)}\r\n\t\t>\r\n\t\t\t<AnimatePresence mode=\"wait\">\r\n\t\t\t\t{isInside && <FollowPointer x={x} y={y} title={title} />}\r\n\t\t\t</AnimatePresence>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport const FollowPointer = ({\r\n\tx,\r\n\ty,\r\n\ttitle,\r\n}: {\r\n\tx: any;\r\n\ty: any;\r\n\ttitle?: string | React.ReactNode;\r\n}) => {\r\n\tconst colors = [\r\n\t\t\"var(--sky-500)\",\r\n\t\t\"var(--neutral-500)\",\r\n\t\t\"var(--teal-500)\",\r\n\t\t\"var(--green-500)\",\r\n\t\t\"var(--blue-500)\",\r\n\t\t\"var(--red-500)\",\r\n\t\t\"var(--yellow-500)\",\r\n\t];\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tclassName=\"h-4 w-4 rounded-full absolute z-40\"\r\n\t\t\tstyle={{\r\n\t\t\t\ttop: y,\r\n\t\t\t\tleft: x,\r\n\t\t\t\tpointerEvents: \"none\",\r\n\t\t\t}}\r\n\t\t\tinitial={{\r\n\t\t\t\tscale: 1,\r\n\t\t\t\topacity: 1,\r\n\t\t\t}}\r\n\t\t\tanimate={{\r\n\t\t\t\tscale: 1,\r\n\t\t\t\topacity: 1,\r\n\t\t\t}}\r\n\t\t\texit={{\r\n\t\t\t\tscale: 0,\r\n\t\t\t\topacity: 0,\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t<svg\r\n\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\tfill=\"currentColor\"\r\n\t\t\t\tstrokeWidth=\"1\"\r\n\t\t\t\tviewBox=\"0 0 16 16\"\r\n\t\t\t\tclassName=\"h-6 w-6 text-sky-500 transform -rotate-70 -translate-x-[12px] -translate-y-[10px] stroke-sky-600\"\r\n\t\t\t\theight=\"1em\"\r\n\t\t\t\twidth=\"1em\"\r\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t>\r\n\t\t\t\t<path d=\"M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z\"></path>\r\n\t\t\t</svg>\r\n\t\t\t<motion.div\r\n\t\t\t\tstyle={{\r\n\t\t\t\t\tbackgroundColor:\r\n\t\t\t\t\t\tcolors[Math.floor(Math.random() * colors.length)],\r\n\t\t\t\t}}\r\n\t\t\t\tinitial={{\r\n\t\t\t\t\tscale: 0.5,\r\n\t\t\t\t\topacity: 0,\r\n\t\t\t\t}}\r\n\t\t\t\tanimate={{\r\n\t\t\t\t\tscale: 1,\r\n\t\t\t\t\topacity: 1,\r\n\t\t\t\t}}\r\n\t\t\t\texit={{\r\n\t\t\t\t\tscale: 0.5,\r\n\t\t\t\t\topacity: 0,\r\n\t\t\t\t}}\r\n\t\t\t\tclassName={\r\n\t\t\t\t\t\"px-2 py-2 bg-background text-foreground whitespace-nowrap min-w-max text-xs rounded-full\"\r\n\t\t\t\t}\r\n\t\t\t>\r\n\t\t\t\t{title || `William Shakespeare`}\r\n\t\t\t</motion.div>\r\n\t\t</motion.div>\r\n\t);\r\n};\r\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"
    }
  ]
}