refactor: extract YearRangeSlider to separate component (unused)

src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss

@@ -157,43 +157,6 @@
   margin-top: 2px;
 }
 
-.rangeMainContainer {
-  width: 150px;
-  height: 30px;
-  background-color: rgba(var(--deforestration-range-background-new), 0.1);
-  margin-top: 6px;
-  border-radius: 6px;
-}
-.rangeContainer {
-  padding-left: 8px;
-  display: flex;
-  gap: 12px;
-}
-
-.playIconContainer {
-  display: flex;
-  margin-top: 8px;
-}
-
-.sliderContainer {
-  width: 107px;
-  display: flex;
-  margin-top: 10px;
-}
-
-.yearRangeContainer {
-  display: flex;
-  padding-left: 22px;
-  padding-right: 8px;
-  justify-content: space-between;
-  margin-top: 1px;
-}
-.endYear,
-.startYear {
-  font-size: $fontXXXXSmallNew;
-  font-weight: 400;
-}
-
 .exploreDescription {
   height: fit-content;
   font-size: var(--font-xx-extra-small);

src/features/projectsV2/ProjectsMap/MapFeatureExplorer/YearSlider/YearSlider.module.scss

@@ -0,0 +1,39 @@
+@import '../../../../../theme/theme';
+
+.rangeMainContainer {
+  width: 150px;
+  height: 30px;
+  background-color: rgba(var(--deforestration-range-background-new), 0.1);
+  margin-top: 6px;
+  border-radius: 6px;
+}
+
+.rangeContainer {
+  padding-left: 8px;
+  display: flex;
+  gap: 12px;
+}
+
+.playIconContainer {
+  display: flex;
+  margin-top: 8px;
+}
+
+.sliderContainer {
+  width: 107px;
+  display: flex;
+  margin-top: 10px;
+}
+
+.yearRangeContainer {
+  display: flex;
+  padding-left: 22px;
+  padding-right: 8px;
+  justify-content: space-between;
+  margin-top: 1px;
+}
+.endYear,
+.startYear {
+  font-size: $fontXXXXSmallNew;
+  font-weight: 400;
+}

src/features/projectsV2/ProjectsMap/MapFeatureExplorer/YearSlider/index.tsx

@@ -0,0 +1,59 @@
+// Unused code - for future reference while implementing the deforestation timeline slider
+
+import { useState } from 'react';
+import { SmallSlider } from '../CustomSlider';
+import styles from './YearSlider.module.scss';
+import PlayIcon from '../../../../../../public/assets/images/icons/projectV2/PlayIcon';
+
+export interface YearRangeSliderProps {
+  startYear: number;
+  endYear: number;
+}
+
+export const YearRangeSlider = () => {
+  const minDistance = 10;
+  const [value1, setValue1] = useState<number[]>([20, 37]);
+
+  function valuetext(value: number) {
+    return `${value}°C`;
+  }
+
+  const handleChange1 = (
+    event: Event,
+    newValue: number | number[],
+    activeThumb: number
+  ) => {
+    if (!Array.isArray(newValue)) {
+      return;
+    }
+
+    if (activeThumb === 0) {
+      setValue1([Math.min(newValue[0], value1[1] - minDistance), value1[1]]);
+    } else {
+      setValue1([value1[0], Math.max(newValue[1], value1[0] + minDistance)]);
+    }
+  };
+
+  return (
+    <div className={styles.rangeMainContainer}>
+      <div className={styles.rangeContainer}>
+        <div className={styles.playIconContainer}>
+          <PlayIcon width={'8px'} />
+        </div>
+        <div className={styles.sliderContainer}>
+          <SmallSlider
+            getAriaLabel={() => 'Minimum distance'}
+            value={value1}
+            onChange={handleChange1}
+            getAriaValueText={valuetext}
+            disableSwap
+          />
+        </div>
+      </div>
+      <div className={styles.yearRangeContainer}>
+        <div className={styles.startYear}>{'2012'}</div>
+        <div className={styles.endYear}>{'2024'}</div>
+      </div>
+    </div>
+  );
+};

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

@@ -2,31 +2,17 @@ import type { MapOptions } from '../../ProjectsMapContext';
 
 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { Modal } from '@mui/material';
 import { ExploreIcon } from '../../../../../public/assets/images/icons/projectV2/ExploreIcon';
-import styles from './MapFeatureExplorer.module.scss';
-// import { SmallSlider } from './CustomSlider';
-// import PlayIcon from '../../../../../public/assets/images/icons/projectV2/PlayIcon';
 import CustomButton from './CustomButton';
 import MapSettings from './MapSettings';
-import { Modal } from '@mui/material';
-
-/* interface ExploreProjectProps {
-  label: string | string[];
-  isOpen: boolean;
-  startYear: number;
-  endYear: number;
-} */
+import styles from './MapFeatureExplorer.module.scss';
 
 interface EcosystemOptionProps {
   label: string;
   switchComponent: React.ReactNode;
 }
 
-export interface YearRangeSliderProps {
-  startYear: number;
-  endYear: number;
-}
-
 export const MapLayerToggle = ({
   label,
   switchComponent,
@@ -43,54 +29,6 @@ export const MapLayerToggle = ({
   );
 };
 
-/* export const YearRangeSlider = () => {
-  const minDistance = 10;
-  const [value1, setValue1] = useState<number[]>([20, 37]);
-
-  function valuetext(value: number) {
-    return `${value}°C`;
-  }
-
-  const handleChange1 = (
-    event: Event,
-    newValue: number | number[],
-    activeThumb: number
-  ) => {
-    if (!Array.isArray(newValue)) {
-      return;
-    }
-
-    if (activeThumb === 0) {
-      setValue1([Math.min(newValue[0], value1[1] - minDistance), value1[1]]);
-    } else {
-      setValue1([value1[0], Math.max(newValue[1], value1[0] + minDistance)]);
-    }
-  };
-
-  return (
-    <div className={styles.rangeMainContainer}>
-      <div className={styles.rangeContainer}>
-        <div className={styles.playIconContainer}>
-          <PlayIcon width={'8px'} />
-        </div>
-        <div className={styles.sliderContainer}>
-          <SmallSlider
-            getAriaLabel={() => 'Minimum distance'}
-            value={value1}
-            onChange={handleChange1}
-            getAriaValueText={valuetext}
-            disableSwap
-          />
-        </div>
-      </div>
-      <div className={styles.yearRangeContainer}>
-        <div className={styles.startYear}>{'2012'}</div>
-        <div className={styles.endYear}>{'2024'}</div>
-      </div>
-    </div>
-  );
-}; */
-
 type MapFeatureExplorerProps = {
   mapOptions: MapOptions;
   updateMapOption: (option: keyof MapOptions, value: boolean) => void;