diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/product/components/ProductFilterDesktop.jsx | 79 |
1 files changed, 49 insertions, 30 deletions
diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index 08766e07..357bdcea 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -1,5 +1,5 @@ import { useRouter } from 'next/router' -import { useState } from 'react' +import { useEffect, useState } from 'react' import _ from 'lodash' import { toQuery } from 'lodash-contrib' import { @@ -26,7 +26,27 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu const [categoryValues, setCategory] = useState(query?.category?.split(',') || []) const [priceFrom, setPriceFrom] = useState(query?.priceFrom) const [priceTo, setPriceTo] = useState(query?.priceTo) - const [stock, setStock] = useState(query?.stock) + const [stock, setStock] = useState(query?.stock) + const [activeRange, setActiveRange] = useState(null) + + const priceRange = [ + { + priceFrom: 100000, + priceTo: 200000 + }, + { + priceFrom: 200000, + priceTo: 300000 + }, + { + priceFrom: 300000, + priceTo: 400000 + }, + { + priceFrom: 400000, + priceTo: 500000 + } + ] const handleCategoriesChange = (event) => { const value = event.target.value @@ -57,26 +77,10 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu } } - const handlePriceFromChange = async (type) => { - let priceFrom = null - let priceTo = null - switch (type) { - case(1): - priceFrom = 100000 - priceFrom = 200000 - break; - case(2): - priceFrom = 100000 - priceFrom = 200000 - break; - case(1): - priceFrom = 100000 - priceFrom = 200000 - break; - } - await setPriceFrom(priceFrom) - await setPriceTo(priceTo) - handleSubmit() + const handlePriceFromChange = async (priceFromr, priceTor, index) => { + await setPriceFrom(priceFromr) + await setPriceTo(priceTor) + setActiveRange(index) } const handleSubmit = () => { @@ -87,13 +91,22 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu category: categoryValues.join(','), priceFrom, priceTo, - stock : stock + stock: stock } params = _.pickBy(params, _.identity) params = toQuery(params) router.push(`${prefixUrl}?${params}`) } + const formatCurrency = (value) => { + if (value >= 1000) { + const thousands = Math.floor(value / 1000) // Menghitung ribuan + return `Rp.${thousands}k` + } else { + return `Rp.${value}` + } + } + return ( <> <Accordion defaultIndex={[0]} allowMultiple> @@ -182,13 +195,19 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu onChange={(e) => setPriceTo(e.target.value)} /> </InputGroup> - <div className='flex items-center gap-x-2'> - <button onClick={() => handlePriceFromChange(1)} className='w-full border border-gray_r-9 p-3 rounded-full text-sm whitespace-nowrap'>{'Rp100k-Rp200k'}</button> - <button className='w-full border border-gray_r-9 p-3 rounded-full text-sm whitespace-nowrap'>{'Rp200k-Rp300k'}</button> - </div> - <div className='flex items-center gap-x-2'> - <button className='w-full border border-gray_r-9 p-3 rounded-full text-sm whitespace-nowrap'>{'Rp300k-Rp400k'}</button> - <button className='w-full border border-gray_r-9 p-3 rounded-full text-sm whitespace-nowrap'>{'Rp400k-Rp500k'}</button> + <div className='grid grid-cols-2 gap-x-3 gap-y-2'> + {priceRange.map((price, i) => ( + <button + key={i} + onClick={() => handlePriceFromChange(price.priceFrom, price.priceTo, i)} + className={`w-full border ${ + i === activeRange ? 'border-red-600' : 'border-gray-400' + } + py-2 p-3 rounded-full text-sm whitespace-nowrap`} + > + {formatCurrency(price.priceFrom)} - {formatCurrency(price.priceTo)} + </button> + ))} </div> </VStack> </AccordionPanel> |