code clean up for the explore drop down

Plant-for-the-Planet-org · Jan 30, 2024 · b59bd37 · b59bd37
1 parent cc817b2
commit b59bd37
Show file tree

Hide file tree

Showing 7 changed files with 369 additions and 9 deletions.
diff --git a/src/temp/Explore/CustomSlider.tsx b/src/temp/Explore/CustomSlider.tsx
@@ -0,0 +1,21 @@
+import { Slider, styled } from '@mui/material';
+export const SmallSlider = styled(Slider)(() => ({
+  '&.MuiSlider-root': {
+    padding: '0px !important',
+    position: 'static',
+  },
+  '.MuiSlider-thumb': {
+    width: '9px !important',
+    height: '9px !important',
+    border: '1px solid rgba(217, 217, 217, 1)',
+    color: 'rgba(255, 255, 255, 1)',
+  },
+  '.MuiSlider-rail': {
+    height: '2.5px !important',
+    backgroundColor: 'rgba(255, 255, 255, 1) !important',
+  },
+  '.MuiSlider-track': {
+    height: '2.5px !important',
+    color: 'rgba(235, 87, 87, 1)',
+  },
+}));
diff --git a/src/temp/Explore/CustomSwitch.tsx b/src/temp/Explore/CustomSwitch.tsx
@@ -0,0 +1,62 @@
+import { Switch, styled } from '@mui/material';
+
+const baseSwitchStyle = {
+  '.MuiSwitch-track': {
+    height: '7px',
+    width: '18px',
+  },
+  '.MuiSwitch-thumb': {
+    width: '11px',
+    height: '11px',
+  },
+  '.MuiSwitch-switchBase': {
+    padding: '1px',
+  },
+  '&.MuiSwitch-root': {
+    width: '38px',
+    height: '26px',
+    padding: '3px',
+  },
+  '.MuiSwitch-switchBase.Mui-checked': {
+    transform: 'translateX(11px) !important',
+  },
+};
+
+export const SmallSwitchDarkGreen = styled(Switch)(({}) => ({
+  ...baseSwitchStyle,
+  '.MuiSwitch-switchBase.Mui-checked': {
+    ...baseSwitchStyle['.MuiSwitch-switchBase.Mui-checked'],
+    color: 'rgba(33, 150, 83, 1)',
+  },
+  '.MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track': {
+    backgroundColor: '#CAE6D6',
+  },
+}));
+
+export const SmallSwitchBlue = styled(Switch)(({}) => ({
+  ...baseSwitchStyle,
+  '.MuiSwitch-switchBase.Mui-checked': {
+    ...baseSwitchStyle['.MuiSwitch-switchBase.Mui-checked'],
+    color: 'rgba(47, 128, 237, 1)',
+  },
+  '.MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track': {
+    backgroundColor: '#CDE1FB',
+  },
+}));
+
+export const SmallSwitchRed = styled(Switch)(({}) => ({
+  ...baseSwitchStyle,
+  '.MuiSwitch-track': {
+    ...baseSwitchStyle['.MuiSwitch-track'],
+    color: 'black',
+  },
+  '.MuiSwitch-switchBase.Mui-checked': {
+    ...baseSwitchStyle['.MuiSwitch-switchBase.Mui-checked'],
+    color: 'rgba(235, 87, 87, 1)',
+  },
+  '.MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track': {
+    backgroundColor: '#FAD7D7',
+  },
+}));
+
+export const SmallSwitch = styled(Switch)(baseSwitchStyle);
diff --git a/src/temp/Explore/Explore.module.scss b/src/temp/Explore/Explore.module.scss
@@ -9,3 +9,95 @@
   margin-left: 4px !important;
   font-size: 12px !important;
 }
