Refactor MagicCard component for improved mouse event handling

[mrbadri]

Description

This pull request refactors the MagicCard component to enhance its mouse event handling, making it more robust and efficient. Key changes include:

Replaced inline event listeners with listeners attached to the document.

Transitioned from React events to native MouseEvent for better control.

Added cardRef for referencing the card element in event handlers.

Modified mousemove, mouseout, and mouseenter event handling logic.

Changes

Refactored handleMouseMove, handleMouseOut, and handleMouseEnter to use native MouseEvent.

Implemented cardRef to get card element dimensions for precise event handling.

Ensured cleanup of event listeners in the useEffect hook for better performance.

Before and After Demo:

Before:

https://github.com/user-attachments/assets/9084d477-4ab8-4661-a1d1-256519444c43

After:

https://github.com/user-attachments/assets/a5d8ddd7-7ffc-4ca1-b7fa-ec9328e25bb7

Testing

Manual testing was conducted to ensure the gradient effect moves correctly with the mouse and resets on mouse out.

Verified that the component works seamlessly in both light and dark modes.

[vercel[bot]]

@mrbadri is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[mrbadri]

Hi @dillionverma,

Could you please review my pull request at your earliest convenience? Your feedback would be greatly appreciated.

Thank you!

Best regards, Mohammad reza

[alamenai]

I see the hover event influences the cards while the cursor is out of the card, what do you think @dillionverma ?

[khatabakhsh]

I had this issue too, this is a very good feature. please fix this

[itsarghyadas]

Hey sorry for the late reply. I will review it and get it merged if it fixes that.

Thank you.

[itsarghyadas]

We discussed it, and I’ve reviewed it. This PR is good to go. Thanks for improving it! ✅