filter range harga

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>