Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 1x 1x 1x 1x 1x 1x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 4x 4x 4x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 28x 1x 1x | import { useState, useId } from 'react';
import RangeSlider from 'react-range-slider-input';
import 'react-range-slider-input/dist/style.css';
import { Icon } from '@/components/ui/icons';
const PriceDropdown = () => {
const [toggleDropdown, setToggleDropdown] = useState(true);
const contentId = useId();
const [selectedPrice, setSelectedPrice] = useState({
from: 0,
to: 100});
return (
<div className="bg-white dark:bg-gray-800 shadow-1 rounded-lg">
<button
type="button"
onClick={() => setToggleDropdown(!toggleDropdown)}
aria-expanded={toggleDropdown}
aria-controls={contentId}
className="w-full flex items-center justify-between py-3 pl-6 pr-5.5"
>
<span className="text-dark dark:text-gray-100 font-medium">Price</span>
<Icon
name="chevron-down"
className="fill-current text-dark dark:text-gray-300"
size={24}
rotate={toggleDropdown ? 180 : 0}
aria-hidden="true"
/>
</button>
{/* Price range filter */}
<div
id={contentId}
className={`p-6 ${toggleDropdown ? 'block' : 'hidden'}`}
role="group"
aria-label="Price range filter"
>
<div className="price-range">
<RangeSlider
id="range-slider-gradient"
className="margin-lg"
step={'any'}
ariaLabel={['Minimum price', 'Maximum price']}
onInput={(e: number[]) =>
setSelectedPrice({
from: Math.floor(e[0]),
to: Math.ceil(e[1])})
}
/>
<div className="price-amount flex items-center justify-between pt-4">
<div
className="text-custom-xs text-dark-4 dark:text-gray-400 flex rounded border border-gray-3/80 dark:border-gray-600"
aria-label={`Minimum price: $${selectedPrice.from}`}
>
<span className="block border-r border-gray-3/80 dark:border-gray-600 px-2.5 py-1.5" aria-hidden="true">
$
</span>
<span className="block px-3 py-1.5">
{selectedPrice.from}
</span>
</div>
<div
className="text-custom-xs text-dark-4 dark:text-gray-400 flex rounded border border-gray-3/80 dark:border-gray-600"
aria-label={`Maximum price: $${selectedPrice.to}`}
>
<span className="block border-r border-gray-3/80 dark:border-gray-600 px-2.5 py-1.5" aria-hidden="true">
$
</span>
<span className="block px-3 py-1.5">
{selectedPrice.to}
</span>
</div>
</div>
</div>
</div>
</div>
);
};
export default PriceDropdown;
|