diff --git a/src/App.tsx b/src/App.tsx
index 2655dc8..3d015ab 100644
--- a/src/App.tsx
+++ b/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={"اشتباه است."}
/>
+
+
);
}
diff --git a/src/components/Country/arrow.png b/src/components/Country/arrow.png
new file mode 100644
index 0000000..4714949
Binary files /dev/null and b/src/components/Country/arrow.png differ
diff --git a/src/components/Country/index.scss b/src/components/Country/index.scss
new file mode 100644
index 0000000..45354cf
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Country/index.tsx b/src/components/Country/index.tsx
new file mode 100644
index 0000000..703822e
--- /dev/null
+++ b/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