OK, so now let's move to the north component, which we left and complete.
So inside of here, inside the north component or bust, let us create the basic structure.
And later on, we'll give some functionality to it.
Yeah.
So inside the rotunda, what we'll do is we'll have our day.
It's obviously there and we'll have these bring back.
I'll spend back.
Inside of a spent, I will have some text we'll just provide next.
And here and after that, we'll be having our dev, which will be for the footer like footer of the
node component, so that will be active.
And inside the do, there will be a small, more tag.
OK, small, and that will be responsible for showing the dead.
Let me just hardcoded right now, that will be 20 may be it or well.
90 to 10.
IT 2021.
What about this a dummy date, which I came up with is not to this night, to more or less nothing.
I just came up with this, OK?
So yeah, it will be having the date.
And next, it will be having a button to delete the review.
The next, we'll be having a button.
Let me push the button from Italia.
Let me copy that button thing.
Yeah, this one.
But I was I was here.
Yeah.
So let me be straight in here.
And after these small tag, I will have a button.
So on we come here.
And that will be bottom like that.
It will also give me the closing back closing tag is important, remember?
Now I will need an icon, which is the delete icon.
So let me see.
Right.
And I find it, so I'll go to materialI.
Obviously, there's only one place that I can find it and actually not the only one place.
There are other places, but I like to use this.
Okay, so inside this, we'll have the details here, and it will show me all the icons letter to the
delete key.
You know which ones we are going to use?
Okay, basically, this one looks better now because it has an outline, so I'll copy the import.
And I will go back.
And so I am sure that that bit of good and inside of this inside the button, I'll delete.
So that is the lead, I can describe it.
That's even easy, and that's accurate because I don't want to get typos.
OK.
I say this.
And now we have the button, which is delete button and let me just read embedded inside their bodies
to see their talk and find.
Import.
Nor from.
And then we save it after the L.A..
Well, before the advent of sea.
And.
Let us see.
Now we can go to the browser and check.
We come here and you can see there's a text, which will basically be our review.
We have the date and we also have the delete button.
Oh, that is so cool.
And what I'm thinking is that why don't we give this up color?
This delete button should be given a color because that is the danger.
So let me give the color where I can get the colors.
What is the I think it's the danger button outline and.
I don't.
We.
We want to hear.
And for the close.
And two.
I can give this OK.
And I'm going to give you some background color, maybe.
Let me see.
Who inside the north?
The color.
No loans at this time.
What I'm doing.
Style.
They're not going to do that when I say it.
Oh, I don't think so.
That doesn't work there to school and see.
I knew it.
I knew what I knew.
And there's another way of giving let me google it to how to.
How to change how a nurse or.
Theory in the.
I can't.
I think we finally know.
OK, Phil, OK, Phil, is the keyword.
I hear a lot we can do like this caller.
Yeah.
So inside of this, I can give this to Phil or color should be danger.
I can go over this.
And I will give it to this.
Not this time, because it doesn't work.
But low should be.
Be injured.
We save it and we go back.
And when I come back here, it doesn't do anything.
What is the we?
Across the country from Sale Oak, I use background, Oh, that was my bad.
And this copy is see.
And now I come here and wait.
Look, I'm doing this in front of you because I want to teach you how to search for gold over the internet
on StackOverflow, because that's the only way.
Yeah, now it's right.
There is what we were trying to do.
Okay, so much time ahead and do that.
But now what we'll do is we will give some other classes and functionality functionality to wait till
the very first thing.
Let me give a class name for this.
Let me minimize determinist.
So the class name would be not.
Class name would be north.
And a name for this day right here, that would be the note for the.
Last name.
No, put.
Well, fair enough.
Yeah.
And the name for this and we taken, but I don't want to give any last name already given this title.
The limestone.
OK, now I would go to the next door to CSIS and inside of you.
I will style this.
So what was the last name note?
No.
And inside of this, I'll give the background color, background color and that it would be a hex code,
which will be d1e d1e and eighty four.
That's good.
Next, we'll be having the border radius, border radius of 10 pixels.
And upgrading of one audio.
And next, we'll be having the I and with two with will leave for now, we'll just give the height.
So minimum height should be the 170 pixels.
And then we'll have the display flex, of course.
Display next, and we save it now, we can go and see how that looks.
That looks pretty good, but not so good.
I will make it look good.
Don't worry.
So after the Flex will give the Flex deduction its column like direction column and after this will
justify the content, the space between justify content space between.
OK, and then we'll give some white space.
Why space should we private that?
We wrap.
OK, save it.
And come back here.
Going to see things start to look a little bit better.
Of course not.
Awesome.
Right now, it's not awesome.
I can agree with you, but a not so bad.
OK, so next do we create the naughty list?
And that is the component we should be responsible for displaying all of this.
But before that?
Let us give some JavaScript to the North component.
OK, so the very first thing is which we'll pass on broadband inside this.
So what would be the props the props would be?
Text for the date and the handle the lead not.
And the.
They need.
What?
We say it.
Yeah.
But the dynamic values will not be given as of now because we'll be trying to render them inside the
app and that we will try to give value to this props right now.
I don't think it's a good idea to like, give all of the values because all of the components will be
reporting to the audience and everything would be happening from there.
So I am not thinking of doing it right now.
But.
This was OK.
This will be changed to dynamic this text, the date will be changed to dynamic and what not.
We'll have a handle change or nontraditional changes and we'll delete button inside.
This button will have a function that will be on click.
Oh, that's so simple on click will be there here.
And that is it.
Next will be creating the note list.
I think that will be the last one and then will directly jump on to the Abdel-Aziz and we'll grab every
single piece of data and render it inside the AMBODE'S file.
So we'll see in the next video.