OK, now let's go ahead and create an alibi.
So for that, we need to create a folder inside the source folder DSC folder.
So we'll create a folder name as components, and inside this folder will be creating all of the NAB
board had all four the search and display the result.
All of the components basically will be created inside this component.
So literally, no, there's no like particular naming convention that you need to name this world as
components only you can name it to whatever you want, but generally, like we name it as components
because we're going to store components in it, right?
So we will create a file here named as Nevada Diaz.
And inside the Nevada Jia's, we will get the boilerplate code using our extension, which is the Syrian
Reactor Redux Graph.
Create little snippets.
So I will press control shift B and I'll do the snippet surgeon.
And then I will put aside F.C and then I will get the boilerplate code for our.
I never bought a component, so you can see that as an import that is an export design function and
that it is a written statement to the function in which we will be writing the GSX.
So far, so good.
Now next, what we need to do is we need to install the crowd Dom for the outing and all.
And like we will give the link inside the NAB board to react to the homepage.
So for that, for using that link property, we will be needing be crowded on.
So let us install react algorithms.
So.
You will need to go to the folder where your project is CD Projekt and Google Search.
And instead of this, you will write npm or install whatever you can install.
Or I would actually install the act.
Rout.
Two.
This is the command which you need to execute in order to install the crowd dome.
And and this will install the dome within a few seconds or after typing this command just to hit enter.
And you will be getting it installed on your computer or on your project.
OK, so I've already done there, so I will not do.
But if you have not, if you haven't, you need to do it.
So, OK, so I'll do this because I've already done that.
Okay, so next, after doing that, the very first thing which we'll do is we'll import the link.
Now what is the link that I will explain you once?
Let me just been posted link up from.
The rotor dome.
So this is the package we just installed.
OK.
OK, so let's creating art now.
Let's start creating.
I never saw equity move this like a lot this do, but we will provide some classes to it on.
Those classes will be related to the television theaters so that Desert and next I have created are
global theaters.
File here and that file is responsible for all the CCIs in one file, like the global success.
Basically, it will be containing all of those cases which we are getting from the TSA.
So let me assure you what you can do.
So just create a global citizen file inside the source folder and just paste this two lines here.
And imagine only this three lines are important.
Only these three lines are there for your entire thesis in the.
Project only these three lines are doing all you excuse us.
Of course, we are getting things from one to six, but now we do need to type in excess.
We just wanted to need to provide class names, got us last names according to our need.
So that is what we are going to do right now.
But we will be providing last names to this.
So.
US aim is equal to and now inside of this, we will right bedding life, putting more time should be
zero.
Max will be providing flex blocks.
So this flex.
This is exactly same as display flex.
Inside we are just pruning Flex and Flex Wrap.
And next, we will provide our.
Small testify, we want to testify content.
In between is between so and.
This defy.
Between DeFi, senator.
OK, next, we'll be having the items in Decentraland Items Center, this item, satellite items center
in the CCI's, and then we'll be having the border.
And that will be.
So.
And.
We will be having reporters.
Border.
It would be in the curriculum.
The.
Hundred and border.
Would it be great?
For doing that, you might be thinking how I know this, all of this and this thing glasses and also
that I don't actually know, I just referred to the one CSA documentation now if we call a line by line,
getting things from the tailwind seats.
So that will be a little too long.
And I thought our video will be to.
Who might?
It's stretched with that.
So like it, if you come here and let me take you to the 20th of the.
And.
And then you go to the documentation part.
This team right here.
And you have every single thing, every single thing is there.
You just this box, you're doing all these are all the properties, all the glass needles which are
there, but you can see this glass names out there.
So these things are actually there on the documentation and you can refer to it.
But as of now, I will be just teaching you how to write and what to write.
I will not be going to documentation and getting each line from there, copying, pasting, and that
will not do.
It'll just go to the mean part, which is required for us.
That is that is it?
OK.
So after this, we will have another day, and if so, we'll create another Dave and Dave with the class
name of.
At the last minute, we'll be having the flags and we'll be having this to fight between.
What remember had a small typo can mess up your styling because everything is like very sensitive,
according to if you take a look at the case and also please be careful regarding the.
So there will be a space bias and this would be the screen.
So that is what I will be having the link.
What's inside this definitely will be having a link to when you go inside, there's two.
And.
That is a link.
OK, Linc property, our link is not self-closing, remember, that link requires closing back, it's
not a self-closing tax, nor to.
This, too, is the destination of where the link will take you to whenever you click on this link.
So where you will go, that is the destination which is provided in there too.
And here there will be a B tag inside which there will be class name because this obviously this is
not a normal paragraph, posted the.
Billion to assist paragraph 10.
So we will write the last name is equal to and that will be the text of two excel.
And color will be.
New to new spellings right here, 500, this is the color, and actually we have the font as bold and
text.
Be quiet.
That will be this.
Go to and round, round and round and stuff, and that will be deep, dark background and.
Decree, not pardon decree.
It means simply means that darken the clear and critical at the next, we'd be having it dark.
Next.
He also.
Gray.
900, but this is the number which I'm typing here.
This is the intensity of that particular class name.
OK, so that is simple.
Inside the space, we will right,
obviously will not right or in the correct spelling of Google because we are not creating the exact
tool.
So here we will give emoji and a 30 emoji would be of searching like a magnifying glass or something
like that.
Let me search those missing.
And.
OK, this one.
That looks cool, right?
This is the like more which are going to use, Oh, you'll save it.
So.
Next, we will create some of the things, and I will create the pattern, like the button for white
button for the dark mode, because dark mode button will also be dead inside the but only, but we will
give deep dark mode button the button.
And inside this, there will be the type of button.
I.
Or the type that it would be a button and then click on click inside this.
That would be a function and in line for that or function, that function would be set.
Are.
This function will be making use towards the center, said a team.
Would not be like it should be opposite of dark theme.
If it is light to dark, if it is dark, subject light.
Simple as that.
OK, next we will be having a class name for that as well.
So after that, we will be having a blast near glass name.
Then we'll be having.
So angst.
Well, dark.
Ground and.
Basically, there are some gray like gray looks, we cooler, so that is 50.
And we'll be having the.
So this is for the text, and basically if you're if you're saving the time there by not writing this
CSIS, the time is going basically here so.
If you want to use, then only you should use this tailwind, see who says otherwise, I would recommend.
You can try it.
You can go for.
The Amen sisters, so he will give the Florida border city rounded, floundered and wooden, and some
like intensities will too.
Yeah, this is the y coordinate like for the extraordinary coordinators to writing and for divine coordinators
one day when we hover over it.
So we can what we will get a schedule.
Though it is not simple.
Now inside this button, what we'll do is we'll create some JavaScript.
So.
There should be the dark theme, dark theme before it is dark theme, then show this icon.
What is the icon?
Let me make use of the emoji so.
Well.
Well, yes, this, but and we will write light.
So next, we will be writing so tired of this.
We'll make another use of technology to the Moon.
The Moon is right here.
You had to be in deep, dark.
Dark wood, everything is good now, we will also add a search component, but as of now, we are just
focusing on the Nova and actually creating this search component.
Let me save it.
And.
We will see how how it's looking in the next few.