{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-hover-effect",
  "title": "Hover Effect",
  "description": "Hover over the cards and the effect slides to the currently hovered card.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ui/card-hover-effect.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { AnimatePresence, motion } from \"motion/react\"\n\nimport { useState } from \"react\"\n\nexport const HoverEffect = ({\n  items,\n  className,\n}: {\n  items: {\n    title: string\n    description: string\n    link: string\n  }[]\n  className?: string\n}) => {\n  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-1 py-10 md:grid-cols-2 lg:grid-cols-3\",\n        className,\n      )}\n    >\n      {items.map((item, idx) => (\n        <a\n          href={item?.link}\n          key={item?.link}\n          className=\"group relative block h-full w-full p-2\"\n          onMouseEnter={() => setHoveredIndex(idx)}\n          onMouseLeave={() => setHoveredIndex(null)}\n        >\n          <AnimatePresence>\n            {hoveredIndex === idx && (\n              <motion.span\n                className=\"absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200 dark:bg-slate-800/[0.8]\"\n                layoutId=\"hoverBackground\"\n                initial={{ opacity: 0 }}\n                animate={{\n                  opacity: 1,\n                  transition: { duration: 0.15 },\n                }}\n                exit={{\n                  opacity: 0,\n                  transition: { duration: 0.15, delay: 0.2 },\n                }}\n              />\n            )}\n          </AnimatePresence>\n          <Card>\n            <CardTitle>{item.title}</CardTitle>\n            <CardDescription>{item.description}</CardDescription>\n          </Card>\n        </a>\n      ))}\n    </div>\n  )\n}\n\nexport const Card = ({\n  className,\n  children,\n}: {\n  className?: string\n  children: React.ReactNode\n}) => {\n  return (\n    <div\n      className={cn(\n        \"relative z-20 h-full w-full overflow-hidden rounded-2xl border border-transparent bg-black p-4 group-hover:border-slate-700 dark:border-white/[0.2]\",\n        className,\n      )}\n    >\n      <div className=\"relative z-50\">\n        <div className=\"p-4\">{children}</div>\n      </div>\n    </div>\n  )\n}\nexport const CardTitle = ({\n  className,\n  children,\n}: {\n  className?: string\n  children: React.ReactNode\n}) => {\n  return (\n    <h4 className={cn(\"mt-4 font-bold tracking-wide text-zinc-100\", className)}>\n      {children}\n    </h4>\n  )\n}\nexport const CardDescription = ({\n  className,\n  children,\n}: {\n  className?: string\n  children: React.ReactNode\n}) => {\n  return (\n    <p\n      className={cn(\n        \"mt-8 text-sm leading-relaxed tracking-wide text-zinc-400\",\n        className,\n      )}\n    >\n      {children}\n    </p>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}