From 4cda998bd7ac564ac6cf0398fad088ece2c4cdda Mon Sep 17 00:00:00 2001 From: RustamRu Date: Sun, 12 Jan 2025 09:05:36 +0300 Subject: [PATCH] feat: add image to car body style select option (#55) --- src/assets/images/car-body-type/coupe.webp | Bin 0 -> 1904 bytes .../images/car-body-type/crossover.webp | Bin 0 -> 2238 bytes .../images/car-body-type/hatchback.webp | Bin 0 -> 1920 bytes src/assets/images/car-body-type/index.ts | 10 ++ src/assets/images/car-body-type/liftback.webp | Bin 0 -> 1724 bytes src/assets/images/car-body-type/minivan.webp | Bin 0 -> 1928 bytes src/assets/images/car-body-type/pickup.webp | Bin 0 -> 2006 bytes src/assets/images/car-body-type/sedan.webp | Bin 0 -> 1840 bytes .../images/car-body-type/sports-car.webp | Bin 0 -> 1986 bytes .../images/car-body-type/station-wagon.webp | Bin 0 -> 1952 bytes src/assets/images/car-body-type/suv.webp | Bin 0 -> 2070 bytes src/assets/images/index.ts | 1 + .../form/car-body/car-body-select.tsx | 89 ++++++++++++++++-- .../order-form/form/car-body/helper.ts | 42 +++++++-- .../order-form/form/car-body/types.ts | 1 + 15 files changed, 123 insertions(+), 20 deletions(-) create mode 100644 src/assets/images/car-body-type/coupe.webp create mode 100644 src/assets/images/car-body-type/crossover.webp create mode 100644 src/assets/images/car-body-type/hatchback.webp create mode 100644 src/assets/images/car-body-type/index.ts create mode 100644 src/assets/images/car-body-type/liftback.webp create mode 100644 src/assets/images/car-body-type/minivan.webp create mode 100644 src/assets/images/car-body-type/pickup.webp create mode 100644 src/assets/images/car-body-type/sedan.webp create mode 100644 src/assets/images/car-body-type/sports-car.webp create mode 100644 src/assets/images/car-body-type/station-wagon.webp create mode 100644 src/assets/images/car-body-type/suv.webp diff --git a/src/assets/images/car-body-type/coupe.webp b/src/assets/images/car-body-type/coupe.webp new file mode 100644 index 0000000000000000000000000000000000000000..7dc7e75cd47cbcc698fc55be177bfc2e3d9c5300 GIT binary patch literal 1904 zcmaKsdpy+H8^@2_W!OvxArnH1$mSMf8x2FP2D!zITt_bBHrQXvP@;)keyo(spq6qg zo5o<|Uem@>L*?#gMKXiN{k~uINByz;d(P{5&ig#)^ZK6WIp_8I+F4mx_z45xghAsR zafZ%f001Q9Gyu#2urfEtvG|}R;A8DX0UZE>NaQd(OEl8iZ>mL>WKPl?%6Yd2`<{(!MgARvk+6(bs;#bz#Vb8B@vcpm25Hh5}?QqyR zJE$8zZ-_OB-?8U+>=hEWqfdr3CP9G_J7?|KPIuxyBnNwF7J*y=gabQZ3D7(JLu<%_ zivTcO1b{#7Th8+i05#VEknR7LQ!M~MG9CbW*SFlaI|=a!^Z4>P0VwYB^#y=e0szbf z0C+b5Vy<8IpztrXA)ze=sIFjW5J4dD0Z3p4NWcqdLv#%209~LDy)g2UAOPJ8AdgS8 z0GtA-Ae~ICs&dhRgY2BqSQzypK=g6p>oN%_{f%u-s^>IiX>U}N?q z20!QLe0CwffWX*T-ZUT!7v(*5^CyE%#ZM)h#4Y!ERQxmAcI%AX#>hHl6U8bf%+%M- z3`D2_Ns;#ZRHdWanXx>BtQd?6Bl3t(4)5|q@79i~v;u95J}G*A-GuOE=@Y1H6*fvW zZ3#&d$=&pDSl4Nq`(MvHb;s1M-}rFR2X&f`-+mof`JfIS*@EF_0^utajs-0;*=H^o zY|i?amk#VshoL9JXpy~N65P4jag6zH`x9n(ZR+TjA_^iHMwef~s_tR1_cot3ck#F0w&kyu zOYf24iT~YZ->K;l!W?FK8;ZbWjjH9w$D_@fVV2K~Ltn2%X3T~OHKt`0rC1QS*LG94 zI~qLd{V;s)v1_tVr|uts5gXlcc{mAiRA>t@3zpCwqEp^gh{}pbZ`px`RIQKP;Zz-)uOiel~+8^(6th(8( zKlNuO)d8u@&MH-`d{_KdtB_dYPWOv43@$VKL!6)Bth8}3J$Xy4FkM4=*tHikCM&Ns zfq6M9T5bVRAIdK}|?hK;&&ibjO7s8&PJJNxxiRv* zoo7|n-&L(`VFY01GN}~n*83`dst7k3Y_dB(njhx8&ei>4PqbqoX}B%P{`|VulM(Ns zwf`{pGS0F$=5$R}PA;TvlxyEbqRw%Y1g8k1Nz&X-1ZH7C)V|>;w_{q zEKACVZdJ=T`T4h}^y*@g5bZ~wq!k^i&(pdwkjl)P0mP1Em}Lfs-<?d#SeE_G zajQlCIAVdtM*XUNYA<#qmNDcKZK#dQ2%hHz>0Vz_+I-31xUA6gM7p=?js4?B=|i^{ zokAB9(2r_(&AI&m?r<{GNYJMJf|U+!UkdrBAE`LnNi2fwS1Kk`^4WVYyEa=f&Ulu_ zx}z75bzOnGipw{OU%7O45^-F!G+n%-QuJ=u=kA8}UwB>9w<w()^6K_WrVI69dQ25?H~c)=}K%SmDNoj++SLMKQSw>GqKn2 zQ@;}9SQ**y>CvlQzb_kE6aBgL$$XhlJrmUY)S`7xV4i<5x!{GM!7rP7)xuST&$W&% zzD5#nW}>Ak-)cz>2B^O&ORO({Gq5d1$p}+=`!hzOw`o@#OLBaW!V8jek3T**j2g^< qyN%9Rpem}+W9ywv)5_EGAFG+ap-_D?35^f2VjZI82#WQWANb!_GYdQb literal 0 HcmV?d00001 diff --git a/src/assets/images/car-body-type/crossover.webp b/src/assets/images/car-body-type/crossover.webp new file mode 100644 index 0000000000000000000000000000000000000000..5cf09a77801113e10a26ae386a5c1673473fcd91 GIT binary patch literal 2238 zcmaKtXIPWT7RM)m^x^_i1OX`_5QWeYLy^!T7OH@S7C@&?Qm?WWNI(Px zr8k$RA_5Ac6bncROQ=c-y(RZWKe!+E-ZRgf`OTUCGjq<&^SrMe*21Ee8vrMBQ=4-( z`p&!n06C~r0Kfo%#b9hYV9*r6I`%vV3V^_%kYGDYQ#ogs^Kx8c00y=1=7A#;e$c;q zNVWFihqmwNzbgKJkjKlLh=U}HP*)6w4u^6Qg;@0R4@T^<=MP5jaaaf;1k%{-aj=6O zR1M4vV#MWtu;)J*M+n~2Cqo)^U_j{JS$nou9lv*wqdhc2_XMN?5!eAsV7ga7G=~hI z2Y~)60PJZ$W1e>asEY$YV(@27kqUrNEC97VKVv`dgy0eE@qIfE$g}zQ0Kg~&K)?k6 zk#_*_UiiKSx&M)y9JC}2<%NgZWe@=5V55 zxpYjHf^JIo1Fe(|gSOvqG|~6b)n1U9#FaDOocA43<-czu*5G~{J8p=WJac&s>!ml@ zA*GF+{p@y3_(O$}L}oFsi6MI&=AuE;j7t)040r63GyYLT-wpD`B{q1#*CzUay1HG3 zd1ijx5gB}oMcW}GO|-e%U;UzEr#|a%bsv9oO&gWdY9(;>5@EZQOKAf{7T-nX_P2+n z1Hjx_!B$Ft^^80?VWru8z@x6JSPkYIRinHUiZ_@o)e1f+RTXV`8?)j&H?<~18#j*7 zs=z%H=l$UIJVKID1^XB&*vr{yU)ll>ZH8H2ueA+3?xlhaQY7=FoM*0xktjv@NqF0$ zSjH_}rR0dbG4Ilye2mrX7j4OouOtRySx%{Vn`NJFcUX<4lHG*5!sbn+bR4;5yp*(T z&E#Yx%iL_H#bd(Kob!6o>l5R+wIL*zg<6&NpBEy;i$pnDs!zMvwYw{O?WebRDRGKt zWmBBH(8z8Nr@87A_wGtj4>9`YLaQUPsG?rs{bqG~rq>S}=#o+m-~K0Z`k|h6BvS8& zD0+C7O@%T&$UU^hwumV+`pi)xb;%3gWxx<3{6%0C8Rcd z*&lTCbj{!Isi2y=6sevr)bV_6tMQgbn8H1=K9wnZGpKZDDDw>xzmd`Dc|VcS9Y^HKuZ88fbpGI(@yn+)pQwh%>u`x? zTw0afa<&bEx590T5%d^#(x9>*zsLjQ&cz|?*YD$B^08#2&~3FB@Ufn+&nqlz-R(~?U(K3eaWrAY_2;Hu?kFY!0A-{UUFHv59z*T=Vi~aZCjp zmhRQ!v_N%7^sUoe_$7UroB7@159~)9DNEoqZ&A?5ADd?0#9DilyOzQ{U+9&a+ie`N z1`WY4S}e-X#zr-~mz!!fWSZ+|*WNhy=USh}$ik=qVm4rSDsqyzwKFwuTo(H4GTKUl zrq@6GW*Y8XAU2eAy~LK=={(5sP@{f}l{M|P{KykD@a1&uf!c>*OOrVIQy&vfi=@el zhjzBzbC2~g*JuWOQ7z&Ft&gN$;Zq#~<8lWt`B7^QT^G#GW4sK{_D3?yWV7abq*Zc~ zw2GVxId z*vuSTNC~yvAI4g*wqvlI#!9MdUNi}vOm#jn5LIXqkV00@QEtmxAxoJxB>Y{Xet62` zfm;j`t%_qRx;t1&#H`c!GmZO8^9n14S=Rpa1Ffr+=6vfzgN|Zl+lt5fl5>)zWTt&N zDPJgA8(lPS{)O%`At8hD+sS`$)rGmfuGA5Dr#bRQOW2tG8VN=E@WDP+-t43nXFM?3 zAX24C3YTKXVTum8(eWcM$fJ)Yhp^ZG_AlP9vR z!>&*r;@Wp4$&J({5+-K)-Hgd|?qTtwyuuYWZmjPzT+ zn8$Y@lYzr+6mfjF~@ literal 0 HcmV?d00001 diff --git a/src/assets/images/car-body-type/hatchback.webp b/src/assets/images/car-body-type/hatchback.webp new file mode 100644 index 0000000000000000000000000000000000000000..d5778b5cd464b851b83ee654f9f77fcd069fbb3b GIT binary patch literal 1920 zcmaKtc|6o<9LFC=ZsjQB8Z(JpIg4m>gfJ*~#t}Q?NV|@iF{TkalVmNSgceE6merP{ zl4BVoM-h@(g|S1*u#DDV9GjW_sXy93cK7?dzTfBle4o$j_k6$4^T*E{<>W*b2f+Wh zz2_-UOSBXK015dm02}~7IXHNB3qeaD)V&==O#q0AB@(=y?UCq!K&1F25Q4@h!-U1- zKGVNONW~lZtQ|7^SH=G)CBq})!yw6@kZTd3!=ajXL%jRUXV%?j>}Ni@&F6?XBBb%$ zW`eIb)QwO$#JXqx!PtLr7>=;5&w?~ZW10FkR-a@ZmO8qxqz9{ZBhDg$8GB>?INzU02#2@XTReEOUy6on%r0pR`& zfNTH&iZ20>3i`AMh5x7x32muEb;UvB42T9100~ea7K8yKh|GWqFa;LS3nMdk03fFh zZVKs_0Y_jHW0voHTa&g|d#I%Hf^5cFpfqAA{?{#gYVMt6Jk=}Ie?w(KhiofD&0G~; z)!7I=@dk()|UET)$Ou{uLbSwO}LCRn%8Q>ao?creFmr zyCfgUH-RoO&K>SYJF|=5vlp*XGILKWQY9t3p2s9jthF01d{b^-8&IUTGxh9zNM{nE z3S;X`)Vq8qZ(uC&LzEJ{ak!R3s<-# zcR^loU;h0clQV~k(yx}poG9&^RKo%O$4c@BEvG(VcF=Qlc^5@%Zc{VCa)sP!O4INd zK8ezB2tua_iMWriS-W|fv&014X$-F%v3lbiiE_m{$9A0W&fr(0nJEu!*iT7g@)thR zxwSIS4;ExHN!*>VDzy%#!MvrTvZV3pn=dM~if%q&^Vbjp{a(2^V&`%7UtVbsIw)MS zA`_mmWw50-54&nDa;y1;3GV`0R?WB8U%T9Oqh~01umX=An&Cg;UAL_m?X3ybtjXv$ zGivvNsZh~MHd<;0I`1N{eUqD{IBi|#6VICPaSlCCGkL7Go)x0wF5xQak{GR^5TH3$jj5eFXiEfoF_~mnj_gQ@zIDC1*s$`?kc& zu{)JUGrp#!BTx!!qmR!tg12GX#w21a>Ctt@h+1&WJ;NAgso|=D9^jxWFUDt z>BkH>h=P5K)nq@qA#o=@!b54lTv>4Ii_&iqe?yB&QQlwZTNhu0RAhS zq~|o2-8j${vG;4EypO>+zaNb~=C91=(UsEjiB*`(HHvpJB?{D958wU-WX6df0~f~4 z?e2=FdtP}MtGsOf>rzXH^api+6ReP*gnJtdm!Kx^FyvGc(p&j5`P-RtcgYXQj^{;d z>6qE*Zc&W=x$-mxj>QQSjCDh?)obeHX>?TzBa3tB;uM^pXFA_LeaVfq!&7{U5i#mh zhtJt}eMIU;$l%MKELGN5O&%vzjKyWQYAO>MJBQ zS_G5BaIN3J5~fG?&!KGFnu|;VbOU{?&v~ zR@_^w9VyD>!Yu=Gba|i1(yb!;z1bR8qSQvJ)MPQfc)mYlq?wEFzMMYrpu14CN>i|D zceMu#d{n<{E1XJpKU*c}!#skEGc#K1mIB3Aiiw)!Sv+6&54V^tavF@rZsGk+EVROTz9S+Lpgh!<-)Iz;5YbOR(WSZOlz%C#l6DIzTc12Zk>NY z(I*8g^i_r5{^16!Su}`N^4=9I=3`!dfakR&xc^J1j*g!8!BW*hxN*}$TvSRfWzS!j KBslc90pM>4su*Yh literal 0 HcmV?d00001 diff --git a/src/assets/images/car-body-type/index.ts b/src/assets/images/car-body-type/index.ts new file mode 100644 index 0000000..81bda6c --- /dev/null +++ b/src/assets/images/car-body-type/index.ts @@ -0,0 +1,10 @@ +export { default as CoupeImg } from './coupe.webp'; +export { default as CrossoverImg } from './crossover.webp'; +export { default as HatchbackImg } from './hatchback.webp'; +export { default as LiftbackImg } from './liftback.webp'; +export { default as MinivanImg } from './minivan.webp'; +export { default as PickupImg } from './pickup.webp'; +export { default as SedanImg } from './sedan.webp'; +export { default as SportsCarImg } from './sports-car.webp'; +export { default as StationWagonImg } from './station-wagon.webp'; +export { default as SuvImg } from './suv.webp'; \ No newline at end of file diff --git a/src/assets/images/car-body-type/liftback.webp b/src/assets/images/car-body-type/liftback.webp new file mode 100644 index 0000000000000000000000000000000000000000..051bf623d4bac183ae90f6e3e5ec3616fd25c367 GIT binary patch literal 1724 zcmaKsc{tQt7{||8vPRcZbScXul_WI8;IWg6RCXpa8Khw{mO%zt3)zZ>G7M!aWJz6* zrO?gtG=or?tRbmzUOn^^L@^F-}8H(pS8J(N!2a@Y>f@9Y^*fx z_yGVikW&CK1i;+T(CQrwS_0TRcH~k40O#%JYi(*EV`uLm!!rzE(D-4l7y|w${We0X z_1>S_?&H5z{C|?~sv7|VNfsf8`$CsPHHkqi=Khlv*^K_lNHz!h;r$?u6`Or8Swr2x zu0pKn{tKgjVGQ1vtxte7NZfUQ_FZgacPHrPefc6Z^Fl5K2*4Vc0t0sc&>AuyDgc^m z0B|Pn0@K)!q{<8_h51U~10kD_^be*B)ka}kSh zwF+263i@Rrg_&`+x--v6q4aeeChcasjn@`4_GGh7UM=oT#PpT@T1Y|l_Q}^mT?sWy zK~0~yxc6iYWg;?>eZ>8&yqlSWfhr-(x!mz)4X`?zZJYP zUJ}PNV4Lk{9RFVH|AWHU=v8DF)AIs5lC+lA*f+uX+`8>HRf8N#y>kjj#EB^1sch-} zT5O_=krA8re!m*&QA`ODmqWwPE0zyPufxR)j&53hG89-m*6~3h+O>y=pV(}{ncNYS zuj6BK6fKkRLF!e=ZYG=x-^WP3A5%ZJT0co#@UwA7Emvp-_^wZJh|=eZBshBTh9)TY z_UXX*S=P+hkj}1SH?*6CX1HUD4-CPHPV^1Q&Ui-bR{LqaYjrqcFk`n=ak^n(yVxQ@ z8xc#?t9@43XtQtfTc{^*_!*J~X`;@p$;v(onFB+sdf#^CO23vR-)1M6krZ}X+EINY znLBfw)nr`cV}=mtV2s!B`{9HWzVdvDK7FCC+#{NXWW+epDjr}Tdy4q139Bf7=AVrl z99Te!+nu5sJizxD=Q^k4#W3mC?qGYnU!pfabZA)6ly_itZ^_Cs9US?lGwT~ozTj@S zX?t8xft35)Ed?%F%@x;3DvQW5WAaem z%x+;f8Ky4XEbPZxHxb7D^C9Op<+g(u#iMIsUiY*rz4eb*-AO-#M^R}e2I{oq-+K+4|T-R>5bU8ce z7d4tJ3$yL&p*%QnfHIz?Wbr*&FFaZwU7Aas`UhL>Ylk@Bs^DD8{b=OoU`5}XmEnqu zWCbUJR3AgfO(O$SxNPaa-jLv8*q<6&Rh?6<$(u@iR&rQ%-vS|DH}g>TXP#-f=St?! zwyVlpg3;Yc^PcpUP+>81a-C#cn-JGn<6lF2)ltIw(O+_O!N zV;g11#^YDd1Ye=8AAXE;$-7%KaUnmrY&}&8^E57wODUL>Fa6KX?CueK?$X9Y=3t5Z zO^a)-3u&LbL?SLTX?K_9n*TwWj2^NJK+Dfch^r07eey1&0df=SZ4fTtiBX{zkKjHb zT4P3{A2NfNV}a6GoOX6mUAlhPoK$(zT=qu50Q2M0z?45?gcdP1n(fTLS#9i+5`xe` OX~rL=BCkMyJMb@FI=j07 literal 0 HcmV?d00001 diff --git a/src/assets/images/car-body-type/minivan.webp b/src/assets/images/car-body-type/minivan.webp new file mode 100644 index 0000000000000000000000000000000000000000..46afe00e51280fb56b639318186dfb2963ee22e3 GIT binary patch literal 1928 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/car-body-type/sedan.webp b/src/assets/images/car-body-type/sedan.webp new file mode 100644 index 0000000000000000000000000000000000000000..d84b0e2de29ada577c106396478957c43e99c06b GIT binary patch literal 1840 zcmaKsX;hO(7sn^cR#LzvKox|fWfNINR*@aTB0||DaKe&>s9`e%1cijM7*P}u1q%m~ zQZUkpm9hjdfFM#qzz{1+14@XmTEbEgN>Q4;PxOQR(Du%`cYbr{e`fBT=bR_R&&S6^ z8GxhS9>Ed84w0$=03_s006YQk^YjdU0E3nQ_COvLtN=(#rcy%C9>_>c6jFHxz@YKL z;_+#zAL$<>r21pxqxP}+KPvt^`5A$jhKD4-LvBEUE{AGDK#U-LWD_~#KC-i%Pf=5; zkS18pl&}z}8yEp%6Vl%p_cz9;Qsnw#NaLK8m@dCdZu0IvCnkr7LbD3wx*!dN05tHB z_YbWhOQ{3EVGV$-rJr)RZvo&I0`SGJpK=B)05l2!Xn*u6_vuYi<0=WecA(Q%-~Ux<8P$#D6KH?(kM&hEQC4bqZ=UPh<8 zv}S{RZ{Lt>9lce0Z!5$v&+f$zPPoySzsiEH5o9ogZ&Q~flzOKcb} z7<*V5{^K?lrl_Hs@@vO6XIJiPe}ACpgT0Hb-5#_a)<|C3roQ(DU#{$yL8;I)ubhSNvET<~9ruenOy@0kIOX(TsmOI*4 z-@t|0fz9e8nC*W4t+G~5xkje#iW>%1hV`WOXpTo^aqYtDL{!voq!(`NClO;J--lDw zvvYbpvdY5+L2RJW_*7Zt{b)=zOS_`>`SP5M6nY80U#Y)FC|>%;QA@GOA^&ZZ3J#fG zNaMAlDRN`Vvj64EhyGa%ePq}LF6qrB z#5#g@F>5Bhsi39)2qhEI{L)s|BGXmkzDnUe>oirVWDiDF6~1XZb8{DFP8X37)^C8) z((^LTHaED?FB}W}rko-RKq~y+XjDaZX*Yf5f1T@*HCtFD)nKE??3E8|^t?OR+dLf- zle>-n`o?r*7Lk4G4*Sa6B)GM9YbgH6q2~{1Cw!&@06Yc0ylxt9E=n0$@rdJynC4AU z?!moiT6+&RR7GN6;Xtle&)F5}v9zHN(={0rT|BG5818f~R5jd9SmNq-vwC+?Zw628 zMM-V9ahLg8lOZYg+W6c!W01dHyb(J*xhgR#(4!CWhJ(E7bBcQeb*`PU*|+Ff?Tn0W zCkZWL+b^`4AQ|HUszR1jwba4C*>ZGmziTTa`^Cvv!cVu4#q>FLX{se;)8_-+n&@X2(q2>CJaN^;W- zyeg2cY_QJ%V!MT&*>>;MTV?xKW%G@Q;p7;=#0G#VJ)5WK5SBX z7WQ1-pawUVZ<%=>Pg=A<9Nld!7Ql@4bc;78bJC8Y`Y0HYStM=Rq5k?|H@!StYyKgP zf#NMp$#2KC4pxX8kjb@o>0&d?j@Y8zgMSdk&IKe*rRl7sw34Ym>*2s_IZ-st)= z7fl_F-NVbO(y+a=?-lK&cGq`#j+PlYtkM?q)4t)kxZ(S2Qxnne?VoP;_&1aQ^zDQz^y3fmjBqtKd&)6eTI iKZf2-L8pjNTtaGRv*UE}t(3tSpH4;W)ukEe7yEw~S?L4- literal 0 HcmV?d00001 diff --git a/src/assets/images/car-body-type/sports-car.webp b/src/assets/images/car-body-type/sports-car.webp new file mode 100644 index 0000000000000000000000000000000000000000..f404c0f3dbbe4372bc0ee62216b9dda63990cba2 GIT binary patch literal 1986 zcmaKsc|6qH8^_N`b`3wuxYuN4xst7Mku3Adk}VRWER8P1NMT&tAjV{wY&WBbMEooX zku^*1OmP#T6hqhAT#|iX8_nFW`lI{D{r#TvdY&-uK*=XuU~y}tIAr%yNY18~92 z*zUaD2`3={01EOv089X|G%>O3fI&+D>)4CDngICu2M5}l8>5_@T~PcV01O&m%^e>U z@Qwa8LaNPyZ`wY!e^vbdq@br)5FU~&L#_}A9S+qb39+R2H&)(bk8f@G4wsBkPiSn4uB_bzURK*Nq~Ex``6F$LXn3+0ARHQ z08wWEBzgf5a{amoh5u0-3fhu^>LNnJ8~6e*fC84lAK-yHL};K1jsqR&g;Cx60iYcQ zxiFP{Uo=*x1L zKX!bqF>qs86Fq8>j2&(S7G!xkKHuT;e~96Z_%p~baaAdqHKn#fzDJv=#~mw)(df@t z2$95+eAj2SBvoqK zS?wJ$J(T=gb5PRn%X4Y11a`gHxei!=$?)WcP80t?hQz;k2pybh=!$ z@gF?a(%~1fsD>g-Z8z9G$g%ZPpIsGs@2XJun~gTB?^XyNSrxAJ8>itKEO8=0Yj?d| zBP$a>*H1Z)%#NeHw4tVt+fBYuZqT^F>~IvB`p=e2pPbRUnUAmFCxK6ApC^`dW-8im zS=r13P*ci>ccNFnmy|usc3O4j^yhx@I5+hm!lCi;!mVYq0Z}TvPd}skY`=p=lN9?( z5Y2D&qI3An;z3NWS8a|NOya2aTmZHs4~x~6Y?%?dWyEjz)2MQglTfwE!&!EYy=oF7 z(KRzg-hXBGO00pSlVO;nSQjn68f%&#gVn#6e&Pv>b_gd|=DNU&2 za1W+`l5&uF`TUU*v2flA%v*iOQ2C~Gp|C+cg%Q^?W9gkqOD(x%3Ot*wrL3?MWj{-D zQK4<>-g+K+buv;6R$AAZ?;-$SiuheIJr+d}X|MY}XqK2Sn zC~~oI_{UbbZIwaOf=!-{H7wM40=Z9Fdg$4^pK&+*TlR@OmeOA@9q0`o;W}}*Sptmga_l@ZpHc2X>cwY>C>#SGQe%Gyw}{1RL27TvEqrqoH!&O(f| zF6X{ID(4ec_P~|Rnx!6~@ekjjx{-(Nwf$OlQ34daDh@X3?JhDmGSvQSom2+*>Zb_w zIhFHtuSRlMWK}Pvt+-}T7UAx0?KE2G*tI>lC>4L-$A0(>a-}86K_`d9uerE`tu=F#{^pA6WnDv(`c|zQ|kFf zO?pPkks*P}7=EfaM~`=63L1=E(BRxLoNHeSpFq&w>n**0!z&PZd8U8bt*k-jwz0*g z$r7jGnifm-dRVeS-y-5faH^99%b6_BlEK3}zgTV1$?WS=JmWsc#jAlpmqe?gm<@y9 z2JOOiU*zyUV^q>BkSOtqFM_#!y;~2|)khD{oMFpe96X=Ey1JPz9*q?qP3w#aRYJDX zbVBx5HoPZ-AF2tdrTS4ab;08?V%ot#K#P~Eoi;|0NEtY)yFJ-X+S#|(gN_iCO6Ic= zuA(!dJH0wzC%_Si-5t2W<>rHe?zd4yyEetYd|sL)RIn1GwEfqZWnsT+pM0&J7HS1T z*j4_TlPLzth?_TSNLPP(WAQ@c=A$~kb*%2a@$Rk4Y@FyNcsIR2v-$ngTV2r~Q<8RO z!VAine=Re1G2*JV9t8C0s5uYQ7Pb)o>2hJOTz&8%oSF{0q*;9$Cszil WIlUWQu?M(wzDNFKJvLDVrL8EvdGM(>?Ol+iXi35z6?VAa?mqAnIIi%d3o zbfN?i5n00yqOP){6U_c3e`NpI_dWMH=YH9#euroao(jbEZBhT(Sv$O8leS>YSp_v785fBdWz!+RT>mOP}7E%g;)-C|_ znO}2W4*_`k0|0`PUvuyh060?sXc_sM`}!sX&oIx=$1ypj7MXmy;1KZi=_`LjnsWk7nmr<}e3f}y zO=QmHt`Tu!2}Pnm@xY?n$~_*3n*QAN1V_NwY+0C$BZ^;0O=R^ivB)%HWiKpURCNyJdjd1K{*{r%V6~k6%8CKAb@(4z=KT1KadwR4pxB z)$mPNgSzw0O^-~!)uf0kxe46FW_8rx+kbMKQ;_eIdo?xK62rp2|mrq0p8QZO9GS+@>$enE$Pucv$_IdCXJPq=G_wqj=H0APD0Sx0`J^$mKZIK`HJ>1#v2Cx=SPefA*=^d8Ue~PH-ibYnh^w8YIoKDY#*!DCR_AN~ zNM_6ED>aQQtPI<-I_i~6#T--sT9>}c0XjdX=s4w3+-U5LKnc9vVytHNYRfRQvBqiZ zvix^Wp0g*#q2cenqdJN@Z!(BD*9=*U#nmozlUNDNwsTyL9N#u7s;N1H?cHW1axlNITO#S}JG*^O%hKpIZE-WFccl~8k=7PJT zg=b*eMKKb2sET$R@5P^8R-<8L-w4(ExX^VOa zF|>PI)&0_98m?Sj{2R#KZat0RhT;>NXs9If@5Ge~IEy6vrlmJYr5vc{VQZCh|w&}S~U=I>&J9X`xDDz8l3}g!-Kk<;K8Ey^l=TWQk^~% z?eB)8x!)8$Ox61XbUacj%68?^6baSry7XLECA$DwDGGdbZlASuuR?Az&zYYdllXC! zkt<$IyVJ%txPxm-dtePE5mEi8%(c2d8)yBeHt`gB7C4I2+P31Ghlpja{6JpQw(o5j z1MMFa)K?0}E@sqy+HZYU2j=%IdEef=*35P}KJu+j@!|5M_=bLPRFY)Ni-c`T3aUMY zPpxp!B1@zGFNIv>WrJ|f;u0p<3i~-WX2SfY8{+QYb2g>VN~-J7y3AsAMDNk} z@~bqaQJEd=6y`@W6l+FLIu7|v`R==Do28edoj?A(o~II(e)N;{oX1ax5ilvfrOwrQ z?}dosD~a)>0m0fQ7l@5~cbu)UK?E(>uu0PJ*t|qUoHki*F}dPCd|fNszN~n-OOr11 zkW8zeFQmqp@msiXrc&!Rr)oMBh0gElT~GJ6qtsFfF&snNepLJTy41CN+TE@&ZL?Fw+D!6)8x7RXfdeP>fph&?UvynYh8EOjpGsAuQ`A?D< koG9vj+9NxL=ao@z7s-PJflx=K`8@~OhR~%qWCQ^J07HNk8vpLW2r@iN}GKwBU{{(eQ*s1BReBY$zYVSFJ;JOgkqAoKhcoo zM%&FcBqFlZ$b^f?62|YV{^z>}>NEh10kAMOwtmS4O##=-9nYf4bAe@{a>9sC_pN0x9GN{i}ym zD+52YuMhvL;{OK)yu3*SNU{KRr7-AlC?^SsC5S&*b%#BFu-*s;KI&XJGN8Z9`7J~TWEyt2_OIo*Z?zt-Kig%Ll#^D zfYw(4c4hvIdFBJ~=n4SR!#`t6#Q=yT0#M)cGxqaNLOjAezHi3^d2Syc0KSw10K)+w z&ICZv<@*}s{zq;|XbA!36$~{Z2msyy2`oSmAb=wf9Rup%DA0gj7>VQqAX6R`avdlJ zr+|K-`VF%(REYxm1PmDmyM7)>4pzb@s#7vfUm{M8jt`)=u5&WFGQJdvY+CdS4H%5C zwj1)Zlq5s0nZZktUEJDNX1bEc-A zJjf>S?WJB3u|1|K9aj@4Kn7!{?|IYTL+@wG;X-)vQ}c7Ea6n0 z#zpRHs~JmGm>K^{F@}&fm7eE?JvlsCnqTqN7yi*R>0H#R;uA@RShq@Yh1Ed?8K&Dy zg1hYOdHto#xFKu@yw;VQ&!^~GsB7S}>fZv-sZ^b`ONkA(tx9Yzp>5Xyz}c**yYPCt za%)9#Jt)5MN(7eB@erTu@0zA5{pQWQl`@D;*7$_KY*A0mu{8R$ZeW^kp`e(jf|3dd zG|_NmmX9Z^$Ztu$pzeA8$&pdmnYKdK@^g+xJ~ms5$@lhH^M$t}iVGu+=ZD3udTp)F zH@CnNR`F4q2bW$Id0-ER95SSsB3tpQw?^xEr;z!w40teW;#43;nZuS=dwY&$Wm$>4 zup~ev7i5t|@L%^AAb8v(x&3waUC2rH?X_rsFe~Rs$!T;}4mr@!d~qY(&`;lG4{6RX zz1T5uyYxQ^PtsluXLmv}lEp zOt^WNxd~^Y*;i-w`NlnhQDn61B~vLV)j(t?ec)DZy+d}`vblS?0lg~h?osPb;gKiX z|FKiNmXu71cxPDcy!_Jtwy4W+!M+;Kp&(me5_FI4>@~Jva$at~0p_anhg;F}n(R=x zg>^;Qy|9Yin3ZV^bHuW&kM&W-mM~9>FJOWoe+=rLsJO3h;usdZ?UIQV>iG8Vy?9(>vDjGZIunQflW3;fP@%`vo08zydLq<5%=y_yWDHyjk^ zR%fTi-+cnVDmc3lm6wKR!#KgyN7zPI?HjiJMC!@QW^OI1E$r*Lf0RhFh;~^YtbXmR z=;J-jpS6-CZ(g8_ajPNNKmBXjwe75=v|A~Q*9 zBkOb2wW%2?*|(GcmBp)}k9qWmWx848$;R}t^ipXx+~;jSiBXc-LaB9(fKjtyJi&T@ zl+%;w<9fUVLfaG!S<|o7)^_sjP~E_q{fm){e-<4{X7tqzC`EZ~9j|kVj3=g&Wb1&V z!#?tzL$om|oT8dmMZimLZ%+%!xX_#Gc4^s;lp~|xda|_FJ(jx<*PVI6yAj!3(P~oL zw1D5`_csOAkhNus*6lNCr0lZttaOvwYUhi0t?d>6Ftnn%R^YmNXecz(afLQf(lYF- zFq}EETxk@n)^!O0dG=h+z3%kGnBg6Iz@!nA4&8jQoB)?WscY(|T;}+hEIj@${q&Mds?C zH|VGbxwWIRce|o;vg0%_X`GcAKW@jwJz3gDTyNiOlH^QfeW`q`deb_aSY7>0Fe4?p zsv#|#AECt1UuV;G1lO6Z#axA~)ltEbGN(bb_G0g_e=+mbnM+++qOrPU9yC%+6ov56 zSMk!T61$lsV&lX3JgLKiiA-MkywH%taB8IAcs1SB*JSj~iq3LqHeYMiF6Jrd!QgwD z28e;ih#9@hMdZE0LAOnIZNpoOPjobg(%S5u?o8A6b6lqB9lwad*t%XyXv}YQ$4mz~ z4zjz&aIp&XP3u;Xr}3$lsxcF)V(zt6^yxY>viE&Q;Sp*gnt7Hbo$6_BlJcQxtMxfX z_;)VnchZK}jR)(!$D~8vCd6HYHFfbGvx1|BluxuP&$( +export const CarBodySelect = forwardRef( function CarBodySelect(props, ref) { + const [selected, setSelected] = useState>({}); + const handleOptionClick = (option: CarBodySelectOption) => { + setSelected(option); + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + props.onChange(option.value); + }; + + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const { t } = useTranslation('~', { keyPrefix: 'dry-wash.order-create.car-body-select', }); return ( - + + + + setIsDropdownOpen(true)} + onBlur={() => setIsDropdownOpen(false)} + placeholder={t('placeholder')} + /> + + + + + {carBodySelectOptions.map((option) => ( + handleOptionClick(option)} + > + + {t(`options.${option.labelTKey}`)} + + ))} + + + + + ); }, ); diff --git a/src/components/order-form/form/car-body/helper.ts b/src/components/order-form/form/car-body/helper.ts index d906122..7b62c4e 100644 --- a/src/components/order-form/form/car-body/helper.ts +++ b/src/components/order-form/form/car-body/helper.ts @@ -1,3 +1,15 @@ +import { + CoupeImg, + CrossoverImg, + HatchbackImg, + LiftbackImg, + MinivanImg, + PickupImg, + SedanImg, + SportsCarImg, + StationWagonImg, + SuvImg +} from "../../../../assets/images"; import { Car } from "../../../../models/landing"; import { CarBodySelectOption } from "./types"; @@ -5,43 +17,53 @@ import { CarBodySelectOption } from "./types"; export const carBodySelectOptions: CarBodySelectOption[] = [ { value: Car.BodyStyle.SEDAN, - labelTKey: 'sedan' + labelTKey: 'sedan', + img: SedanImg }, { value: Car.BodyStyle.HATCHBACK, - labelTKey: 'hatchback' + labelTKey: 'hatchback', + img: HatchbackImg }, { value: Car.BodyStyle.CROSSOVER, - labelTKey: 'crossover' + labelTKey: 'crossover', + img: CrossoverImg }, { value: Car.BodyStyle.SUV, - labelTKey: 'suv' + labelTKey: 'suv', + img: SuvImg }, { value: Car.BodyStyle.STATION_WAGON, - labelTKey: 'station-wagon' + labelTKey: 'station-wagon', + img: StationWagonImg }, { value: Car.BodyStyle.COUPE, - labelTKey: 'coupe' + labelTKey: 'coupe', + img: CoupeImg }, { value: Car.BodyStyle.MINIVAN, - labelTKey: 'minivan' + labelTKey: 'minivan', + img: MinivanImg }, { value: Car.BodyStyle.PICKUP, - labelTKey: 'pickup' + labelTKey: 'pickup', + img: PickupImg }, { value: Car.BodyStyle.LIFTBACK, - labelTKey: 'liftback' + labelTKey: 'liftback', + img: LiftbackImg }, { value: Car.BodyStyle.SPORTS_CAR, - labelTKey: 'sports-car' + labelTKey: 'sports-car', + img: SportsCarImg }, { value: Car.BodyStyle.OTHER, diff --git a/src/components/order-form/form/car-body/types.ts b/src/components/order-form/form/car-body/types.ts index 926719f..d8dd708 100644 --- a/src/components/order-form/form/car-body/types.ts +++ b/src/components/order-form/form/car-body/types.ts @@ -14,4 +14,5 @@ export type CarBodySelectOption = { 'liftback' | 'sports-car' | 'other'; + img?: string; };