diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index 647a929..8b150d5 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -1,13 +1,73 @@ -import { Select } from "@chakra-ui/react"; +import { animated, useSpring } from "react-spring"; +import { useRef, useEffect, useState } from "react"; +import classNames from "classnames"; +import Icon from "./Icon"; +import { COLORS } from "../consts/colors"; +import { DownOutlined } from "@ant-design/icons"; export default function Dropdown({ options, onChange }) { + const [selectedOption, setSelectedOption] = useState(); + const [isShowingOptions, setIsShowingOptions] = useState(false); + const [style, animate] = useSpring(() => ({ height: "0px" }), []); + const ref = useRef(null); + + useEffect(() => { + animate({ + height: (isShowingOptions ? ref.current.offsetHeight : 0) + "px", + }); + }, [animate, ref, isShowingOptions]); + return ( - +
+ <> +
+ setIsShowingOptions(!isShowingOptions)} + > + {selectedOption ? selectedOption : `Select an Option`} + +
+ setIsShowingOptions(!isShowingOptions)}> + + +
+
+ + + {isShowingOptions && ( + +
+ {options.map((option) => { + return ( + { + setIsShowingOptions(false); + setSelectedOption(option); + onChange(option); + }} + > + {option} + + ); + })} +
+
+ )} +
); } diff --git a/src/components/PopupContent.jsx b/src/components/PopupContent.jsx index 01ada4f..2f8bb15 100644 --- a/src/components/PopupContent.jsx +++ b/src/components/PopupContent.jsx @@ -74,7 +74,7 @@ export default function PopupContent({ {explanation && (