From 4d2be586072c9740498fd9cec306885ce06023f1 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Thu, 28 Oct 2021 16:43:28 +0330 Subject: [PATCH] reza added something --- src/App.tsx | 3 + src/components/Country/arrow.png | Bin 0 -> 258 bytes src/components/Country/index.scss | 89 +++++++++++++ src/components/Country/index.tsx | 153 ++++++++++++++++++++++ src/components/Country/iran.png | Bin 0 -> 720 bytes src/components/Country/iraq.png | Bin 0 -> 571 bytes src/components/Country/spain.png | Bin 0 -> 692 bytes src/components/Country/united-kingdom.png | Bin 0 -> 1437 bytes src/global.scss | 1 + 9 files changed, 246 insertions(+) create mode 100644 src/components/Country/arrow.png create mode 100644 src/components/Country/index.scss create mode 100644 src/components/Country/index.tsx create mode 100644 src/components/Country/iran.png create mode 100644 src/components/Country/iraq.png create mode 100644 src/components/Country/spain.png create mode 100644 src/components/Country/united-kingdom.png 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 0000000000000000000000000000000000000000..4714949fc619aee56ea02d5aa7a3d2310c121c5a GIT binary patch literal 258 zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4fEX7WqAsj$Z!;#Vfqf*j=5Sn;9<1|8A^Mny|Ow#ucWJY=#hP`3~;JH_QgL8jcrl z+^AsGSoj|ZT#|U&rFP91v*!ICI*Bvo+$HH%izsYD{D3)#x#B^><}4=D6~7!IS6wN5mU9&To(l zyfI15vANUtyvpv1D+xu;4CUt*-*8#MXyPr(aQbz=`2M2vxj;`ac)I$ztaD0e0stO9 BTSfo? literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..3ebd535c4ee4d3f925b389f69827d98cbebb92dc GIT binary patch literal 720 zcmV;>0x$iEP)CaE7loii5dsRic@#tx1SR5+@B@NB z#e*Pt@hEEU9>s$oA)ir zLlOE`9?YXpU@|BuIfX%WfWQ(p9O(0fdpzc#ssV-ONTdPhQpDIt;N_f$lZ4L!iObNB z+YoWIvwe?wD^juVmbs2K%18o-tTt(6nc zfMEyTXVA!*iWFsc3rXRji9oXqbb@EFyx2mPj3N&mJ~MFw4HUHCJt^-g<4L#Mt)?l@ z1344hFe-@MT~uDgcWx|!4OYPLZ?nsi)xd%r%JK<1Ag%XWPJlVa*!EsL&pvy zoSz1cw`!==Gz|e*SuMf-<0pi(XAovC0IdliWtEjRZ7-?Ib5);Er@)S+P8Qq(@UB?{ z(%XgZW1~<d_|Hs^u7=Po1-r4M#h6E>i9-SxTU$H}|HD^qxE=w6EYC zmIet8?Vms=gEtxs!Z~Bpl$zPz?5tZ0zCkUC27RotIMZTr%$JFj_7;Q5aQ1loyevVz zcB|URRO-uWM#F;6vUa|X2DUVaUY&i%E|?h{Qx`?A+`LY4@3Y!5YpfdK{B}^be0)?w z^wNzf&e;UK)(7RGa&*@4>P5Rg$X|}^KeWbv0{#GpqcOEcPs;cJ0000u4^P)=zwN){@Li!Qn;DkTIIS`(9$Ogfpb>&Yx!h9NOCi+Yy>bD#Ti?z}?? zU{L@j{xejhUrj?%lW;`;l1n6@+f{tq`$ghKF3od&527T{M-+?#*KF*NSl`+QNzZ({ zPy$Dc=1fkh_=gIM#KxO;Y+qMEXy&csYfQ$d^(k-niaNrAL~?sOPg{|uX`W^(gn%s! zG>r7{#66?7W1>_$Les2bGO>h;b_PX`V0>@^ z<;E$B)k9SEB2uGSjK!b!hE}w57@SHsYxwbd7muPTE-u?m{Ww04!N@p+2RJK#MJzmq z+2NO%PCoAqJudB_rk7wl2I~3+Wd5X8If{YMLrf$VAxkQLUVTQR^#@NLtngF`%TwFE zp~dS1PGusZ#BVoJq%dEckUKjf37T=mhcew+x6C?5Vso9*eEv(v+iN*3KD*3`?yj^b zlX>U=cbZNIP=f)XIg6X5T_-**Vbj`L?u3XId=kOU_MOqq*MRha;e_Y%?Cyl@i8_(< z(QW9})$9!a$4B^~x5n-QQ literal 0 HcmV?d00001 diff --git a/src/components/Country/spain.png b/src/components/Country/spain.png new file mode 100644 index 0000000000000000000000000000000000000000..1cfea2cdaa0681072c0ee4d4a2e1996e2411a80b GIT binary patch literal 692 zcmV;l0!#ggP)>5aF#u&y=P%0 z4g#$TPbO6|bAGqVK>ls2velshbe7 zLuk_OL8*5)4EZ@Q04=VfTUc+D$Z0bQHk0YvY5_H*&V0OM0@rHHm-L?ib+73h$U~>UvrIF6$kaFVX~pa{qFW?VsLZ{5*-bFON9qn@H8a{ z&Rv8g-|*EMRsVBfUIp>3Zv*u4$)PS)QCo=R@B{S^ikUnXw#bep$I?}U{4R(8&79bN|HiTy1Iq0000FJ5kwAS&hyk{ zZrPGu>|)7GcD>EZ-7LDzxx|c!fPrE=quY$D3=lbJMNXwaYpLZ>(IT`T-?z72BsS1R zmL*>JUiIR8pI`sa^M9WAA$Sdkyap!TFsREltFqag(Pw|`;5s|Uf@WO4N`f!nQnm0aTU=bQid;BBpfDN6!iiqV7JN zLS6j>^bJgc;}*w|%Oi05po(Y=_23Pd39C%x`n6>^(`4s{%u|b*w0P>|NR;nXB5%$H zNlWvTXVW3|2(`~frO zm5CTAs=%2>JIt0qs7S;|rbY&Bb_8-K2O)90z^0{OByn{c`QX$gZ+XrN!P^*v(BZ&b z-bRcirQ)wnCmOEy!s(n@0KY0Ua%Ct=cPOzn!i~6|4)7E)@Z_#Tvy+c2*USvrrai~K z6%m5GEGhP<3y{#&3RWJAneBxbW<>b;VmG?(Il!_UUIm(&F2jj^Dx`E6A-3DV>?puk zoC83VY_{Knz;1`PtQhVz4X)p`;KIc&NF&8T(`$V+ zjYIphP@GI4si_4Qr@&mX79Hcj#Y-lC`WfaQpDaLM-AvQrdXtP8o_V5gSo15IMUa`@S7P;`aZbb-T-fq zgU5bZ((0)xQK-t7A@$BJ@SaY?v%dmt(kgHxHiVr$zW{xH@+gQ<2vJ=FxKI&16lnE^ zpr+P@o?a?*i9<|=)}Z|r7AAyDDgxi`0C>coGV<67VKsH{h!t$S0^Z7fei%F+a0&6? z=#X=cyBDc@nN65aKMx9B@^8}MJckoxZVsF%1guO3_@K);ge$IE9&{POgMCVvk3U-$ zlz6=$;}cXVO=n05xG1S#@p2A%s51tI`kWjk4Ws4cz^3>%ep{nGSC@s-Ixndq6O$P8>PvF^C0+z>v zIKaKf=zvv1VCsRO;VR}eX&BDlg!&sJ=%+J$N%y`O4lnmvAwyTh6?SojSr-4#2 zx;`Je7AK0y4!$vW z^l%QgsKf|uXreF45atfO3xi#Va~C@Qbt2j9(>Q))E%xkGLwM5&0nLtQLoQn4v++}X zKSoBU7exD^zS?cv5Ql?htFdarO4FnV6BC1x{6hTDG>mro#=h$8&CZI!sgvuGFgpct zV-x5_jBY7Fb^BA?ZnMKpYfX-vsAeil()fibB8b}B!BKS+IqPwIJ{q+KGaQfI%YJ2~ zQZXva(vhDP30c=&2=ANV$xO#hZ!~KDbk38Wy94dYF>@}zqYE>lFqjh8!0=#(s(iFwjE-&&mc>pbw1raCQdE^^U|o_JlBU6 literal 0 HcmV?d00001 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;