fix(tooltip): implement hover component

stakwork · Dec 5, 2024 · 099992e · 099992e
1 parent f2496df
commit 099992e
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 23 deletions.
diff --git a/src/components/mindset/components/HoverCard/index.tsx 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) => (
+  <Portal>
+    <TooltipContainer>
+      <ContentWrapper>
+        <Title>{title}</Title>
+        {description && <Description>{description}</Description>}
+      </ContentWrapper>
+    </TooltipContainer>
+  </Portal>
+)
+
+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
@@ -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 (
     <group position={position}>
@@ -27,27 +30,28 @@ export const Node = memo(({ width, height, position, url, onButtonClick, name, t
       {false && <Image height={height} url={url} width={width} />}
 
       {/* Html */}
-      {true && (
-        <Html position={[-width / 2, height / 2, 0]}>
-          <Flex
-            onClick={() => 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
-            }}
-          >
-            <Content name={`${name}`} type={type || ''} url={url} />
-          </Flex>
-        </Html>
-      )}
+      <Html position={[-width / 2, height / 2, 0]}>
+        <Flex
+          onClick={() => 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',
+          }}
+        >
+          <Content name={`${name}`} type={type || ''} url={url} />
+          {isHovered && <HoverCard description={description} title={name} />}
+        </Flex>
+      </Html>
     </group>
   )
 })

diff --git 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 = () => {
         <Fragment key={node.ref_id}>
           <Node
             color="#353A46"
+            description={node?.properties?.description}
             height={nodeHeight}
             name={node?.properties?.name || ''}
             onButtonClick={console.log}
@@ -136,6 +137,7 @@ export const Board = () => {
             <Node
               key={`${relatedNode.ref_id}-${node.ref_id}`}
               color="#353A46"
+              description={relatedNode?.properties?.description}
               height={nodeHeight}
               name={relatedNode?.properties?.name || ''}
               onButtonClick={console.log}

diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx
@@ -111,6 +111,7 @@ export const colors = {
   DIVIDER_4: 'rgba(46, 55, 67, 1)',
   INPUT_BG: 'rgba(255, 255, 255, 0.05)',
   INPUT_PLACEHOLDER: 'rgba(255, 255, 255, 0.5)',
+  HOVER_CARD_BG: 'rgba(41, 44, 54, 1)',
 } as const
 
 export type ColorName = keyof typeof colors