Try to fix image mapper problem

pnpm-lock.yaml

@@ -655,6 +655,7 @@ importers:
       react-merge-refs: ^2.0.1
       react-slick: ^0.29.0
       react-use-measure: ^2.1.1
+      reactjs-img-mapper: ^1.0.3
       screenfull: ^6.0.2
       tabbable: ^5.2.1
       tailwindcss: ^3.0.13
@@ -704,6 +705,7 @@ importers:
       react-merge-refs: 2.0.1
       react-slick: 0.29.0_biqbaboplfbrettd7655fr4n2y
       react-use-measure: 2.1.1_biqbaboplfbrettd7655fr4n2y
+      reactjs-img-mapper: 1.0.3_biqbaboplfbrettd7655fr4n2y
       screenfull: 6.0.2
       tabbable: 5.3.3
       tailwindcss: 3.1.8_postcss@8.4.16
@@ -9772,6 +9774,19 @@ packages:
       tslib: 2.4.0
     dev: false
 
+  /react-tooltip/4.5.1_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==}
+    engines: {npm: '>=6.13'}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      uuid: 7.0.3
+    dev: false
+
   /react-use-measure/2.1.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==}
     peerDependencies:
@@ -9798,6 +9813,18 @@ packages:
     dependencies:
       loose-envify: 1.4.0
 
+  /reactjs-img-mapper/1.0.3_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-oeYKMH02BjGfoN8x91VeHnYOgrVIpWeNeRh0njHP/1NXl11nTyuHTwVCB9kykrcOUekt+lktUlkIRCKwMYAXRA==}
+    peerDependencies:
+      react: 16.x || 17.x || 18.x
+      react-dom: 16.x || 17.x || 18.x
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-fast-compare: 3.2.0
+      react-tooltip: 4.5.1_biqbaboplfbrettd7655fr4n2y
+    dev: false
+
   /read-cache/1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
@@ -11219,6 +11246,11 @@ packages:
       lodash.isplainobject: 4.0.6
     dev: false
 
+  /uuid/7.0.3:
+    resolution: {integrity: sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==}
+    hasBin: true
+    dev: false
+
   /uuid/8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true

site/components/common/HomePage/PolygonModal/PolygonModal.tsx

@@ -9,7 +9,7 @@ import {
 import decadesManifest from '../../../../static_data/decadesManifest.json'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
-import ImageMapper from 'react-img-mapper'
+import ImageMapper from 'reactjs-img-mapper'
 import Image from 'next/image'
 
 export default function MarkerCardModal(props: {

site/components/product/ProductCard/ProductCard.tsx

@@ -39,6 +39,7 @@ const ProductCard: FC<Props> = ({
 
   const [isHover, setIsHover] = useState(false)
   const hoverCardBgColor = useColorModeValue('white', 'gray.800')
+  const fontColor = useColorModeValue("black", "black");
 
   return (
     <Link href={`/product/${product.slug}`}>
@@ -152,11 +153,11 @@ const ProductCard: FC<Props> = ({
                 )}
               </div>
               <Stack backgroundColor={"white"} pt={10} align={'center'}>
-                  <Heading fontSize={'lg'} fontFamily={'body'} fontWeight={500} textAlign={"center"}>
+                  <Heading color={fontColor} fontSize={'lg'} fontFamily={'body'} fontWeight={500} textAlign={"center"}>
                     {product.name}
                   </Heading>
                   <Stack direction={'row'} align={'center'}>
-                    <Text fontWeight={800} fontSize={'xl'}>
+                    <Text color={fontColor} fontWeight={800} fontSize={'xl'}>
                     {`${price} ${product.price?.currencyCode}`}
                     </Text>
                   </Stack>

site/package.json

@@ -56,6 +56,7 @@
     "react-merge-refs": "^2.0.1",
     "react-slick": "^0.29.0",
     "react-use-measure": "^2.1.1",
+    "reactjs-img-mapper": "^1.0.3",
     "screenfull": "^6.0.2",
     "tabbable": "^5.2.1",
     "tailwindcss": "^3.0.13",

site/pages/index.tsx

@@ -15,9 +15,7 @@ export default function Home() {
 
   const { isOpen, onOpen, onClose } = useDisclosure()
 
-  const mapDefinition = {
+  const mapAreas = [
-    name: 'my-map',
-    areas: [
       {
         id: '12',
         title: '2000',
@@ -58,8 +56,7 @@ export default function Home() {
         shape: 'poly',
         href: '#',
       },
-    ],
+    ]
-  }
 
   useEffect(() => {
     // Handler to call on window resize
@@ -82,8 +79,6 @@ export default function Home() {
       <section id="mapContainer" className="w-full">
         <div>
           <ImageMapper
-            natural
-            stayHighlighted
             onClick={(area) => {
               setDecadeClicked(area.id!)
               onOpen()
@@ -91,7 +86,7 @@ export default function Home() {
             parentWidth={mapContainerWidth}
             responsive={true}
             src={imagePath}
-            map={mapDefinition}
+            map={{ name: "my-map", areas: mapAreas }}
           ></ImageMapper>
           <PolygonModal
             key={decadeClicked}