Original subtitles

OK, so now that we have our collection preview, we need to start looking at building our menu item

component so we know that our menu item component is going to consist of a image as well as a title,

a price, and this button that allows us to add it to the cart.

Now, we're not going to actually add any of the functionality in just yet.

We haven't really considered how to handle our cart yet.

But let's just build out this component first.

So let's add in a collection item into our components.

And in our folder, we're going to do the same thing we've been doing our collection item components

and then our collection item dot styles that asks us, the more you type this, the better you'll get

at it.

Which is always what's really interesting is that at first it always seems a little repetitive, but

you actually find that you really do end up remembering everything and what their purpose is the more

you practice typing the same folder structure for your components and what to do with them.

OK, so now for our collection item.

We know that we need certain things to come in in order to popular our menu item, but we don't need

any state.

So let's make another functional component.

So CONSED collection item is equal to this functional component.

Returns this Divx with our class name.

Collection item, and then we're going to give it a div.

And now that Divx is going to hold our image, so let's just give it the class name of image for now.

And let's.

Do the same thing we did before with our directory items, so instead we know that what we're going

to pass in will be an.

We will also get our name.

We will get our price and our image URL, and we have all these.

When we brought in that data earlier in our collection or sorry, in our shop page, right in our shop

data specifically, so we need an ID name, image and price.

Now we are going to.

Put in what we did before with our style and we are going to do background image goes to our string

interpolation value of.

Image you, Earl.

So nothing new here just yet, and then we're going to add another d'Hiv and here we're going to add

our collection for.

Now.

Inside of our Futter.

We have is this a double repeat, actually, we don't even need this closing tag, we are going to bring

in our span, which will be our name.

As well as our.

Awesome.

OK, now let's export this out.

And let's bring in the stars that we have for this component, so I've written them already for us,

but we can take a quick look at what they are.

Inside of our collection item, we are styling our image so that its height is ninety five percent.

Now that means that our collection for photos height will be five percent of the total height of our

collection item, which will be 350 pixels.

So this is pretty much going to be the layout for our actual component, what we see here.

So one important thing to note is that this Fleck's column on our collection item will essentially allow

our Futter and our image to sit in a vertical alignment.

Right.

And then our collection, Futter, is just our regular display flex, and then we have some space between

them so that our content gets pushed apart, our title takes up 90 percent of the space in our total

footer and then the price is going to be 10 percent.

So because our price is probably never going to grow that large, we've got to make sure to have our

name take up the majority of the space here.

OK.

Now, if we import in our collection item to our collection preview so that we can access.

The new collection item we wrote.

We can now, instead of doing the stiv, just map it through like so and because we need the properties

on the item that we had before, we're just going to do what we did earlier.

And we're going to restructure off our I.D., but we're also going to restructure the rest of our item

props and pass that through like so.

Let's do other item props.

WAPs.

And now it's no longer a div.

Well, just make sure to D structure or spread our other item props into our collection item.

Oh, we also have to start a collection preview.

So those stylings are down here.

OK, there we go.

So we have our price and we have our thing because there's no styling coming through, let's just inspect

quickly and see if we're missing something.

So while you code, you might see this happen, you just want to make sure that our naming is correct

for everything and we're getting the stylus.

So I don't see the stars that we wrote being applied here.

Although we are getting the actual image right here being rendered so.

Oh, I see our collection prevue, our collection item.

Oh, we didn't save.

Silly mistakes.

So sometimes if you just take a look inside of your dev tools, it's very easy to see where perhaps

we are going wrong because we know for sure, due to the way that react is set up, everything should

be in at a specific time.

So if it's not being loaded, then we probably messed up our import.

Right, which we checked first.

Right.

We made sure that we were importing in the right collection item, which we were.

And then we checked if we had our naming like our class names.

Correct.

Which we did.

So then it just turned out we didn't save it.

So it's a silly error, but there are tons of those.

As you become a professional developer, a lot of the times you'll find that you are just banging your

head against the wall for 30 minutes, only to find out that you had a slight typo.

It's very common, but just like that, we now have our collection component.

So the only thing we're missing is the hover effect with the add button, but we can add that in a little

later when we actually build out our cart, because that's what that feature will be tied to.

And one more thing before we commit our code, we should add a little bit of padding on our overall

project so that it aligns closer to this.

So let's go into our app, DOT success, and let's do padding 20 pixels and 80 pixels.

So I want 20 pixels on the top and bottom and then 80 pixels on the side.

And now.

It looks closer.

So this may be a little bit more than what we had, so let's actually make this 60 pixels maybe.

It's a lot better.

That's pretty good.

So now let's commit our code.

Let's go back to our terminal.

Let's do a get and all right, let's see what we first have to commit.

OK, and then let's do get commit.

Updating our app with a shop page.

Collection, preview component and collection item component.

And now let's just get push origin master.

OK, our code is up.

Now let's move on.