reza added some component

src/App.tsx

@@ -4,6 +4,9 @@ import PopularSearch from "./components/PopularSearch";
 import Input from "./components/Input";
 import Country from "./components/SelectSearch";
 import SelectCheckbox from "./components/SelectCheckbox";
+import SelectSearch from "./components/SelectRadio";
+import SelectRadio from "./components/SelectRadio";
+import Radio from "./components/Radio";
 
 function App() {
   return (
@@ -23,6 +26,9 @@ function App() {
       <Country lang="fa" />
       <hr />
       <SelectCheckbox />
+      <hr />
+      <SelectRadio />
+      <hr />
     </div>
   );
 }

src/components/Radio/index.scss

@@ -0,0 +1,60 @@
+$color1: #f4f4f4;
+$color2: #3197EE;
+
+.radio {
+    margin: 0.5rem;
+    input[type="radio"] {
+      position: absolute;
+      opacity: 0;
+      + .radio-label {
+        &:before {
+          content: '';
+          background: $color1;
+          border-radius: 100%;
+          border: 1px solid darken($color1, 25%);
+          display: inline-block;
+          width: 1.4em;
+          height: 1.4em;
+          position: relative;
+          top: -0.2em;
+          margin-right: 1em; 
+          vertical-align: top;
+          cursor: pointer;
+          text-align: center;
+          transition: all 250ms ease;
+        }
+      }
+      &:checked {
+        + .radio-label {
+          &:before {
+            background-color: $color2;
+            box-shadow: inset 0 0 0 4px $color1;
+          }
+        }
+      }
+      &:focus {
+        + .radio-label {
+          &:before {
+            outline: none;
+            border-color: $color2;
+          }
+        }
+      }
+      &:disabled {
+        + .radio-label {
+          &:before {
+            box-shadow: inset 0 0 0 4px $color1;
+            border-color: darken($color1, 25%);
+            background: darken($color1, 25%);
+          }
+        }
+      }
+      + .radio-label {
+        &:empty {
+          &:before {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }

src/components/Radio/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Radio(props: any) {
+  return (
+    <div className="container">
+      <div className="radio">
+        <input id="radio-1" name="radio" type="radio" />
+        <label htmlFor="radio-1" className="radio-label">{props.label}</label>
+      </div>
+    </div>
+  );
+}

src/components/SelectCheckbox/index.scss

@@ -75,16 +75,30 @@ $success: #23c933;
     ul{
       list-style: none;
       padding: 0px;
+      width : 100%;
       hr{
         border: 1px solid $gray;
         opacity: 0.3 !important;
       }
       li{
+        width: 100%;
         padding: 5px 0px;
         color: $gray;
         display: flex;
-        align-items: center;
+        align-items: flex-start;
-        
+        flex-direction: column;  
+        div{
+          display: flex;
+        }
+        ul{
+          margin: 0px auto;
+          li{
+            display: flex;
+            flex-direction: row;
+            flex: 1;
+            padding: 5px 20px 0px;
+          }
+        }      
       }
     }
   }

src/components/SelectCheckbox/index.tsx

@@ -3,6 +3,7 @@ import _ from "lodash";
 import Checkbox from "../Checkbox";
 
 import xIcon from "./x.png";
+import arrowIcon from "./arrow.png";
 
 interface Types {
   lang?: string;
@@ -42,8 +43,7 @@ interface Value {
 const langDetector = (lang: string, option1: any, option2: any) => {
   return lang === "fa" ? option1 : option2;
 };
-
+export default function SelectCheckbox(props: Types) {
-export default function SelectSearch(props: Types) {
   const [selectedItem, setSelectedItem] = useState("");
   const [value, setValue] = useState<string>("");
 
@@ -70,20 +70,17 @@ export default function SelectSearch(props: Types) {
           ["search", langDetector(lang as string, "fa", "en")],
           " "
         )}
+        onClick={() => setToggle(() => !toggle)}
       >
         <input
           type="search"
           className="transition"
           onChange={(e: any) => onChangeText(e.target.value)}
-          onFocus={(e: any) => setToggle(true)}
+          placeholder={langDetector(lang as string, "تنظیمات", "setting")}
-          placeholder={langDetector(
+          disabled
-            lang as string,
-            "تنظیمات",
-            "setting"
-          )}
         />
-        {/* <img
+        <img
-          src={searchIcon}
+          src={arrowIcon}
           alt={langDetector(lang as string, "جستجو", "search")}
           className={_.join(
             [
@@ -92,7 +89,7 @@ export default function SelectSearch(props: Types) {
             ],
             " "
           )}
-        /> */}
+        />
         <img
           src={xIcon}
           alt={langDetector(lang as string, "پاک کردن", "clear")}
@@ -122,12 +119,22 @@ export default function SelectSearch(props: Types) {
           <ul>
             {list?.map((item: any, i: any) => (
               <>
-                <li
+                <li key={i} className="transition">
-                  key={i}
+                  <div>
-                  className="transition"
+                    <Checkbox checked={false} />
-                >
+                    <strong>{item?.name}</strong>
-                  <Checkbox checked={false} />
+                  </div>
-                  <strong>{item?.name}</strong>
+                  <ul>
+                    {item.sublist?.map((item1: any, j: any) => (
+                      <>
+                        {j !== item1.sublist?.length - 1 && <hr />}
+                        <li key={j}>
+                          <Checkbox checked={false} />
+                          <strong>{item1?.name}</strong>
+                        </li>
+                      </>
+                    ))}
+                  </ul>
                 </li>
                 {i !== list?.length - 1 && <hr />}
               </>
@@ -139,14 +146,14 @@ export default function SelectSearch(props: Types) {
   );
 }
 
-SelectSearch.defaultProps = {
+SelectCheckbox.defaultProps = {
   lang: "fa",
   theme: "light",
   label: "کشور خود را انتخاب کنید",
   list: [
-    { name: "وسایل آشپزخانه" },
+    { name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] },
     { name: "غریق نجات از تمام جهات" },
     { name: "قاشق و چنگال" },
-    { name: "وسایل آشپزخانه"},
+    { name: "وسایل آشپزخانه" },
   ],
 };

src/components/SelectRadio/index.scss

@@ -0,0 +1,118 @@
+$primary: #06bace;
+$gray: #dbdbdb;
+$danger: #e00a0a;
+$success: #23c933;
+
+.select-search {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  .search {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    img{
+      cursor: pointer;
+    }
+    &__icon {
+      width: 27px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      &Fa {
+        left: 10px;
+      }
+      &En {
+        right: 10px;
+      }
+    }
+  
+    &__x {
+      width: 12px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0;
+      &Fa {
+        right: 10px;
+      }
+      &En {
+        left: 10px;
+      }
+      &Active{
+        opacity: 1;
+      }
+    }
+  
+    input {
+      padding: 15px 30px 15px 30px;
+      font-size: 14px;
+      border: 1.7px solid $gray;
+      border-radius: 5px;
+      background-color: inherit;
+      &::placeholder {
+        color: $gray;
+      }
+      &:focus {
+        border-color: $primary;
+        outline: 0px;
+        color: #246e8a;
+        &::placeholder {
+          color: #246e8a;
+        }
+      }
+    }
+  }
+  &__list{
+    position: relative;
+    bottom: -8px;
+    left: 0px;
+    display: flex;
+    flex-direction: column;
+    padding: 0px 20px;
+    border: 1.7px solid $gray;
+    border-radius: 5px;
+    ul{
+      list-style: none;
+      padding: 0px;
+      width : 100%;
+      hr{
+        border: 1px solid $gray;
+        opacity: 0.3 !important;
+      }
+      li{
+        width: 100%;
+        padding: 5px 0px;
+        color: $gray;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;  
+        justify-content: center;
+        div{
+          display: flex;
+        }
+        ul{
+          margin: 0px auto;
+          li{
+            display: flex;
+            flex-direction: row;
+            flex: 1;
+            padding: 5px 20px 0px;
+          }
+        }      
+      }
+    }
+  }
+  
+  
+}
+
+.en {
+  direction: ltr;
+  text-align: left;
+}
+
+.fa {
+  direction: rtl;
+  text-align: right;
+}

src/components/SelectRadio/index.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import _ from "lodash";
+import Radio from "../Radio";
+
+import xIcon from "./x.png";
+import arrowIcon from "./arrow.png";
+
+interface Types {
+  lang?: string;
+  theme?: string;
+  list?: Array<object>;
+  label?: string;
+}
+
+interface Value {
+  icon: any;
+  name: string;
+}
+
+// const inputStatusHandler = (
+//   value: string,
+//   focus: boolean,
+//   status: boolean,
+//   primary: string,
+//   success: string,
+//   danger: string
+// ) => {
+//   if (!focus) {
+//     return "";
+//   } else {
+//     if (!value) {
+//       return primary;
+//     } else {
+//       if (status) {
+//         return success;
+//       } else {
+//         return danger;
+//       }
+//     }
+//   }
+// };
+
+const langDetector = (lang: string, option1: any, option2: any) => {
+  return lang === "fa" ? option1 : option2;
+};
+
+export default function SelectRadio(props: Types) {
+  const [selectedItem, setSelectedItem] = useState("");
+  const [value, setValue] = useState<string>("");
+
+  const [toggle, setToggle] = useState(false);
+  const { lang, theme, list, label } = props;
+
+  const onChangeItem = (val: string) => {
+    setSelectedItem(val);
+  };
+
+  const onChangeText = (val: string) => {
+    setValue(val);
+  };
+
+  return (
+    <div
+      className={_.join(
+        ["select-search", langDetector(lang as string, "fa", "en")],
+        " "
+      )}
+    >
+      <div
+        className={_.join(
+          ["search", langDetector(lang as string, "fa", "en")],
+          " "
+        )}
+        onClick={() => setToggle(() => !toggle)}
+      >
+        <input
+          type="search"
+          className="transition"
+          onChange={(e: any) => onChangeText(e.target.value)}
+          placeholder={langDetector(lang as string, "تنظیمات", "setting")}
+          disabled
+        />
+        <img
+          src={arrowIcon}
+          alt={langDetector(lang as string, "جستجو", "search")}
+          className={_.join(
+            [
+              "search__icon",
+              langDetector(lang as string, "search__iconFa", "search__iconEn"),
+            ],
+            " "
+          )}
+        />
+        <img
+          src={xIcon}
+          alt={langDetector(lang as string, "پاک کردن", "clear")}
+          className={_.join(
+            [
+              "search__x",
+              "transition",
+              langDetector(lang as string, "search__xFa", "search__xEn"),
+              value ? "search__xActive" : "",
+            ],
+            " "
+          )}
+          onClick={() => setValue("")}
+        />
+      </div>
+      {toggle && (
+        <div
+          className={_.join(
+            [
+              "select-search__list",
+              toggle ? "select-search__listActive" : "",
+              "transition",
+            ],
+            " "
+          )}
+        >
+          <ul>
+            {list?.map((item: any, i: any) => (
+              <>
+                <li key={i} className="transition">
+                    <Radio checked={false} label={item?.name} />
+                </li>
+                {i !== list?.length - 1 && <hr />}
+              </>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+SelectRadio.defaultProps = {
+  lang: "fa",
+  theme: "light",
+  label: "کشور خود را انتخاب کنید",
+  list: [
+    { name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] },
+    { name: "غریق نجات از تمام جهات" },
+    { name: "قاشق و چنگال" },
+    { name: "وسایل آشپزخانه" },
+  ],
+};

src/global.scss

@@ -4,6 +4,7 @@
 @import './components/SelectSearch/index.scss';
 @import './components/Checkbox/index.scss';
 @import './components/SelectCheckbox/index.scss';
+@import './components/Radio/index.scss';
 
 .app{
   padding: 50px 20px;