feat: List of Cairo examples to select from

[mazurroman]

Add a dropdown next to the “Enter program arguments” input where the user can select a Cairo code snippet example to be used in the playground.

Here is the list of code snippets with their name in the dropdown:

Variables & mutability

https://cairovm.codes/?codeType=Cairo&code='usWcore%3A%3Afelt25SYYconsRO_constant%3AMelt252Q4SYYfn%20main%7B%7D%20(VV~qnon-Zyz1SYxj%20qOz38%3B%20k~qTWshadowing%20%7BdeclarWanother%20TWwithKhWsamWname%7DHOX%3BYxjqZuRUz10IUzU_P%20*%20S~xN_jqUXkY)'~YVVz_PQx~println'%3A%7BL(O_q~%2F%2F%20k%20%3C--MailsKJcompilejP)L%7DIZNablWTeHmY%5CnXz%22hellJworld%22We%20V%20%20UO_NTPiablS2%3BRt%20Q%20%3D%20PvarOmyNmutM%20fL%5C'K%20tJo%20I%3B~H~leR%01HIJKLMNOPQRSTUVWXYZjkqxz~_

Type casting

https://cairovm.codes/?codeType=Cairo&code='usXcore%3A%3Aq%3BQQfnJaCU%20(WWkYqM10%3BRSCcXBqJighPnoPfiPCVu8KneedNo%20GNhXOption%3CT%3ENypeH8I8Z~H16I16F8bH32I32F16bH64I64F32bLu128I128F64bRAsVq%20is%20smallerNhanVuD6Kcan%20usXthXvJethodLuD6ID6xqbLusizeIsizeZLotherE8bLthirdE16bQ)'~QWWxMYvCtoUqfeltD2k~lePj%3A%20b.v%3BZxq.try_v.GU%3BYmy_Xe%20W%20%20V%20BU%7B%7DR~~%2F%2F%20Q%5CnPt%20N%20tM%20%3D%20Lk_YK%2C%20wXJ%20mIjuHkYuGunwrapFxuE_qjqFD25CinBa%20%01BCDEFGHIJKLMNPQRUVWXYZbjkqvx~_

Control flow

https://cairovm.codes/?codeType=Cairo&code='%23%5Bderive%7BDrop%7D%5DMenum%20Di7ctioE(~UpKDownKLeftKRightM)MMfEmain%7B%7D*XA%2F%20elseV~OxP10QOyP20Q~AxjJySWxjJyIQ)~elseSWx%20!JyIQ)%3BXifY_7sPAxjJyS%226~elseS%22not_6%3BX3V%20%7Bwith%20some%20limitations%20iECairo%20%3CJ2.5%7D~OxPZUpQFWyou%20wiE!IKz_jTWyou%20loose%20...I~)X3VYxPZDownQO_7sPF1KzZDownjT-1KzZLeftjT-1KzZRightjT1K)%3BXloopV~~Omut%20i%3A%20u128P0QNGB7ak%20condition~zzb7akQz)MH~GloopY_7sPNb7ak%20%7B42%7D%3B%20)HM)'~Mzz%20%20%20%20P%3DZDi7ction%3A%3AY%20with%207turEvalue~OXM~GWprintln!%7B%5C'V%20exp7ssionT%3E%20S*~zQ%3B~Pj%20Olet%20NloopSAi%20T9*%20M%5CnK%2C~J%3D%20I%5C'%7DH~ziPi%20%2B%201Q)QG%2F%2F%20F3%20xSZUpjTEn%20Aif%207re6equal%22~)3match*%20(!'%3A%01!*367AEFGHIJKMNOPQSTVWXYZjz~_

Functions

https://cairovm.codes/?codeType=Cairo&code='UYXaVu32FQaGSbGR-%3E%20u64%20(ZEtherOiXno%20semi-coloVatPhOend%20soPheEresulIofPhiXexpressioVisYed.EequivalentPo%3ALx%20%2B%201%3B~aMR%2BJM%7DZ)ZZUXdoesn%22tLanythingFmain%7BR(jak1Nbk2Nxk3Nyk4HEnamed%20parameterXtoJOmorOexplicitj_ckQ%3AaS%3Ab%7DN_zkQaWxSbWy%7DH)Z'~ZKKw%2F%2F%20k%20%3D%20j~leIZ%5CnLreturnXs%20W%3A%20Vn%20UwThiXfunctionS%2C%20R%7D%20Qadd%7BP%20tOe%20N%3BjM.into%7BLY%20K%20%20J%20bIt%20H%3BZGWu32F.ZfVE~w%01EFGHIJKLMNOPQRSUVWXYZjkw~_

