So now we'll be creating the component, which would be responsible for showing up data or displaying
the data basically on the screen, and which will also have the button to delete the post, which will
also provide us the ability to delete the post and basically delete all the title and the content.
And you'll have a button to read the post.
So let us create that.
So for that, we have to go to the SHC inside that inside the components folder and the header will
create the.
No.
Don't guess on note, GSX, whatever you can call, will grab the boilerplate code with the extension.
So how do we write to see and hear what will do inside the written?
We'll have an one inside the one that would be the title and inside here we'll have a beta version and
it's not showing me authorization yet, for sure.
Inside the bead, there will be the content right and content.
After that, we'll have a bottom button, basically, and it will certainly.
So we'll see if this.
And that said, basically, or you can just render it inside our app.
After the.
Create ADR will import.
Import note from.
Components splash not.
Yeah, you save it if you see a sideways running, no, it's not.
So we'll start this word with and PM.
Start, this will take a few seconds or till it starts.
Let us grab the note here.
North.
And so on this, I've just saved it.
And this is good.
So I saw what is just about to start.
Yeah, it's up and running.
And now we can go to sort of basically.
And.
Let me show you so this is the title of the contenders are delivered, and although you don't want things
to look like this, this is not any not so beautiful.
Well, that's why we need to give some styling to it.
So for that, we can go to the aid, and the very first thing is let me minimize the terminal and now
we'll give some classes to it.
So inside the boat.
So here will give a class name to this div.
That class name would be not.
Last name and it would be north naught, and we'll see it, so after that, oh, what we'll do is.
We'll go to Stallard Scissors and we'll provide this startling hit, so we'll give a comment that.
Or the North Pole?
Forth and.
Ahead, we'll do we'll get to now will give we'll grab dinner to discuss this particular nerd class
inside.
I feel the gravitas, but will do not.
And there will give our background there that will be of Stark.
And this particular one.
And after that, we'll have a read.
With two hardy pixels.
Yeah.
And after that, we'll have some border radius.
And that will be of seven pixels, basically, so and I save it and I go see if that is something,
of course, that is nothing.
And so what will do will add some water users to it.
So now we'll add the book shadow.
The shadow and that would be zero at the top and two pixels here and five pixels.
And turned out to be like the color.
And that would be one certify.
Uncertainty, fire.
And for the next one, it would be also on seventy five and same for this one also.
Seventy five coal.
So if you save it and show it to you.
I was looking.
When I go back, so you can see that is a little like box and there is a shadow to the box.
That is what we have just created.
OK.
So what we'll do next is when you give up bedding and bedding would be off and pixels.
And next, we will be giving a margin.
The margin would be 16 pixels, pixels.
And.
Let me say what and show it to you.
So that looks a little bit suspicious.
That is a space, a little bit space.
OK, so next we'll provide some more things, so then we'll be giving the floor.
It should be floating to the left of the float left.
Yup.
And there should be margin right on zero margin.
Right?
Should be of zero.
I see it.
And when I see here so that it, it's like floating to the left, the containers falling to the left
and there should be margin of right of zero.
So that is what we have just created, right?
So now what we'll do is a.
We'll give some styling to the H1 and then followed by the beat and then the button will go step by
step, so let us tailor each one tech first.
So we'll go here.
After that here, the sorry.
Sorry, Dot.
Not the notes note and each one.
And inside this, that would be the size.
The foreign size would be off for one idea, and next, we'll be having the margin bottom.
On June bottom of six percent.
Well, yeah, that's so cool.
And let me see how they're looking.
Yeah, that looks a little bit like tiny.
And it was so huge like before, but now it's like looking cool.
OK.
Next, we'll be styling the paragraph, so.
To be.
And inside this will be having a phone size of one IBM.
And next, we'll be having the color and the color will be a hex code.
So I knew what color it is that these six who want to be the standard one like dark red color and.
Basically, will having been have the margin of bottom of 10 pixels, we will save it and we'll call
it, we'll see.
The content is in this colour and that title is in this colour.
OK, we'll style it further.
It does go back and.
Now what we'll do is we'll give our white space now, white space is but even rap rap.
Now let me show you what it does.
OK, right now it is just like that, OK?
And then I called here.
Not here.
OK.
And I come here and I see white space freed up, you can see.
And see, that is that is a little bit of space.
Let me just come in and talk to.
It is like that, OK?
So it shows a little bit spacing, and yeah, so right now we'll do some good work.
So the next thing which will do is the bottom.
So for the partner, we might have to go to materially.
Why?
Actually, because it's always better to have an icon rather than text.
So what?
That's what we are going to do.
OK.
Oh, so for that, let me take you to material Joy.
And.
Inside of here, I come to the order and.
Yeah.
Why this site is not loading properly today.
OK, when I click here and buy for the lead.
There is some issue with the site apparently sure not beat delete.
Yeah, so we'll take this one.
I think this the Oakland one is okay and we just copy this and close it.
Now we will go to.
Now we don't need to start anymore, OK?
And now we'll go back to the previous one.
Let me go to the this here and we'll go to the criteria not to get the idea closer on the count.
The note.
William Porter, portraiture and inside the button, you can also import the pattern from material the
way you know.
And for that, we.
Let me just show you from where you can just grab Thebarton.
When you first of all, let us just give this here, so that will be lead.
The lead.
Out of line icon.
So, yeah.
It's like that and save it, and then I go to the browser and see why it's not trending.
Yeah.
This is the bottom right.
This is the bottom.
And basically, I grab a bite and also on this.
So like the material button that has a different styling that I do and that I think we could have from
bit off.
You are basically.
Let me see if that works in court.
Done gone.
The I.
And we with material, I guess they should work.
And I put it in like peak once.
So save it.
I don't know if it's work.
It's going to work or not.
See, and could the best.
Just not looking at what is taking too long.
Maybe you can find.
Oh, sure.
So in compiling bill for.
The problem?
Look, I don't know what's what is happening this, but there's a lot to do in this.
Right now, we want to add some functionality, also some dynamic state also or we have a lot of time
for this node component.
So that will do in the next video in like properly.