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; + 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(undefined); + const [countriesToggle, setCountriesToggle] = useState(false); + const { lang, theme, countries, label } = props; + + const onChange = (val: Value) => { + setValue(val); + }; + + return ( +
+
setCountriesToggle(() => true)} + onClickCapture={() => setCountriesToggle(() => false)} + > + + {value && ( +
+ {value.name} + {value.name} +
+ )} + + {langDetector(lang +
+ {countriesToggle && ( +
+ +
    setCountriesToggle(false)}> + {countries?.map((item: any, i: any) => ( + <> +
  • setValue(() => item as Value)} + > + {item?.name} +
  • + {i !== countries?.length - 1 &&
    } + + ))} +
+
+ )} +
+ ); +} + +Country.defaultProps = { + lang: "fa", + theme: "light", + label: "کشور خود را انتخاب کنید", + countries: [ + { name: "IRAN", icon: iran }, + { name: "IRAQ", icon: iraq }, + { name: "SPAIN", icon: spain }, + { name: "UK", icon: uk }, + ], +}; diff --git a/src/components/Country/iran.png b/src/components/Country/iran.png new file mode 100644 index 0000000..3ebd535 Binary files /dev/null and b/src/components/Country/iran.png differ diff --git a/src/components/Country/iraq.png b/src/components/Country/iraq.png new file mode 100644 index 0000000..2829b2c Binary files /dev/null and b/src/components/Country/iraq.png differ diff --git a/src/components/Country/spain.png b/src/components/Country/spain.png new file mode 100644 index 0000000..1cfea2c Binary files /dev/null and b/src/components/Country/spain.png differ diff --git a/src/components/Country/united-kingdom.png b/src/components/Country/united-kingdom.png new file mode 100644 index 0000000..55f966b Binary files /dev/null and b/src/components/Country/united-kingdom.png differ diff --git a/src/global.scss b/src/global.scss index e4703a2..0f9e58e 100644 --- a/src/global.scss +++ b/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;