Let me add three items to the cart real quick, one to three, and just to make it more interesting, I will change the quantity of the second item to four and the third item to two . So you can see we have seven items in the cart. Now let's go and try to make them look like this design. We're going to have a line item for each product with the quantity, the price of the unit, the total price for that quantity, and then an ordered total. Let's get to work.

the total price for that quantity, and then an ordered total. Let's get to work. So we're going to work inside the active cart, but before I can do anything, I need to further pass the cart to this component. Remember we receive it up here from the props and we pass it as a prop down one more component. And now in my active cart, I will once again define the props and we'll have the cart in there, and if we display this component, we know for sure that we have at least

the cart in there, and if we display this component, we know for sure that we have at least one item. So we can go add for each cart items as item, and let's close the end for each. And here for now, let's just display the item and we need to get the product name just to see if we're cooking with fire and look at this, it looks like we are indeed cooking with fire. Okay.

with fire. Okay. So let's remove that and get to work on the cart items. I will delete the p tag here. So let's maybe here have an unordered list that wraps everything and we can turn this into an li and I'll copy that out because we are going to have a bit more markup. So each li is going to be, I think, a flex container for sure. So we can have this content on the left and this close button on the right

So each li is going to be, I think, a flex container for sure. So we can have this content on the left and this close button on the right pushed to the sides. So let's have some dummy markup here. We have a div with content and then we have a button with an add times character, which is a cross. And then we're going to give some classes to the element. So flex, I want to just defy between to push things to the side.

And then we're going to give some classes to the element. So flex, I want to just defy between to push things to the side. We definitely want a little gap here. So this is a decent little start. And then within this content, we are going to have the title and then we're going to have some stacked horizontally items. So this is another flex container. So this div here is going to have multiple elements. We'll have an h2 tag, which is yes, the product that name.

So this div here is going to have multiple elements. We'll have an h2 tag, which is yes, the product that name. I think the class is going to be font bold. All right. Nice. Let's give some margin top to the entire URL. So here, class equals empty six and yeah, we could use the space Y, but I'm not going to use it here. All right.

to use it here. All right. Looking better. Below the title, we have the product quantity, the product price and then the total for the price times quantity. This will go below the h2 and this is definitely going to be a flex. Let's go gap of two container. So first we have the quantity in text red, font, medium span. It could be a P tag because it's in flex container.

So first we have the quantity in text red, font, medium span. It could be a P tag because it's in flex container. So this is the item quantity. And let's add a little X one X to X for X. This is great. Before we continue with this line, let's add the dividers and it could be a div ider, but you can see that the last one also has one. So here I'm going to use border bottom instead. This is going to go on the li here border B.

So here I'm going to use border bottom instead. This is going to go on the li here border B. What is it? Border. Rose. 100. Yep. That might work. Let me make it a bit darker so you can see it and I'll add some vertical padding.

Let me make it a bit darker so you can see it and I'll add some vertical padding. So let's go rose 200 and py dash four. All right. So that sort of works. This is definitely too dark. So I will go back to rose 100. Nice. Let's make the text red and semi bold. I think that's what it is on the first span here.

Let's make the text red and semi bold. I think that's what it is on the first span here. Class, font, semi, oh, no, we don't have semi bold. What we have, we have medium and text red. Yep. Seems about right. I'll actually increase a bit the gap between the title and the span series here . So flex gap two, I will add empty one here and I should do the trick nicely. Yep.

So flex gap two, I will add empty one here and I should do the trick nicely. Yep. Let's continue. So we have in light color, the at price and then in a darker color or just bold er the at total. Okay. Well, let's start by having another span. This is not what we want. We'll accept it, but remember this is going to be the price sense.

This is not what we want. We'll accept it, but remember this is going to be the price sense. But if you remember in the product model, we've created this formatted price here. So instead we can use formatted price looking good. Let's make it a lighter color class, text rose 500, I imagine. Anything else is hard to read. And now we're going to take care of the quantity. So here for the total cost, we could do some templates math and get the price sent and

So here for the total cost, we could do some templates math and get the price sent and multiply it by the quantity, but I don't like this. Why don't we have another convenience in our model, probably the cart item model, just like we have formatted price, we could have formatted total. I think that would be useful. Okay. So let's go in the cart item model. We have a relationships here and I will add a public function formatted total.

So let's go in the cart item model. We have a relationships here and I will add a public function formatted total. Is that what we said we would call it? And here we'll do something similar that we did for the product. So let's grab that and I'll paste it here. So I need to import number, but here we want to multiply the quantity. So we can go this quantity times this price sense. And thank you copilot, I've copied this price sense from the product, but here we are in the cart item.

we are in the cart item. So we need to drill in the product relationship like so. So this would have broken, but copilot fixed my stuff as it tends to do. Thank you very much. All right. So this is pretty convenient. And we avoid doing some business logic in the template if we don't need to. So I can duplicate that. And here we will use the formatted total property that we've just created.

