I mentioned earlier that we would make a dedicated component to display each of our tasks. I think this is a great point in time to do that. And then we can style the task cards directly inside of that component. So inside of the components directory, I'll create a file called Trello board task dot view.
Let's start in this script section. And since we're going to be using TypeScript, I'll go ahead and add lang equals TS on here. Let's let our task component take in the entire task and then handle it from there. So let me import type task From our types directory and then we can define the task prompt with the defined props macro Now when you're using TypeScript to define your prompts Things look a little bit differently than they do if you're using just regular old JavaScript If we were using regular old JavaScript, I would define my task prop like this.
In this case though, we want to be able to say that our task is of the task interface, the task type from that types file. We cannot do that here inside of this object because task is a TypeScript type and not something that runs at runtime. To prove it to you, let me type task here instead of object. Yeah.
we get a reg squiggly line that says task only refers to a type, but is being used as a value here. So when defining our prompts in TypeScript, what we want to do instead is pass a generic to define prompts. And that generic is going to take an object where we can define our prompts. And now we can use that task interface.
Great. With the task now available to us, let's start creating the markup for the task. createdAt property. And then we can format that to a locale string.
This will make it so that when we hover over the task, we can see it's created at date. Now inside of the div, let's add a span and just print out the task title in here. Okay, cool. Let me start using this component on the board now, and then we can start styling it.
once we can actually see it on the page. The Trello board task here will take the entire task and we need to loop over all the tasks in the column in order to get that individual task. Now we can remove this P tag here. Great.
Now over on the right hand side, let me just give the page a refresh. And if I inspect our element and open up the view panel under Trello board, You can see that, sure enough, we do have that TrelloTask component for each of our tasks. Let's start stalling them now. I'll start off by giving the wrapper div in the component a class of task.
Once again, just to kind of identify this div as the element that is the root of the task, we'll give each of the tasks a background color of white, a little bit of padding, some margin on the bottom. We'll make them a little bit rounded. Add a small shadow, and let's give them the same max width as we gave the columns. As soon as I hit Save, over on the right-hand side, our tasks are starting to look quite nice.
Let's add a few more elements now that we haven't yet completed. Now that we have the tasks on the page installed correctly, we need a trigger at the bottom of each column to add new tasks. Inside of Trello board dot view, let me just add a footer element and inside there I'll add a button that has the label of plus add a card. Cool.
Let's give it just a little bit of styling here. We'll gray out the text a little bit and that should do it. I think we also now need to make the headings on our columns bold and give it a little space underneath to separate it from the tasks. So on my header here inside of the column, let me add the class of font bold, and then we'll give it a margin bottom of maybe four.
Excellent. This is looking great. Finally, in this lesson, let me go over to app dot view and let's add in that nice heading for the page that we saw in the first lesson. This is going to be an H one and in here we'll add the ViewSchool logo, as well as the words Trello board.
On the H1, I'll add a few tailwind classes. Let's make the text a lot larger here. We'll say text for Excel. We'll also make the text white.
And I want ViewSchool to be in line with Trello board. So let me make the H1 a flux container with the items centered so that they're exactly lining up in the center of each other. And then I'll give it a margin bottom of just 10 here to separate it from the actual board. Great.
And with that, I think we've got the basic scaffolding for our board complete. Although I do see my columns are stretching again all the way to the bottom of the container. So let me go back over to Trello board dot view. And indeed, somehow between videos, I've accidentally removed the item start here.
So let me just add that back in. Awesome. Now that the basic style and structure is complete, we can move on to getting the actual functionality of dragging and dropping. One quick edit here before we move on.
When I changed the p tag out for the Trello board task component, I did forget to add the key back in. A key is always necessary to be used with the v4, so do make sure you provide the key even with the component. I mentioned earlier that we would make a dedicated component to display each of our tasks. I think this is a great point in time to do that.
And then we can style the task cards directly inside of that component. So inside of the components directory, I'll create a file called Trello board task dot view. Let's start in this script section. And since we're going to be using TypeScript, I'll go ahead and add lang equals TS on here.
Let's let our task component take in the entire task and then handle it from there. So let me import type task From our types directory and then we can define the task prompt with the defined props macro Now when you're using TypeScript to define your prompts Things look a little bit differently than they do if you're using just regular old JavaScript If we were using regular old JavaScript, I would define my task prop like this. In this case though, we want to be able to say that our task is of the task interface, the task type from that types file. We cannot do that here inside of this object because task is a TypeScript type and not something that runs at runtime.
To prove it to you, let me type task here instead of object. Yeah. we get a reg squiggly line that says task only refers to a type, but is being used as a value here. So when defining our prompts in TypeScript, what we want to do instead is pass a generic to define prompts.
And that generic is going to take an object where we can define our prompts. And now we can use that task interface. Great. With the task now available to us, let's start creating the markup for the task.
createdAt property. And then we can format that to a locale string. This will make it so that when we hover over the task, we can see it's created at date. Now inside of the div, let's add a span and just print out the task title in here.
Okay, cool. Let me start using this component on the board now, and then we can start styling it. once we can actually see it on the page. The Trello board task here will take the entire task and we need to loop over all the tasks in the column in order to get that individual task.
Now we can remove this P tag here. Great. Now over on the right hand side, let me just give the page a refresh. And if I inspect our element and open up the view panel under Trello board, You can see that, sure enough, we do have that TrelloTask component for each of our tasks.
Let's start stalling them now. I'll start off by giving the wrapper div in the component a class of task. Once again, just to kind of identify this div as the element that is the root of the task, we'll give each of the tasks a background color of white, a little bit of padding, some margin on the bottom. We'll make them a little bit rounded.
Add a small shadow, and let's give them the same max width as we gave the columns. As soon as I hit Save, over on the right-hand side, our tasks are starting to look quite nice. Let's add a few more elements now that we haven't yet completed. Now that we have the tasks on the page installed correctly, we need a trigger at the bottom of each column to add new tasks.
Inside of Trello board dot view, let me just add a footer element and inside there I'll add a button that has the label of plus add a card. Cool. Let's give it just a little bit of styling here. We'll gray out the text a little bit and that should do it.
I think we also now need to make the headings on our columns bold and give it a little space underneath to separate it from the tasks. So on my header here inside of the column, let me add the class of font bold, and then we'll give it a margin bottom of maybe four. Excellent. This is looking great.
Finally, in this lesson, let me go over to app dot view and let's add in that nice heading for the page that we saw in the first lesson. This is going to be an H one and in here we'll add the ViewSchool logo, as well as the words Trello board. On the H1, I'll add a few tailwind classes. Let's make the text a lot larger here.
We'll say text for Excel. We'll also make the text white. And I want ViewSchool to be in line with Trello board. So let me make the H1 a flux container with the items centered so that they're exactly lining up in the center of each other.
And then I'll give it a margin bottom of just 10 here to separate it from the actual board. Great. And with that, I think we've got the basic scaffolding for our board complete. Although I do see my columns are stretching again all the way to the bottom of the container.
So let me go back over to Trello board dot view. And indeed, somehow between videos, I've accidentally removed the item start here. So let me just add that back in. Awesome.
Now that the basic style and structure is complete, we can move on to getting the actual functionality of dragging and dropping. One quick edit here before we move on. When I changed the p tag out for the Trello board task component, I did forget to add the key back in. A key is always necessary to be used with the v4, so do make sure you provide the key even with the component.