Not bad, we've got two components out of the way and now let's tackle the big one, the cart item,
and let's do it slowly step by step, just so we are still on the same page.
And as far as the imports we've got react, we have styled components, we have format price since,
of course, our want to format the price.
Now, I'll also use the amount of buttons.
So something that we used in the add to cart component.
And we'll have to do a little bit of logic over here as well, since it is looking for three values
and then we have a trashcan which is just going to be in a button and then use court context, because
when I would want to do is grab two functions out of the context in the car item.
I would want to use the function of remove item so I'll be able to remove the item as well as the toggle
amount.
So check it out in a complete project.
Notice we have this option of removing the item.
Now, again, there is no functionality, but I might as well those functions.
On to the item, since I wouldn't want to hop back and forth and also we have this option of changing
the amount.
Now, this is going to be the case where, of course, we'll have to pass in those functions to amount
buttons.
Because keep in mind, if you remember when we were setting up a button, we're looking for three functions,
increase, decrease and Learmont.
So when we were setting up add the cart, of course, we set up those functions in that compartment
and we'll have to do something similar here as well.
So now let me navigate back to the cart item and I'll just start by grabbing my two functions out of
the cart context.
So concept and then let's say remove item and then toggle.
So those were the two functions that we used over there.
And that will be equal to my used car context.
And then let's set up two placeholder functions.
The government won't do much, but we're going to go with an increase.
OK, so now we're not looking for any parameters.
We're just going to be a nice little function.
And as far as the functionality, I said nothing in there.
And then the same will be for a decrease.
We're just setting this up because I would want to pass them in into the amount of buttons.
And then eventually, of course, we'll set up the logic here as well.
And once I have both of these functions, I would want to work on my return so so that I would want
to return a wrapper.
And instead of the wrapper, one set up a div with a class of last name of the title, and then there
is going to be a price amount and all that.
Now the reason why we're setting up this way, because if you take a look at the success, there's going
to be a grid layout.
So that's important.
Don't place everything within the title.
There's only going to be certain things in the title and then the rest of them will be separate columns.
Now, there's also one Gotcher where will display price technically in two places, and I'll cover that
more once we get there.
So as far as the tile, well, now, since I know that I passed in everything that was coming from the
item, from my car item into my component as a prop, of course, I would just need to structure it
correct.
And we essentially were looking for it.
We're looking for the image, name, color and price as well as the amount.
OK, so so then let's scroll down.
And as far as the return, I'm going to start with an image where in the source I'll have my image and
then for alternative, which just going to have my name like so so let's say we should have something
on a screen since we have already two items in and the artist.
Now keep in mind, this is a small screen, OK, and that is very, very important.
You see the differences and then right next to this deforms or image, I guess I'm going to place my
div with a five of class name of name, and instead of it, I would just want to display my name.
And then I also want to display the current color, because remember, I know I said this before, but
for every item we multiple colours and we'll treat them as separate items in the cart.
That's why we go with a paragraph with a class of color and we just type color and color.
And then let's add a spine and in here, since I would want to add that color, whatever it is, again,
I'll use that in line set setup where we go with style and we just say background and we set it equal
to color, something we have done already for the buttons and some other components as well.
So let's say it.
Let's see how it's going to look.
Well, see, now, of course, we have our color.
And after the paragraph, I'm going to set up my heading five with a class name of price small.
So class name price small.
So since there's two layouts, we have small screen layout and then the big screen layout, essentially
I will hide this one using the success.
So there's going to be two places where we render a price.
So on here, I'm going to go with format price and I will pass in the actual price because remember,
we're getting that from the props like so.
But then once you go to the bigger screen, notice how essentially will hide it because eventually will
be displayed over here.
That's why I don't freak out.
We have two places where we render the price.
So this one here is going to be for the small screen.
And we had that once we get to the big screen.
So we have our div that was our tile that are essentially our first column and I would want to set up
the price.
So again, this is going to be shown only once we get the big screen.
So we go with having five class name and we're going with price.
And of course, again, we need to format the price.
So we display nicely our price.
So let's save that one.
And then remember the amount buttons, the component that we used in the card component.
Now, of course, I would want to set it up here as well.
So we go with Amoun Buttons and it was looking for three values as far as the props we needed to pass
in the amount which is going to be equal to the amount that is coming up as a prop.
Then we have increase and decrease functions and for the time being, we're passing in these placeholders.
So not doggle amount, we will invoke it here in the increase we just pass in our placeholders.
So we say increase is equal to increase and decrease is equal to a decrease.
And I'll close my amount component and this and of course there is no Hmoud component because it is
a Mountbatten's.
My apologies and I would want to display subtotal.
As well as the remove card button.
So right after the amount buttons, since, again, we have a column layout, I'm going to go with heading
five of class, name of subtotal and kind of format the price.
But in this case, I would want to multiply the price by the amount.
So how many items that have multiplied by the price?
So again, for my price we pass in price.
Times and the amount, so we save some again, we're not going to display that on a small screen, only
once we get to the big screen, then we can see our subtotal.
That is not on purpose because we don't have much real estate over here.
And then lastly, the button so we go with our button type is not going to be submit.
It's actually going to be a button.
Then we're going to go with the class name, a little bit of styling and let's set up our more.
And hyphen between and then once we click, I would want to invoke my remove item, and if you remember
in the card context, we were looking for the idea that there's no functionality, but we might as well
set everything up since it just makes a bit more sense.
So on click and then we need to pass and of course the arrow function and let's just call it or move
item and then pass in the idea that we're getting from the prop.
I do have the class, I have the type.
And the last thing that I just need to add is the icon.
So I go with the icon that are imported from icons and we should be in good shape.
Now, of course, we have our icon icon.
We have multiple layouts.
We have one for small screen and one for big screen.
So this is going to be the big screen layout.
And then once we get to the small screen, this is going to be our second layout.
So we're pretty much done with our UI as far as how the card page is going to look like.
So now, of course, we just need to start adding functionality because at the moment I can click all
day long and nothing is happening.
Correct.
As well as this playing well, what are our totals?