Magnet hover

import { Magnet } from "@/components/ui/magnet-hover"; 

const DemoOne = () => {
  const magnetPadding: number = 50;
  const isMagnetDisabled: boolean = false;
  const strengthOfMagnet: number = 4; 

  const buttonBaseClasses = "px-10 py-5 rounded-2xl text-xl font-semibold text-center transition-colors duration-300";
  
  return (
    <div className="flex flex-col w-full min-h-screen justify-center items-center 
                   p-4
                   bg-white text-black // Light mode: white bg, black text for page
                   dark:bg-black dark:text-white // Dark mode: black bg, white text for page
                   transition-colors duration-300">
      
      <Magnet
        padding={magnetPadding}
        disabled={isMagnetDisabled}
        magnetStrength={strengthOfMagnet}
      >
        <div className={`
          ${buttonBaseClasses} 
          bg-white text-black border border-neutral-300 
          dark:bg-black dark:text-white dark:border-neutral-700
        `}>
          Hover Me!
        </div>
      </Magnet>
      
    </div>
  );
};

export { DemoOne };