{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card1",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/spotlight-cards/spotlight-card1.tsx",
      "content": "import { SpotLightItem, Spotlight } from '@/components/ui/spotlight';\nimport Image from 'next/image';\nimport React from 'react';\n\nexport default function SpotlightCard1() {\n  const boxes = [\n    {\n      id: '12',\n\n      chart: '/chart_motl5z.webp',\n      className: 'grid xl:col-span-1 col-start-1 col-end-3',\n    },\n    {\n      id: '52',\n\n      chart: '/chart4_s7wsku.webp',\n      className: 'grid xl:col-span-1 col-start-3 col-end-6',\n    },\n\n    {\n      id: '42',\n\n      chart: '/chart3_i9wdgb.webp',\n      className: 'grid xl:col-span-1 col-start-1 col-end-3',\n    },\n\n    {\n      id: '22',\n\n      chart: '/star_tb9ivg.webp',\n      className: 'grid xl:col-span-1 col-start-3 col-end-6',\n    },\n    {\n      id: '32',\n      title: 'Track Goals',\n\n      chart: '/chart1_rll0mx.webp',\n      des: 'Keeping track of your goals helps you stay organized, motivated, and focused. Regularly monitoring your progress ensures you stay on course.',\n      className: 'xl:col-span-2 xl:row-span-2 row-start-2 row-end-3  col-start-1 col-end-6',\n    },\n  ];\n  return (\n    <>\n      <div className='relative bg-black sm:p-8 p-4 rounded-md'>\n        <Spotlight className='grid gap-2 grid-flow-col grid-cols-4'>\n          {boxes?.map((box, index) => {\n            return (\n              <SpotLightItem className={box.className} key={box.className}>\n                <div className='relative z-10 rounded-lg  bg-linear-to-b from-[#0c0c0c] to-[#252525] w-full h-full mx-auto'>\n                  <div className='rounded-lg grid place-content-center relative max-h-full h-full 2xl:p-3 p-0  w-full'>\n                    <div\n                      className={`absolute rounded-lg top-0 left-0 h-full w-full -z-10 bg-center bg-cover`}\n                    />\n\n                    <Image\n                      src={box?.chart}\n                      alt='grid'\n                      width={600}\n                      className='w-fit mx-auto '\n                      height={600}\n                    />\n                    <h1 className='text-center xl:text-2xl lg:text-xl text-2xl font-semibold'>\n                      {box?.title}\n                    </h1>\n                    <p className='text-center lg:text-base text-xs'>{box?.des}</p>\n                  </div>\n                </div>\n              </SpotLightItem>\n            );\n          })}\n        </Spotlight>\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/spotlight.tsx",
      "content": "// @ts-nocheck\n'use client';\nimport { cn } from '@/lib/utils';\nimport React, { createContext, type MouseEvent, useContext, useRef, useState } from 'react';\n\ninterface MousePosition {\n  x: number;\n  y: number;\n}\n\ninterface SpotlightProps {\n  children: React.ReactNode;\n  className?: string;\n  ProximitySpotlight?: boolean;\n  HoverFocusSpotlight?: boolean;\n  CursorFlowGradient?: boolean;\n}\ninterface SpotlightItemProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface SpotLightContextType {\n  ProximitySpotlight: boolean;\n  HoverFocusSpotlight: boolean;\n  CursorFlowGradient: boolean;\n}\n\nconst SpotLightContext = createContext<SpotLightContextType | undefined>(undefined);\nexport const useSpotlight = () => {\n  const context = useContext(SpotLightContext);\n  if (!context) {\n    throw new Error('useSpotlight must be used within a SpotlightProvider');\n  }\n  return context;\n};\nexport const Spotlight = ({\n  children,\n  className,\n  ProximitySpotlight = true,\n  HoverFocusSpotlight = false,\n  CursorFlowGradient = true,\n}: SpotlightProps) => {\n  return (\n    <SpotLightContext.Provider\n      value={{\n        ProximitySpotlight,\n        HoverFocusSpotlight,\n        CursorFlowGradient,\n      }}\n    >\n      <div className={cn('group relative z-10 rounded-md    ', className)}>{children}</div>\n    </SpotLightContext.Provider>\n  );\n};\nexport function SpotLightItem({ children, className }: SpotlightItemProps) {\n  const { HoverFocusSpotlight, ProximitySpotlight, CursorFlowGradient } = useSpotlight();\n  const boxWrapper = useRef(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [mousePosition, setMousePosition] = React.useState({\n    x: null,\n    y: null,\n  });\n  React.useEffect(() => {\n    const updateMousePosition = (ev: { clientX: any; clientY: any }) => {\n      setMousePosition({ x: ev.clientX, y: ev.clientY });\n    };\n    window.addEventListener('mousemove', updateMousePosition);\n    return () => {\n      window.removeEventListener('mousemove', updateMousePosition);\n    };\n  }, []);\n\n  const [overlayColor, setOverlayColor] = useState({ x: 0, y: 0 });\n  const handleMouemove = ({ currentTarget, clientX, clientY }): MouseEvent => {\n    const { left, top } = currentTarget.getBoundingClientRect();\n\n    const x = clientX - left;\n    const y = clientY - top;\n\n    setOverlayColor({ x, y });\n  };\n  // console.log(overlayColor)\n\n  return (\n    <div\n      onMouseMove={handleMouemove}\n      onMouseEnter={() => CursorFlowGradient && setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      ref={boxWrapper}\n      className={cn(className, ' relative  rounded-lg p-[2px] bg-[#ffffff15] overflow-hidden')}\n    >\n      {isHovered && (\n        <div\n          className='pointer-events-none absolute opacity-0 z-50 rounded-xl w-full h-full group-hover:opacity-100  transition duration-300 '\n          style={{\n            background: `\n            radial-gradient(\n              250px circle at ${overlayColor.x}px ${overlayColor.y}px,\n              rgba(255, 255, 255, 0.137),\n              transparent 80%\n            )\n          `,\n          }}\n        />\n      )}\n      {HoverFocusSpotlight && (\n        <div\n          className='absolute opacity-0 group-hover:opacity-100 z-10 inset-0 bg-fixed rounded-lg'\n          style={{\n            background: `radial-gradient(circle at ${mousePosition.x}px ${mousePosition.y}px, #ffffff76 0%,transparent 20%,transparent) fixed `,\n          }}\n        ></div>\n      )}\n      {ProximitySpotlight && (\n        <div\n          className='absolute inset-0 z-0  bg-fixed rounded-lg'\n          style={{\n            background: `radial-gradient(circle at ${mousePosition.x}px ${mousePosition.y}px, #ffffff6e 0%,transparent 20%,transparent) fixed`,\n          }}\n        ></div>\n      )}\n      {children}\n    </div>\n  );\n}\n\ntype SpotlightCardProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function SpotlightCard({ children, className = '' }: SpotlightCardProps) {\n  return (\n    <div\n      className={`relative h-full bg-slate-800 rounded-3xl p-px before:absolute before:w-80 before:h-80 before:-left-40 before:-top-40 before:bg-slate-400 before:rounded-full before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-500 before:translate-x-(--mouse-x) before:translate-y-(--mouse-y) group-hover:before:opacity-100 before:z-10 before:blur-[100px] after:absolute after:w-96 after:h-96 after:-left-48 after:-top-48 after:bg-indigo-500 after:rounded-full after:opacity-0 after:pointer-events-none after:transition-opacity after:duration-500 after:translate-x-(--mouse-x) after:translate-y-(--mouse-y) hover:after:opacity-10 after:z-30 after:blur-[100px] overflow-hidden ${className}`}\n    >\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}