All right.
So now we're going to add the ratings component or rating component.
So basically, I want to show the number of stars.
If we look at our data, we have a rating and it can be it can be like 3.5.
So basically 1 to 5 and it can be 0.5 as well.
So we have a few different icons that we need to show a full star, an empty star and a half star.
So let's create a new component in the components folder.
Let's call it rating.
We'll say Ratings X and FC.
Now I'm going to bring in a couple icons.
So let's import and say F a star.
So that's the first one.
Then we want F a star.
Far star half alt and then far red star.
So we're bringing that in from react icon slash far.
And this is going to take in for props the value which is the actual rating and then any text you want
next to it.
So in this case, I want to say like five reviews or two reviews, however many reviews and ratings
there are.
All right.
Now let's see.
Let's add.
This div right here that wraps everything.
We're going to give that a class name of rating.
So I already have a bunch of CSS for this.
So rating and then we're going to basically have a span for each star, right?
So let's end that span.
Okay.
And then inside of that, we want to check we want to have a conditional here.
So we're going to say if the value is greater than.
I guess.
Is that right?
Yeah, it is.
All right.
So the value, if it's greater than or equal to one, then we're going to show the far star icon.
Else If the value is greater than or equal to 0.5, then we're going to show the half star.
Else we're going to show Reg Star, which is an empty star.
All right.
So if it's greater or equal to one, show the full star.
If it's greater or equal to 0.5, show the half star.
If not, then show the the empty star.
Okay, Now we need to do this five, four more times.
Right?
So let's take this span.
And let's copy it down.
Except now we're going to say if the value is two, because remember, this is the second star.
So we're now testing for that.
So if it's greater than or equal to two, we're going to show the full star.
If it's greater than or equal to 1.5, we're going to show the half else.
Show the empty.
Okay.
So now we'll grab this again this span and let's bring that down.
So that's three, four, five, so five total.
Now, the third one, we're going to change that to three and then this to 2.5.
All right.
Then we'll change this to four.
Change that to 3.5.
This last one here.
Change that to five.
And 4.5.
Okay.
Now, as far as the text goes, let's go under the last span here.
So under the last star and let's say span and I'm going to give this a class of let's say.
What do we want to use here?
Let's say rating dash text, and I want to test for the text.
So we'll say if text.
So we could do a ternary like this.
If text, then show text else null or something.
But we can also use the double ampersand and not have to do the final, you know, the final else or
whatever.
So just text.
If it's there, then show it and then export the rating.
Save that and I do have some CSS in the.
Uh, asset styles.
So this stuff right here.
So just make sure you have that.
All right.
Now we're going to bring this in.
Let's see.
We're going to bring it into the product component.
Because that's where I want to display this.
We're also going to display it on the product page, but let's bring it in.
Import.
Rating.
Rating from dot slash rating.
It's in the same same folder.
And let's go down.
Where do we want to put this?
Let's go right above the price.
So right below this link here and we're going to say card dot text as a div.
Close card text.
And then inside that we'll have our.
Rating and we're going to pass in the value.
Remember, it takes value in text.
So the value is going to be the product dot rating.
And text.
So for the text, I want the number of reviews.
And remember, that's actually if we look at the data in the Json JavaScript file, it has this Num
reviews.
So let's do this, let's put in some curly braces and we'll put some backticks.
And let's put in the Num reviews.
So we'll say product dot num reviews and then just the text actually outside of that, just the text
of reviews.
All right, let's save that and check it out so you can see we have our ratings.
And if we look at the data again, let's look at the first one.
The first one is 4.5.
So you can see we have four full stars and one half star.
Then we have a rating of four.
So four stars.
The Canon camera has a rating of three.
So three stars.
The PlayStation has a rating of five, so five and so on.
Now another thing I want to do is for the title.
If I were to change, you guys don't have to do this, but I'm just going to change the first one to
just AirPods.
So notice how since this only takes up one line instead of two, the card is shorter, so I want them
all to be the same size no matter how long the title.
So what I'm going to do is have all the titles, be just one line and add an ellipsis to it.
So I'm going to put that back.
And then in the index CSS, I just want to show you I have this product title class and basically we're
setting the height, we're setting the white whitespace to no wrap, so we're prevent wrapping and then
we're adding an ellipsis, which is the three dots.
So all we have to do is add that class in the product component right here where we have the card title
as a div, we can just simply add the class name and set that to product dash title, save that and
now you'll see that it'll just they'll all be one line and they have the ellipses.
So it's up to you if you want to do that.
I just think it looks better.
So we're going to just stick it, stick with that.
Okay.
So I think yeah, I think we're good for this video.
So we have all our products listed.
Obviously it's just dummy data for now, but at least we have the components and so on.
In the next video I want to create the details screen.
Okay.
And then once we do that, once we have the basic products and product page, we'll start to jump into
the back end so that we can serve our products from an API rather than just bringing them in from a
file.