From aed15f5d6c9ed01cac7d96f96397aa66b6060f6c Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Tue, 7 Jan 2025 20:43:50 +0300 Subject: [PATCH] Feat: created image component --- bun.lockb | Bin 106152 -> 107774 bytes package.json | 1 + src/App.css | 42 ----------------------- src/App.tsx | 63 ++++++++++++++++++++-------------- src/components/Image.tsx | 15 +++++++++ src/components/Tier.tsx | 0 src/index.css | 71 ++------------------------------------- 7 files changed, 57 insertions(+), 135 deletions(-) create mode 100644 src/components/Image.tsx create mode 100644 src/components/Tier.tsx diff --git a/bun.lockb b/bun.lockb index 5cc1c4a61e9d952903c8a32d61fc3168d43da2cf..545166e5b613ff08ba4c1c75e1a15b70d1feddc1 100755 GIT binary patch delta 19571 zcmeHvcU)B0*7n&)Mj4c5K|oZxf>H*Nq38e>EMvnqYGOec6$I(lC}1qu#jPH@Vl0Ry z5_{CxP1G2B5|bNCib=2}#zdnx!S7k8h{^Tl-tYU}?|uKd=f`u_e)e9wthL*j!|W+L zT(jy-&4s}My&nyp8+vvuFKDp%>HP09x-_in{_E;p2j-7!dT!XyqyOeLW&;!Gaw)Mi zwV3KDM2->c1flRCf_lgtYf^F^!nRPT11>>Q{Bt#Z2c$iCiYN$mA@g$6Q->q22e?bg z_C^ImYYIYRB(#V0fDC|ihpeN7L1C_%U{N9p+dwvgLI@29jb3QEsRPRc_o(o-{1^8`09CA}Z=kpbmi@IMtiB0VWD z&zd5PwoVvJ7WK!-p^6fqNG-MI=I5oR=c2E(^Q}1(ghY%m%4f~Z%CVv$t)NFP{t)qG zVN!Bt4!Nco;>n;#zDj&OaO$cQ>+t-MNYBW1rRp$!kU$lB`zsZW^XH${@Gm&fOmWPp zq}(91apVqgQY&h%jKzzP)Q+Syx!J{C*gv78f?0{BN!v}#=gNl)dx;QsKIj0~g*D4re6c=Ts=3pr23KM;xXja3?ukvb+dD=9a3TU+>_ zTJ$XvD8pxvRPdEJMR5}(4ZhrXRf3c2ZQ3d8)KkP$!T(CXw7ueTOA8QqECMaX#8YDIFeMst4%%aS3V^BtC#gLL{ zCI5Til#W&2nwu;LZz7&}RsjMuts@|*A@Wd%D@TA+!85ul1r1O$1e=xkEb0$j?%?&I z*B$BPiC9%HEj2Hd(o@ovY1>jQFL_kv=+u;?oW9+a28f%w^Jlf1h#t}0-PXTA>ZJ^= zxsX&`AtX6`q$+PEDm@G%lG2k>tXIIP!;U~wGeS`%4YkZZiaA^QDnoDqq&wpCRrxxk zJjYbo0uuS!7uHh(g}u#HVkL3oXCuNR~H1fhX) zD72O!^piu=5mHibA=F2XYh^14gXPddgi__uQ-qS_&>##UCGG@5ik>IjG*V8TiI7ze z-9u=o95SPql~6fCN{(7^u+o-c2q~#YUc|Ygzb%wk%(Um_t|qbEo>xNrYR?1ROk%VH zPlK4|z{?>{IPgk0lkNv}Q3rnCEk@VMSr8KB&;*1!Bh-dD^Fa4lo4N{((RD|to2;@N zAw~HnLS5y!fO=X{83=Xe8I5C^qRlV{sK6Lq7leAqAqgQR^(%ywvI6jgqUdEK)Bz>5 zv3U{oJ3>l^E*N%7h6M;Im0w3l$?Ao{spw@OM9pYpgMe(L__QHU^E8P^U3oc#-i=p6 zeB{mpy-a!|mK7`pg(9zTHHrm|csU~9MkLnMLV;)3HR|pX<3VmQVlxk(=4}#_Jb1ac zNhjf9GJ$8*jS;`_;DJ6S(Z4ZIgP7i!mqQ$D%qt;uO?aTMN#7BhZVrlMyu!yQ?rXx! z5%~m>RF6o5QrD`fAei`e?-((=DNpk=={HgYk}=ACjQX#@BEWPs5A-3JX_O|<3Ngcz zr}>-oTM-$lsfb^B@=8SddMTO$=7Lc_9E|L>l}p(TMh&o`R_T8PqZ%+r{EVW%HxF!X z(kFQ<*=xuRU+c}w5%~=wNfTa+jATAMFu)|f=EKthOnS)&lL<+7JUhTBUi0CV0VbUf zo`#}%hF^?W=*!arP5NDkh=Ud;Xn;}w8zqCm7_bOGLBRT^n5Lfr7N)SeM*V)UmSCv3 zxl#W$7&)O9b)MefkN%L;$U)P<+JV6su+w1V8F~8aUGY#wWs0(6yS`wg`G(4DxB)JC zAFKm3Ysu}b-CQX}cDlYjnA!zs^?Wd@4=qE!&%nsB=x%SL=n}vygH8I}06}>ieTVOp>O2$AM*@9Pw zn)EvmNe;w-^)%|g1B;g#l@QR9mm5rCMoSv@`t|T0IUZ{z8qI<*Gi8PWs2>bQy=o(m z6b`1egA6(crsSh8@(os);)oP5GF=|qy0^ii`F;Nw{r3nN5$`}APUR>Mb__ju7{T^77Uuos9uc=RCtRM)ws$nA!-9MDGoe zLmwg3R}Oi%lBc6*jD8eC)K*L@)LYhyrx{K9FDY4$By*a>-{dfihk8bFZa5E&H0dv? zk+SFYwK0mRS1|B>jruNN)SRKL(5%&Zu+5!$uw$V-jmb@-&EuNM0Ue(oaB_ zQ0W-*o<`kvFvT}DupRc2{m=&?EKBgxa)dDJXn~62fo)CVg=n4zVUFSDZB6=BF;!P(FoCKz(~O!TT1bA)2RP%f>Dp7|KSZUJWqC&(<%%`aZ+1e z9&6IyL1bSg68?@x-p*j~H?q$Iqr&8YCZ03#@;H+|2!23|uy9ngHtI)#(des1e$%Z3 zi{{%~$B0j2d3n4^9|bp&%dvi-^xsvcbbt|KAML}kNj*JTWlC2a03#1$cE=d?jbKB6 zFlCL%2BTIfOXJ&MY7OYr@4=`{tOH8lVi0@;{6=u$chuwMK=#^28fky z4AW;LM5XKGA+{Eb)>JT*cZ;;Z9C>!2QFQIeD|?vq<9Z6hAVmesj$bdH*3+clgq@6* z9YOZt)hCPL!80w-|jNEPhH;P>DFFHxEq2gGz6n2GO(+ zFNc`XhgT+=beA!;hVc7|F}l!xf-pc16~74GLa4tS7lA%jLUR%7E63e>5em0py_Mr; zAOyFgypIvWlT>1i-g|&DAu%wU8^yr`cx7LcxMTni>}L``8NkyZdEDT_lNn0{BoZV7HJjl2jIYQNCUw3;tQc z|4_VAzuZFd04AS&y-K5}HbdjX^wM1~e zN>chdO2oAer~$ksFBM8aE?@(~bdjVAHUX4zGe8$f;$=i|k)(pQ0*s#@*o@a1WXpXA zIVF)+1;qmI0CbVG0rnEX^|BmYocUJBGg;1;0g_XmX(=n#4YkoqqGT_maa z$Etjy%3mSrdRda*Q-JdSU6sE>(nXTetBBwtN&GnxT#yA?KrVnGl?G@nRoas_E|RoR z`9M+|OEve;2h$nweQ`281sp1((w}<4a-oGtn z|NomAsqDqLkz9fsRZRcYqf3(%roEj&4gXjBd%^#Q4Ib70>oFr0}xh|C1hh zpp#t6tEC$)G{aPd{}oB&|36tVt=m?BE|NY#F+i))tM+#{8b5#7*fsv&4W1T&mp67$ znUl-@yTQW=|J~sKyTSi=gQsQTpKtuyqusyrL_iD6Ki%MWMU8AJ7MzYR>S*JhIn8`r z_i%k_J^yLP3yWhJw zy#B`dL+FW(3000&kn{kgT{gcSFZ6A{c2vUyU9A)MO$m6^zD}U)4}IE(Bpkfvx9iHK zB){`-&3gWNy8ExOvmKsqcYM_0&UZJrHSdt~!Qk6JeS5`jcsb)$sSOL(m5g~(bTRYG zC1bx{9QWRjYnGRAQ*?jtZS<%K*&ur4Yn`a%HH_Yy2-QklCk8J*UbBJ%Ubn0;X z*5w&XYm9!^@8;Es!>$eOQ?&H$JKgT2O{;i#J>^~J$d7NVe5qhNJ}}k7YV!)*>u`OV zh1v5Y+#UD<+#R{|XbW@Vskl4yW4PDlZs`_Qk7wgvpP#|K0r$$VFc&@n_lEou?yfvw zjD@-JBHZ2ib=(_qL#Bm!@L9Mw=C^Tg!lSY*tSK+avhdD1_WYMDGxOr{*%s!_m*eik zAL8!IyX07yA1}q-pFhRD8Bff$u;zRV?g5^`?b?3O4;sGqdnZ zV8zqzdFyFrHjo!hv+&3n_WT>L*SKN2g?~50fiIojl?~>%!IsUm=N)I5*-&0G1NIfe zKCmPnKNI$WZJcRl$^0Q$*(}&sY-UzoS`7PU!@gN&Hj*dKf_-yfA6P19vtb{Yb+(y} z<`rP0=EA-?W|qN|=D@yrun#PgJI{rEVEJ>+ESnz#8$TcR%`>xHo;?rtEr5Ms`P^$h z>;s!V-^|AGOJKzdVc!BXo4|_}z`hdL2R4Zt7Q#NTB@4}LGQSPBY!U1$F|z_*QUd!p z>;o&}@rz&|*v3U>_9lM_R<;=SaWk9FOF8UY0{a%5*-W0e81^lNePFXVTLSyQtV_&n z4zBW;Tx}Eror{U?125?kvGRuzbnPO87Cb@ylV~GBe{mdl~Fo0sFv~aIfXC z4{Z8!Gn4owu;P`lZ-tpH=S3@E-zwM#wvroG!alGiE6r>*zYVr*HSAkuW@~xLD%iIM z_JNi1_|>ovY~yM(dy78=D_aZu)|lBwUb+VMt%H4Q&1^GITnqb3VISBQ&ep*`FzY%q z+sZ4zMy-c^rDnFBCzZm!w_qRG+uV6Q>;ubRZ)O$z7})p?ue|wGS~;UvCPa)@P}Y!_-;YJEoOF#mu`W5TVY?hnZ3^w%VFO(*avoov#qcX z%(~Ug&hZMcQQKkPHZwcVleWRW9k37V0(agH`@r(Io7p9P3~c<{uy2Q%UE$d~VBb#I z2X>8ny$$=oroU}wpYTgy#TBq`r_rSh=un+8e z&i2ASFza43yUQ!UM(u}v`^@Y=DmC z0Q(NYKCoZ7*SoL}Z2G%q_Jm&oD?SAK4w~6hUUU%l9fo~if9Hlnun%m>Av61(-v(Ru z9_%}8X3u%aVc2&B_8m5hjPZ8w^%q6PS3uNY{HOQ&GaKIJh=u8RDeg7-Q`~Fu#G@8w z%eUaJ=j@n;VH?A}Hm|@P+t_h=8^ayj819bT`2>tQ38PM!X(Kx!Z)7LsjSP2eWVkor zUZ)o5Y_U1k;Q`m*#5Ztk_`OrMx(Ix5uFbtpH>4Q5oXqree1}uGTVq#~(>IvgSO@h> zP}rTd@7V4~T}mA~?3 zB->{AGSV)u(+3$pdZCWkGicXG7rqpA>5(V{%6(9x4X<CN~tBK5bB*z^6)K=F3|K@ShbX>HrXC4nOz z#9jW^eIvN%MySKe{Osgd;RfHI@!#`J(0Q$cTz4)00%ma#nIlycn4HeTn*$iMb@Bnc?2tx(oAp$=GDTt)c z67(jR-WCr6`U3rc{(ukQ3(&~*2buxRfdJqd@?Qb20v`bvfX{$0q&@XmY(aknEx-U^ zAb@|>3aZO`?sbkM#~RPBO8DWhzB(9{EDy_K*Kf;psur%t~X%K z!fg?x6^m9Y5kPKvRiiMak@N#7JFQN%YDvy6tcA;SPn9->Yyva}JfwIR7VGAVAWcwj zzy!1fXe`7?%UzhIfO>c-umqrX#sSo;)Vm9T1pqA>WY;vH2q*;5Pl6{f1(*Qj0vW() zAPpD=Sb-E^IFJMk186As1Ns7esF>ae^a6SUJ%Fx27oZ(L+YPN#oqJPj;k7y1J0R{s@fn+j+*3c0EwU)xEK(dN-$ZQ}B7z1PiIlx#T z56B0`0po!;fMLKSU?MOXcoUckP@~C9O3{W>w<_dtuK6z^=KwUR!rEb4p8-5T^8kINT_4J3ww*4XgyH zU@b!&!sH#|6s8q`++7B20yY90fHlB6U@cGztOwo#sNAit%1$+nG0luRC{}O?l zz;$33a22=$90Cpkdx1T`Zr}j$F0c>Sukz!NCjj!=QQ$q`FpvQp0Vw?#a0)mHTma4h z=YjW8zwjY&8lXW%3GV|RsPY`-S>Q5287b38s=New5%?7N7`O&}qK5wl`8n_z@C9%K zxDDI_$XN2iH$VZoNPVn({;isD7xH_6JVJ_rsKKzZ0kqsPfD|Z`4q-b;dM0rK=o!Uilc>= zo>l1CF47Y>T=To^yVHm*Wv(<}?6FvBU+Ndxkci+`!3Jq!W9HF_dRC9rNv<)^QfKxZ zfmA~zB@54`ipI=Mv}H@1Fjwj8#>`y}dq}8(@_bh|+wtR%Yi5aTCSsfrqbL_>X9%@( z11K~sI5apEE1ResNYG9aAO&@yHX#Kmby36v^~`~s5*8dr2XvGZj0?a0^oHBQlZ&00 zsjVR*I5If&&y818+>rF@CP=p$GnXb>_P@}v)pVq8P1vaV3u?%{TUZh@XrBL`wo&z2 zb`9x+CM;T9QA4t6%EH7=HKfRUg1L z+L=ycv+a>#f4`Vetx=(q;-C?sodWH9<4EbupNrh9HMDc0v9%IMLpuc8;@Vp| zmqx$yI*sSxF!H;0c=E=LBdfQD9gebLp}}F{G{EXON<%2Gr=v1Bdz&t{@M!G3xmrUz zk?H#EnW6XD2y1mpS4U|Z@_J}zI78d57`m^fqgbtx<0##t(zR2c$At%-{J$6Dsx`E8 zp{WPjl!e#KxKo|7!%+(ML0;`7>G~~G(jM6QU9Q&9&YEsbNFAIL+iX>J%3Vk44dnF@ zF){07Vg=T1-iponsR;ToK zlBy`La!3}Z;%v5!8tNQ9zFI>&MjPflx&Q5Vdk?QpS?DBn^F_XZ(y(nnOfb`WvI_1Jg%1x0=% zvdCaV6pe&@S4s3^f#MQZDcFy>+HG=`KfU5iqtpvLLObJlyZH0GiXLZeF^0l}4K#?f z(~vj3-0Ir3b-?SIA(+!qSlMQ|No$Z-T;e9}_rrMH=qB9*_s|Y*4w~sTF>24_Q%a7A z;0WQQo8;+_+O(sdKY!-apmfVuv9bp0!=_-PtlXv{;-RZQ*xp2n0n2CvHhec}j6drp z+PX_w(X4@V$)7bA>$yumqCgMrOzXo8&sxt@c5|1w_7^xN_i-k85Z1{jwnkl z1EATgku)p-Ih7o)9@^36$fZGxy-w6cE2e}7hm$dyhIUwa;E@NqRX6T8m&-H+8}a1P zSn_OzvL-c_exow)H<4Td(F!+DWi{`gc&s?Qhoqq$K+XtgGQ528@SY-Tg(Bb_96gr8Tc8&0sPVGJaVM|tAK;2I zT4Q5{chC(}Td+Xi!M@6|KJD;v(s8d-otC-%0!?fdR2#~=*a9tAr6jgwJv_Yq+cb_)4= zv4556wPL+&rabfp21r@Z^mygql$%!CLV7QV?H0dmDdh!2^Pdlf2Q8)Jq@f)(-s&}A z{j=%MeNh_?XPD_4EIEasJ=!7UyLCL>YEShGg9dpO8p?oo6-z^;At8TR8=Si>1e1GZ zsPt(F^YqY;?VcPM`owPT-UV{4@&HOUNWH?~6>YG-SUB92)0Kam{?v?2gY-rya?CYI z4y_@#8l;_})eDJ-wvhaJ>2YG`43d)ptn^U%<4tyk7c@w?Zc!(Lv`8W zCRgdSf%O$ng-IT0^{f1ibtpI-AKDbV{&ii_sxVg9S8KF(ko(&m6G|*!WqUw8EgA8ZNDe^w17|_ZxQa`Ll&dkL5DxffPr;r5`b$J+vd>HUq-?p08O>Yiety z9iOz8e8Vw2wX@&n>vX?5XwMG;BE#xU%Z%V-l;(z`jDKt?HIy`V7^S1(Xve?msxVO- zK_0CFJI;;jf%FfZ{$gkHh?a&$V7+e{E$xVauhc=HF5KNBwDZs7JyI{; zE*|m|JVKAv@a|L$2z-1fyqj@y<$!M!&mjeaKR6QJjFzSt;R)^R^X#0o!-Knie_GBf zPdfFPN;+#~?jG6^>d?#!%S#$gZVfdqK8T>Eo=;EgIb<_@g<2E( zUOTQmaH~(H{q(VikP@MctdeM{2abn`HDjbzC_`)LuPI-2*QLSb>BxysD>Os2Q~YHUsxn)xYZPxI z+e({GZk$vn2DL7YQ$A(=`fSpu;{z6N6j=dc8p7wB;-ole6r2Kg08bfs;`kcJbvlvl zL`(z3T!Ey|Z2hj>^PQOKG*GTr-qC(U3Vl8_*gd=(m{8wFWPd{pJuzzM{Ck8PU+;GI zM1AC;u>&9HLZc2eeotpRv%EWeCZ`yJbx1-}oZ7GkO-U9J^v4dePJ4IIfzn~ye>_`1?`6p-bx#rKcVWi z#?ZmSgoh8|T7t9_<%>5Hq_b@?O5Hk3RgfOqPamvr^>L528=o5G7RloUbElgLb0;EN zT0wF~SLr(wa=M!(k64rxY?dNo*+(AQ?_#W(aj<>a?+%;r1V!@}Bd%|E$uka`SP7!z zkaJUaX$*M8D_3CoGt?_nD z`-bWgY!EPgZafR?^^c{$lcv6Z0x7Q;T*Q-8a7vFdB2 z$eUXf{uL-Ww1az;hB>jWy_NZu*+&}N4$pSu`zSL}`=x~&trI5V?jzl32ZQe*hYK9g?E7=)->lbtwhhCIBl}kSHHYh!#gfmWvh&p` z_4-OJQHDp0zVd&Z3LkdqF}S==?3>jZ?fXi@pb??{WJJF@-%qy=oY<*aL;F#Qj2;nn zrsj4pu1;CdSK2{&wV$DgzkKt=s@FD6sMa`*dTAXv*MI5x%U7okt@J$dr(N*U2-mW%QhEm#C++OOLJM}|qZk!9Ewc58Y`jBNUQ%lM zIQ)1}r`Im~KWI_W>gl!%oa!rT*w5j4{qRONjv&Gb5vQVt_K6)E{mBPil~#_} zAWiJZuG+_?;FpX>r{;y=2ZXHqdL*zxOju#9Y2r^CQ!H}GPubw1@LSBRnfjkV^26DYF%OKe< z7ZUB2mSyT09W+ImCuB<)2uKge!pS95#*~yuhtYlJyCK=bNjZ}y=jBS0t7P=lynMAM7n}k7JiE&_l2eJudfos|%m`LB~`ir{!8j{C2*X1gV%qx-RgTuG7IlBHD!ppo5 z$Db=qLjs*DD~172l0J~(ka;DM;|eB^mR`q1V7o5RH)8#`Nt26Rl4R5Q*t|)(ky8t$ zpD?hTe_fY_kp+{-M6br3tPX)7Yc- z!J45T47sPSlBrYj3Q926MN?hHGo(<=EH39NDJ*uOBPQ5!h}T2Up6862T+E@lg0GxuX%9!}%qVGjb*tNIAvh3Ui7}TzjDB5v=K`${4+=n`Ryca z6{{-<_8U{R?cfL%3>!Nk6~F}@2)vAMz42ymX?oQ-c>S2k_JQ1 z_FYPmXoiG4BzHue>Ih{bI9EKhr&f_gFCg{O^o2YgxNacd2X<|c&yn!f?eg=c6_DJGXf(-FEn|S@&a8pj6wHAPfIdr?QIP)N&2@Pf_9)l2?248s zdmoYqWItpJ$QK~FfmM*)p{F4^K0#=(2_*7V{Z~#3G23^SnYX%&ebk|8nyG=1q*#h< znj(^EThlZ%fn)xbxskP~p_@J_rfoku9Xazn+O6y7t#z!-&KuXiqAm!wuaz)Vmi?7l}zvrEG)(sc8YQtOl7X+c%NcKI1!s)6{- zmn>S-`N7EE}XG_Wtv&*+zQdOAU>g+bB z=?o_AY^K>@i4@r`Mc&(nEbZ;)pY&{rtnF>)IIJc1*qx2dPl0jcZiF70kAo$E)uZaR zHu-iC<#(`~V}rG}>amGj6ihWx?t_vo5jXVeW-#Sj>~drXRaxxjJiNQaBd;Mu{ zi@-X9q2&%X^Q&MSod!I9=6c~65;c!~8v=$W0=(g{tO7$=d{WFcNO64#c(~0R*!BTK znZ7!6qaws(HCQ*bcJAZnVAx;vUNvuL3<39e6d1RKUZLDeU>sFJwV^ioYCEz-+s&En zCFxJ935LN`3D%!(hNPHlk&08Rtqrl6!#ik=pmR-a@`w(UZ?&5?L7AZ%e}&Xwt!4~H zl7%cWc5|6U3m)ccu+97$SO!cm+^FGK3)RHf<+KQ%_2wxNTF?=a2%G66Ff2=iq!S{_ z!-;@ninzeoQO%ikU_4Nm6maw>ooPdp5UIHhN5gEUaBqn3FNC+*d>o?aqv$szkea50u?iC6CQ7U_8^{4tB?p zv6P==H*bp7lxoz?pM&v;AWD`*ccgeM8}RZpyTEuxnACCJ1;%wD4|C@R82;l?$3O;Q z3GmD`@l29O##4TZ-Si5SnG~6jVipK@8nR`oPPCcR!MNYpvLkHrvINRcwaXtTP!)u` zjcQWuW(VTQwPU6S+f1ckT4+8-s=peBaEzH62Gazju-JHON~CUX!EA`LNev2*-hU=X{U*n6m#bkV;8^#GM9j{A3`1eYA~MX7=A?Kd$3+=UTus` z?vqM2>2~veL~D?yM7SH{WstWUZT370#+9k_OkUTSYBKER`%t1H>=(5OHghuadGa;j zxS5K{ zTz(4WWRj(a-Fya$u_%TqgSnT03C`UVRD@Yw+?{G*vJXn0GTKIW8w{Od6O2o8mKFi@ z2-9-PTNGbfT6=>UTWYP!e6bo-1qKaSl_%9EH=|Lu>KSokz#%mDGs658#jm68?-hy9|pU?v}!r#x4?KJ)uSTpTXDU$;)n%CZXp_ zyJqf+6xVK2=UNdMhMyV2v5T$1yr>#0wx$nR`rFMt5uo9kNqd|8b6={0aynkB5qgX- zNBT%VvSi!kzxShjh_3yqD%);8g@>KCWO!ADXB*u?L-L4h${&FDm29elsLiGth@k_> zGSF^%VIXgYkpojqGKvpXQ^Oymb|E!H)w$!5p`}J5HAvO%dXTD*l`ufn4MhsEM}1q7 z!W-4V6!Q;A@#@6%>|m2SImt4_E{}6kKEyUBRYCmdq#B6ip=5C;mo|~qcXg>AB;M{M z0r=>$IV4{!S>FQi0`NpuFP5B#)uCShhAjPe3;sWsV+XNysaKuU+E+91(}#B%_4+@P zdi(z?4V&P~Bf3K@LxDL!ec(xeuToCPz*7K^@qB=0N`?q0KWc6vi)M!>Nhe< z&0vEi09W|5Zpf1L%XGP%C2bzoj=mb!UJctyXn0gt1AMXM5^I>?V#zhG1z5ih;EN^m z^-OTFsh+d$HUv1S+Rp}baS|` z%66*k?r>jWrm2s#Ddi3yVjV7)T;E|PxE_|QKLT*aj{$r=EV-T&s#cSYk^TT^0GtE3 z@xK6UcNyRdGC*zc3lIT(smre*P1Nd7oz%GB0^^G%TYUp?HMP3@9+EGXoc{w8Tr8RY z$OPBJlFR=L@Z7ws%X(~#i)9N)e<9_o{SVSJ9+n)3Q0O@;Oqb!h-S0_mC_>L?$sLH) zIZK%$NBF9vVb!%Pxs(l(TT6!ItQ5ZKlJ$0-KP*|Fq1$)S^I5V!Q|G@UY10UAwGX{? zo8OaMM;|@^Vack#xUuY~=d)x_vvvNkWc@(s-5{NMJ|v}#G^>3Wrt4U;%?LZTje8@i#l120 zoa7W9REfJM-ND_9vL`!56WWHmH;F>0XiCFyZ${O)`;fWFDVkFb?k(s5?!M$*>=b^K zhr2%=!##lfOPr!572zI8r*UsZ!Bd=~HO;`i4V|6hq*Emx6hGA=f~kC}Q-si`xQCK; znp1?)LfpgYGVX0D=`p8hM-{lYr)#)(pp5BGVWHKyM^G*99jWIGr--CV+@t6Y?wu%m zrc*@IHr%ZwW;sO+4Z}T_s&S7a^W#ntPdT_J&;i_SU*ja@1z1nYnCqm(Cp>8LT!(N_E!b7C!B09wAF6!PNvr01kZGPn^rP%~ zPU`Wb2kiyRCh?S$ZiBg=a)^Oc4YqZj2Q{DX5Q8aazLSPNk0*hbl5II!782&AS ze_&(Cx&;0$hJQ;O!bO+C&Vywxb%=3Pu@wF-fq!6ml<_qDTMGZ4c8Cd73w9N3@G^&( zNR`Xr-_!7KxkF5*?B(!p8Tk0*hbi5am?968=34 z|G?&wRe^si;h*9V^XM|zd9ch?4l$o9R>407{(&u|jMeaO75rQ65R0i6>?+vcH4d?q zD%Zfj)$s2*hge40&%wVn@DHql#9H_V=346zMAcwhpM!tv9O7BZSqJ~t!ap#Dyw}6O zb?|S!L#(D_VEe(spLdAosOWk4w;uk1t)t)#@b7u}x4|Kvr?X(Ez~U<%qLRuh;ok=M z2eyf<8{uCi{M+ado9Qyxd9ch)4zYzQHo?D*@DFSoWxN3YHo?Ca9AZ1wf?Wk0yxAdk zP~~R$_X7NT(IIwH_KWauGyDUqCb0$nfw{Ig#BQnv+xjB>+v*T|DQ7GE+XDZ<_K`Qf z1-fsAf7=}5038F{4;EhK5C^HK3jS?_e_)3xcsu;7f`8i`;&nO;b_y*1C5JdhyhF8MSHT9q z;=o`2D_?{OK75;&JN!I=FZy)^I?+{n$GT3>r%mWVbH>x-Q|MtT_uxpg@8vHu||6X&5>r@MN z6>RW9hqy_V2jSmq@b8dAd_&oX;NL;`2UbhsF#H2^9d?NCsTyqSA^3O1A%3KsBk=Dq z`~&-$ykCcZN8sP<4snN$f$awiKk5*_QqfWP_d5JL>X7eB6mo0``5lFW#~ku~i9Q59 z1sZ?cAq15lcM6$4#l0R`PdJ4eEyUeKmvOI8NpCp$IflDCUBlf>87I}J819Xz7I!?w z-c+ArxZ^2?yBB4@1)tu8Pj5N+Id*E9=~uiQG^Sw}V=1Vq8wH+rH@V}NOe4xZ?aP{m z#ghvP@Xz?9!}9LFr!NWr9{APmiI3R)bI15+mW!Zkv|D`CNT&Yp1)1LW#cy-ak7WAR z+efW;)EReE&rp2XLcRM~<8cNbs2if53y@8AXP-VO=-Uq)%fTIY-}~?j*<{Dx;yhqH z5H-3{>bWy==hWSvpLCH;Lo&7QEmNy8{(aCFS*Q;7X=-zc7Y>s8i z{<&p*!8JJ7@hBVMGV3<{lX@t^t?@d6~&7xD>;gxV#~`!;OGAUDr&v<1do&y3R+8 z(kkTdEeX1^IV2axR8T*%amBuRVK1Z;k!E{8UB_QYl5`!u6{;Oy}5G9M~n_x z0?MCR_?r)ZFPaEU0wx26K#@=``HB|dIVi&s9RuV7E?_J$4j2#Q0r|>|=E9+V8^PbP z)X$V|sDguDA7}t@usQe~Y>q9*l4I8t;5hgI>}CsqU1L{qX1DXNs zVkvCq0P}&lJaF@nC+ z0saQm0K=ifmqzvLV?W6LKrg@n^agk^0{~1@DG+D{v2-GMBi1JD)-2P{B)AP5KsLV!LC>a4FROufe%%(tADKi2@nm_MAyfZZf%s>#(257CE4G_-K za3sTkP#^^0A>`rWdCz^|_BgT_KJ}y6V#p_ea-a;D4LlCa0=U(gz*Jx|kOzzdcu&a% za)435NMHo;C!P{cB(j12KtG@_&>L_7y@2ijPhp&7z2z3xVM~k0jy_?2POgqKt3=5m;@99 zg+LKd0!#s>1MpCK444MY0MMMeX{1APl*X}Q6tDAgz%23itx}3vdbe4EPw> z37i2w0QgC=57-4%1Frykfmeauz#g3+fqWg{s2u`c0}cRrz(IiX4+F=5qiA1x2RI3w z22KE{fa3s9D%P{^4PCwk`6lo_z~#8i+q!%Y@?GH1z=yzD;3GYK9`Y059PlY{0r(s! zy@(ro%Tc%t{1wn&(C&YUH0%EcTmd*D%)bVBTsf?@z_$R8`7MA$+W`0m;BjZLuCtC` zA%6kx0Jr(6(*_A{fGg&V`@lWm@4#Jv^SO`^{8pyC-$sN)nUHn^>H#vq9p<+W-b8tm z<+rpZ{1C-8y4ya_AhA*?M}kE_!pqQ@v2)GxOZg>l{-Ck47->z6ijA_WbBA*VeEH&p z6{B|!K~8j3Ol(vPT30+nM2xISzraPPm@ThvUF3D{T>U~>%;ff<(Jhqep<=vGj;wCH zWfh%85Pp z+Kuyat!DNUS04Yktj@wXQTK%7`3cvzHSArN)7+%oLRr~rQrz1i*t;7mmr~K1anvp1 z<4wh9C+zwY&w!{Hj`F)6N?|*0%|rVa|EC)CSGr%Fc-&23BE(@LNb0FFo+I`%5rM6| zx76jhdn!k`tZ@!)eaqv9%&DKDXHpm8A4-P<0qU#xhy&SIyR@>j0iID^!n@2tlPJKX9bi^M2v5|6iW z+-mHnX}bnTCSIw_$?{dAEW#p>^HttY7Jdz<`>H?CaB@p|+=5n(lU$bl+_NuKYo9D=31(qB2pB`^9b4Wl5x_E+pt(0}8v3}t@DUs(bkXq>#< zeY*6SF5_MbM~(V|h2>FLB>Za&<22^5*Ke8DUb@*{Eo+Uk;gvB^@$7`!`J84$Ea}rr zANTZ?Kb|gQ;;MTt4rVG{I$>Kj4qOh&ey49vlRa;tjs%z>T0gZ`mUj}p9%!7foY*N142kX0+v-}v+Xp?;_{9#0`eNgDw_ z<;`f(G^|soc6jL|BtLO-jt8I2TIK&E%<*X8E}+7{N26(7Dp6L^SN#I)#6&yQAx#22{aB?UT+-a-{^_(7+7#1;kG`#<&r36QQSjyBYNlKuy7}KQrzN2 zP@r+}@Qq>7KQ~N2&BIIbZ+T1k&bFZJ0N_y^mBpYk*;12a$xFDYde`%aw53$ZS! z+b%{%E3ep4*X(HJVtn1U5ol~1|Gd#O5$mFr)C3VE-;Gv+u))axSc9M3+^X19>S{8n zH7RKcqLtFrh83+?6;FPc87D#8$X|@izI6+)A|tWMM8(zl_m3@D9&Ba$JTrQroU&oQ z**nKYC8G52EE|1-7|X^u8M-)kMfITzr~iV6*#Z-|TdY!+2$!%ytVzVs42o5jqpQl- zi6S7-IGH+l)Q$VUEYJB#EyizOIHRfrCcz`)jH=tvm_hH=uj0)w9u>o4Tb$BA39D^g zys{pa3C5w+`3*X(@3U#w7Fb%bMao^(c>Q|Pa+(<&F{xK?k%7A1M zAnQ}&52nID4aeU5mCwp1FL4ANZitSUer5L9)rw8Vpxx8THcc@w4koEW`80Rk^uRr3s&Pz5=QZ3ZQVw})i zRGfc!M6YXa*5zpLL@|NJ8PDj+AFQtMogEJgYdm5Zjnkk?$Icj*E(mKg#IN6-6MGN2 zjmA4GJX6PeaFQ|#7V?-RWoBpe)Hu-kT=RW30rL(`fMv9{wSAMMe9;-c-A+aQrq!BU?=TF!6R%luTOZyIKmae~;tY14v1p%*$kZu=X!6O16#v_Mk_w8S1jXyqg z#b#M#LxVSzvgv8ckqm@Q0mqwSS?;hC$JcvpFv;QxXqrQ_IZfHXwI2t^TW*=PVeNHG zcON%dybO&GG{yntzMYP5^nd$=58CB{hX0vq$}KKy9F1-jayj&^EvZm#!4TBH?%1Pf%wf+W(!1 zs5^t<_wTgNJ;QX-E#!C7mBwAr593(&us0J1)bzS@1O3njMmpJ5Nry#(aSr>Aw`;<^ zxc64W!phINXvsLKJ)?H-`Onf0Y10 zNoh-_auH?a>P+RQE?6YjyDOHikjt}_kzKXrHN7h~2=^rAO_oD@Dn8xt6g7@vZ(g_| z)Y5mO9X0CXCG}E9cN6ai8vi4S^-mq_y7jK-i?W!b&!o1!mEM`C+dD}an~A6Xbo`+A z#^~fOd38wM#r3z;-l?PWyZg5KqiId7^1fcj)lAW?bW>mT^W1}T+mly);5BDKZ$<4F zeon_q#>wv3XU5Dtwr<00S!DLpW}|WTJL~93WmfZuVzo>xzpWXk!)M1twK?9bUI=n9 zuDlwI|6@tX!XEebYz|YlcNdN18$Ff%-Qm!0n|iXp)|7E<{CY}G&gq!G{2F78ijT6z zN}KyDL0JgOuKr4L76t%&Q%C{vwTR6b~yXV~mo?Pl<+c72d-fes)i`Z#T~70X$`X_fG!DNHZhUQ?YuL=JI*Y7< z%2BS}I4-~Exz|6r`1PhWbr!~f`iu|%a$@ZxFV3jTSv64c?1_l!-YMxlMO@fdPHiq7 zUh+eCpKoU1p<}`Gm#%bODwi!OUXX3fOI zhj)$72G4rIxjo2#9(ZH$a^Jz8_kH3nRe@=(Y=bp&i$rF|GKBDD5{8NGivE^PL;ruVqL6v9# diff --git a/package.json b/package.json index 3322dfa..6a5f5de 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@dnd-kit/core": "^6.3.1", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/src/App.css b/src/App.css index b9d355d..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index 3d7ded3..f8be86c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,35 +1,48 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' +import { useEffect, useRef, useState } from 'react'; +import './App.css'; +import { TierImage } from './components/Image'; function App() { - const [count, setCount] = useState(0) + const [images, setImages] = useState([]); + useEffect(() => { + console.log(images); + }, [images]); + const uploadBtn = useRef(null); + + const clickUpload = () => { + if (uploadBtn.current) uploadBtn.current.click(); + }; return ( <> -
- - Vite logo - - - React logo - +
+ {images.map((image, index) => ( + + ))}
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

+
+ Upload + { + console.log(event.target.files); + if (event.target.files) { + const upload_images: string[] = []; + for (let i = 0; i < event.target.files.length; i++) { + const url = URL.createObjectURL(event.target.files[i]); + upload_images.push(url); + } + setImages(prev => [...prev, ...upload_images]); + } + }} + />
-

- Click on the Vite and React logos to learn more -

- ) + ); } -export default App +export default App; diff --git a/src/components/Image.tsx b/src/components/Image.tsx new file mode 100644 index 0000000..3a518cf --- /dev/null +++ b/src/components/Image.tsx @@ -0,0 +1,15 @@ +interface ImageProps { + image: string; + name: string; +} + +export const TierImage = ({ image, name }: ImageProps) => { + return ( +
+
+ {name} +
{name}
+
+
+ ); +}; diff --git a/src/components/Tier.tsx b/src/components/Tier.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/index.css b/src/index.css index 6119ad9..b5c61c9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,68 +1,3 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} +@tailwind base; +@tailwind components; +@tailwind utilities;