So I can duplicate that. And here we will use the formatted total property that we've just created. And I believe this should work. We'll have some styling to do, but check it out for time 728. And if I was to add another Kimberly to make it five, the price is going to go up to 35. So it's working really well. Let me make the font medium on this one. And yeah, this is looking pretty good. I think we need to increase the gap between the quantity and the pricing.

And yeah, this is looking pretty good. I think we need to increase the gap between the quantity and the pricing. And also that might be the medium font weight. So I say gap, but really here I can add a margin right, MR2 that should push it to the side just enough and I'll change font bold to font medium. All right. And because I've added vertical padding, I think the gap under the cut heading is too big if we compare it to this.

is too big if we compare it to this. So I will reduce the margin here to maybe empty for, you know, our empty to should do better. All right. I'm happy with that. In the spirit of keeping lessons short, I won't do much more in this one. I just want to do one more thing and it's changed a little X placeholder we have for

I just want to do one more thing and it's changed a little X placeholder we have for the close button to use the icon that comes with the design. So I'm referring to this thing here. As you can see on the design, it's a little bit more elaborate. And I am willing to bet that in the challenge files, we are going to have an icon to close or remove item. This one, it might be this one, but I don't really see the circle. We might have to add a border to it.

This one, it might be this one, but I don't really see the circle. We might have to add a border to it. And like we've done before, we are going to get the actual SVG code. Even if it's not much, did I create a icons folder? I sure did. So let's create a new file, delete, not sure if it's the best name, but that'll work. And this time, what do I show you some of the reason why we would work with an SVG file? I'll get rid of the hard coded height and width.

SVG file? I'll get rid of the hard coded height and width. And for the field color, I will use current color. All right. Let's set this component up so that I can pass classes, tailwind classes to it to modify the look of it. So check this out. I will here go attributes merge so that we can merge the class attributes and let's

I will here go attributes merge so that we can merge the class attributes and let's set it to a default empty string. So that's going to allow me to pass a class attribute to the component when I consume it. And it's going to merge it with that empty string. Okay, so this is our X icon that delete. So now in our active cart, wherever we had this placeholder button, let's try to replace

So now in our active cart, wherever we had this placeholder button, let's try to replace this with our X icon that delete, if I can spell component, unable to locate a class for icon delete, whatever I don't wrong, X icon, or it is icons with an S, of course. So icons that delete and it looks like it's not there, but let's pass some classes to that icon. Remember, we merging the classes so I can go class equals size 2.5 and have a

that icon. Remember, we merging the classes so I can go class equals size 2.5 and have a look. It's here. If I was to pass the size of 10, you can see that now I have control over this SVG with code and I can even do things like hover text red. And so now when I hover the icon, it's going to go red. So that's the sort of stuff you can't do if you use an image tag for an SVG. And so that's a good reason to use inline SVGs.

So that's the sort of stuff you can't do if you use an image tag for an SVG. And so that's a good reason to use inline SVGs. All right, let's go back to 2.5. And if you look at the design, it looks like it's this rose 500 color. And then there is a circle border around it. So let's try this text rose 500, but not on hover, sorry. And the reason I use text color here is that if I go to the delete icon, the current color property here is going to take the text color. Okay, now to add the border, I will actually put it on the button.

property here is going to take the text color. Okay, now to add the border, I will actually put it on the button. Otherwise, it would mess up with the size of the icon. So class equals border, border rose 500. And let's add rounded full so that it looks like a circle. Not quite so flex container pushes the things on the side with justify between, but we need to align center, align item center so it doesn't stretch out for the whole height. This is classic flex box fun and games.

height. This is classic flex box fun and games. So here on the li I have justify between for the horizontal spread and vertically I can go items center, which should center the icon. Now obviously we need to add a little bit of padding around the icon. So let's do that on the button P dash two, maybe yeah, that's too much. I'll go P dash one. And at this point, I am feeling like we are in a very good place. We might do some hover style passes later.

And at this point, I am feeling like we are in a very good place. We might do some hover style passes later. But for now, if we take a look at that and we compare it to that, I guess there 's less padding here. Let me fix that real quick and I feel like we need padding 0.5. All right, that's good enough. All right, let's wrap it up here for this lesson. In the next one, I think we're going to look at the order total, this call out notice and

In the next one, I think we're going to look at the order total, this call out notice and this button. And if we can do that quick, we might also do the increment decrement. See how we go. I tend to over explain things as I'm teaching them, even if I'm supposed to just build the thing, this is part of the fun of being an educator looking at a camera. So let's see you in the next lesson, see how much progress we can do. I hope you enjoying the series so far.

So let's see you in the next lesson, see how much progress we can do. I hope you enjoying the series so far. See you in the next one.