Arrays

https://cairovm.codes/?codeType=Cairo&code='usek%3A%3APBWfvmaivK(UmutXJP%3A%3AnewqBzadd%20somFitemQiv9S1VS2V~zgDM~assert'%3A%7BHInqR%3D%202%2C%20%5C'wrongM%5C'VWz2CayQto%20readXvitem%20from%209z*%20gDKrDurnsXvOptiovso%20you%20cavhandIjz*XtKpanicQivcasFofjUfirstZgeL0%7D.unwEpq.unboxq%3BzHgeYrDurvNoneWUsecondZaL1VzHaYcauseXvGW)'~%5Cv%20%20%20z~%2F%2F%20vn%20q%7B%7DkXrEyj%20out-of-boundQGZ_eImentJ*HYL2%7DCill%20X%20aW%5CnV%7D%3BU~It%20S~Happend%7BJ%3DQs%20PArEyTEitMk%20IngthLt%7BKq%20JR%20IleHa.GerrorFe%20EraDetC%20wB%3BW9thek%019BCDEFGHIJKLMPQRSUVWXYZjkqvz~_

Dictionaries

https://cairovm.codes/?codeType=Cairo&code='kfQmaiQ%7B%7D%20(RmujS%3A%20Felt252Dict%3Cu64%3E%20hDefault%3A%3AdefaulPykYANL100yYMWL200ykRaNXANpaNvh1w1VRmWXMWpmWvh2w2V)'~kTTzalancey%7D%3Bw00ZOBKis%20nojv_bK%3DqP%22p%22y~assert'%3A%7Bk%5Cnjt%20h%3D%20Z%2C%20Y~S.inserqXv%20S.geqWariaV00OykUleT%20%20SbzsR~UjQn%20Pt%7BO%5C'NUxL%22ZKz%20%01KLNOPQRSTUVWXYZhjkpqvwyz~_

Ownership

https://cairovm.codes/?codeType=Cairo&code='useWUO6%3BCSaXfoNtakePb.~zwheYthiPRYFturns!IiPdropped.Z)CjXBW%20FfDoWYaU%20soxcalling%20Rn~zkeepsxb.Z)CmEn%7BGasxcFatorMfW5%2Cx3RYo*s0J%20qZ~SVLmovePbDNRYcallZ~z4%7BVL%3C-%20fElPt9e!P3doesn%22tM*0WnymoF~JWQq~~jQV~jQVLn9atioYissue%2C%203stillM*sWQaIZ)Z'~Z%20%20%20L%2F%2F%20xDhe%20qaI%3D%206OKOnew%7B7j4_B_Ff%7BFfWbHMf0Z%5CnYn%20X5%3A%20AUKGW%20aVa57U5ayS4_takes_H%7BRfunctioQnother_Ps%20O%3A%3ANo%20M%20oL%20zK%3Cu128%3EJ~let%20mutI5%20Ho*ershipG%7D%20(~zFreEaiD%20tCZZfYBFceives9Ncompil7%7D%3B6AUTrEt5rr4foo3mEY0xaU*wn!%2CW%01!*0345679BCDEFGHIJKLMNOPQRSUVWXYZbjqxz~_

[0xSileo]

Would love to take this one ! (I made a self-intro here : #93 (comment))

[melnikga]

I think I can add these examples to the Cairo array in the example object, after which, when selecting the appropriate option in dropdown, call setCairoCode((examples[initialCodeType][index of the selected example])

I introduced myself here (#97 (comment))

[jaipaljadeja]

Hey, i am Jaipal. a seasoned frontend engineer with 2 years of experience.
I would like to take this issue. I can do this by updating the example object with the mentioned codes and using state variable to update the editor content.
Would you mind assigning this issue to me?

[Xaxxoo]

Hi @mazurroman I am a fulltime frontend developer and I will love to handle this issue.

[mazurroman]

Assigned to @melnikga because the comment was among the first ones with the most comprehensive info on how to build this.

@jaipaljadeja your comment is also very detailed, thank you very much for your interest! Unfortunately it came a bit later than @melnikga 's. Feel free to check #100 or #93 and add your comments there if you are up for any of those.