(
ref?: React.Ref (
break;
case 'ghost':
buttonStyle.push(
- 'text-white bg-transaprent border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100'
+ 'text-white bg-transparent border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100'
);
break;
default:
diff --git a/src/components/Common/ButtonWithDropdown/index.tsx b/src/components/Common/ButtonWithDropdown/index.tsx
index be6815b94..b5bc0cb64 100644
--- a/src/components/Common/ButtonWithDropdown/index.tsx
+++ b/src/components/Common/ButtonWithDropdown/index.tsx
@@ -1,7 +1,7 @@
import useClickOutside from '@app/hooks/useClickOutside';
import { withProperties } from '@app/utils/typeHelpers';
import { Transition } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/solid';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
import { Fragment, useRef, useState } from 'react';
diff --git a/src/components/Common/ConfirmButton/index.tsx b/src/components/Common/ConfirmButton/index.tsx
index 1f5756cb9..4234da68a 100644
--- a/src/components/Common/ConfirmButton/index.tsx
+++ b/src/components/Common/ConfirmButton/index.tsx
@@ -1,6 +1,6 @@
import Button from '@app/components/Common/Button';
import useClickOutside from '@app/hooks/useClickOutside';
-import { useRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
interface ConfirmButtonProps {
onClick: () => void;
@@ -9,50 +9,51 @@ interface ConfirmButtonProps {
children: React.ReactNode;
}
-const ConfirmButton = ({
- onClick,
- children,
- confirmText,
- className,
-}: ConfirmButtonProps) => {
- const ref = useRef(null);
- useClickOutside(ref, () => setIsClicked(false));
- const [isClicked, setIsClicked] = useState(false);
- return (
-
+ );
+ }
+);
+
+ConfirmButton.displayName = 'ConfirmButton';
export default ConfirmButton;
diff --git a/src/components/Common/MultiRangeSlider/index.tsx b/src/components/Common/MultiRangeSlider/index.tsx
new file mode 100644
index 000000000..c3da2b577
--- /dev/null
+++ b/src/components/Common/MultiRangeSlider/index.tsx
@@ -0,0 +1,113 @@
+import Tooltip from '@app/components/Common/Tooltip';
+import useDebouncedState from '@app/hooks/useDebouncedState';
+import { useEffect, useRef } from 'react';
+
+type MultiRangeSliderProps = {
+ min: number;
+ max: number;
+ defaultMinValue?: number;
+ defaultMaxValue?: number;
+ subText?: string;
+ onUpdateMin: (min: number) => void;
+ onUpdateMax: (max: number) => void;
+};
+
+const MultiRangeSlider = ({
+ min,
+ max,
+ defaultMinValue,
+ defaultMaxValue,
+ subText,
+ onUpdateMin,
+ onUpdateMax,
+}: MultiRangeSliderProps) => {
+ const touched = useRef(false);
+ const [valueMin, finalValueMin, setValueMin] = useDebouncedState(
+ defaultMinValue ?? min
+ );
+ const [valueMax, finalValueMax, setValueMax] = useDebouncedState(
+ defaultMaxValue ?? max
+ );
+
+ const minThumb = ((valueMin - min) / (max - min)) * 100;
+ const maxThumb = ((valueMax - min) / (max - min)) * 100;
+
+ useEffect(() => {
+ if (touched.current) {
+ onUpdateMin(finalValueMin);
+ }
+ }, [finalValueMin, onUpdateMin]);
+
+ useEffect(() => {
+ if (touched.current) {
+ onUpdateMax(finalValueMax);
+ }
+ }, [finalValueMax, onUpdateMax]);
+
+ useEffect(() => {
+ touched.current = false;
+ setValueMax(defaultMaxValue ?? max);
+ setValueMin(defaultMinValue ?? min);
+ }, [defaultMinValue, defaultMaxValue, setValueMax, setValueMin, min, max]);
+
+ return (
+
@@ -83,7 +83,7 @@ const SlideOver = ({
className="text-gray-200 transition duration-150 ease-in-out hover:text-white"
onClick={() => onClose()}
>
-