From 930ed6680100e9732157ed1861af3572e36219a0 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Tue, 22 Nov 2022 17:09:05 +0700
Subject: Filter search by brand, category, price

---
 src/components/Filter.js | 57 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/components/Filter.js

(limited to 'src/components')

diff --git a/src/components/Filter.js b/src/components/Filter.js
new file mode 100644
index 00000000..cb8fd626
--- /dev/null
+++ b/src/components/Filter.js
@@ -0,0 +1,57 @@
+import CloseIcon from "../icons/close.svg";
+
+const Filter = ({ 
+  selectedBrand,
+  onChangeBrand,
+  selectedCategory,
+  onChangeCategory,
+  brands,
+  categories,
+  isActiveFilter, 
+  closeFilter,
+  onSubmit
+}) => {
+  return (
+    <div className={`fixed w-full z-[60] py-8 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActiveFilter ? '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}>
+          <CloseIcon className="w-7" />
+        </button>
+      </div>
+      <form className="flex flex-col gap-y-4" onSubmit={onSubmit}>
+        <div>
+          <label>Kategori</label>
+          <select className="form-input mt-2" value={selectedCategory} onChange={onChangeCategory}>
+            <option value="">Pilih kategori...</option>
+            {categories?.map((category, index) => (
+              <option key={index} value={category}>{category}</option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label>Brand</label>
+          <select className="form-input mt-2" value={selectedBrand} onChange={onChangeBrand}>
+            <option value="">Pilih brand...</option>
+            {brands?.map((brand, index) => (
+              <option key={index} value={brand}>{brand}</option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label>Harga</label>
+          <div className="flex gap-x-4 mt-2 items-center">
+            <input className="form-input"/>
+            <span>-</span>
+            <input className="form-input"/>
+          </div>
+        </div>
+        <button type="submit" className="btn-yellow font-semibold mt-4 w-full">
+          Terapkan Filter
+        </button>
+      </form>
+    </div>
+  )
+};
+
+export default Filter;
\ No newline at end of file
-- 
cgit v1.2.3