g*hL5&t`sebGE7zZOlyQ`_Yu}fa^^e`n6}#TQKEBR~bL;nwUJu-~F_-wY
zWd|pu^@k&Au`34Kf4V4s4kR$eQj04fWGLdkcUoHZck
zM(|U+Y0Iu}-zvApr{=md_8@fWZ4E~@r2G|wcj-)2hkDic?E%*xdT#-bmvvs}N9ueH
zh9|EK)+n2K55mZD~@ozuPC%Q`}8V`E3v)^2V;DNlxK&4Wz8he&CDzxy|;$b!l5
z+A})$Irrr!bDBNNJaXYb^yM{~Pxo8W;{~~TV3%|#Y9O<|in&qNyTx{HOdd;rqQqlN
zeD_JI-iH2Eu_#$sVZBE39$P;;84)yVujIMAS9m;nU8j+p#H~##1vFx<{pt3;_Z~x^5C`T&bXQC-%KsHSSc7V4PGe-
zhTnVW`N@7q%_7*6+9)d&kGj7+*SS2!xim=2lQ((n6Pm!!_R-UoK1ywNY@6}
zl)VSqln26`J8hY1s=vEU$5+%z%^lmsWBkfQ!?u54XE+rX_(+FMK`r$*60_uOKXU@V
z-Gm}by?A6N!2i#`0*unE?)Ri@?1yb)nou{gCvQgS*lUin36u5Pe2GpQ=I{IMMI?h*
z1HQ6mB_XFrcXvQ
z7&%XjfnZyk@-}cBTVeu^gT*dOzLHHMQ&4>jsSzj}r2j#Jf#x5RjCrCnM|Kbts5Hr=
z<8BfwL~|zUwJg=6mS?B2#@k%-CbkVkqKOvEIdr;Dl@SmIq6BP+&nY0Kv~L@scyIXb
z-W=bD;rOKz8NmEc93M?7WUri6xB)n~BH%^nr1LFp3h`;oJAdfyfFF6cyKgo;8T&1C
z|9tR!Lzj^18#XFF$JQ(o2Gtb*MvkucDopCjU+sk|U!1&}j*9VCaD&|;duRoR1Zfd-
zeL+XOxvn2m5)F&>-(CF-9xH2%DA`7=vCK0qm1fB?JS~VHV-#7QbIv5~ISeK1LKJn1q1*vbf#-a3cl8RriZ%%Jh$C({-mb%O8ktCQuw8UM6?05BOa69!>2H-cV?cuM
zdA4{IV05`-3}cI?Kn6$b#F3MVPCpGkQhy!4vnxD)JYt*vab3xS?fbx7U8PV=-)F8?
ziS*5l`-xM|Pfu3oXs*|ujwsu|5G1Z(T~#rtbwjTJ0mU1VGb@BDFp+@TO2034h0m*}w$ce2
zhc^1^Q8;>SBuZ7tGINP`%MolTvR@RyYYz7L=HJP0k8&2ba-7_gz`9y5#2s;%GaY`8
zqxD%L_=;fu5gZA(UzXe?>4?JpQv7cDNImB#n|yGr?x+7w?Jpcf6?yW^&U1G)HK-2!
zArZB}H`z8*KFq5?0Ut|PTH?^0IyXN$y4yDXp^i1r(q`GuTT;zjnh`!<}8lul~jEOZI
zXAZi6!HzVmOpu|{I7)yJ16LZtDEg9
z3RhP0n9mo4+-R
zgdFM6*+lVvh`T*ap5rUSytxOS!2!q`imrnfp_NyEzsVb4{QTcr!Wb;=8e?PTS=g?7
zl61kFU2kGfevPEz`#*SYzx^U#1$;VDb+)+mw3t4cq8ks_H@BD<^(1hI=0
z57EYiC^a!U4#vo(PqZFf!PYM=u^iJ}eCdK?hf=va3^%W#BWXx-88DbHp2C>Ty&}O^
zDiHksZd320!pfPtN@|I`7pjVcngMJ<$eKb^iZ0zXTpYFX
zzo%7EDH6BQVqig)_3OivA>?RPNied8hOc#xwt#`1!D(~5gYVG>(Ajf(bauRf6Es?N
zCu&t&8ZjB#_xM~2V|Q$BdZmhMb|eIvAO-6zk+gWWCJu?enmJLu)KgB(-bTke4|eZPZ#x5Orc4KP+rJn?d!6
zBJhRJe`p!!RyGHc%vNOR96r=SxYue4kYtjzVx6M2D4UOy(
z=uCh)^mjPR`v5iN;Sx89EpqF>6+0s>_m!^W3itiz)+Ng_=H6R}p$8#L14++{SAzII
zkYCcEXb`k$mjctb+XObs?R_b@_g=^7biO;qyqqA5*u
zX3^>$Z)xWR-_s=i@YQ{c8$j;MjZJhdGCh4(XJOMdt>WNM$WP8zWk1!26z$-840%v*NH*h@4aI7T`Omy;`az|S%*IQGhZ3r{~+Q4EtV@mVKl
z*EWVPfXYPRY9Wu5$#ibT`^9wkAK{uSYDgk>hhEhxUZ%IMLbcB(lCGC^RZh?71+p>!
zH-QK5$)b~_*Ozm#rNF$Bd8G5t$lsw7)bG!9V?te`YRc}_Im^xUS2ENKVGl85AgZJh
z7J9Y=3>JENQ3P^qRf_bL;x$byr?gC@B8Ul{zN#h9qwTkr>3bqfUob0ly+JUj%_
zL0|?cO{L;Gn8?Z%{CL#NG7jm?()+0_3EL~Bri{9NuT&cEH47FH045NCWA>fWZ@k>~
zzg2hXWVEfYf;6cdWzS--VyT1G{A91OA3g*u;PzFq6^JaerNozB-lLHE;cs9Fb~_PA
zKlI}m&EC*qC{pH#2z8qDmK@_bEy%J+C4r;6-#wL3=|>*7xV>cL{F#PA$_VEjt}NDb
zQ`58o(W#&AgmS0anp~~&U=3QZM#QgObJ5~)3q84sa6j5wJ+;Hw2rRyNrMBtSxj-oe
zcU^>;m*(&qL5})mQV~hpAH=e5n<+?SjO*4=a#7oh#G$(Xu+;v>VvSpiAD=kX=v9?@
zBb1O*1*)>SY?k`5w*nPXx>~qtToS|qmCpf{1SJcXe(=63w_$sJQnHkq*K{38q4jNA
zvHND0$vFDOC2q*mb;k<9a;}z$sl;cnP$1_c6q(NRX_asJ%(dZ;{M&{znO|l(d4pd@
zt%6(rE{x8^$Bozq@P9#MX(?J@eOE4K7JK7k0e1Ac5=K
zkn`Yv)@!-W!1E&tte4k3s?Mzv6J)jNOS;R9)t2)L6JxVI$rS5h_$LDkJrQp)DO{Rp
zo^}ligM=p%#9m67FQ3MI7s}ygVDF7msF7!Q_kBHNYXu^LBj=&t0<)^^HFIlp{C?B}
zTZbMif&^m!4p%d}N}YFy1MjU~SXm~u#14!#rjIq_KiF5D;oPe`d1{wPgTV?g9c*hF
z)%BTX@#V3hLetZ#aeCaY0a7Zd_?B3Z3*7(6)}tjDRwlahs`2da-@4%W&TC*J3NSHR
z6oC$P$G<;rMm{9zZ`TGf*lAuZ>vTsCG7v0i7Yx@J`TFbJmV2h~?_%w4s<*S|g#^N;
zC+Y58jQOED7|aXo3687$hK`ueW2VeFP$mffoi@9CCS_19q^PLl(BS(((Nm}1yBT9u
zTC<=PW&?mlu?e>JJtJCQ!Wrk%hjJSQg>b{sjDJNYN;P}SeIFS{8fSP~1jm)M!dLNe
z11J1uKU~~az+u!w#YnNV^U5n<_WSer6Vtf%mw#B5$_Fs`c%s|J%V9GwDy5om3oTvk
z-0j=k%}ocR@kPz~`xIcK?>S*&9Izd^us0~RQ^)-H6rJYYj7Q^8C|^4rzT*_@#anPp
zaBX~oNyDh$>9wzuSBGOj7YVbv;EH7e02{SEC!-IW_^X`ucOgO#N@qjxyOSJTyhOXO
zE^Yr0>a>I7@Xx#ONF#ak?L}g?-al8#t&MMbPkrqx7>3@3E{JGSr1WpA2V&&`-1i`7
zz(VhLYS_mTIr0@%ver44gwSMbadfeetj+KA4>eTTELvAb4SDBBP?YS5s2sWC@|l^+c!6@D)m6k75eV%ykTn3N&w
zt2pAFn$&fQzjdfl+|5)fPQ{nmWP8dHe!mqrFOmY8t@^v%dq{o2g^X;*T*C6T9Upj@=de17nmUT7
z5yh6@Is}!LC2t4my+8Pp8U!@aI1A^^iYHJFs1V#5(x~S%_u^_d(5;oNyu46-!wpz<}HJe%JSecxo_U6L@7P!xIBqJy-{=8RD^S#_8=U+0|Kti?eDzoOWA3c
z)Rz-%{lcD?nNNrF#ABoO3zg3ZCQT#fEY5}gt8>-XPespNw38BbCrG7g`>h_YQmCwB
zYMjSryg~kt3QAC`Vi$1~S$H=U?K8a1lkJeufcGFG(c-Y{e*4KxbH_~x97zUKv#<0L
zd5SyL7m-uL!JWxDvK@!tSA+j6{CjWtd~)WGSK*BdwFO2(P8yJTI53cK;T*H2&x$%d
zS?u-Uu96j*bxaC)7W(I}8zX>9;4iwv4#Gh72M2H2V&oHSsm$n-_EJ&CqnRUuc29UL
z#9Y$sy6~Az)D;0OcH(nb&J(H7=H*ofR(YIv+MZV%9E`fBIUF0rxt4qVstFlvYpMRi
z9NZ?N#B;_%Utbf(Vgfru*6Uw9(5yUkeb`yzF~z7$qvo8%r<-iyZ@?H9)}(c+KJukr
zi0jG@fi?pAr8cB&;=s1?VOReM_a6Hif&S=}bh@*oY$4lynO}Ts*J?uaEquczP!ARi
zzBB1?F03Z5T+fy?slF&qkYT@0yg{Ho7U>o3V&v0(^qN-ir!Yp#WO>u=u+gI(N6{W7cRZ8AcVe7YhBLe#q(KB+r^ixC@6WbKw`gbclY~@~KgMXqiCPx1-3z`V>u1r`{SExD2m~_Q|eHfg3
zY?3bx-hFZ`SiTak
zExZ`blCxs8PstQLJbUyM8~`+}>|}NS703l^uiM^*R0|de-0`FNoOgOYh*w)s!~r;H
z|4sH-xW8^aqcvyt*kS?i!0UPFxPy$5kVW49@=RIgSDYqx=EEyAV`Dnb-R5d46IUY<
zi(0;F-!p@H8pnz8MAvii;VS>5MKz9%*8YX$+bnb#h@nacMeQO=dclpuV%S`0pBL+S%HP7EwxQsPpxD(;=Y9pV9^Y1EY`CUkKTU<^T
znWi8ErEy4JA>I2{X06x$6frr7Jw$I19DGvGsBYzujp;bhOT0S2oL+2PIDhfe%}%T3
ziskUt7iZO(s0m}mpg7mN8x2aIo=V_IeZ@mmjUI7Dm$PbjMKT1mXYBD5mw0Iauw~=@_^69BaWy}KS_;sA*$tz`*7KJV8T;31=%(fgRRh*wl
zN#HceLz17Hf4A?xWyq11GdVwpN0-?CW)5Sm-!r*o_C%d=%J+etu#vZeqx5Z-L5+m3
z?KU;nL02)&)`g$gM6eGMF0yh*vR!a3+
zcikiuevtNj2OB(=?Y1J(P@kJN*s;xgw#NVD<1d9hTw@5!sP<
z*-46+UiVJLF4^K#Fui#Fbekj)xmoa30HaJJC>2tC_qCF7zTwW`82lTbA>uqg6tOvb
zY#hT7gcbbasrQ_`)rSysy7*C|f-{p#hJR)@27C1RhN}R|S*|f8zz)C+9Y<;!W)EVv
z{B|&UHmWc9V_e2d&P&hvWJLVF(r&$PLy_IT*WFg6xhKTFg>2_FNapU0PY32CpK8kpgQ0|vKqy
zUF7C*p|OHXQWLRk7_1(TZ7F8>5g}2r;^UA16nqYpjx=Z^gmYa`h|jhD4VNP3VfUDAP^7IkB;M)_OP4ejvB9zVkEk;8^~LVP
zk(<#qY>7BuFFPpb!7F4
z!{v6MzV@HugohWm8T_tvdjqfYZSo60@PW=0yTli70w4{GnexSHXAs&@qfSp+V8*V}
zH-3bu%#nIkVc^_~%OK9j)ZgHqM+~IFDB|ucV;TO}DN#-HgSEcj<+4a1wi<6n5Zi8Y
zuVt-FBPTr*(Nf!NpfV1O0RfL4+S**6s80xL3vjlXc-};tGS_b|E`gR#`|m71@$Jh}
z$Mn)l7;Vb`+y0W9FJv1*OSgXTdSGId+Fkp!Bn6X&B5CSq#yfQ$mN>n?Lhmq|IagzY
zsx90*@LyW(@?YLf&3ALrzB=LR&q9~*2rnGVHVQD}%5|}#AV4r|=gZT#VBm1$O2k#@TIWPGh>}r>YV>)!^_rB%^zkz2E8?X2rB64?l;72U6R+D_2#*yM>aq(
zvc1wiIHwQ6=20y%^V&19r8EMJ7HrPH_rG?aazK#rh=0>nUi!gn`Ktpzox7$`FjII)
z^DNq-CKYYLm%0*limC>0g$eh=9H+7<_BK;QA_uS@BF)5)gwaLj`@iKegsw_VRsOM%vH<=RnJ1x;%i9GYtho6k*!4mBea4!
zy+^jCFa;C!H*&WTo53&hYVW7QQ(Uw(NT!#6DWr9)m^%vjUBwyVLqeqygFw%Ng3>06
z-r>%rQm*J6-+xBo@pNj=xqHKH)YYE?WK9l3~70b93#d-X%yX5>5)E34~
z`k0x%NOr8&{YJf5C55@kLa;rVd1yYu&0f!E_Df;BUDotwkyGW$oa1HP->ZQ)@kNY<
z^rT8ZLx>WBiIi&9Jb`GQ!11A$Jztz01;^L@8**&q
zgSix>-1_&8-BZoKJSu$H&hURp6hB;Rm{8U~+uQtMA2zKPcz7jm&{EO!knLY7BV{+#uLyU~lCr`jkL
zR$4T=M5wpz5X0cFW}9ZR-`_@!c{XE-*(zZ@ynVmr0Xo}D*fh6y>lU=xzCy&YsCq4*
z=0=5eA-6_y$-sgM3fQG13MStgN>SKb6vBApqj`*S$xs{3=b*{?A%5<#rpSwuy#Vo5I{IPP-d
zpVe<}zVwOQHOFkCGpb$3gThIW2~y*2eR*LFC6a(CSt_#$5IHHIX;qWsHF@_);SE2bAc>I??E?%qRV|HezS>A6g*EGO`>&1
z`s1!s8KYKFvFi)$kEZ<~#+$~nIC%65Z_UTDzDrN?X39`WdSSE%k8&GEUo>d?(i`bE
z-Nch-NDz26u|wyXsD0RZ--3<~`Tj>#Ns1Qm6}RC{Ici%+JTcoy|?6K7=E_$
z9e{I9-VB}m4T$b2ac@RYI#RUkW}WS(T)((qdMDdM2{enj#X&67+p3=8vbG6^NLrSz
zI}w!tj8g*WNaCAacbB{x0yrX~q!lFEYv5z?535^iY2{vk7Uskt9u=6HEwFEfpNq!i
zws&A~2s!|;RN@=Ltn|7K3|aEiKvOuEn3QQQh(C_WZKuUsHkVV3WKR(
z$Y1{{hFBf}zx1GdVvYhyukp;l%$pa2CTL)Ambl5m3u+oqnPnO*2zpKfNHzbtLUt6n
z0Di>=I47f7lY@-aJ?{VWI@vjL?w)EfaD@>1k`Q&FOA6Ga71mMo>;F!FDN5bRK7BKe
zdBfMP=e^2T^w~*MIa$FA8`as%^8po
ztR?EVZ$*ljm(ccq7PO!PRE!+ZN|)sxFyZg11fpa1m&gIILXC8qBpft
z6ppNT%JXVGDg@f*He`OYOGB1ZKw#~k#nBH~|EDTykfG}s?TMoY%nAd>psK8b6Wi5QW{hl?
z8!nzZuJ3Xo<#sXh0agb==QiQ3>;HF%X7^dAZisplitNT)2pjA-;#}qv`X6IM9-SNN
zO-Hwa74=YSH^vh_<%b4uL$I!*=r11NZ3X?Z^03gFp`Szu*E
zL#Df)M9Dnu%HJ^hK$FA;SpofF#}ES|o8clecr4MZ^;8c^?23h07`-DNzU)wyYo2|7
zXI{mD=-2dO!O5`d@F(umEQZ2w96z&c{JBeSU~KYX{`wb
z%YJ@`eaY}@wLxas{=9K}S#|q-3Q0fTb>jBEQFJgQCmM6;|Cr^U
zS9TkL3)}|#p}S`?d1Xp6Y(gbDYBggmEJHl{ng3~Y8!Q+|GLck}7V7Kl@d^*6Hykb5
z-mJu
z6vE1%`b?rPZo0y`WxEox=`?C3M
z>R;EAOGwlTlF5lzZ6-ENDJO9~6i>ZF{
zezmG`Z=il(k(w(Ag1*-^hLC8cEBd*wDO%Np+j;#w@%G&HX?~Dz_)-!ZQf<;#vY_ue
zu^TP2Mq-Yb*%1ArL<0oP2Hb|E^Giq2qCz5)kt_ji7iu4!1i0gI8eOyb?_8fFyNedhKn9Inztqs8nq_@30&i{)`0^Q3c#>;4f%#5
z=Ze!uCZr1BpB7upJbup>DGHv$b_Ra5<;XD`Ux%E(#=wrn1Ho&a!<^#!RKDSiACcK~
zjNDtL+NKQjatGm!GTXPd!Dzif%Zi~!Lq7dcmw5?)zMN>5
zoKdPZVtM;HZaQ&^=eFMEY~a;$>$}$5&^_x$o9Q}MZ8-ja)e1=?79L(3|6R+qU-tET
zUq9qo+kC%rv@fX@qXnW>gA0-zg8(rPm(o!n3X_Ef1Mv`{+mL^x!(bup5SP?V?=cyO
zPfIY<>CY6;H&b1AG|nG|nF*YEke$+RADXZ1{Mnd2U43FyDJ;~acQd{Om>B^tQG1hA
zd@xwQ`|+p3%!Z)mI5Q^1I-#$#eD;`OZSi3RhYoZC%=gavp7-37K4p#HjI%GWLBplT
zesZp%4i+s3U=W!$tk_yICxQZz7iv4+BwB?`kj<)Y87c_^GiB1_dFPm)3vH$Bxx>)D
z3^|K$eCX6iME~I%ha}12XKMfoo|FIY9e{3QV$9n+21h%Y%5kaL+~)a+dI2|bwoE>hqFQiOwRH~Xuz+)`DbC0_QwVS&
zg`oq`0e#SqxLf7+mBc06V7kYs_U&{?H0$}4sT6iiL8KSKEs!^**sjBt(y@h!O6TrY
z@qfUEBaBzR&}UZ5V>0a=tA#5du&D>mU#BoG-|#%oInt(osGtF
z+$TG}_@1!?gMaXzB4n?nVu?{02&4rdQZ|he=2?X`3cKmZ(h(aB+$H`vuqCetoQcE-
zmP4qC8`xxHoS?&SNCwd{yOz+9$*4t=}
zjb#1Fsc2lL7mnCU%K15Q`c;4EBXYP|U>ITBk(0>5V|fqyQeOINilJ0AR^mkM@u%5;
ziTWy&q?EJVYQjgHuiE|WD{L8}JQP~8s6G!0Ajn}I?iu+Wi-DByLd?Hj-#Q2ZciaB)
zmy%fMu;eZ^w@*8Kwx6FzmO2AOQk<^!OS15*L)4`$J@RfdTJA2?Z
z<5x~>w+HBxe-p!YdkdX`wBCb$Pn%)Q#Bb+nX%^Ue9z3l;6Wvr6zEJezP_w+lrObda
zPCL(o8%c8@+@VYHGazx@pNb><%>BNfSyQ6CntQ0wm&V6N^`nO->~k-7I51
z;6c6pGS{n#gyN|!`aSwu$_ZQ;16)3al-K3H`y?
z`}jJM>u$LkVqDZgSvrdUenNyKfWn*(+nMMXo^WeQEMMQa&z2Z99rqbv?Vu~Zah^wY
z2bI}iq0JvduL6&atwTO=*7%!QXE4u77nYY_e^{-eT}J2Q$9rGpVoa4Zk7|5te241X
z$q}LEG(%0W{D?~Em4$ZPx_y#$Mh%b)?;R%-PCjC+9y6Z-aJ*CNMT*WSf$>1AusP`
z>8FJX4`prLL4N}gW}Ais^N}mkx%CZ+MI~&2nJye12NRyG-T;78^QNtZ1#pG0Zi{tz
z)Vu2S((|ZE&|5q1n!M%uq_%?5-wpKmg+%*2*g8@;JX5S;ZLJx;zPoD#LYX`j?2|eM
zLHFH~Qk#VO?xSFCgQWg#e`Zv#tNi*G8SaTnU#|nuNQLbq4SoG8T-f)oo2uAALQ&^j
zBJ!H1GNqh@1W65O6D4bUcnR#(|>5jOq^^V?g7*7-6;8y$ahWFKSNyAx3Qk6#)CAk1rX1$KLrg#rxvH?t8^ne$H^W=(+Db(Qz%)
z;k4M5hn^?C8*g7SYL-k0M3(@V=b89ng3RQB|HO`yoM=ifh7?aBV{0eNVV;v%xPbY;
zUi0BoFZmU>gtKlbKW;xGGut398RArY6)&)+MJ2u
z#~=9D@#Z#oy!7Hwy8dkTubSeCC|9RxAc=-#J+a&GdYfsgS>$7I4Z|nSUE-~wv-@F(
zzT)JsAjK|Ue6s!z*X_LpFkfV%mFaVbh9t4cOwzt`wtlQ=g~KmOpJr|Qk3VKnFzvz|
zv*EaY6O~zch7C!U5{maMH2e-nGIzYQ&QxwSs>kE4=C5IuIBpT!^i3z+TGn5cb&sg8
z>1=X#6Nuy^B3;D;P?cA6Rvvx1ACdc6MgZ-ZL?l0hy;FH4z2Zh?+OMoKBAKf6yxt3o
zrso6_TubBMf&+&i;!_ea>LH%BUNVqH&AF~#Pqa@br1!S_ola5^8kxan}X_5HM-i+13)B*XJ*FF2hIrMrdpWK%TkrtH-tIa0=!PsS&5|NDz`&%I}&
zTz_c8;K7CjgN$N!f4?*?p8)TgeFHq<^T+dD#k}WR+m`!Z@4$&4-zSQ|u$8*Q9o5=T
zY+ow1Z)}zuTg?Put=L_4Hiiq2YKL|IYZ@@65A(2Imh?_FB#>~ajqXfP0CSQcc}Q|
zFt0#XPsSJbo^X&%`dYrhrO!{T5b>b%3Hf)y!vf#7jC+ZRiK*_lL5
z96Zjc{$y2z0^FLb_ZqY2a+PG=++3q|f&PG8o$U6Di;AAJO{)UdV%!(k^5p9R!2{rb
z4dAxc8jNAD*T{Vm_>FP2RO{CxUfhbp#S3d0Rcz#A3`8uQW&-zx@!m`v$9CV}R!^fU
zO{*8bI+^(%?CST`)C^B<(ba05p0Q8=%8WkZIgOTc&Ncw@4+-?>;feRV?(UR7gaq2H
z+UsH>JQe&E&RFW%GSiE!I?BF8_dNn>lQBr|c!|E97+c*Krt6D;!->A9^{kH-5^Bm^
zT$C#AFzRAur&6}11AK{hg!f9dbv;qRobJPQu3#kzS;^B^6eF!a5=%YwJALSSNEvmY
zBM?K?5cTG54^DJVX!a|s`Oh(r7d_S2$(rU|8cg>Z_hTH#s#hTI>zrt_augANByk(s
z3?$;9#e8z~)74rtD|`iX^`)M{%POw~9_$XKJy!$WGV|%)<;9P~je3bAu=bxjicAM|
z_UAf>PT@n?pkb;9wN>AI8P;J}q0gVb+bFLZ(GeJ6uhQ=&Y9sOF<8(-qJ-94FN5aS5
z^V6=G%Iv@mS_OB{dQhNx))F&E4EkZ{q9-3`+*%ZHPgkrzv5sR5p_(CV{1!H&?Al-U
zTl>Aa>+Wz}ouNXY#D4`A%#!s>X*UM-vqg82F08dRE}k-vgtJmV0=Z2~x%@xLSUR@x
zNw}1se>3-feal0CbpCR}k1}~{E|nNuPsfHU=+|6|Dp3bF{Q^DZDwi&!&8ZZNm)!-Q
zwAei_b^uSy|a+WRLH4dOn};U-9Y3j`zB*>%Q*$e%-Iv
z3+xe6|4;Z^=a5?crKE0aHQaT=Opy!~109Zvy63KvV&QF21j^&59$e%t7tyMU^iCfeKYq;;pSe6uh;
zy?VJ!rFRl__`%ZW!H$XdTFgRM4*kyfjv~lP?SroC*jjAHW4T&PL0-{OhC^^COF^$N
zkzy1f0j!iD#`pX!is$rV?PGdDeYKh)y9dHoh-3?ap^&;J_Juv+9L8NX(rS0%u<7L%0htMW?Qymc4x!(gm1pgdVG
zIfqf7?tSm}Z9yyc;47lJ0uqd!e&BGdmW~!tAQk8*eqr9=;8j?d
zXxVpN5F;#p5uxZ{rbK!n8=E;+Qk2XW^>|l1zOIUg;dlu{NWY1A=GG{TCj(cWf0mrQ?fuy@<0`r-cL}wFXYd9Pjg=
z&;c%o0R>r)(A!_mC8^@Mbj+Cz82@9Ve$^r%1L=KoeN%)&3FgZqkxsM@3*&x8vQxo+
z!TUWY?89)>bHtm5l39|IKv9>yo53ZdpTxa5c{u7u
zHyo6j;8Ax$O(3vkV|{!F8+2G_y%Ny(uq9&aR&{o9PlzGp8!=>Q
zw5xhiBK1a@!1EEp1GGkoQ(J)XF1E4?Tg`|uul?<-i@=|38d(XFV~K{NrL!Tx^Q@#P
z)k!U7(kO8l=TJEKdgXW^rX~U{H#aCu;K;b4pUw>K`3`DV#Er
z%vBhEjqVzrza7-pMrYTT^rjbG3t{92I|l~UBf_;r;VY~@yuK1?@?u%%B^HifQn#hM
zZm=AIzT7JyXrA@hrhVQ2io^|}HPvGzvJT~sp5p`cU=!U?=M~Ve9x71KAYBb+(
zyC4D@7S+stJInV&lsN`EqU
z19Scg8^hO!(J;8zf=-C(A}?`%QF$s9HeB{k5`tO-N^IdVU_Y4Xl`5`pX`8~csQbb3
zkFD^pOg9|FH-E05R7XDjiO(!PEHu`uquhXFgdKGKmaRESb*CpKQPZmTM^qGx6sGkd
zT5hg4Xla#e`MXF(GXD(U=N=RnIUwSIn&2TVT1>}PsoxLtIkGLV*G0UrfB1AZg*Q)s
ziW%ERDR@~#ilW*AqP-AFewh$>8E9fl$YawankP(68L=*mnatROMb8SuY?5?%xya>$
z$;hWaMIr|eYXAQ-@{)lL6@7dQwx@JVQW7k0G
zVwO#X);*nqlJV^`8M_yPr}?TShpD>A*E^p)+*PsT1$AA?IH`o_ZZ)geZxPX$r@25^
z{BmsJ5=Di)jcTIX~r=;={1
z>3vW8Z@q7uS%3XAncq6rfkF*Npps=pLO7~$R5i+h{*FhbE`z(ta*8A-vwK-eYPUk9
zDgL+43kG^5?3rdlckF}St8JTq?dR#LCF0Stu5m#GN=WrlJVf{7iQ3k}p>;7*A>HR&
zxL_SFY};obNpO#9Q;}}~PEhiyz|9lfOrdgj+`js$oN?ChG4|2mvO~RI@o0t{MXUqQ
z#iif7$Y>$xXdxDp_qNdSsQ9LhTgZP(j+vPu-JiX!WMvv|UyM%z&e>#<8qY4BqliPj
zh0j$u2aykv3fc@V3Mg_eJ?&B~H>s)_9^J0jEt@pB-uYsnTH|j%`^{PgvD8ck`kAwo
zSM5QBjUQj3_Q`N1azzs>x3WF>a+e~T?CmQ$$TP5tSavDY_9A;->{i=wNM$P9i*abv
z8!KOq+?~37cO_N~g9(VWoIW3ZW{yT`MQ?hHIWDXC@Rb*Yl@@eU1o`;xahaZo7kfi&
zcR9bIt{T?RVtUwgIM`tGTO@gEV*D+P`>jyw-@N^3;vGYzj`NBwm$IUY+3oHk31v=p
zvhe?7&ED|g7^x7rr=#?HY7cfk(YfhqKhCB$GP&L#`8Nr6FaCeh7koP2C}>LZGO?$E
z(VcEY3z<{k)a2=JA2H>BN-3HWo|w?Qd_ef?Vx`cpglDl6*hdZw3k66_&m^hHZ2uq?
z5(Id)|7!VRU7US!EkB|_U>?-rvCfO3XcJ@3kB&G}kr7~bSJ^>Nano?1vB6ZUEtj8r
zSj1{1A=NnqZK71b(CQ!S@bWvnwM4}E{nVhINWlqUaUW74DuKp90moP!FjI@>t0DyF_|
z-ffC`g&;csr*AMpv&;%2Zp^Q{By)5G()R=ugDlf$MqYk3WtxxI^hl^Tna
zh4So%A2O|MG*ZS#jV2aD2ym@58ovm-8+e~@^tsN84+nDA=o
zY`Q9e7$p0DfB)9KQsuGPl;9LGd)a&v+YF`%j_EF+#5fC?u#{RHY(L;Uwn)9}5M#p5
zmvjDT&lGPX7#HZ?+2KNBLg`;je$zNGusuo*eeN$`5ngBu>E;xbUuJz99!8T*$N0II
zdVh>hyg#dxC|rmA4frvS-sH7IyjbmpVA9!rI-UXrrARk}(H0H4snLU<%OSMDkvB`I
zXu8*MVz+K06jPXI8u2g}mivXqlA|3_HxmdHJTRlC{9Na;$qzKE(nYR(YpWY`F0o=6
zutpI)b2p)hiZ&uc>g7;A0v5K+1dg7bWUVK)PArm@LywCup4oU`CUPs6i>d51fL^^+
zLFMbdjWv~D2HS^=!t?(1rZ@>BqV(P1f&FxzlxaS0d8EAX+;F;+KbGxOGV_v9=6N46
zT32DY%kh(>e6x5;6rVxLpn@4K(4WR{95zYJiB?tuO6EI3)5jevdhD)i`+m@Jfq2{sS~~34wtYHMv!cE$w2#4+(^`c`gX`Ns_{j9_7e7WG
zgeY|$p~Rio2PCthx6|$ZU*B#ba~HdU+aGD^QoeqBX(TT9rF_rKn!M$IS6)bNIsOpV
zCX-NF0oNcm)4my$nsioQ;@b@xhjZ><<;sZN_a+Ok1oG0{@HC(`qBx5FC>2++w7h|T
zV;paOJ3*!V)<1GpSne{z@&1eVXfX=juRIe{hjMMwnnEFqvPNN4mK&jaIr}-@D88u0
zGk7xpN^h^B)v5F5lAw3g?C`&OC)$z;>`3v143j2%`AR>OWHtg^0PYtYs*9dbe!kQ{
zGJiOddYok(Hpe2xX-76Iyac@~M)fL2XxP|1Iz`Ary6C5%9$fwE$@~4IZedf<6-gl~
zB#2VtEciK4b`|S~
z1bo*&A}Nl3$~a0NSLSW+Ie{?W_tvo$BuXPU;n03@%zvG
z9UsI<;CdQX-t29cZ3piKYNs`gy|>O-{jEKOJ820RV^{9b;q9|B%cM}@R-Ma*V|BB!
zjTO&`&x?zS>QYARcODlW29+xlCYIlHPT$6Ct5;yipsN)O8!bv+v?BZ
zc;7ZK8l1W|a?AsJ^VmOk@2}iUCr(L$Q;k4IMiZ6QSQcZPD!ia^SRC&u*9x{)*)ZJC
zv5dS#TTD3mHQ5sfXI}1|H&JT^rgbzz$;3YZ`48bw*!LVSbIu8hUa0FI8TyQOdhm9n
z@?d$9qlJ0O@@sjU60J&j#gDPl&$VmM@Zki-M5@m;xnYQ~>!#i4On3jAVC&FHdMfcn
zD&VFVm}6ixh&0}tUc9-`>jVOM6-=y_qH3sfLz%?QI0N|ya<2sARCKAkUq7iZ6w2Th
ztG+c0hEVzLhR3re;rNr@2m^<`Bfobmoi*0ZIOW7M?s^5BSug(35J5QBhhLjYOo~%H
zj{TfH_`3a+edA59`A|{d{;v+5!GW(6!=V4$-gl^G`V9(&a?WW3S~KtKHu6qBzgtb;
z2efA7@?rz*%$mWasp7}V_`u00)W$9_(7pHRz-fb3$Z_i95O1W*`Ph;-(hmu@{@7`1
z6j+0Zf5kH(7d)h{Z}dK>OL%^+zW>=(Qa()X9q)Y%=ilR&y_tyw^p5%;A2X-;%qS#A
z(~T_ge5Epw)qcuz{XW7I=3GzENNhZ{Vn2HSSE+bwP>NoqRJn-c>04a$J(!mz<%jeE_F*efhLHtr!MbUf;yJwP7rOI88xB#m3&d{-6D4O*E&8)N>K02)1=CI@dvU?Y3Xs#f
z*$gXPOlh%XY@r8tr}XwCC!p=jFz;h3tjkbeu04@x6`d*{{>0+Nyz2ITM)2vw+ZVAK
zT6Z|w{Z~3Ep@O7;{^i{|)ji|#0#2GfhIs7ZQy)9oW{HdOX>Q
zG;!`uMu}XBL~G>=zny7Z2VeXe3L|N^b>Y&&uVWWe6O;+nvI|W++=0BRm4M+=gU8r2
ziPFEdTHj^}z3*;`qgiw@HjQKc={ldyp}#g!R``T4=cv~#r@JfDX*N1>W%f^$Z$&Dj
z__+X8R~OstSyb~ng;U6Hv%9{Jp*Wwy*VgPe{|H=2CqL>pMh-GVJDsOFcnf3d30%Yu
z7db&FmW-VI%XXA)9vl6}p27$i?iw~i6A1Q5YkG3+34GB26p6y6FkI$6kycU@|2`(w
z^MYZhRU)s<6XI!hY`R-MQHjxCzp--NS7<;%Jx$w=bK{1W#liZ)Cpi;@2`~e^wSsX4
z$=`c#fL&kdP^*efaScI^1+83ZlN2*Id|laVIWbBzO?zZ!4M7JUa&$$`hTrk$ZQUPA
zAXmMv2IB;Gl}lMqC|BlkV{K*$m$LGo(w9u{C=N9}FRoN|fY^mXarN1`Sj8>v3af9;
zkgaHmiq}q8-$LsX5))Z5KZ0m#{MB50uSc$H*WR8_N>ToDmO6+e&xtVo(%V)k3x$SRp
zu-9G&3_n@#M2f_^VN|C$2HC(CF``=F-LcAPgxZ2
z@09zECnJ7Qf@~7Gk2w+EHa?ph)@ACAfb~lZ2#z=NA_fuNEqLWP)2CA!z!_(7@`VIO0|>EMAOy5uT5OX9F4{Hu$VrB@lHNfL0X!`v$jy3B5ig3Fc&9>
z=yNAep8wQ?xj>#Htgw|84LOMJFh58BWltO8DgtcUpT;WElxfJ4nX$f(tZ!y=_x{k?EP9~v9b6P@l$fFZv+0|
zG1^FxGN|}9`$A(6D)MF`Tb^Ab0^+F5Vx+Q6E9?4uPvnk4(M2roQWAi}F~yY#U?VcE
z<9$Cj@2uyznH8yEaY-H16lCKoM4?qh;o3%2pqi2L`G9wSCq5o9R-e_8L}D7erz{*@
z$@nlWVgU;57u$|HNn0~{u|I+U)`}f){{t8WUNC=zD4kL2h)JG1Ln?{X+>#f-;!-)&
z{r*-)A$Fm~$fNf$4VZw;a5V8u+}+35Wgz=Apr%zd1biSSKrI*-baSiUt?cI3*3cXJ
zV+1r&`LYM=U|)FN=>l2=SuOlR62`vvQx272l2`h3AuKMk4H_zf8pi8cG^s>7%hh$q
zv@XY+4T-^PrqTSt<>gtzaBOX#0ZC+W#-pVlWhH)RfoqOEL4b1uEXgu>LPNWI&k`3*&gdzfi4{E>-tZvl!8gmnJ4k+5*2nuJ4Nfv_9Lpv5J?klt6oIZ
z8^g3nEvoHP;R{)qtWwnq)(~;v;ySxd)qEX1^^Ie<)!|cW|8HYTSnxw3I|D(SA3TB=
z2)~R^njgaqE2A3cD4QuD3KB$qrdeB3iQOeO#zxmz_&tsR^4V{IhSLyLj%2?Mc6bt%5r$JfnNqW@wDRgQS$V*HhUOs0rX$)}0^<)a8XNSRUM
z+y)-4T#dehdl#%LB@zhgq^uf}bR-@z
zXqGth4WDkf(^5Vh&&Zed>~3gnH7&+96sp06eCO+G@Z_YVgKu6;JYnAW=!oo8nC-~4
zY=o}^IeMqJ$Fx8wUFOcBZ0NBR<$S>KzpIyntuA(rEkJGKTyLTDR
zA;{ZcMB$nI*df0)b_vMI0sjn)JwqRT-BPrTTnEz)X-*9^7m7N@F$)!RhCXje?Zg76L5|
z@`a<4^9RuuHw~m$=sc6irthwcx0)%+yr3kqPr&<;nlr_pWZmJO>^gj2D#!KD22bD9
zxqQ#V3aR-GZS{YJeIcSSCbOT|9rf|^DMt_;DsZ`u4ruE))-5$gX%Gmq
zM^W~;oawe{+juxO6i2wcjUj+U{0G)Zrr#AbH^vNLhIr%>>X&Pu0V6TS#A0Y)z
A`2YX_
diff --git a/components/MyEventCard/MyEventCard.tsx b/components/MyEventCard/MyEventCard.tsx
index 010f078..42090c9 100644
--- a/components/MyEventCard/MyEventCard.tsx
+++ b/components/MyEventCard/MyEventCard.tsx
@@ -1,52 +1,34 @@
-import React from 'react';
-import BPLogo from '@/assets/images/bp-logo.png';
+import React, { useEffect, useState } from 'react';
+import { fetchFacilityById } from '@/api/supabase/queries/facilities';
+import BPLogo from '@/public/images/bp-logo.png';
+import LocPin from '@/public/images/gray_loc_pin.svg';
import COLORS from '@/styles/colors';
-import { Event } from '@/types/schema';
-import * as styles from './style';
+import { Event, Facilities } from '@/types/schema';
+import formatTime from '@/utils/formatTime';
+import * as styles from './styles';
export default function MyEventCard(eventData: Event) {
- const eventStart = new Date(eventData.start_date_time);
- const eventEnd = new Date(eventData.end_date_time);
+ const [facility, setFacility] = useState();
- // function to remove 00 from time if time is on the hour, ex: 4:00 PM -> 4 PM
- const formatTime = (date: Date) => {
- const minutes = date.getMinutes();
+ useEffect(() => {
+ fetchFacilityById(eventData.facility_id).then(facilityData => {
+ setFacility(facilityData);
+ });
+ }, [eventData.facility_id]);
- return minutes === 0
- ? date.toLocaleTimeString([], { hour: 'numeric', hour12: true })
- : date.toLocaleTimeString([], {
- hour: 'numeric',
- minute: '2-digit',
- hour12: true,
- });
- };
-
- const startTime = formatTime(eventStart);
- const endTime = formatTime(eventEnd);
-
- const monthNames = [
- 'Jan',
- 'Feb',
- 'Mar',
- 'Apr',
- 'May',
- 'Jun',
- 'Jul',
- 'Aug',
- 'Sep',
- 'Oct',
- 'Nov',
- 'Dec',
- ];
- const monthText = monthNames[eventStart.getMonth()];
+ const formattedTime = formatTime(
+ new Date(eventData.start_date_time),
+ new Date(eventData.end_date_time),
+ false,
+ );
return (
-
+
- {monthText} {eventStart.getDate()}, {startTime} - {endTime}
+ {formattedTime}
- placeholder
+
+ {facility
+ ? `${facility.street_address_1}, ${facility.city}`
+ : 'Fetching location...'}
diff --git a/components/MyEventCard/style.ts b/components/MyEventCard/styles.ts
similarity index 79%
rename from components/MyEventCard/style.ts
rename to components/MyEventCard/styles.ts
index 777ba6b..3189194 100644
--- a/components/MyEventCard/style.ts
+++ b/components/MyEventCard/styles.ts
@@ -5,8 +5,7 @@ import styled from 'styled-components';
import { P, SMALLER } from '@/styles/text';
import COLORS from '../../styles/colors';
-export const BPImage = styled(NextImage)`
- layout: responsive;
+export const EventImage = styled(NextImage)`
width: 20%;
height: 90%;
`;
@@ -24,7 +23,6 @@ export const EventCardContainer = styled.main`
display: flex;
justify-content: flex-start;
align-items: center;
- box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
gap: 1.5rem;
`;
@@ -42,4 +40,13 @@ export const LocationText = styled(SMALLER)`
color: ${COLORS.gray10};
font-style: normal;
line-height: normal;
+ display: flex;
+ align-items: center;
+`;
+
+export const LPImage = styled(NextImage)`
+ width: 0.75rem;
+ height: 0.75rem;
+ margin-top: 0.25rem;
+ margin-right: 0.25rem;
`;
diff --git a/public/images/black_loc_pin.svg b/public/images/black_loc_pin.svg
new file mode 100644
index 0000000..4e9cd42
--- /dev/null
+++ b/public/images/black_loc_pin.svg
@@ -0,0 +1,6 @@
+
diff --git a/public/images/calendar_icon.svg b/public/images/calendar_icon.svg
new file mode 100644
index 0000000..78e5e27
--- /dev/null
+++ b/public/images/calendar_icon.svg
@@ -0,0 +1,5 @@
+
diff --git a/public/images/facility_contact_icon.svg b/public/images/facility_contact_icon.svg
new file mode 100644
index 0000000..3dc7162
--- /dev/null
+++ b/public/images/facility_contact_icon.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/images/gray_loc_pin.svg b/public/images/gray_loc_pin.svg
new file mode 100644
index 0000000..2078cc5
--- /dev/null
+++ b/public/images/gray_loc_pin.svg
@@ -0,0 +1,8 @@
+
diff --git a/public/images/host_icon.svg b/public/images/host_icon.svg
new file mode 100644
index 0000000..20030a6
--- /dev/null
+++ b/public/images/host_icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/images/producer_icon.svg b/public/images/producer_icon.svg
new file mode 100644
index 0000000..6af49f6
--- /dev/null
+++ b/public/images/producer_icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/images/volunteer_performer_icon.svg b/public/images/volunteer_performer_icon.svg
new file mode 100644
index 0000000..b581925
--- /dev/null
+++ b/public/images/volunteer_performer_icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/images/white_back.svg b/public/images/white_back.svg
new file mode 100644
index 0000000..c43784d
--- /dev/null
+++ b/public/images/white_back.svg
@@ -0,0 +1,6 @@
+
diff --git a/utils/formatTime.ts b/utils/formatTime.ts
new file mode 100644
index 0000000..87118ab
--- /dev/null
+++ b/utils/formatTime.ts
@@ -0,0 +1,54 @@
+export default function formatTime(
+ eventStart: Date,
+ eventEnd: Date,
+ long: boolean,
+) {
+ const formatMinutes = (date: Date) => {
+ const minutes = date.getMinutes();
+ return minutes === 0
+ ? date.toLocaleTimeString([], { hour: 'numeric', hour12: true })
+ : date.toLocaleTimeString([], {
+ hour: 'numeric',
+ minute: '2-digit',
+ hour12: true,
+ });
+ };
+
+ const startTime = formatMinutes(eventStart);
+ const endTime = formatMinutes(eventEnd);
+
+ // Use a plain variable for month names instead of React state
+ const monthNames = long
+ ? [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+ ]
+ : [
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+ ];
+
+ const monthText = monthNames[eventStart.getMonth()];
+
+ return `${monthText} ${eventStart.getDate()}, ${startTime} - ${endTime}`;
+}
From d5df302e6c4eb64763cf8da0d47056276d53f4b8 Mon Sep 17 00:00:00 2001
From: Celine Ji-Won Choi <107969914+celinechoiii@users.noreply.github.com>
Date: Mon, 18 Nov 2024 18:37:22 -0800
Subject: [PATCH 4/6] refactor/style: forgot password page, flow connection,
fix styling (#29)
* feat: routing for bug bash
* style: hifi auth designs and global colors
* style: forgot password page
* style: wip midfi onboarding
* style: checkbox styling
---
app/(auth)/auth-styles.ts | 66 ++++++++++--------------
app/(auth)/forgotpassword/page.tsx | 61 ++++++++++++++++++++++
app/(auth)/signin/page.tsx | 36 +++++++------
app/(auth)/signup/page.tsx | 21 +++-----
app/discover/[event_id]/page.tsx | 6 +--
app/discover/[event_id]/styles.ts | 18 +++++--
app/discover/page.tsx | 76 +++++++++++++++-------------
app/discover/styles.ts | 6 ++-
app/events/page.tsx | 52 ++++++++++---------
app/events/styles.ts | 4 +-
app/onboarding/general/page.tsx | 39 +++++++-------
app/onboarding/general/styles.ts | 20 ++++++--
app/onboarding/preferences/page.tsx | 41 +++++++--------
app/onboarding/review/page.tsx | 49 +++++++++---------
app/onboarding/review/styles.ts | 28 ++--------
app/onboarding/styles.ts | 54 +++++++++++---------
app/onboarding/yay/page.tsx | 16 ++++--
app/onboarding/yay/styles.ts | 27 ++++++----
components/MenuBar/MenuBar.tsx | 14 +++--
components/MenuBar/styles.ts | 1 +
public/images/b&r-logo.png | Bin 0 -> 6623 bytes
public/images/seniors.png | Bin 0 -> 178639 bytes
styles/colors.ts | 16 +++++-
23 files changed, 366 insertions(+), 285 deletions(-)
create mode 100644 app/(auth)/forgotpassword/page.tsx
create mode 100644 public/images/b&r-logo.png
create mode 100644 public/images/seniors.png
diff --git a/app/(auth)/auth-styles.ts b/app/(auth)/auth-styles.ts
index 8388fa6..5114126 100644
--- a/app/(auth)/auth-styles.ts
+++ b/app/(auth)/auth-styles.ts
@@ -1,8 +1,13 @@
+import Image from 'next/image';
import styled from 'styled-components';
import COLORS from '@/styles/colors';
import { Sans } from '@/styles/fonts';
import { H3, P } from '@/styles/text';
+interface TitleUnderlineProps {
+ width?: string;
+}
+
export const Container = styled.div`
font-family: ${Sans.style.fontFamily}, sans-serif;
display: flex;
@@ -10,8 +15,19 @@ export const Container = styled.div`
align-items: center;
justify-content: center;
height: 100vh;
- background-color: ${COLORS.gray2};
- padding: 1rem;
+ padding: 2rem;
+`;
+
+export const TitleUnderline = styled.div`
+ margin-top: -0.25rem;
+ margin-bottom: 0.25rem;
+ width: ${props => props.width || '68px'};
+ height: 4px;
+ background-color: ${COLORS.rose8};
+`;
+
+export const Logo = styled(Image)`
+ margin-bottom: 4rem;
`;
export const Header = styled(H3)`
@@ -43,6 +59,7 @@ export const Form = styled.div`
export const Label = styled(P)`
font-family: ${Sans.style.fontFamily};
font-weight: 500;
+ margin-top: 1.25rem;
margin-bottom: -0.2rem;
`;
@@ -52,55 +69,24 @@ export const Input = styled.input`
border: 1px solid ${COLORS.gray4};
border-radius: 8px;
width: 100%;
- margin-bottom: 0.6rem;
box-sizing: border-box;
`;
export const Button = styled.button`
font-family: ${Sans.style.fontFamily};
- background-color: ${COLORS.gray12};
+ background-color: ${COLORS.pomegranate};
color: white;
font-size: 1rem;
padding: 0.75rem;
border: none;
border-radius: 8px;
cursor: pointer;
- margin-top: 0.8rem;
+ margin-top: 1.5rem;
width: 100%;
`;
-export const GoogleButton = styled(Button)`
- background-color: ${COLORS.bread1};
- color: ${COLORS.gray12};
- font-size: 1rem;
- // TODO: Update to COLORS.black if that gets added
- border: 1px solid #000000;
- margin-top: 0rem;
-`;
-
-export const Separator = styled.div`
- display: flex;
- align-items: center;
- text-align: center;
- margin: 0.2rem;
-
- &::before,
- &::after {
- content: '';
- flex: 1;
- border-bottom: 1px solid ${COLORS.gray5};
- }
-
- span {
- margin: 0 0.5rem;
- color: ${COLORS.gray7};
- }
-`;
-
export const Link = styled.a`
- font-family: ${Sans.style.fontFamily};
- // TODO: CHANGE COLOR TO BLUE ONCE COLORS.TS IS UPDATED
- color: #3978ff;
+ color: ${COLORS.lilac9};
text-decoration: none;
&:hover {
@@ -108,10 +94,6 @@ export const Link = styled.a`
}
`;
-export const SmallBuffer = styled.div`
- height: 0.5rem;
-`;
-
// TODO: Temporarily added to verify that supabase login functionality actually works
export const LoginMessage = styled(P)<{ isError: boolean }>`
font-family: ${Sans.style.fontFamily};
@@ -127,3 +109,7 @@ export const Footer = styled.div`
width: 100%;
padding: 0.5rem;
`;
+
+export const Instructions = styled(P)`
+ padding-top: 1rem;
+`;
diff --git a/app/(auth)/forgotpassword/page.tsx b/app/(auth)/forgotpassword/page.tsx
new file mode 100644
index 0000000..0c56c65
--- /dev/null
+++ b/app/(auth)/forgotpassword/page.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import BRLogo from '@/public/images/b&r-logo.png';
+import Back from '@/public/images/back.svg';
+import { H5 } from '@/styles/text';
+import {
+ Button,
+ Card,
+ Container,
+ Footer,
+ Form,
+ Input,
+ Instructions,
+ Label,
+ Link,
+ Logo,
+ TitleUnderline,
+} from '../auth-styles';
+
+export default function SignIn() {
+ const [email, setEmail] = useState('');
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [password, setPassword] = useState('');
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [message, setMessage] = useState('');
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [isError, setIsError] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx
index e4e47ea..f9d66c4 100644
--- a/app/(auth)/signin/page.tsx
+++ b/app/(auth)/signin/page.tsx
@@ -1,31 +1,33 @@
'use client';
import { useState } from 'react';
+import { useRouter } from 'next/navigation'; // Import useRouter
import supabase from '@/api/supabase/createClient';
-import { H5 } from '@/styles/text';
+import BRLogo from '@/public/images/b&r-logo.png';
+import COLORS from '@/styles/colors';
+import { H5, SMALL } from '@/styles/text';
import {
Button,
Card,
Container,
Footer,
Form,
- GoogleButton,
- Header,
Input,
Label,
Link,
- LoginMessage,
- Separator,
- SmallBuffer,
+ Logo,
+ TitleUnderline,
} from '../auth-styles';
export default function SignIn() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const [message, setMessage] = useState('');
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const [isError, setIsError] = useState(false);
+ const router = useRouter(); // Initialize useRouter
- // handle sign in w/ supabase, borrowed from Immigration Justice PR
const handleSignIn = async () => {
setMessage('');
setIsError(false);
@@ -34,25 +36,23 @@ export default function SignIn() {
password,
});
- // Ik this wasn't part of the sprint but I added so I could verify that supabase functionality is working
if (error) {
setMessage(`Login failed: ${error.message}`);
setIsError(true);
} else {
setMessage('Login successful!');
setIsError(false);
+ router.push('/onboarding/general'); // Redirect on success
}
};
- // Front-end interface
return (
-
-
+
-
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index 3a9cfaa..8c546f5 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -2,6 +2,7 @@
import { useState } from 'react';
import supabase from '@/api/supabase/createClient';
+import BRLogo from '@/public/images/b&r-logo.png';
import { H5 } from '@/styles/text';
import {
Button,
@@ -9,21 +10,20 @@ import {
Container,
Footer,
Form,
- GoogleButton,
- Header,
Input,
Label,
Link,
- LoginMessage,
- Separator,
- SmallBuffer,
+ Logo,
+ TitleUnderline,
} from '../auth-styles';
export default function SignUp() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmedPassword, setConfirmedPassword] = useState('');
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const [message, setMessage] = useState('');
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const [isError, setIsError] = useState(false);
const handleSignUp = async () => {
@@ -54,12 +54,11 @@ export default function SignUp() {
// Front-end interface
return (
-
-
+
-
diff --git a/app/discover/[event_id]/page.tsx b/app/discover/[event_id]/page.tsx
index 2546e86..30cb9b8 100644
--- a/app/discover/[event_id]/page.tsx
+++ b/app/discover/[event_id]/page.tsx
@@ -15,6 +15,7 @@ import {
BackButton,
Body,
Bullet,
+ Checkbox,
Container,
FacilityName,
HostWarningTitle,
@@ -23,7 +24,6 @@ import {
InterestBlock,
InterestTitle,
Location,
- Select,
ShowInterest,
SignUp,
TagDiv,
@@ -36,7 +36,7 @@ function InterestBlockGen(title: string, about: string, icon: string) {
return (
{' '}
-
+
{title}
@@ -90,7 +90,7 @@ export default function EventPage({
{event?.performance_type}
-
+
{event?.genre}
diff --git a/app/discover/[event_id]/styles.ts b/app/discover/[event_id]/styles.ts
index 64f654f..4994325 100644
--- a/app/discover/[event_id]/styles.ts
+++ b/app/discover/[event_id]/styles.ts
@@ -31,6 +31,7 @@ export const BackButton = styled.button`
border: none;
outline: none;
padding: 0;
+ cursor: pointer;
`;
export const Title = styled(H3)`
@@ -106,12 +107,19 @@ export const InterestBlock = styled.div`
margin-bottom: 0.75rem;
`;
-export const Select = styled.div`
- border-radius: 4px;
+export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
+ width: 20px;
+ height: 20px;
border: 2px solid ${COLORS.rose10};
- width: 0.875rem;
- height: 0.875rem;
- line-height: 4.5rem;
+ border-radius: 4px;
+ appearance: none;
+ outline: none;
+ cursor: pointer;
+
+ &:checked {
+ background-color: ${COLORS.rose10}; /* Optional: Red background when checked */
+ border-color: ${COLORS.rose10}; /* Border stays red when checked */
+ }
`;
export const InterestTitle = styled(P)`
diff --git a/app/discover/page.tsx b/app/discover/page.tsx
index e8db2a8..a5a37de 100644
--- a/app/discover/page.tsx
+++ b/app/discover/page.tsx
@@ -3,6 +3,7 @@
import React, { useEffect, useState } from 'react';
import { fetchAllActiveEvents } from '@/api/supabase/queries/events';
import EventListingCard from '@/components/EventListingCard/EventListingCard';
+import MenuBar from '@/components/MenuBar/MenuBar';
import { H6, SMALL } from '@/styles/text';
import { Event } from '@/types/schema';
import {
@@ -13,22 +14,23 @@ import {
TitleBar,
} from './styles';
-function MenuBar() {
- return (
-
- );
-}
+// function MenuBar() {
+// return (
+//
+// );
+// }
+
export default function ActiveEventsPage() {
const [events, setEvents] = useState([]);
@@ -41,25 +43,27 @@ export default function ActiveEventsPage() {
}, []);
return (
-
- {MenuBar()}
- Discover
-
- Search...
-
-
- Near You
- show all
-
-
- {events.map(event => (
-
- ))}
-
-
+
+
+
+ Discover
+
+ Search...
+
+
+ Near You
+ show all
+
+
+ {events.map(event => (
+
+ ))}
+
+
+
);
}
diff --git a/app/discover/styles.ts b/app/discover/styles.ts
index bdc0396..632c468 100644
--- a/app/discover/styles.ts
+++ b/app/discover/styles.ts
@@ -14,7 +14,7 @@ export const EventListingDiv = styled.div`
`;
export const SearchBar = styled.div`
- width: 90%;
+ width: 100%;
height: 2.25rem;
line-height: 2.25rem;
padding-left: 1rem;
@@ -31,7 +31,9 @@ export const TitleBar = styled.div`
`;
export const Container = styled.div`
- padding: 2rem;
+ flex-direction: column;
+ overflow: hidden;
+ padding: 3rem;
`;
export const Discover = styled(H3)`
diff --git a/app/events/page.tsx b/app/events/page.tsx
index 4da40d0..ce5c6f9 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -3,8 +3,8 @@
import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { fetchAcceptedEventsByVolunteer } from '@/api/supabase/queries/events';
+import MenuBar from '@/components/MenuBar/MenuBar';
import MyEventCard from '@/components/MyEventCard/MyEventCard';
-import Menu from '@/public/images/ic_baseline-menu.svg';
import { Event } from '@/types/schema';
import * as styles from './styles';
@@ -60,29 +60,31 @@ export default function EventPage() {
});
return (
-
-
-
-
- Upcoming Events
-
- {sortedEntries.map(([month, events]) => (
-
-
- {month}
-
- {events.map(event => (
-
-
-
- ))}
-
- ))}
-
-
+
+
+
+
+
+ Upcoming Events
+
+ {sortedEntries.map(([month, events]) => (
+
+
+ {month}
+
+ {events.map(event => (
+
+
+
+ ))}
+
+ ))}
+
+
+
);
}
diff --git a/app/events/styles.ts b/app/events/styles.ts
index c4a89f8..914c0d3 100644
--- a/app/events/styles.ts
+++ b/app/events/styles.ts
@@ -2,7 +2,6 @@
import NextImage from 'next/image';
import styled from 'styled-components';
-import COLORS from '@/styles/colors';
import { H3, H6 } from '@/styles/text';
export const MenuImage = styled(NextImage)`
@@ -12,11 +11,11 @@ export const MenuImage = styled(NextImage)`
`;
export const Page = styled.main`
- background-color: ${COLORS.gray1};
flex-direction: column;
min-width: 100%;
min-height: 100svh;
overflow: hidden;
+ padding: 2rem;
`;
export const AllEventsHolder = styled.main`
@@ -28,6 +27,7 @@ export const AllEventsHolder = styled.main`
`;
export const Title = styled(H3)`
+ margin-top: 2rem;
font-style: normal;
line-height: normal;
`;
diff --git a/app/onboarding/general/page.tsx b/app/onboarding/general/page.tsx
index 49f0b50..89061ec 100644
--- a/app/onboarding/general/page.tsx
+++ b/app/onboarding/general/page.tsx
@@ -7,13 +7,15 @@ import Back from '@/public/images/back.svg';
import { OnboardingContext } from '@/utils/onboardingContext';
import {
Background,
+ Button,
ButtonContainer,
Container,
- ContinueButton,
ContinueText,
Image,
InlineContainer,
Input,
+ Label,
+ ProgressBarContainer,
Rectangle,
Title,
} from '../styles';
@@ -49,54 +51,53 @@ export default function Onboarding() {
-
-
-
-
- Tell us a bit about yourself!
-
+ Can you tell us a bit about yourself?
+
+
+
+
+
+
-
+
+
-
+
+
-
- I want to get updated when there's an event that matches my
- interest!
-
+ Notify me when an event matches my interest
-
+
+
diff --git a/app/onboarding/general/styles.ts b/app/onboarding/general/styles.ts
index 8be712c..fa14f65 100644
--- a/app/onboarding/general/styles.ts
+++ b/app/onboarding/general/styles.ts
@@ -1,18 +1,28 @@
'use client';
import styled from 'styled-components';
+import COLORS from '@/styles/colors';
export const UpdateContainer = styled.main`
display: flex;
flex-direction: row;
align-items: flex-start;
- margin-top: 0.5rem;
+ margin-top: 1.75rem;
`;
-export const Checkbox = styled.input`
- width: 25px;
- height: 25px;
- border-style: solid;
+export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
+ width: 20px;
+ height: 20px;
+ border: 2px solid ${COLORS.rose10};
+ border-radius: 4px;
+ appearance: none;
+ outline: none;
+ cursor: pointer;
+
+ &:checked {
+ background-color: ${COLORS.rose10}; /* Optional: Red background when checked */
+ border-color: ${COLORS.rose10}; /* Border stays red when checked */
+ }
`;
export const UpdateText = styled.text`
diff --git a/app/onboarding/preferences/page.tsx b/app/onboarding/preferences/page.tsx
index 13a4107..e04e29a 100644
--- a/app/onboarding/preferences/page.tsx
+++ b/app/onboarding/preferences/page.tsx
@@ -6,13 +6,15 @@ import Back from '@/public/images/back.svg';
import { OnboardingContext } from '@/utils/onboardingContext';
import {
Background,
+ Button,
ButtonContainer,
Container,
- ContinueButton,
ContinueText,
Image,
InlineContainer,
Input,
+ Label,
+ ProgressBarContainer,
Rectangle,
StyledLink,
Title,
@@ -35,55 +37,54 @@ export default function Onboarding() {
-
-
-
-
-
- Help us tailor shows to you!
- Facility Type
+ Help us tailor shows to you!
+
+
+
+
+
- Preferred Location
+
- Audience
+
- Preferred Equipment
-
- Type of Act
+
- Genre
+
+
+
-
+
+
diff --git a/app/onboarding/review/page.tsx b/app/onboarding/review/page.tsx
index aeefcf9..5e08be8 100644
--- a/app/onboarding/review/page.tsx
+++ b/app/onboarding/review/page.tsx
@@ -6,15 +6,17 @@ import { submitOnboardingData } from '@/api/supabase/queries/onboarding';
import Back from '@/public/images/back.svg';
import { SMALL } from '@/styles/text';
import { OnboardingContext } from '@/utils/onboardingContext';
-import { Background, InlineContainer, Rectangle, StyledLink } from '../styles';
import {
- ConfirmButton,
- Image,
- Line,
- ReviewContainer,
- SmallText,
+ Background,
+ Button,
+ InlineContainer,
+ Label,
+ ProgressBarContainer,
+ Rectangle,
+ StyledLink,
Title,
-} from './styles';
+} from '../styles';
+import { Image, Line, ReviewContainer, SmallText } from './styles';
export default function Review() {
const onboardingContext = useContext(OnboardingContext);
@@ -31,44 +33,43 @@ export default function Review() {
return (
-
-
-
-
- Did we get everything?
- First Name
+ Did we get everything?
+
+
+
+
{generalInfo.firstName}
- Last Name
+
{generalInfo.lastName}
- Phone Number
+
{generalInfo.phoneNumber}
- Facility Type
+
{preferences.facilityType}
- Preferred Location
+
{preferences.location}
- Audience
+
{preferences.audience}
- Preferred Equipment
+
{preferences.preferredEquipment}
- Type of Act
+
{preferences.typeOfAct}
- Genre
+
{preferences.genre}
-
+
+
diff --git a/app/onboarding/review/styles.ts b/app/onboarding/review/styles.ts
index 6128f5f..83b8d8a 100644
--- a/app/onboarding/review/styles.ts
+++ b/app/onboarding/review/styles.ts
@@ -11,15 +11,6 @@ export const Image = styled(NextImage)`
margin-top: 1rem;
`;
-export const Title = styled.h1`
- font-size: 24px;
- text-align: start;
- color: ${COLORS.gray11};
- margin-top: 0;
- font-weight: 500;
- margin-bottom: 28px;
-`;
-
export const ReviewContainer = styled.main`
margin-top: 2rem;
margin-bottom: 2rem;
@@ -37,11 +28,11 @@ export const SmallText = styled.text`
color: ${COLORS.gray11};
font-size: 14px;
line-height: normal;
- margin-bottom: 28px;
+ margin-bottom: 0.1rem;
`;
export const Line = styled.main`
- width: 362px;
+ width: 100%;
height: 2px;
color: black;
background: linear-gradient(
@@ -50,20 +41,7 @@ export const Line = styled.main`
#b8b8b8 50%,
rgba(184, 184, 184, 0) 100%
);
- margin-bottom: 28px;
-`;
-
-export const ConfirmButton = styled.button`
- display: flex;
- width: 100%;
- padding: 12px;
- justify-content: center;
- align-items: center;
- border-radius: 8px;
- background: ${COLORS.gray12};
- border-style: solid;
- border-color: ${COLORS.gray12};
- cursor: pointer;
+ margin-top: 1.5rem;
`;
export const ConfirmText = styled.text`
diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
index a83ecbe..fdf044e 100644
--- a/app/onboarding/styles.ts
+++ b/app/onboarding/styles.ts
@@ -4,6 +4,7 @@ import NextImage from 'next/image';
import Link from 'next/link';
import styled from 'styled-components';
import { Sans } from '@/styles/fonts';
+import { H5, P } from '@/styles/text';
import COLORS from '../../styles/colors';
export const Background = styled.main`
@@ -13,7 +14,6 @@ export const Background = styled.main`
display: flex;
align-items: center;
justify-content: center;
- background-color: ${COLORS.gray2};
overflow: hidden;
`;
@@ -37,16 +37,19 @@ export const Image = styled(NextImage)`
margin-bottom: -2px;
`;
-export const Rectangle = styled.main<{
+export const ProgressBarContainer = styled.div`
+ width: 100%;
+`;
+
+export const Rectangle = styled.div<{
variant: 'light' | 'dark';
- widthPercentage: string;
+ width: string;
}>`
- width: ${({ widthPercentage }) => widthPercentage};
- height: 7px;
+ width: ${({ width }) => width};
+ height: 2px;
display: inline-block;
background: ${({ variant }) =>
- variant === 'light' ? COLORS.gray8 : COLORS.gray10};
- border-radius: 2px;
+ variant === 'light' ? COLORS.gray4 : COLORS.gray12};
`;
export const Container = styled.main`
@@ -61,22 +64,24 @@ export const Container = styled.main`
`;
export const Input = styled.input`
+ font-family: ${Sans.style.fontFamily};
+ padding: 0.5rem;
+ margin-top: 0.1875rem;
+ border: 1px solid ${COLORS.gray6};
+ border-radius: 8px;
width: 100%;
- height: 25px;
- border-color: ${COLORS.gray4};
- border-style: solid;
- border-radius: 4px;
- margin-bottom: 1.3rem;
- margin-top: 0.25rem;
- padding-left: 0.4rem;
+ box-sizing: border-box;
`;
-export const Title = styled.h1`
- font-size: 28px;
- text-align: start;
- color: ${COLORS.gray11};
+export const Title = styled(H5)`
margin-top: 0;
- margin-bottom: 2rem;
+ margin-bottom: 0.5rem;
+`;
+
+export const Label = styled(P)`
+ margin-top: 1.75rem;
+ color: ${COLORS.gray11};
+ font-weight: 400;
`;
export const ButtonContainer = styled.div`
@@ -85,18 +90,17 @@ export const ButtonContainer = styled.div`
height: 80%;
`;
-export const ContinueButton = styled.button`
- width: 5.5rem;
- height: 2.25rem;
- background-color: ${COLORS.gray11};
- border-color: ${COLORS.gray11};
+export const Button = styled.button`
+ width: 100%;
+ height: 2.5rem;
+ background-color: ${COLORS.pomegranate};
+ border-color: ${COLORS.pomegranate};
border-style: solid;
border-radius: 8px;
display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
- gap: 10px;
cursor: pointer;
text-decoration: none;
`;
diff --git a/app/onboarding/yay/page.tsx b/app/onboarding/yay/page.tsx
index 0eccdf8..0bb6500 100644
--- a/app/onboarding/yay/page.tsx
+++ b/app/onboarding/yay/page.tsx
@@ -1,4 +1,6 @@
-/* eslint-disable react/no-unescaped-entities */
+'use client';
+
+import { useRouter } from 'next/navigation';
import Rose from '@/public/images/rose.svg';
import { SMALL } from '@/styles/text';
import { Background } from '../styles';
@@ -11,17 +13,23 @@ import {
} from './styles';
export default function Onboarding() {
+ const router = useRouter(); // Initialize useRouter
+
+ const handleContinue = () => {
+ router.push('/discover'); // Navigate to the Discover page
+ };
+
return (
- You're all set!
+ You're all set!
We recommend checking out some upcoming events in the Discover page.
- If you’re interested in participating, please sign up!
+ If you're interested in participating, please sign up!
-
+
Continue
diff --git a/app/onboarding/yay/styles.ts b/app/onboarding/yay/styles.ts
index 61afe8d..6f95068 100644
--- a/app/onboarding/yay/styles.ts
+++ b/app/onboarding/yay/styles.ts
@@ -2,8 +2,7 @@
import NextImage from 'next/image';
import styled from 'styled-components';
-import COLORS from '@/styles/colors';
-import { Sans } from '@/styles/fonts';
+import COLORS from '../../../styles/colors';
export const Title = styled.h1`
font-size: 24px;
@@ -34,8 +33,19 @@ export const Image = styled(NextImage)`
z-index: 1;
`;
-export const ReviewContainer = styled.main`
+export const Circle = styled.main`
+ width: 85px;
+ height: 85px;
+ flex-shrink: 0;
+ background-color: #f7c1bd;
+ border-radius: 100%;
position: relative;
+ top: 60px;
+ z-index: 1;
+`;
+
+export const ReviewContainer = styled.main`
+ position: relative; /* This makes the Circle position relative to this container */
display: flex;
padding: 60px 32px 32px 32px;
flex-direction: column;
@@ -43,25 +53,20 @@ export const ReviewContainer = styled.main`
align-items: start;
gap: 20px;
border-radius: 16px;
- background: ${COLORS.bread1};
+ background: var(--bread-1, #fefdfc);
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
`;
export const ContinueButton = styled.button`
display: flex;
+ margin-top: 0.75rem;
padding: 12px 16px;
justify-content: center;
align-items: center;
align-self: stretch;
border-radius: 99999px;
- background: ${COLORS.gray12};
+ background: ${COLORS.pomegranate};
border-style: solid;
border-color: ${COLORS.gray12};
cursor: pointer;
`;
-
-export const ContinueText = styled.text`
- ${Sans.style}
- color: white;
- font-size: 14px;
-`;
diff --git a/components/MenuBar/MenuBar.tsx b/components/MenuBar/MenuBar.tsx
index 6931a60..44813d0 100644
--- a/components/MenuBar/MenuBar.tsx
+++ b/components/MenuBar/MenuBar.tsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
import Availability from '@/public/images/availabilities.svg';
import Settings from '@/public/images/settings.svg';
import Events from '@/public/images/upcoming-events.svg';
@@ -14,12 +15,14 @@ import {
const MenuBar: React.FC = () => {
const [expanded, setExpanded] = useState(false);
const [activeItem, setActiveItem] = useState(null);
+ const router = useRouter();
const toggleMenu = () => setExpanded(!expanded);
// TODO: add navigation by passing in path prop
- const handleClick = (item: string) => {
+ const handleClick = (item: string, path: string) => {
setActiveItem(item);
+ router.push(path);
};
return (
@@ -44,7 +47,7 @@ const MenuBar: React.FC = () => {
<>
-