WHAT YOU’LL LEARN
Can I use this?
In order to follow this tutorial, you must use Webiny version 5.14.0 or greater.
It's time to create the New Pin modal dialog, which the users will open by clicking on the ⨁ icon, located in the top right corner of the screen.
For starters, let's create the
NewPinModal React component in the
As we can see, in order to create the modal dialog, we're completely relying on the Ant Design React library. To create the modal dialog, we're using the
Modal component, to create the form, we're using the
Form component, and we're using the
Input.TextArea components to render the basic form fields.
For more information on Ant Design React library and all of the components in offers, make sure to check out its documentation.
Do note that the form in the modal dialog doesn't include the cover image field yet. We'll add this field later, when we'll be covering the file upload functionality.
For the purposes of this tutorial, we've included all of the React component's code in a single file. But, you can reorganize the code into multiple files, if you prefer that.
Now that we have the New Pin modal dialog ready to go, let's create the mentioned ⨁ icon, which will enable users to actually open it.
So, let's update the
Layout component with the following lines of code:
With all of the code updates in place, we should be able to see the ⨁ icon in the header and open the New Pin dialog by clicking on it. And, of course, we should be able to create new pins by simply filling the form and pressing the OK button. Feel free to create as much pins as you like!
Note that, of course, since we didn't create the homepage yet, nothing will actually be shown on it after we've submitted the form. This is something we'll be covering in the next section.