From 099992ebdf6c427b336a31bae8c5852f2fc24b16 Mon Sep 17 00:00:00 2001 From: aliraza556 Date: Thu, 5 Dec 2024 12:53:13 +0500 Subject: [PATCH] fix(tooltip): implement hover component --- .../mindset/components/HoverCard/index.tsx | 70 +++++++++++++++++++ .../components/Scene/Board/Node/index.tsx | 50 +++++++------ .../mindset/components/Scene/Board/index.tsx | 2 + src/utils/colors/index.tsx | 1 + 4 files changed, 100 insertions(+), 23 deletions(-) create mode 100644 src/components/mindset/components/HoverCard/index.tsx diff --git a/src/components/mindset/components/HoverCard/index.tsx b/src/components/mindset/components/HoverCard/index.tsx new file mode 100644 index 000000000..7ff33d355 --- /dev/null +++ b/src/components/mindset/components/HoverCard/index.tsx @@ -0,0 +1,70 @@ +import styled from 'styled-components' +import { Flex } from '~/components/common/Flex' +import { Text } from '~/components/common/Text' +import { colors } from '~/utils/colors' + +type Props = { + title?: string + description?: string +} + +export const HoverCard = ({ title, description }: Props) => ( + + + + {title} + {description && {description}} + + + +) + +const Portal = styled.div` + position: fixed; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1000; +` + +const TooltipContainer = styled(Flex)` + width: 390px; + min-height: 100px; + background: ${colors.HOVER_CARD_BG}; + border-radius: 8px; + padding: 15px; + padding-bottom: 3px !important; + position: fixed; + flex-direction: column; + gap: 4px; + top: calc(-230px); + left: 100%; + z-index: 1000; + margin-left: 450px; + pointer-events: auto; +` + +const ContentWrapper = styled(Flex)` + margin-top: 0; + flex-direction: column; + gap: 4px; +` + +const Title = styled(Text)` + font-family: Barlow; + font-size: 20px; + font-weight: 600; + line-height: 24px; + color: ${colors.white}; + margin: 0; +` + +const Description = styled(Text)` + font-family: Barlow; + font-size: 14px; + font-weight: 400; + line-height: 20px; + color: ${colors.white}; + margin: 0; + opacity: 0.8; +` diff --git a/src/components/mindset/components/Scene/Board/Node/index.tsx b/src/components/mindset/components/Scene/Board/Node/index.tsx index 7392d8bfe..7a674e423 100644 --- a/src/components/mindset/components/Scene/Board/Node/index.tsx +++ b/src/components/mindset/components/Scene/Board/Node/index.tsx @@ -1,7 +1,8 @@ import { Html } from '@react-three/drei' import { useThree } from '@react-three/fiber' -import { memo } from 'react' +import { memo, useState } from 'react' import { Flex } from '~/components/common/Flex' +import { HoverCard } from '../../../HoverCard' import { RoundedRectangle } from '../RoundedRectangle' import { Content } from './Content' import { Image } from './Image' @@ -15,10 +16,12 @@ type Props = { name: string type: string color: string + description?: string } -export const Node = memo(({ width, height, position, url, onButtonClick, name, type, color }: Props) => { +export const Node = memo(({ width, height, position, url, onButtonClick, name, type, color, description }: Props) => { const { camera } = useThree() + const [isHovered, setIsHovered] = useState(false) return ( @@ -27,27 +30,28 @@ export const Node = memo(({ width, height, position, url, onButtonClick, name, t {false && } {/* Html */} - {true && ( - - onButtonClick()} - style={{ - fontSize: '12px', - color: 'white', - fontWeight: 600, - width: `${width * camera.zoom}px`, - height: `${height * camera.zoom}px`, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - borderRadius: '8px', - pointerEvents: 'auto', // Allow interaction with the HTML element - }} - > - - - - )} + + onButtonClick()} + onMouseEnter={() => setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + style={{ + fontSize: '12px', + color: 'white', + fontWeight: 600, + width: `${width * camera.zoom}px`, + height: `${height * camera.zoom}px`, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + borderRadius: '8px', + pointerEvents: 'auto', + }} + > + + {isHovered && } + + ) }) diff --git a/src/components/mindset/components/Scene/Board/index.tsx b/src/components/mindset/components/Scene/Board/index.tsx index 6bf72c1e8..ad101490c 100644 --- a/src/components/mindset/components/Scene/Board/index.tsx +++ b/src/components/mindset/components/Scene/Board/index.tsx @@ -122,6 +122,7 @@ export const Board = () => { {