OK, so now let's go ahead and map everything.
No map every like whatever the data we had.
So let's go to the abductees file and let's map the data and let's bring out everything and let's import.
First of all, let's import the single color component.
We have not yet important it.
So import and single color.
Single colour from single color.
Cool, cool, cool, cool.
So now what we'll do is we'll go here, this section right here.
So this we already created how this we have created just for the single color, like we advanced, like
created this so.
First of all, let me give it a class name or last name would be Carlos.
Because this these are the colors.
So inside this will return our single component.
So before that, we will use the map function because we are going to map the data one by one, each
by each.
So for that, we'll be using JavaScript.
So that's why I'm using this curly braces.
Inside this, I will map the data one by one.
Before that, we use the map function.
Now, what are we going to map?
We are going to map this.
This list.
You see this list right here, because this is the list which will give us all the data, all the colors
related to our search keyword will be stored in this list.
So that is what we are going to map.
So let us go and map the data.
Inside this.
Curly braces will write list dark map.
We are mapping this, so it expects a function.
So what is the argument which we are passing?
Is the color not colored?
And we are also passing the Index Index Value Index and what this will return.
Is this inside the skull says what are we going to let on?
So then we'll write the written statement.
So that will be written and we will return a component of GSX.
So that's why we will use this parenthesis and inside to spell it.
This is we will return a single color component.
All right now, we will write the single conduct.
Single color component.
And that's all this is our single color component doses that are done.
But now we can't rely on it just like that.
We have created that component and you all know to be a part.
Some of the props here, do you see that are for profit, that are to be weight index and X color?
So that needs to be given some value.
OK.
So the the props needs to be parsed.
OK, inside this component, the protein needs to be passed.
So let's just go ahead and pass props.
First of all, let me just give the key, because in this key is required without the key, it will
not be able to differentiate or undermine what is and which Canada.
So Index will be the key index value.
Generally, the key?
OK, now we will use the color.
Now what color is, is the written word.
What are the colors which are daunting so that we need to like this structure, the colored object?
So for that, I'll use the calibrated and then I will do these structures.
So we will use the spread operator to a operator is starts one, two and three three dot and after that,
the name of the object.
Color.
And next, we will ride the index.
Now what is the index so we can also ride index by in the spirit operator that like this index, but
we can ride like this.
Also, we'll make the index equal to and inside this that is like GSX or JavaScript, but they're going
to be index.
OK.
Fair enough.
So far, so we're now what we'll do is we'll return the hex color now, hex color and really, really
important because that is what that is, what we'll be copying and we'll be displaying.
So now we'll do Hex.
Color is equal to.
Coloured Dark X.
Now, let me just say it, so it will beautify my component.
So yeah, one more thing if you want to like format your code automatically so you can just download
this extension.
You can just install this extension, which is let me assure you, that extension is prettier.
I use that on only.
This one word format.
This is a really, really beautiful extension.
What it does is every time when you see will fail, so it automatically formats and like effectors,
the code and it looks so beautiful and oranges.
Is let me go back.
So that's why when I say before saying it was sky go and when I saved it, so it came back to it like
it and garden and all that and then got all these in order.
So that is what we have done on save.
Now, let us go and give some styling to this, this entire section that is the colored section.
So let me go to the next door to the CSIS file.
And here I will write some cases for the close.
So.
For the collards, I invite t o scholars and I'll give some styling to the scholars plus.
First of all, we are giving our height, so there will be.
Let me just first of all, run.
And see how things are going.
And.
You see, for what is running.
It's stunning.
OK, in ordering you to import UI inside where?
This.
Oh, my God, why are you important dates?
You don't need to be to have sex.
On on, on on.
I admit the House is not going to find a way to hacks should be.
And you too had already imported from the.
OK, I've used this opportunity.
OK, so this capital t should be used and also.
They're not saying it.
Now, let me just go back to the mine.
Uh.
The.
Oh, things are going OK.
You can see we are getting the colors and we are also getting this hex code and we are getting the percentage,
but it's not showing the percentage sign.
Maybe just we missed out the percentage sign of can we'll pull back and you can see that our key is
to every color and when and when we.
Like any of it, it's not throwing us.
Thank.
It's not forcing us to copy him right now.
OK, and maybe maybe we need to work on it, to work on it.
OK, so now we'll do it.
Let me throw it for.
Well, OK, I got.
Right now, the we close this.
Competing, OK.
We'll work on it next.
We'll go ahead and provide some styling to.
Who this?
Components like this section, close scrutiny next door to free access, and it will provide some styling.
So that will be colored glass.
No.
Let's provide the class here, and the class would be colors.
Oh, I'm thinking, what color should we give?
That's called.
And.
What should we give, most of all, let me give the heart.
And the minimum.
Height should be calculated according to the width of the screen that should be.
But it would be if you hide and.
Maybe 100 pixels.
Oh, 100.
Next, we'll be displaying and because right now, if you go to the browser and see they are, they
are not in the grid.
They are in the roadways.
I don't want to, not always.
I want in the column by the grid format.
So that is what I wondered in the grid format.
So that is what I want.
So right now, what I'll do is I'll provide grid for display and grid.
So now I'm going to see you and I go back here.
That some.
Long.
Because I have not given the great template yet, so that is my story.
If I knew we had arrived.
OK, it's working, but let me give the great light template, so inside after this cleared out will
do is that we'll give the grade.
Template.
Two columns and that will be repeated.
And inside this repeat, that will be part of it.
But next, there will be a maximum and minimum value to Minimax Min Max, and it will have like I've
already decided that have already like checked how much how would look for that time next to twenty
three point thirty three pixels?
And that is one.
Thank you, ma'am.
Next, we'll do the same for the great template rules this we have done for the great template columns
and all we'll do for the great template rules or we'll type coded.
Template, not for long to me, roars.
And here it will be repeat.
And inside this, it will be part of it.
And.
They may ask this, but there will be some things different, so there will be minimax.
And inside this will pass some of the things, so that will be 96 pixels and 96 pixels.
And one of.
That is what it is.
And I save it, and I go back to my project.
Spin things are not working.
OK, why this is not working CSIS.
Maybe we have given.
Let me give some noble thesis here, who and the do or I can give it some more time.
There's no need for it.
So we'll right here.
Global sea assets.
Oh, yeah.
Commenting, Prince, yes, is a different global CSIS.
And I've come commented that line, and now I'll give the normal CSIS so that we are giving for the
section, OK, for the sections that is over, there is a weight of 90, if you will, with nine TV
over and.
There's a margin so top and bottom, the margin is zero and left and right, the margin is auto.
That means equal.
Next, we we are having a maximum Brent or Max with inside this, we have that.
And the max is Max.
Event.
I want to see it.
No, and I go to the browser, Bill.
We don't see any reflection on who we.
Importing this.
Ryan Gosling follows.
OK, there needs to be more CSIS.
We need to provide some more serious, sincere.
So for that.
Let me see now.
OK, so I added some extra courses here, but I do not want to deal with that because that's a normal
course, so I will just review it once, whatever I did.
But I did some form families and all that is OK, but here I did.
Some like this letter spacing next to information and the line at the line height and the font size,
which is really, really important.
So that was also affecting our product.
So I have like declared the font size here to the 81, the tools and the bags.
And this is the media screen is the minimum with four 800 pixels.
This is the font size.
So that means.
For the laptop, so that is what I do, and this global CEO says we have already seen and this all we
have already done.
For now, let us go to our browser.
And check.
Now looks good, but still, we are not getting the copy to pay for functionality.
So why is that happening?
Oh, Blue, OK.
Everything is working, so we are left out with two things that this person did sign is not here and
we are not able to like copy to clipboard, but that will do in the next video.