close hover card when drawer is active

OpenBeta · May 29, 2024 · 7d7a881 · 7d7a881
1 parent b58458f
commit 7d7a881
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/src/components/maps/GlobalMap.tsx b/src/components/maps/GlobalMap.tsx
@@ -106,9 +106,9 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
       const { layer, geometry, properties } = feature
 
       setClickInfo(prev => {
-        setActiveFeatureVisual(prev, { selected: false })
+        setActiveFeatureVisual(prev, { selected: false, hover: false })
         const activeFeature = tileToFeature(layer.id, event.point, geometry, properties as TileProps, mapInstance)
-        setActiveFeatureVisual(activeFeature, { selected: true })
+        setActiveFeatureVisual(activeFeature, { selected: true, hover: false })
         return activeFeature
       })
     }
@@ -119,9 +119,10 @@ export const GlobalMap: React.FC<GlobalMapProps> = ({
    */
   const onHoverCardClick = (feature: ActiveFeature): void => {
     setClickInfo(prevFeature => {
-      setActiveFeatureVisual(prevFeature, { selected: false })
+      setHoverInfo(null)
+      setActiveFeatureVisual(prevFeature, { selected: false, hover: false })
       if (feature.type === 'area-boundaries') {
-        setActiveFeatureVisual(feature, { selected: true })
+        setActiveFeatureVisual(feature, { selected: true, hover: false })
       }
       return feature
     })

diff --git a/src/components/maps/TileHandlers/CragContent.tsx b/src/components/maps/TileHandlers/CragContent.tsx
@@ -58,7 +58,7 @@ const MicroClimbList: React.FC<{ climbs: SimpleClimbType[] }> = ({ climbs }) =>
   )
 }
 
-export const CragHoverCardContent: React.FC<CragFeatureProperties> = ({ id, areaName, climbs, media }) => {
+export const CragHoverCardContent: React.FC<CragFeatureProperties> = ({ id, areaName, climbs }) => {
   return (
     <div className='flex flex-col gap-y-1 text-xs'>
       <a
@@ -68,11 +68,7 @@ export const CragHoverCardContent: React.FC<CragFeatureProperties> = ({ id, area
       >
         {areaName}
       </a>
-      <div className='font-sm text-secondary flex items-center gap-1'>
-        <EntityIcon type='crag' size={16} />
-        ·
-        <span className='text-xs'>{climbs.length} climbs</span>
-      </div>
+      <Subheading id={id} totalClimbs={climbs.length} />
     </div>
   )
 }