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,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/anwendungsprojekt.iml" filepath="$PROJECT_DIR$/.idea/anwendungsprojekt.iml" />
+    </modules>
+  </component>
+</project>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
@@ -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;
 }
+