diff --git a/src/temp/Explore/CustomSlider.tsx b/src/temp/Explore/CustomSlider.tsx new file mode 100644 index 0000000000..8fbcd6468c --- /dev/null +++ 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 new file mode 100644 index 0000000000..839018fc61 --- /dev/null +++ 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 index 3b26781145..111c00a25e 100644 --- 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 index df5e932dc9..7a7157bfb7 100644 --- 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 ( + <> +
+
+
{infoIcon}
+
{label}
+
+
{switchComponent}
+
+ + ); +}; + +export const YearRangeSlider = ({ + startYear, + endYear, +}: YearRangeSliderProps) => { + const minDistance = 10; + const [value1, setValue1] = useState([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 ( +
+
+
+ +
+
+ 'Minimum distance'} + value={value1} + onChange={handleChange1} + getAriaValueText={valuetext} + disableSwap + /> +
+
+
{startYear}
+
{endYear}
+
+ ); +}; + +const ExploreButton = ({ + label, + isOpen, + startYear, + endYear, +}: ExploreButtonProps) => { return ( - + <> + + {isOpen ? ( +
+
+
+ } + label={'Current Forest'} + switchComponent={} + /> +
+ } + label={'Restoration Potential'} + switchComponent={} + /> +
+ } + label={'Deforestation'} + switchComponent={} + /> + +
+ } + /> +
+
+ The world has about 3 trillion trees today (“Forests”). And space + for up to a trillion more (“Reforestation Potential”). +
+
+
+ ) : ( + <> + )} + ); }; diff --git a/src/temp/icons/ExploreIcon.tsx b/src/temp/icons/ExploreIcon.tsx index 8326fb5337..6616fe21a0 100644 --- a/src/temp/icons/ExploreIcon.tsx +++ b/src/temp/icons/ExploreIcon.tsx @@ -1,4 +1,4 @@ -const ExploreIcon = () => { +export const ExploreIcon = () => { return ( { ); }; - -export default ExploreIcon; diff --git a/src/temp/icons/InfoIcon.tsx b/src/temp/icons/InfoIcon.tsx new file mode 100644 index 0000000000..d52da8d710 --- /dev/null +++ b/src/temp/icons/InfoIcon.tsx @@ -0,0 +1,30 @@ +const InfoIcon = () => { + return ( + + + + + + + + + + + ); +}; + +export default InfoIcon; diff --git a/src/temp/stories/ExploreButton.stories.tsx b/src/temp/stories/ExploreButton.stories.tsx index a47b1ba137..48add5309f 100644 --- a/src/temp/stories/ExploreButton.stories.tsx +++ b/src/temp/stories/ExploreButton.stories.tsx @@ -1,5 +1,6 @@ import ExploreButton from '../Explore/ExploreButton'; import type { Meta, StoryObj } from '@storybook/react'; +import InfoIcon from '../icons/InfoIcon'; const meta: Meta = { component: ExploreButton, @@ -11,5 +12,17 @@ type Story = StoryObj; export const close: Story = { args: { label: 'Explore', + isOpen: false, + startYear: 0, + endYear: 0, + }, +}; + +export const open: Story = { + args: { + label: 'Explore', + isOpen: true, + startYear: 2001, + endYear: 2024, }, };