Okay.
So in this video, I want to create two components that are related to the UI.
A message component.
So when we have messages, it'll be wrapped in some kind of alert box.
And then also the loader.
Right now we just have an H two that says Loading.
So pretty simple.
Let's just go into our components folder and let's create a file.
We'll call it loader dot JS.
Now React Bootstrap actually has a spinner component that we can use.
So let's say import the spinner.
From React Bootstrap.
And then let's say.
And we'll call it loader.
So as far as what we want in here, we're going to return the spinner component.
So let's say Spinner, and then there's some some props that we can pass in.
So I'm going to say animation border and say roll status for the style.
We're going to have it 100 pixels for the width and then 100 pixels for the height margin auto because
we want it in the middle.
We want to display it as a block.
All right.
So.
That should do it.
And then we just want to close.
Close that spinner.
Actually, I think we have to do it like that.
I think it has a closing or it may not matter, but let's go ahead and try that.
So we'll save and then we're going to go into the home screen.
And bring in that component.
So let's say import.
Loader.
And let's see, we just want to put it right here.
Instead of having this H two, we're going to have the loader component.
So now if I save and we come back here and reload, you can see we get the spinner.
Now I want to do the same thing for the single product here.
So let's go into product screen.
And let's bring it in right here.
We'll say import loader.
And then just replace this H two.
And then that should do it.
So if I reload now, I can see that loader real quick.
All right.
Now the message component.
We're going to create a new file in components and let's call it message dot JS.
Dot.
JS and then let's say FC.
And then what we want to bring in here is the alert component from React Bootstrap.
So let's say import and then alert from React Bootstrap.
And this is going to take in two props.
So let's destructure and it's going to take a variant.
So variant and then children.
So variant is just like if it's a danger.
So if we want it to be read or if we want it to be success, which would be green, etcetera, and then
children is just whatever.
We're wrapping it, right?
If we have a message that says Hello, some text that says hello and we wrap it in the message component,
then that hello is going to be spit out here.
So what we want to return.
Is going to be alert and the variant is going to be equal to whatever the variant is.
And inside the alert will be children.
Whatever is being wrapped will be output there.
And then I'm going to make the default variant.
I'm going to just do info, which I believe is like light blue.
So to do that we can say message dot and then let's add default props and set the variant to info.
And we'll save that.
All right.
Now what we'll do is if we have an error.
So let's go to the home screen.
If we have an error instead of just putting it in a div, we'll put it into the message component.
So let's bring that into home screen.
So import message.
And let's replace this div with message.
And then since this is an error, we want to use the variant of danger.
So let's say variant and we're going to set that to danger.
All right.
That way it will be read.
And then we'll just.
We'll just copy this and let's go save that and let's go into the product screen and put that here.
Same thing.
We can import this.
So if we go to the end of message and we do, I think it's Command I or control I, then we can choose
it to auto import.
So it should be brought in up here.
I'm just going to move it with the other components.
All right.
So we'll save that.
And now that should work.
And just to test the message, I'm just going to copy this temporarily.
Put that in there and let's say hello.
And now you can see that that works.
And if I change the variant to, let's say, success.
Then it's green and the default should be info.
So if I don't pass in any variant, then it's blue.
Okay, so now we have those two UI components set up.
So now what we're going to do is move on to the next section where we implement the cart functionality.