update data.js

src/components/SelectBox/SelectCheckbox/index.js

@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import _ from "lodash";
+import Checkbox from "../../Checkbox";
+
+const langDetector = (lang, option1, option2) => {
+  return lang === "fa" ? option1 : option2;
+};
+
+export default function SelectCheckbox(props) {
+  const [selectedItem, setSelectedItem] = useState("");
+  const [value, setValue] = useState("");
+
+  const [toggle, setToggle] = useState(false);
+  const { lang, theme, list, label, arrowIcon } = props;
+
+  const onChangeItem = (val) => {
+    setSelectedItem(val);
+  };
+
+  const onChangeText = (val) => {
+    setValue(val);
+  };
+
+  return (
+    <div
+      className={_.join(
+        [
+          "w-full select-search flex flex-col relative my-2 rounded-md",
+          langDetector(lang, "fa", "en"),
+        ],
+        " "
+      )}
+    >
+      <div
+        className={_.join(
+          [
+            "search flex flex-column relative rounded-md bg-white mb-2",
+            langDetector(lang, "fa", "en"),
+          ],
+          " "
+        )}
+        onClick={() => setToggle(() => !toggle)}
+      >
+        <input
+          type="search"
+          className="w-full py-3 px-3 text-xs bg-transparent placeholder-gray-500 border border-gray-400 rounded"
+          onChange={(e) => onChangeText(e.target.value)}
+          placeholder={langDetector(lang, "تنظیمات", "setting")}
+          disabled
+        />
+        <img
+          src={arrowIcon}
+          alt=""
+          className={_.join(
+            [
+              "cursor-pointer w-5 absolute top-1/2 transform -translate-y-1/2 transition-all duration-300",
+              langDetector(lang, "left-3", "right-3"),
+              toggle ? "" : "-rotate-180",
+            ],
+            " "
+          )}
+        />
+      </div>
+      {toggle && (
+        <div
+          className={_.join(
+            [
+              "select-search__list absolute top-12 left-0 flex flex-col px-5 py-2 border border-gray-300 rounded-md w-full z-20",
+              toggle ? "select-search__listActive" : "",
+              "transition",
+            ],
+            " "
+          )}
+        >
+          <ul className="list-none divide-y divide-gray-200 w-full">
+            {list?.map((item, i) => (
+              <>
+                <li
+                  key={i}
+                  className="w-full py-2 gap-y-1 text-gray-700 flex items-start flex-col"
+                >
+                  <div className="flex items-center">
+                    <Checkbox checked={false} />
+                    <span className="text-xs mr-2">{item?.name}</span>
+                  </div>
+                  <ul className="w-full p-0 mx-auto my-0">
+                    {item.sublist?.map((item1, j) => (
+                      <>
+                        <li
+                          className="flex flex-row flex-1 px-5 pb-0 py-1 items-center"
+                          key={j}
+                        >
+                          <Checkbox checked={false} />
+                          <span className="text-xs mr-2">{item1?.name}</span>
+                        </li>
+                      </>
+                    ))}
+                  </ul>
+                </li>
+              </>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+SelectCheckbox.defaultProps = {
+  lang: "fa",
+  theme: "light",
+  label: "کشور خود را انتخاب کنید",
+  arrowIcon: "images/arrow-top.png",
+
+  list: [
+    { name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] },
+    { name: "غریق نجات از تمام جهات" },
+    { name: "قاشق و چنگال" },
+    { name: "وسایل آشپزخانه" },
+  ],
+};

src/components/SelectBox/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import SelectCheckbox from "./SelectCheckbox";
+
+function Advertisements() {
+  const list = {
+    1: <SelectCheckbox />,
+  };
+  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 Advertisements;

src/redux/data.js

@@ -32,6 +32,7 @@ import RadioButton from "../components/RadioButton";
 import Range from "../components/Range";
 import Datepicker from "../components/Datepicker";
 import SearchWithSuggestion from "../components/SearchWithSuggestion";
+import SelectBox from "../components/SelectBox";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -665,6 +666,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Select Box",
+    author: "Ashrafi",
+    props: [],
+    content: {
+      name: "Select Box",
+      component: <SelectBox />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",