So now I want to go ahead and create this toolbar right here. And in order to do that I first want to create individual component called ToolButton which we are going to render depending on what element we want to draw or what action we want to perform from the toolbar. So we don't need to import any new packages for this one. All we have to do is go into the components in board ID and create tool button.tsx like this. And then let's go ahead and mark this as use client.
Let's go ahead and import a type Lucid Icon from Lucid React. Let's go ahead and import hint so we can explain to the user exactly what tool or action they are performing and let's import button from components UI button. Let's create an interface tool button props to accept label which is a string. It's gonna accept an icon which is a type of lucid icon. It's also going to accept an on click action which will just be empty void.
And we're going to have two booleans is active which is optional and is disabled which is optional as well. And now let's go ahead and export const tool button. Let's assign all of these props here, tool button props. So we're going to have label icon on click is active and is disabled. And let's go ahead and return a hint component where the label is going to be the prop label.
Side is going to be right and side offset is going to be 14. And then inside we're going to render our button component which is going to render our icon component. So we need to turn this from a prop into an icon which we can render. And since this is a type of lucid icon that means that we're going to be able to immediately render it. All we have to do is create an alias and make it capital I.
So once it's capitalized then it can be used as a component immediately. So I can just pass in icon like this. And now let's go ahead and give this button a disabled of is disabled. We're going to give it an onClick on onClick. Size of icon and variant is going to be dependent on the isActive prop.
If we are active it's going to be board active which we've created a while ago. So let's just revisit that to refresh our knowledge. So inside of our components UI library we've added a new variant to the button variants with board and board active. So confirm you have both of those, if you don't pause the video and simply add board and board active. Great and that is it!
We have our tool button now. So we can now go back inside of the toolbar itself. And now let's go ahead and remove this divs. And instead I'm gonna render the tool button from .slash tool button like this. And let's go ahead and let's give it a label of select let's give it an icon of mouse pointer 2 from Lucid React so just make sure you add this Let's give it an on click for now to just be an empty arrow function.
Like that and let me refresh my localhost to see if everything is working or whether something is broken and there we go. You can now see how I have a tool button right here and it shows me the select label. Great. And now what we are going to do is we're going to pass in the is active to be manually false simply so we remember that we have to change this to be modular later. And now let's go ahead and add another one for the text whereas the icon is going to be type.
You can import that from Lucid React as well. Let's copy and paste this one and the third one is gonna be a sticky note. The icon is gonna be sticky note from Lucid React. And let's go ahead and do the same thing for rectangle. And for ellipses.
So the icon is going to be square from Lucid React. And let's go ahead and add ellipse. The icon is circle. And last one from here is going to be the pen. So label is pen and icon is pencil from Lucid React.
There we go. So make sure that you have circle, mouse pointer 2, pencil, square, sticky note and type icons from Lucid React. And let me just go ahead and see how this looks like. And there we go, we have a very nice selection of items here. And one is always going to be selected, right?
So it's either going to be the select itself or it's going to be one of the other elements here. And now let's do the same thing for the undo and redo buttons here. So here at the bottom, we're going to remove this too. We're going to add tool button. And this one is going to represent the label undo and it's gonna have an icon undo to from Lucid React.
We're gonna have on click here to be an empty arrow function And we're gonna have is disabled for now to be explicitly false. And let's copy and paste this and this one is gonna be redo to icon with the label redo. Like this. There we go. And this undo and redo icons are actually going to be disabled until we actually have some history inside.
So you can take a look at how that's going to look like. They're going to be disabled until we start drawing something and then when we have history, we're going to be able to undo and redo. Perfect! So now if you refresh you can see how our loading skeleton makes much more sense because it takes the exact, almost the exact height which we are gonna have here. Perfect!
So that is the basic layout for our skeleton here. Oh, sorry, for our toolbar here. So what we're gonna do next is we're gonna actually create an ability that when we click on one of these items it actually stays selected and it's kept in our canvas state, which is what we are going to call well, the state which decides which drawing tool or element is currently present. Great, great job.