reza added something

src/App.tsx

@@ -2,6 +2,7 @@ import "./global.scss";
 import Search from "./components/Search";
 import PopularSearch from "./components/PopularSearch";
 import Input from "./components/Input";
+import Country from "./components/Country";
 
 function App() {
   return (
@@ -17,6 +18,8 @@ function App() {
         maxLength={30}
         message={"اشتباه است."}
       />
+      <hr />
+      <Country lang="en" />
     </div>
   );
 }

src/components/Country/index.scss

@@ -0,0 +1,89 @@
+$primary: #06bace;
+$gray: #dbdbdb;
+$danger: #e00a0a;
+$success: #23c933;
+
+.country {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  &__box {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    padding: 10px 10px;
+    border: 1.7px solid $gray;
+    border-radius: 5px;
+    min-height: 28px;
+    &--value{
+      display: flex;
+      align-items: center;
+
+    }
+    label {
+      width : fit-content;
+      position: absolute;
+      top: 50%;
+      font-size: 13px;
+      transform: translateY(-50%);
+      color: $gray;
+      padding: 0px 5px;
+    }
+    &--labelFa{
+      right: 15px;
+    }
+    &--labelEn{
+      left: 15px;
+    }
+    &--labelFocus{
+      top: -2px !important;
+      font-size: 10px !important;
+      background-color: white;
+    }
+    &--arrow{
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      &Fa{
+        left: 10px;
+      }
+      &En{
+        right: 10px;
+      }
+    }
+  }
+  
+  &__list{
+    position: relative;
+    bottom: -8px;
+    left: 0px;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 20px;
+    border: 1.7px solid $gray;
+    border-radius: 5px;
+    ul{
+      list-style: none;
+      padding: 0px;
+      hr{
+        border: 1px solid $gray;
+      }
+      li{
+        padding: 5px 0px;
+        color: $gray;
+      }
+    }
+  }
+  
+  
+}
+
+.en {
+  direction: ltr;
+  text-align: left;
+}
+
+.fa {
+  direction: rtl;
+  text-align: right;
+}

src/components/Country/index.tsx

@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import _ from "lodash";
+
+import iran from "./iran.png";
+import iraq from "./iraq.png";
+import spain from "./spain.png";
+import uk from "./united-kingdom.png";
+import arrow from "./arrow.png";
+
+import Search from "../Search";
+
+interface Types {
+  lang?: string;
+  theme?: string;
+  countries?: 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 Country(props: Types) {
+  const [value, setValue] = useState<Value | undefined>(undefined);
+  const [countriesToggle, setCountriesToggle] = useState(false);
+  const { lang, theme, countries, label } = props;
+
+  const onChange = (val: Value) => {
+    setValue(val);
+  };
+
+  return (
+    <div
+      className={_.join(
+        ["country", langDetector(lang as string, "fa", "en")],
+        " "
+      )}
+    >
+      <div
+        className="country__box"
+        onClick={() => setCountriesToggle(() => true)}
+        onClickCapture={() => setCountriesToggle(() => false)}
+      >
+        <label
+          className={_.join(
+            [
+              langDetector(
+                lang as string,
+                "country__box--labelFa",
+                "country__box--labelEn"
+              ),
+              "transition",
+              countriesToggle || value ? "country__box--labelFocus" : "",
+            ],
+            " "
+          )}
+        >
+          {label}
+        </label>
+        {value && (
+          <div className="country__box--value">
+            <img src={value.icon} alt={value.name} />
+            <strong>{value.name}</strong>
+          </div>
+        )}
+
+        <img
+          src={arrow}
+          alt={langDetector(lang as string, "فلش", "arrow")}
+          className={_.join(
+            [
+              "country__box--arrow",
+              langDetector(
+                lang as string,
+                "country__box--arrowFa",
+                "country__box--arrowEn"
+              ),
+            ],
+            " "
+          )}
+        />
+      </div>
+      {countriesToggle && (
+        <div
+          className={_.join(
+            [
+              "country__list",
+              countriesToggle ? "country__listActive" : "",
+              "transition",
+            ],
+            " "
+          )}
+        >
+          <Search lang={lang} />
+          <ul onClick={() => setCountriesToggle(false)}>
+            {countries?.map((item: any, i: any) => (
+              <>
+                <li
+                  key={i}
+                  className="transition"
+                  onClick={() => setValue(() => item as Value)}
+                >
+                  {item?.name}
+                </li>
+                {i !== countries?.length - 1 && <hr />}
+              </>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+Country.defaultProps = {
+  lang: "fa",
+  theme: "light",
+  label: "کشور خود را انتخاب کنید",
+  countries: [
+    { name: "IRAN", icon: iran },
+    { name: "IRAQ", icon: iraq },
+    { name: "SPAIN", icon: spain },
+    { name: "UK", icon: uk },
+  ],
+};

src/global.scss

@@ -1,6 +1,7 @@
 @import './components/Search/index.scss';
 @import './components/PopularSearch/index.scss';
 @import './components/Input/index.scss';
+@import './components/Country/index.scss';
 
 .app{
   padding: 50px 20px;