Let's go ahead and let's add the templates sidebar. So the first thing I want you to confirm is that inside of your source, features, editor, components, just find the normal sidebar right here. Confirm that you have the design which calls the templates tool. So onChange active tool templates and is active when templates is active. And now Let's go ahead and let's copy the images sidebar because I think that one will be the most similar to what we need.
Instead of features, editor, components, let's find the image sidebar, copy and paste it and rename it to template sidebar like this. So let me expand this so you can see where is my new sidebar, there we go, template sidebar. Make sure you are inside of your newly created component and let's rename all instances of image sidebar to template sidebar. Like this. Let's immediately check whether the active tool checks for images.
Let's go ahead and remove it and instead check for templates. Because our sidebar item uses the onChange active tool to templates. Right. Let's go ahead and let's change the tool sidebar header to be templates and let's go ahead and add a description. Choose from a variety of templates to get started.
Great! We don't need the upload button so you can actually remove the entire div which encapsulates it like this. And we can actually leverage the same is loading and is error here and instead of fail to fetch images, let's say failed to fetch templates here. And then let's go ahead and modify this. Instead of use get images, we're gonna call our use get templates.
So make sure you call the use get templates here. I'm just going to go ahead and remove what I don't need here. And inside of here let's go ahead and let's define the limit here to be 20. And the page here to be 1. And now let's go ahead and modify our display of these templates.
So this is what we are going to do. First of all we can make this on click just be empty for now and we are no longer working with the image constant but the template constant right so this key would be template.id this image here source will be template.thumbnailURL or an empty string the alt will be template.name or an empty string like this or we can just say template And then let's go ahead and remove, we don't have to remove the link, but what we can do is we can remap it to be a div. So then we can remove the href from here and the target blank from here. And inside of here we're simply going to render the template name. And we can also, let's see, so hover underline.
Well, we don't need the hover underline anymore. So we can remove that because this will not be a link, right? All right, I think this should be fine to start with. Let's see how it looks like. Oh, there's one thing that I also want to do.
So to the button add a style element and let's repeat our aspect ratio trick here by simply writing template width divided by template dot height. Like this, you can also collapse this like this if you want to. There we go. So now let's go inside of the editor component itself. So inside of features, editor components, editor and let's do basically just copy any sidebar right.
So this will be template sidebar and we are importing template sidebar here. And then we just have to render that template sidebar anywhere. So let me copy and paste the images sidebar and add the template sidebar here. And there we go. So we now have this car sale poster and travel poster.
So we are definitely getting somewhere. Let's just go ahead and style this further. So what I want to do to this button is remove the height 100 pixels because we copied this from the image sidebar, right? So I think already, there we go. This seems perfectly useful for me.
And now we just have to enable this onClick here. So let's go ahead and define our onClick, const onClick. And let's go ahead and add the onClick to be called and passing the current template in iteration here. And in here we can reuse our... Let's make this an asynchronous method and let's add a template to be a type of response type which we can get from use get templates right so it should just be added here right So don't import it from somewhere else.
We need this one for get templates. So response type, data, and then the first in the array. That would be the template. There we go. No more errors for my on click here.
Perfect. And then inside of here, what we're going to do is very simply call editor load JSON template dot JSON like this. And let's go ahead and make this a question mark. Perfect. Let's go ahead and remove the upload import and the upload icon and the link.
We don't no longer need any of those. So if I now click on car sale poster, there we go. If I click on travel, there we go. What I want to do here is also add a little warning that changing the template will remove all our current work. So let's go ahead and add our handy little use confirm From hooks use confirm right here.
So inside of here in the title, let's add, are you sure? And in the message or the description, let's add, you are about to replace the current project with this template. And now we get the confirm dialog and the confirm method we can call. So first of all, let's go ahead and let's render the confirm dialog anywhere inside of our project. So I'm just gonna do it above the tool sidebar header and then inside of the on click here let's go ahead and do the following I'm gonna add a little to do check if template is pro because we can't do anything about that now and then let's do okay to be a wait confirm if okay then load the JSON.
Let's try it out now. So now if I click here, there we go. Are you sure? So if I click cancel nothing happens but if I click confirm it gets replaced. Amazing!
So you just finished the template sidebar. Great, great job!