added Context

components/TiltCard.tsx

@@ -1,18 +1,39 @@
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
+import { useAppContext } from '@/app/AppContext';
 
 export default function TiltCard({
 	children,
+	cardID,
 	className = '',
-	onClick = () => {},
 }: {
 	children: React.ReactNode;
+	cardID: string;
 	className?: string;
-	onClick: (event: React.MouseEvent) => void;
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
+	const { tilts, setTilts } = useAppContext();
+
+	const card = cardRef.current;
+
+	useEffect(() => {
+		if (!card) return;
+
+		const tilt = tilts.find((tilt) => tilt.cardID === cardID);
+		if (!tilt) {
+			card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+			return;
+		}
+
+		const { rotateX, rotateY } = tilt;
+
+		if (rotateX || rotateY) {
+			card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+		} else {
+			card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+		}
+	}, [tilts]);
 
 	const handleMouseMove = (e: React.MouseEvent) => {
-		const card = cardRef.current;
 		if (!card) return;
 
 		const rect = card.getBoundingClientRect();
@@ -24,22 +45,17 @@ export default function TiltCard({
 		const rotateX = ((y - centerY) / centerY) * -20;
 		const rotateY = ((x - centerX) / centerX) * 20;
 
-		card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+		setTilts([...tilts.filter((tilt) => tilt.cardID !== cardID), { cardID, rotateX, rotateY }]);
 	};
 
 	const handleMouseLeave = () => {
-		const card = cardRef.current;
 		if (!card) return;
-		card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+
+		setTilts(tilts.filter((tilt) => tilt.cardID !== cardID));
 	};
 
 	return (
-		<div
-			className={`${className}`}
-			onMouseMove={handleMouseMove}
-			onMouseLeave={handleMouseLeave}
-			onClick={onClick}
-		>
+		<div className={`${className}`} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
 			<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
 				{children}
 			</div>