Hovering tile finished

2023-05-08 01:46:31 +02:00
parent 57ebdf002d
commit 646c64c7d9
7 changed files with 99 additions and 0 deletions
@@ -0,0 +1,67 @@
+import React from 'react';
+
+const Tile = () => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [cursorPosition, setCursorPosition] = React.useState({ x: 0, y: 0 });
+    const tileRef = React.useRef(null);
+
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+
+    const handleMouseMove = (event) => {
+        if (tileRef.current) {
+            const rect = tileRef.current.getBoundingClientRect();
+            setCursorPosition({
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            });
+        }
+    };
+
+    return (
+        <div
+            ref={tileRef}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onMouseMove={handleMouseMove}
+            style={{
+                backgroundColor: 'rgba(255,0,0,0.89)',
+                width: '250px',
+                height: '150px',
+                margin: '10px',
+                transition: 'transform 0.2s',
+                transform: isHovered ? 'translateY(-5px)' : 'none',
+                position: 'relative',
+                borderRadius: '10px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}
+        >
+            <span style = {{ color: 'white', fontWeight: 'bold'}}>Kalender</span>
+
+
+            {isHovered && (
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: cursorPosition.y - 10,
+                        left: cursorPosition.x - 10,
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: '50%',
+                        background:
+                            'radial-gradient(circle at center, rgba(255, 255, 255) 0%, rgba(255,255,255,0) 70%)',
+                    }}
+                />
+            )}
+        </div>
+    );
+};
+
+export default Tile;
@@ -298,3 +298,4 @@ Calender View
  cursor: default;
  pointer-events: none;
 }
+