Filter search by brand, category, price

1 files changed, 57 insertions, 0 deletions

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