68 lines
2.0 KiB
React
68 lines
2.0 KiB
React
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;
|