highlight selected intervention

src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx

@@ -8,33 +8,34 @@ type InterventionData = {
   index: number
 };
 interface InterventionListProps {
-  siteList: InterventionData[];
-  setSelectedSite: SetState<string>;
+  interventionList: InterventionData[];
+  setSelectedIntervention: SetState<string>;
   setIsMenuOpen: SetState<boolean>;
   selectedSiteData: InterventionData | undefined;
+  selectedIntervention: string
 }
 const InterventionList = ({
-  siteList,
-  setSelectedSite,
+  interventionList,
+  setSelectedIntervention,
   setIsMenuOpen,
   selectedSiteData,
 }: InterventionListProps) => {
   const handleSiteSelection = (index: number, key: string) => {
     setIsMenuOpen(false);
-    setSelectedSite(key);
+    setSelectedIntervention(key);
   };
 
   return (
     <ul className={styles.siteListOptions}>
-      {siteList.map((site, index) => {
+      {interventionList.map((intervention, index) => {
         return (
           <li
-            className={`${styles.listItem} ${site.index === selectedSiteData?.index ? styles.selectedItem : ''
+            className={`${styles.listItem} ${intervention.value === selectedSiteData?.value ? styles.selectedItem : ''
               }`}
-            onClick={() => handleSiteSelection(index, site.value)}
+            onClick={() => handleSiteSelection(index, intervention.value)}
             key={index}
           >
-            <p>{site.label}</p>
+            <p>{intervention.label}</p>
           </li>
         );
       })}

src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx

@@ -28,7 +28,7 @@ const InterventionDropdown = ({
   isMobile
 }: Props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const siteList = useMemo(() => {
+  const interventionList = useMemo(() => {
     if (!allIntervention) return [];
     return allIntervention.map((el) => ({
       label: el.label,
@@ -48,15 +48,15 @@ const InterventionDropdown = ({
     <>
       <div className={styles.dropdownButton} onClick={toggleMenu}>
         <div className={styles.siteIconAndTextContainer} >
-          <InterventionIcon width={27} color={'#333'} />
+          <InterventionIcon />
           <>
             {selectedSiteData && (
               <div className={styles.labelTextContainer}>
-                {isMobile?<label className={styles.sitesLabel}>{truncateString(selectedSiteData?.label, 40)}
-                </label>:
-                <p className={styles.siteName}  style={{marginTop:'5px'}}>
-                  {truncateString(selectedSiteData?.label, 40)}
-                </p>}
+                {isMobile ? <label className={styles.sitesLabel}>{truncateString(selectedSiteData?.label, 40)}
+                </label> :
+                  <p className={styles.siteName} style={{ marginTop: '5px' }}>
+                    {truncateString(selectedSiteData?.label, 40)}
+                  </p>}
               </div>
             )}
           </>
@@ -71,10 +71,11 @@ const InterventionDropdown = ({
       </div>
       {isMenuOpen && (
         <InterventionList
-          siteList={siteList}
-          setSelectedSite={setSelectedIntervention}
+          interventionList={interventionList}
+          setSelectedIntervention={setSelectedIntervention}
           setIsMenuOpen={setIsMenuOpen}
           selectedSiteData={selectedSiteData}
+          selectedIntervention={selectedIntervention}
         />
       )}
     </>