import React, { useEffect, useRef, useState } from 'react' import Image from 'next/image' import { detectBrowser, isBrowser } from 'common' import { cn } from 'ui' interface Props { className?: string hasGlow?: boolean } const DatabaseVisual: React.FC = ({ className, hasGlow = true }) => { const containerRef = useRef(null) const ref = useRef(null) const [gradientPos, setGradientPos] = useState({ x: 0, y: 0 }) const isSafari = isBrowser && detectBrowser() === 'Safari' const handleGlow = (event: any) => { if (!ref.current || !containerRef.current || !hasGlow) return null const containerRefElement = containerRef.current as HTMLDivElement const { x: contX, y: contY, width: containerWidth, height: containerHeight, } = containerRefElement.getBoundingClientRect() const xCont = event.clientX - contX const yCont = event.clientY - contY const isContainerHovered = xCont > -3 && xCont < containerWidth + 3 && yCont > -3 && yCont < containerHeight + 3 if (!isContainerHovered) return const svgElement = ref.current as SVGElement const { x: svgX, y: svgY } = svgElement.getBoundingClientRect() const x = event.clientX - svgX const y = event.clientY - svgY setGradientPos({ x, y }) } useEffect(() => { if (!isBrowser || isSafari) return window.addEventListener('mousemove', handleGlow) return () => { window.removeEventListener('mousemove', handleGlow) } }, []) const gradientTransform = isSafari ? `translate(150 150) rotate(45) scale(166 180)` : `translate(${gradientPos?.x} ${gradientPos?.y}) rotate(45) scale(166 180)` return (

) } export default DatabaseVisual