Search Order by nextjs indoteknik

1 files changed, 22 insertions, 2 deletions

diff --git a/src/components/Filter.js b/src/components/Filter.js
index fd9387d7..385c585d 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -10,12 +10,14 @@ const Filter = ({
   defaultPriceTo,
   defaultCategory,
   defaultBrand,
+  defaultOrderBy,
   searchResults
 }) => {
   const router = useRouter();
 
   const [priceFrom, setPriceFrom] = useState(defaultPriceFrom);
   const [priceTo, setPriceTo] = useState(defaultPriceTo);
+  const [orderBy, setOrderBy] = useState(defaultOrderBy);
   const [selectedCategory, setSelectedCategory] = useState(defaultCategory);
   const [selectedBrand, setSelectedBrand] = useState(defaultBrand);
   const [categories, setCategories] = useState([]);
@@ -27,6 +29,7 @@ const Filter = ({
     if (selectedCategory) filterRoute += `&category=${selectedCategory}`;
     if (priceFrom > 0) filterRoute += `&price_from=${priceFrom}`;
     if (priceTo > 0) filterRoute += `&price_to=${priceTo}`;
+    if (orderBy) filterRoute += `&order_by=${orderBy}`;
     return filterRoute;
   }
 
@@ -59,10 +62,19 @@ const Filter = ({
     setSelectedCategory('');
     setPriceFrom(0);
     setPriceTo(0);
+    setOrderBy('');
+  }
+
+  const changeOrderBy = (value) => {
+    if (orderBy == value) {
+      setOrderBy('');
+    } else {
+      setOrderBy(value);
+    }
   }
 
   return (
-    <div className={`fixed w-full z-[60] py-6 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
+    <div className={`fixed w-full z-50 py-6 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
       <div className="flex justify-between items-center mb-5">
         <h2 className="text-xl font-semibold">Filter Produk</h2>
         <button onClick={closeFilter}>
@@ -71,6 +83,14 @@ const Filter = ({
       </div>
       <form className="flex flex-col gap-y-4" onSubmit={submit}>
         <div>
+          <label>Urutkan</label>
+          <div className="flex flex-wrap gap-2 mt-2">
+            <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'price-asc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-asc')}>Harga Terendah</button>
+            <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'price-desc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-desc')}>Harga Tertinggi</button>
+            <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'popular' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('popular')}>Populer</button>
+          </div>
+        </div>
+        <div>
           <label>Kategori</label>
           <select className="form-input mt-2" value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}>
             <option value="">Pilih kategori...</option>
@@ -99,7 +119,7 @@ const Filter = ({
         <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
           Terapkan Filter
         </button>
-        {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 ? (
+        {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 || orderBy ? (
           <button type="button" className="btn-light font-semibold w-full" onClick={reset}>
             Reset Filter
           </button>