Perfect, and once we've got our product in the context, of course, let's worry about rendering them,
so I'm going to navigate to the bigger screen and I'm going to start working on the feature product
because I would want to do it in following steps.
First, I don't want to work on feature products.
Then we're going to work on a single product.
So I still have to set up one more fetch.
So we have the single product page out of the way and only then we'll worry about the product because
as you can see, we have a bunch of moving pieces in here.
First of all, there's going to be two ways how we can display them and there's going to be sorting
and then filtering and all that.
So I would want to do this all at once.
That's why I will take these steps.
So start with featured ones.
Like I said, then we'll worry about the single product and only then we'll dump all our products in
the product page.
And if you worry about the fact that I didn't show you what happens with there, don't worry.
Once we start working on a feature, of course, there's going to be an if statement for error.
So it's going to be a little bit easier for me to showcase that.
What happens if we get the error?
Because otherwise, yeah, I can show you in the components, but probably doesn't mean that much.
So what I would want is to navigate to my filter products because or I'm sorry, I guess feature products.
I keep saying filter filter, but it's actually feature products because I have an array of six items.
So I notice here how I'm importing use product contacts.
So that is of course my hook.
And what properties am I looking for?
Well, our one check preloading since I want to show the spinner then I also want to showcase if there's
some kind of error.
And eventually, of course, I want to showcase the featured product since we're just going to iterate
over them and display each item.
So let's start with CONSED.
We know that we're pulling down the object and from the object I'm looking for products and then loading.
But in order to make life a little bit easier, I'm just going to give you an analysis of loading since
it's going to be easier.
So we're going to go with products.
And then also I would want to check Arah again, Alia's of error and then eventually we'll look for
a featured feature and an underscore product.
And one will be equal to a feature like.
So I once I've got all of this coming from use product context, then I would want to set up some segments.
So if I'm loading, then I would want to display my loading component.
If there is an error on one display, the error component, and then eventually if I've got my product,
which I'll iterate over them, and then for every item, I'll return this product component.
So let's start with offloading.
And then for the time being, of course, there's not much in there, but we'll still go with return
and a loading like so.
So if we're loading, we should have quick loading one and I think we would need to set it up first.
So let's just go to a loading component.
And as you can see, for now, we just have the heading for now.
There's not going to be much in there will simply go with Dev and we'll add some global class names.
So say class name section and then section center.
And then inside of this there there's going to be another one with a class of loading.
That's it.
So all we have to do and once we have the loading in place for a split second, of course, we can see
that a little spinner in action.
So that should do it for the loading.
And I also want to take care of the error.
So before we maybe set up the error in a featured one, we might as well and just navigate there were
errors or where you are and it's right above.
And as far as the error, same spiel.
Go with Dave and then your class names here.
There's going to be a section section center as well as the text center.
So those are the three classes that I would want to add.
And inside of this there I simply go with heading to and there was an error, there was an error and
then three dots.
And so that that should be displayed if we have the error and in order to test out the error.
Well, first of all, I guess we would need to set up in a feature product.
Correct.
So say if there is an error, if error.
Then I would want to return, of course, my air component, air component, and I would want to navigate
back to the product context and where I'm passing in the oral.
I'm just going to add one more extra extras, so I'll wrap my URL right now in the curly braces and
I'll just add as essentially, of course, there is going to be an error because there is no such an
end point with that extremeness.
And that's why we can see nicely that there was a beautiful.
And of course, I'm going to go back to my proper URL since I would want to display my product.
So now there's no error, there's no loading since we already have all the product.
So now let's iterate over them.
And for every product, we're going to return a product component.
So close the sidebar.
And again, we have done this quite a few times, so we'll go with the wrapper and inside of the wrapper.
And by the way, let's add a global class name of section as well, section class name and line instead
of this wrapper.
I would want to first start with the title, that's one of the global classes than having two and nine
featured products and also this underline here underline.
And then right after that, there's going to be the section with all my featured products.
So right after the title there, we're going to go with section and then section center and featured
classes like Show and then sort of this there.
Of course, I'm going to iterate over my feature.
All right.
Now it's up to you.
You can render all of them.
And I'm going to start that way.
But eventually I would just want to display to you or I'm sorry, three again, that is just my preference.
If you take a look at the complete project, but you can render all six of them.
So I purposely set up six feature products just in case you would want to render more.
But in my case, I'm just going to go with three.
So we're going to iterate over.
So we have featured.
So, um, and of course, we're using the map for every product we've got.
And I object and I'll name this object a product.
And then as far as the return, which is going to go with the product component, then we need to pass
in the key in the object, we have the ad property and then we'll use this print operator so that the
DOT and we spread out the product we save and we should have product the product, because that is the
text that is inside the Perak component.
And the last piece of the puzzle is navigating, of course, to the product component.
So whoever it is that the sucker and since I'm passing in all the properties, I just need to be specific
which ones I'm looking for.
So I would want to get the image.
I would want to get the name, I would want to get the price.
And I would want to get the idea.
I'll say I'll close the sidebar.
And in here, let's say that we're going to return a wrapper.
So all my styling here and instead of the wrapper, there's going to be a container.
And in the container, I would want to place the image on a link because we need to understand that
as I'm hovering over the image, because this is the link and this is going to navigate through that
single product.
So that's why if we take a look at the imports, of course, we have the style and we also have format
price, which at the moment we're not going to talk about.
I'll cover that in next video.
And in here I have a search.
So that's my icon.
And then I also have the link.
So I'll place the icon inside of the link.
But Link, of course, is going to use this ID to navigate to that specific product page.
Now, of course, Page is a placeholder.
Remember, that single product is a placeholder page where there's going to be a user and will pass
in that specific idea in the user effect and then of course, will fetch that single product.
Hopefully that is clear.
Again, we have done that already before.
So for the source, I'm just going to display the image.
And as far as the alternative, I'll use my name in this case.
So same name.
Then I would want to set up my link over here.
And then this is going to navigate again dynamically to product.
And then why?
Because if we go back to the abcess, what was the path for a single product?
Well, in my case, it was Ford's product and then forward slash and then the ad.
So my you are primer.
And since, of course, for every product that ad is going to be unique in here, will set up the template
literals and I'll say forward slash product and then forward slash.
And now I want to access the idee.
Now I do want to add a little bit of styling here.
So class name is going to be equal to Link.
And inside of this, like like I said, I would want to place my icons so f and learn a search so we
can close it.
We should have all of these images and then as we're hovering and of course we can see the link and
then right outside of this div I'm going to go with my photo or not fonts or whatever here, and we're
going to go with heading five and inside of it will pass in the name.
So it won't display the name as well as the price.
Again, I'll talk about why we have price incents and why we would want to format it and all that info
in the next video.
For now, just bear with me.
So we're going to go with paragraph and then instead of this paragraph, we'll just pass in the price.
Now, if you want, you can add, but you'll see that in the next video.
I'll have to remove it anyway.
So at the moment, of course, these prices look gigantic.
But the good news is that we have the product.
So let's navigate to the big screen.
If you want, you can display more product since there is a grid.
Well, so we have nice columns as well as the rows.
But in my case, when I'm going to do is go back to the feature product and the.
In JavaScript, we have the array method by the name of sleights, so essentially you get items from
the array and then creates a new one.
So instead of iterating over the whole thing, a feature dot and then slice and then I'll pass it.
Well, how many items I would want and then I'll change my map.
And in my case, I'm going to go with zero and three.
So this is just going to grab items with in excess of zero one and two.
So three is not included.
So that's why in my case, I'm going to have a array or I guess a list of three feature products.
Beautiful.
If we see our product displayed on screen, we are in good shape and we can move on to the next step.