update data.js

src/components/ProductFilter/VerticalExpandableProductFilter/index.js

@@ -0,0 +1,171 @@
+import React, { useState, useEffect } from "react";
+import _ from "lodash";
+
+import Checkbox from "../../Checkbox";
+
+import arrowIcon from "./arrow-top.png";
+import searchIcon from "./search.png";
+
+const langDetector = (lang = "fa", option1, option2) => {
+  return lang === "fa" ? option1 : option2;
+};
+
+export default function VerticalExpandableProductFilter(props) {
+  const [text, setText] = useState("");
+  const [searchResult, setSearchResult] = useState([]);
+  useEffect(() => {
+    let fakeSearchResult;
+    fakeSearchResult = props.list.filter(
+      (item1) => item1.name.indexOf(text) !== -1
+    );
+    setSearchResult(fakeSearchResult);
+  }, [text]);
+
+  return (
+    <div className="w-full max-h-screen flex flex-col my-2 pt-6 bg-white border rounded-md">
+      <strong className="w-full mb-3 px-3 text-sm text-gray-500">
+        دسته بندی
+      </strong>
+      <form className="relative w-full px-4 mb-4">
+        <input
+          type="text"
+          placeholder={_.join(
+            [langDetector(props.lang, "جستجو...", "Search...")],
+            " "
+          )}
+          className="w-full py-1 px-2 text-gray-500 border rounded-md placeholder-gray-300 outline-none"
+          onChange={(e) => setText(e.target.value)}
+        />
+        <span
+          className={_.join(
+            [
+              " flex items-center absolute inset-y-0",
+              langDetector(props.lang, "left-4", "right-4"),
+            ],
+            " "
+          )}
+        >
+          <button
+            type="submit"
+            className="p-1 focus:outline-none focus:shadow-outline"
+          >
+            <img src={searchIcon} className="w-5 h-5" alt="" />
+          </button>
+        </span>
+      </form>
+      <ul className="w-full  flex flex-col list-none divide-y divide-gray-200">
+        {(searchResult.length > 0 ? searchResult : props.list)?.map(
+          (item1, i) => (
+            <li
+              key={i}
+              className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2"
+            >
+              <div className="flex flex-row items-center">
+                <Checkbox />
+                <strong className="text-xs text-gray-500 mr-2">
+                  {item1.name}
+                </strong>
+              </div>
+              {item1.subList?.length > 0 && (
+                <img
+                  src={arrowIcon}
+                  alt=""
+                  className={_.join(
+                    [
+                      "cursor-pointer w-5 transform transition-all duration-300",
+                      item1.expaneded ? "" : "rotate-180",
+                    ],
+                    " "
+                  )}
+                />
+              )}
+            </li>
+          )
+        )}
+      </ul>
+    </div>
+  );
+}
+
+VerticalExpandableProductFilter.defaultProps = {
+  list: [
+    {
+      id: 0,
+      name: "وسایل آشپزخانه",
+      expaneded: false,
+      subList: [],
+    },
+    {
+      id: 3,
+      name: "ماشین و موتور سیکلت",
+      expaneded: false,
+      subList: [
+        {
+          id: 4,
+          name: "ماشین",
+        },
+        {
+          id: 5,
+          name: "موتور",
+        },
+      ],
+    },
+    {
+      id: 6,
+      name: "اتاق خواب",
+      expaneded: false,
+      subList: [
+        {
+          id: 7,
+          name: "کمد",
+        },
+        {
+          id: 8,
+          name: "تخت خواب",
+        },
+      ],
+    },
+    {
+      id: 9,
+      name: "دکوراسیون و چیدمان",
+      expaneded: false,
+      subList: [],
+    },
+    {
+      id: 10,
+      name: "وسایل بهداشت شخصی",
+      expaneded: false,
+      subList: [
+        {
+          id: 11,
+          name: "مسواک",
+        },
+        {
+          id: 12,
+          name: "حوله",
+        },
+      ],
+    },
+    {
+      id: 13,
+      name: "وسایل بهداشت شخصی",
+      expaneded: false,
+      subList: [
+        {
+          id: 14,
+          name: "مسواک",
+        },
+        {
+          id: 15,
+          name: "حوله",
+        },
+      ],
+    },
+    {
+      id: 16,
+      name: "وسایل بهداشت شخصی",
+      expaneded: false,
+      subList: [],
+    },
+  ],
+};

src/components/ProductFilter/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import VerticalExpandableProductFilter from "./VerticalExpandableProductFilter";
+
+function ProductFilter() {
+  const list = {
+    1: <VerticalExpandableProductFilter />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default ProductFilter;

src/redux/data.js

@@ -13,6 +13,7 @@ import Checkbox from "../components/Checkbox";
 import CommentDesign from "../components/CommentDesign";
 import CounterDesign from "../components/CounterDesign";
 import CourseList from "../components/CourseList";
+import ProductFilter from "../components/ProductFilter";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -257,6 +258,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Product Filter",
+    author: "Ashrafi",
+    props: [],
+    content: {
+      name: "Product Filter",
+      component: <ProductFilter />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",