Spotlight Card1

import { SpotLightItem, Spotlight } from '@/components/ui/spotlight';
import Image from 'next/image';
import React from 'react';

export default function SpotlightCard1() {
  const boxes = [
    {
      id: '12',

      chart: '/chart_motl5z.webp',
      className: 'grid xl:col-span-1 col-start-1 col-end-3',
    },
    {
      id: '52',

      chart: '/chart4_s7wsku.webp',
      className: 'grid xl:col-span-1 col-start-3 col-end-6',
    },

    {
      id: '42',

      chart: '/chart3_i9wdgb.webp',
      className: 'grid xl:col-span-1 col-start-1 col-end-3',
    },

    {
      id: '22',

      chart: '/star_tb9ivg.webp',
      className: 'grid xl:col-span-1 col-start-3 col-end-6',
    },
    {
      id: '32',
      title: 'Track Goals',

      chart: '/chart1_rll0mx.webp',
      des: 'Keeping track of your goals helps you stay organized, motivated, and focused. Regularly monitoring your progress ensures you stay on course.',
      className: 'xl:col-span-2 xl:row-span-2 row-start-2 row-end-3  col-start-1 col-end-6',
    },
  ];
  return (
    <>
      <div className='relative bg-black sm:p-8 p-4 rounded-md'>
        <Spotlight className='grid gap-2 grid-flow-col grid-cols-4'>
          {boxes?.map((box, index) => {
            return (
              <SpotLightItem className={box.className} key={box.className}>
                <div className='relative z-10 rounded-lg  bg-linear-to-b from-[#0c0c0c] to-[#252525] w-full h-full mx-auto'>
                  <div className='rounded-lg grid place-content-center relative max-h-full h-full 2xl:p-3 p-0  w-full'>
                    <div
                      className={`absolute rounded-lg top-0 left-0 h-full w-full -z-10 bg-center bg-cover`}
                    />

                    <Image
                      src={box?.chart}
                      alt='grid'
                      width={600}
                      className='w-fit mx-auto '
                      height={600}
                    />
                    <h1 className='text-center xl:text-2xl lg:text-xl text-2xl font-semibold'>
                      {box?.title}
                    </h1>
                    <p className='text-center lg:text-base text-xs'>{box?.des}</p>
                  </div>
                </div>
              </SpotLightItem>
            );
          })}
        </Spotlight>
      </div>
    </>
  );
}

// @ts-nocheck
'use client';
import { cn } from '@/lib/utils';
import React, { createContext, type MouseEvent, useContext, useRef, useState } from 'react';

interface MousePosition {
  x: number;
  y: number;
}

interface SpotlightProps {
  children: React.ReactNode;
  className?: string;
  ProximitySpotlight?: boolean;
  HoverFocusSpotlight?: boolean;
  CursorFlowGradient?: boolean;
}
interface SpotlightItemProps {
  children: React.ReactNode;
  className?: string;
}

interface SpotLightContextType {
  ProximitySpotlight: boolean;
  HoverFocusSpotlight: boolean;
  CursorFlowGradient: boolean;
}

const SpotLightContext = createContext<SpotLightContextType | undefined>(undefined);
export const useSpotlight = () => {
  const context = useContext(SpotLightContext);
  if (!context) {
    throw new Error('useSpotlight must be used within a SpotlightProvider');
  }
  return context;
};
export const Spotlight = ({
  children,
  className,
  ProximitySpotlight = true,
  HoverFocusSpotlight = false,
  CursorFlowGradient = true,
}: SpotlightProps) => {
  return (
    <SpotLightContext.Provider
      value={{
        ProximitySpotlight,
        HoverFocusSpotlight,
        CursorFlowGradient,
      }}
    >
      <div className={cn('group relative z-10 rounded-md    ', className)}>{children}</div>
    </SpotLightContext.Provider>
  );
};
export function SpotLightItem({ children, className }: SpotlightItemProps) {
  const { HoverFocusSpotlight, ProximitySpotlight, CursorFlowGradient } = useSpotlight();
  const boxWrapper = useRef(null);
  const [isHovered, setIsHovered] = useState(false);
  const [mousePosition, setMousePosition] = React.useState({
    x: null,
    y: null,
  });
  React.useEffect(() => {
    const updateMousePosition = (ev: { clientX: any; clientY: any }) => {
      setMousePosition({ x: ev.clientX, y: ev.clientY });
    };
    window.addEventListener('mousemove', updateMousePosition);
    return () => {
      window.removeEventListener('mousemove', updateMousePosition);
    };
  }, []);

  const [overlayColor, setOverlayColor] = useState({ x: 0, y: 0 });
  const handleMouemove = ({ currentTarget, clientX, clientY }): MouseEvent => {
    const { left, top } = currentTarget.getBoundingClientRect();

    const x = clientX - left;
    const y = clientY - top;

    setOverlayColor({ x, y });
  };
  // console.log(overlayColor)

  return (
    <div
      onMouseMove={handleMouemove}
      onMouseEnter={() => CursorFlowGradient && setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      ref={boxWrapper}
      className={cn(className, ' relative  rounded-lg p-[2px] bg-[#ffffff15] overflow-hidden')}
    >
      {isHovered && (
        <div
          className='pointer-events-none absolute opacity-0 z-50 rounded-xl w-full h-full group-hover:opacity-100  transition duration-300 '
          style={{
            background: `
            radial-gradient(
              250px circle at ${overlayColor.x}px ${overlayColor.y}px,
              rgba(255, 255, 255, 0.137),
              transparent 80%
            )
          `,
          }}
        />
      )}
      {HoverFocusSpotlight && (
        <div
          className='absolute opacity-0 group-hover:opacity-100 z-10 inset-0 bg-fixed rounded-lg'
          style={{
            background: `radial-gradient(circle at ${mousePosition.x}px ${mousePosition.y}px, #ffffff76 0%,transparent 20%,transparent) fixed `,
          }}
        ></div>
      )}
      {ProximitySpotlight && (
        <div
          className='absolute inset-0 z-0  bg-fixed rounded-lg'
          style={{
            background: `radial-gradient(circle at ${mousePosition.x}px ${mousePosition.y}px, #ffffff6e 0%,transparent 20%,transparent) fixed`,
          }}
        ></div>
      )}
      {children}
    </div>
  );
}

type SpotlightCardProps = {
  children: React.ReactNode;
  className?: string;
};

export function SpotlightCard({ children, className = '' }: SpotlightCardProps) {
  return (
    <div
      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}`}
    >
      {children}
    </div>
  );
}