"use client"; import { cn } from "@/lib/utils"; import React, { createContext, useContext, useEffect, useRef, useState } from "react"; const MouseEnterContext = createContext< [boolean, React.Dispatch>] | undefined >(undefined); export const CardContainer = ({ children, className, containerClassName, }: { children?: React.ReactNode; className?: string; containerClassName?: string; }) => { const containerRef = useRef(null); const [isMouseEntered, setIsMouseEntered] = useState(false); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const { left, top, width, height } = containerRef.current.getBoundingClientRect(); const x = (e.clientX - left - width / 2) / 25; const y = (e.clientY - top - height / 2) / 25; containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`; }; const handleMouseEnter = (e: React.MouseEvent) => { setIsMouseEntered(true); if (!containerRef.current) return; }; const handleMouseLeave = (e: React.MouseEvent) => { if (!containerRef.current) return; setIsMouseEntered(false); containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`; }; return (

{children}

); }; export const CardBody = ({ children, className, }: { children: React.ReactNode; className?: string; }) => { return (

*]:[transform-style:preserve-3d]", className )} > {children}

); }; export const CardItem = ({ as: Tag = "div", children, className, translateX = 0, translateY = 0, translateZ = 0, rotateX = 0, rotateY = 0, rotateZ = 0, ...rest }: { as?: React.ElementType; children: React.ReactNode; className?: string; translateX?: number | string; translateY?: number | string; translateZ?: number | string; rotateX?: number | string; rotateY?: number | string; rotateZ?: number | string; [key: string]: any; }) => { const ref = useRef(null); const [isMouseEntered] = useMouseEnter(); useEffect(() => { handleAnimations(); }, [isMouseEntered]); const handleAnimations = () => { if (!ref.current) return; if (isMouseEntered) { ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`; } else { ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`; } }; return ( {children} ); }; // Create a hook to use the context export const useMouseEnter = () => { const context = useContext(MouseEnterContext); if (context === undefined) { throw new Error("useMouseEnter must be used within a MouseEnterProvider"); } return context; };