update src/components/SelectBox/index.js

src/components/SelectBox/SelectRadio/index.js

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

src/components/SelectBox/index.js

@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 
 import SelectCheckbox from "./SelectCheckbox";
+import SelectRadio from "./SelectRadio";
 
 function Advertisements() {
   const list = {
     1: <SelectCheckbox />,
+    2: <SelectRadio />,
   };
   const [type, setType] = useState(1);
   return (