{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-preview-demo",
  "title": "Hover Preview Demo",
  "description": "Demo showing usage of hover preview component.",
  "registryDependencies": [
    "systaliko-ui.vercel.app/r/custom-cursor"
  ],
  "files": [
    {
      "path": "registry/demo/cards/hover-preview/index.tsx",
      "content": "'use client';\nimport {\n  CustomCursor,\n  CustomCursorProvider,\n  useCustomCursor,\n} from '@/components/systaliko-ui/components/custom-cursor';\nimport { ArrowUpRightIcon } from 'lucide-react';\nimport Image from 'next/image';\n\nconst clients = [\n  {\n    id: 'slide-6',\n    name: 'YCF Dev',\n    service: 'UI UX design',\n    imageUrl:\n      'https://images.unsplash.com/photo-1688733720228-4f7a18681c4f?q=80&w=280&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  },\n  {\n    id: 'slide-1',\n    name: 'Systaliko',\n    service: 'Frontend dev',\n    imageUrl:\n      'https://images.unsplash.com/photo-1654618977232-a6c6dea9d1e8?q=80&w=280&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  },\n  {\n    id: 'slide-2',\n    name: 'Central Bank',\n    service: 'Backend dev',\n    imageUrl:\n      'https://images.unsplash.com/photo-1624996752380-8ec242e0f85d?q=80&w=280&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  },\n  {\n    id: 'slide-3',\n    name: 'Veo Studio',\n    service: 'Video editing',\n    imageUrl:\n      'https://images.unsplash.com/photo-1574717025058-2f8737d2e2b7?q=80&w=280&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  },\n];\nconst clipPathVariants = {\n  visible: {\n    clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',\n  },\n  hidden: {\n    clipPath: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0px)',\n  },\n};\n\nfunction HoverPreviewContent() {\n  const { setCursorChildren, containerRef } = useCustomCursor();\n  const handleClearCursor = () => {\n    setCursorChildren(null);\n  };\n  return (\n    <div className=\"w-full h-screen place-content-center p-8\">\n      <div\n        onMouseLeave={handleClearCursor}\n        className=\"relative \"\n        ref={containerRef}\n      >\n        <div className=\"bg-border space-y-px py-px max-w-3xl mx-auto\">\n          <CustomCursor />\n          {clients.map((client) => (\n            <div\n              key={client.id}\n              className=\"flex bg-background px-4 py-6  flex-wrap gap-4 items-center justify-between\"\n              onMouseEnter={() =>\n                setCursorChildren(\n                  <div className=\"aspect-[12/16] h-48\">\n                    <img\n                      alt={client.name}\n                      src={client.imageUrl}\n                      width={280}\n                      height={192}\n                      className=\"size-full\"\n                    />\n                  </div>,\n                )\n              }\n            >\n              <div className=\"md:flex-1\">\n                <p className=\"uppercase text-muted-foreground\">{client.name}</p>\n              </div>\n\n              <div className=\"md:flex-1\">\n                <p className=\"text-xl font-medium\">{client.service}</p>\n              </div>\n\n              <div className=\"bg-secondary text-secondary-foreground rounded-full p-2\">\n                <ArrowUpRightIcon className=\"size-5\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function HoverPreviewDemo() {\n  return (\n    <CustomCursorProvider>\n      <HoverPreviewContent />\n    </CustomCursorProvider>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/demo/cards/hover-preview.tsx"
    }
  ],
  "type": "registry:ui"
}