feat: List of Cairo examples to select from - Issue #109 #116
Conversation
components/Editor/EditorControls.tsx
Outdated
| menuPlacement="auto" | ||
| value={exampleNameValue} | ||
| options={examplesOptionos} | ||
| instanceId="exampleSelect" |
There was a problem hiding this comment.
when my PR is merged you can use the React 18 useId() hook instead of hard-coded one
components/Editor/EditorControls.tsx
Outdated
|
|
||
| import { Button, Input } from 'components/ui' | ||
|
|
||
| type EditorControlsProps = { | ||
| isCompileDisabled: boolean | ||
| programArguments: string | ||
| areProgramArgumentsValid: boolean | ||
| exampleName: number | ||
| handleChangeExampleOption: (option: OnChangeValue<any, any>) => void |
There was a problem hiding this comment.
for better typing, you can define a SelectOption type, for ex
type SelectOption = { value: number label: string }
and use it to type the handler
OnChangeValue<SelectOption, boolean>
It will ensure that the options provided are valid
components/Editor/EditorControls.tsx
Outdated
| [], | ||
| ) | ||
|
|
||
| const examplesOptionos = examples.Cairo.map((example, i) => ({ |
|
Really cool feature! It seems that the select for examples hasn't a fixed width so when you change the example, the layout kind of move and for large example names (Variables & mutability for example), the "Compile and run" button takes two lines. Maybe we could have a solution to keep a fixed visual appearance for example with a fixed width |
|
@matthieuauger Thanks for the comments, I made some small changes |
|
@melnikga looking really good!! after playing with it I think it would be great to reshuffle the elements a little to make the UX better. Following this thought process: first I select cairo code, then I enter arguments and then I run the code; I think we should position the elements in this order (from left to right). Moreover, we can make some small improvements to get more space:
It would also be nice to put some space between the code dropdown and the program arugments, to separate the two sections (permalink with code dropdown; arguments with run button) from each other. See my drawing attached: 
|
|
@melnikga great job! 👏 |
#109
Added select with Cairo code examples.