+
+.exploreMainContainer {
+  width: 182px;
+  height: 232px;
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 12px;
+  margin-top: 10px;
+  margin-left: 3px;
+  padding-top: 14px;
+}
+
+.exploreContainer {
+  width: 150px;
+  height: 218px;
+  margin-left: 16px;
+}
+
+.ecosystemMainContainer {
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ecosystemContainer {
+  display: flex;
+  font-size: 10px;
+  font-weight: 400;
+  align-items: center;
+  gap: 4px;
+  text-transform: capitalize;
+}
+
+.switchContainer {
+  height: 14px;
+  width: 24px;
+}
+
+.infoIconConatiner {
+  margin-top: 2px;
+}
+
+.rangeMainContainer {
+  width: 150px;
+  height: 30px;
+  background-color: rgba(235, 87, 87, 0.1);
+  margin-top: 6px;
+  border-radius: 6px;
+  position: relative;
+}
+.rangeContainer {
+  width: 131px;
+  height: 8px;
+  position: absolute;
+  left: 8px;
+  top: 6px;
+}
+
+.playIconContainer {
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+
+.sliderContainer {
+  width: 107px;
+  position: absolute;
+  left: 20px;
+  bottom: -7px;
+}
+.endYear,
+.startYear {
+  position: absolute;
+  font-size: 6px;
+  font-weight: 400;
+  top: 17px;
+}
+
+.startYear {
+  left: 21px;
+}
+.endYear {
+  left: 130px;
+}
+.exploreDescription {
+  padding: 8px;
+  height: fit-content;
+  margin-top: 14px;
+  background-color: rgba(242, 242, 242, 1);
+  border-radius: 6px;
+  font-size: 8px;
+}
diff --git a/src/temp/Explore/ExploreButton.tsx b/src/temp/Explore/ExploreButton.tsx
@@ -1,17 +1,161 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Button from '@mui/material/Button';
-import ExploreIcon from '../icons/ExploreIcon';
+import { ExploreIcon } from '../icons/ExploreIcon';
 import style from './Explore.module.scss';
+import InfoIcon from '../icons/InfoIcon';
+import {
+  SmallSwitch,
+  SmallSwitchBlue,
+  SmallSwitchDarkGreen,
+  SmallSwitchRed,
+} from './CustomSwitch';
+import { SmallSlider } from './CustomSlider';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 
 interface ExploreButtonProps {
+  label: string | string[];
+  isOpen: boolean;
+  startYear: number;
+  endYear: number;
+}
+
+interface EcosystemOptionProps {
+  infoIcon: React.ReactNode;
   label: string;
+  switchComponent: React.ReactNode;
+}
+
+interface YearRangeSliderProps {
+  startYear: number;
+  endYear: number;
 }
 
-const ExploreButton = ({ label }: ExploreButtonProps) => {
+export const EcosystemOption = ({
+  infoIcon,
+  label,
+  switchComponent,
+}: EcosystemOptionProps) => {
+  return (
+    <>
+      <div className={style.ecosystemMainContainer}>
+        <div className={style.ecosystemContainer}>
+          <div className={style.infoIconConatiner}>{infoIcon}</div>
+          <div>{label}</div>
+        </div>
+        <div className={style.switchContainer}>{switchComponent}</div>
+      </div>
+    </>
+  );
+};
+
+export const YearRangeSlider = ({
+  startYear,
+  endYear,
+}: YearRangeSliderProps) => {
+  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={style.rangeMainContainer}>
+      <div className={style.rangeContainer}>
+        <div className={style.playIconContainer}>
+          <PlayArrowIcon
+            fontSize="medium"
+            sx={{
+              position: 'absolute',
+              top: '-8px',
+              left: '-6px',
+              width: '16px',
+              height: '1em',
+            }}
+          />
+        </div>
+        <div className={style.sliderContainer}>
+          <SmallSlider
+            getAriaLabel={() => 'Minimum distance'}
+            value={value1}
+            onChange={handleChange1}
+            getAriaValueText={valuetext}
+            disableSwap
+          />
+        </div>
+      </div>
+      <div className={style.startYear}>{startYear}</div>
+      <div className={style.endYear}>{endYear}</div>
+    </div>
+  );
+};
+
+const ExploreButton = ({
+  label,
+  isOpen,
+  startYear,
+  endYear,
+}: ExploreButtonProps) => {
   return (
-    <Button startIcon={<ExploreIcon />} className={style.customButton}>
-      {label}
-    </Button>
+    <>
+      <Button startIcon={<ExploreIcon />} className={style.customButton}>
+        {label}
+      </Button>
+      {isOpen ? (
+        <div className={style.exploreMainContainer}>
+          <div className={style.exploreContainer}>
+            <div>
+              <EcosystemOption
+                infoIcon={<InfoIcon />}
+                label={'Current Forest'}
+                switchComponent={<SmallSwitchDarkGreen />}
+              />
+              <hr />
+              <EcosystemOption
+                infoIcon={<InfoIcon />}
+                label={'Restoration Potential'}
+                switchComponent={<SmallSwitchBlue />}
+              />
+              <hr />
+              <EcosystemOption
+                infoIcon={<InfoIcon />}
+                label={'Deforestation'}
+                switchComponent={<SmallSwitchRed />}
+              />
+              <YearRangeSlider startYear={startYear} endYear={endYear} />
+              <hr />
+              <EcosystemOption
+                infoIcon={undefined}
+                label={'Projects'}
+                switchComponent={<SmallSwitch />}
+              />
+            </div>
+            <div className={style.exploreDescription}>
+              The world has about 3 trillion trees today (“Forests”). And space
+              for up to a trillion more (“Reforestation Potential”).
+            </div>
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
   );
 };
 

diff --git a/src/temp/icons/ExploreIcon.tsx b/src/temp/icons/ExploreIcon.tsx
@@ -1,4 +1,4 @@
-const ExploreIcon = () => {
+export const ExploreIcon = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -21,5 +21,3 @@ const ExploreIcon = () => {
     </svg>
   );
 };
-
-export default ExploreIcon;
diff --git a/src/temp/icons/InfoIcon.tsx b/src/temp/icons/InfoIcon.tsx
@@ -0,0 +1,30 @@
+const InfoIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="10px"
+      height="10px"
+      viewBox="0 0 11 11"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_898_306)">
+        <path
+          d="M5.83691 0.836914C3.0758 0.836914 0.836914 3.0758 0.836914 5.83691C0.836914 8.59803 3.0758 10.8369 5.83691 10.8369C8.59803 10.8369 10.8369 8.59803 10.8369 5.83691C10.8369 3.0758 8.59803 0.836914 5.83691 0.836914ZM6.72247 7.9358L6.66136 8.14025C6.65136 8.1758 6.63025 8.20691 6.60136 8.23025C6.25691 8.49469 5.8158 8.59802 5.39025 8.51469L5.39358 8.51025C5.38247 8.50803 5.37136 8.50691 5.36025 8.50358C4.99358 8.41247 4.77025 8.04247 4.86136 7.6758L5.33691 5.76136C5.45025 5.30247 4.94691 5.41136 4.73914 5.47469C4.71358 5.48247 4.68691 5.46803 4.67914 5.44247C4.67691 5.43358 4.67691 5.42358 4.67914 5.41469L4.74025 5.21025C4.75025 5.17469 4.77136 5.14358 4.80025 5.12025C5.14469 4.8558 5.5858 4.75247 6.01136 4.8358C6.01136 4.8358 6.03803 4.84025 6.05136 4.84358C6.41803 4.93469 6.64136 5.30469 6.55025 5.67136L6.05025 7.68469C6.02803 8.03136 6.47025 7.93469 6.66358 7.8758C6.68914 7.86802 6.7158 7.88247 6.72358 7.90803C6.7258 7.91691 6.7258 7.92691 6.72358 7.9358H6.72247ZM6.28247 4.56136C5.88802 4.56136 5.56803 4.24136 5.56803 3.84691C5.56803 3.45247 5.88802 3.13247 6.28247 3.13247C6.67691 3.13247 6.99691 3.45247 6.99691 3.84691C6.99691 4.24136 6.67691 4.56136 6.28247 4.56136Z"
+          fill="#BDBDBD"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_898_306">
+          <rect
+            width="10"
+            height="10"
+            fill="white"
+            transform="translate(0.836914 0.836914)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default InfoIcon;