1 00:00:00,360 --> 00:00:03,060 OK, now let's go ahead and create an alibi. 2 00:00:03,120 --> 00:00:08,160 So for that, we need to create a folder inside the source folder DSC folder. 3 00:00:09,440 --> 00:00:17,290 So we'll create a folder name as components, and inside this folder will be creating all of the NAB 4 00:00:17,300 --> 00:00:21,840 board had all four the search and display the result. 5 00:00:21,860 --> 00:00:25,730 All of the components basically will be created inside this component. 6 00:00:25,730 --> 00:00:31,640 So literally, no, there's no like particular naming convention that you need to name this world as 7 00:00:31,640 --> 00:00:38,840 components only you can name it to whatever you want, but generally, like we name it as components 8 00:00:38,840 --> 00:00:41,510 because we're going to store components in it, right? 9 00:00:42,020 --> 00:00:48,230 So we will create a file here named as Nevada Diaz. 10 00:00:48,830 --> 00:00:57,290 And inside the Nevada Jia's, we will get the boilerplate code using our extension, which is the Syrian 11 00:00:57,290 --> 00:00:59,120 Reactor Redux Graph. 12 00:00:59,180 --> 00:01:00,530 Create little snippets. 13 00:01:00,920 --> 00:01:05,960 So I will press control shift B and I'll do the snippet surgeon. 14 00:01:05,960 --> 00:01:11,480 And then I will put aside F.C and then I will get the boilerplate code for our. 15 00:01:12,510 --> 00:01:17,330 I never bought a component, so you can see that as an import that is an export design function and 16 00:01:17,340 --> 00:01:22,440 that it is a written statement to the function in which we will be writing the GSX. 17 00:01:23,340 --> 00:01:24,240 So far, so good. 18 00:01:24,270 --> 00:01:29,940 Now next, what we need to do is we need to install the crowd Dom for the outing and all. 19 00:01:29,940 --> 00:01:34,980 And like we will give the link inside the NAB board to react to the homepage. 20 00:01:35,340 --> 00:01:41,240 So for that, for using that link property, we will be needing be crowded on. 21 00:01:41,820 --> 00:01:44,250 So let us install react algorithms. 22 00:01:44,250 --> 00:01:44,760 So. 23 00:01:45,690 --> 00:01:51,960 You will need to go to the folder where your project is CD Projekt and Google Search. 24 00:01:52,290 --> 00:01:58,560 And instead of this, you will write npm or install whatever you can install. 25 00:01:58,860 --> 00:02:02,700 Or I would actually install the act. 26 00:02:03,860 --> 00:02:04,250 Rout. 27 00:02:06,670 --> 00:02:07,200 Two. 28 00:02:07,970 --> 00:02:13,370 This is the command which you need to execute in order to install the crowd dome. 29 00:02:13,760 --> 00:02:21,230 And and this will install the dome within a few seconds or after typing this command just to hit enter. 30 00:02:21,650 --> 00:02:28,070 And you will be getting it installed on your computer or on your project. 31 00:02:28,100 --> 00:02:30,330 OK, so I've already done there, so I will not do. 32 00:02:30,380 --> 00:02:34,490 But if you have not, if you haven't, you need to do it. 33 00:02:34,640 --> 00:02:38,630 So, OK, so I'll do this because I've already done that. 34 00:02:39,230 --> 00:02:45,350 Okay, so next, after doing that, the very first thing which we'll do is we'll import the link. 35 00:02:45,820 --> 00:02:49,220 Now what is the link that I will explain you once? 36 00:02:49,250 --> 00:02:54,500 Let me just been posted link up from. 37 00:02:55,840 --> 00:02:58,440 The rotor dome. 38 00:02:59,680 --> 00:03:02,350 So this is the package we just installed. 39 00:03:02,380 --> 00:03:02,590 OK. 40 00:03:03,640 --> 00:03:05,720 OK, so let's creating art now. 41 00:03:06,130 --> 00:03:07,000 Let's start creating. 42 00:03:07,000 --> 00:03:16,210 I never saw equity move this like a lot this do, but we will provide some classes to it on. 43 00:03:16,210 --> 00:03:23,350 Those classes will be related to the television theaters so that Desert and next I have created are 44 00:03:23,350 --> 00:03:24,340 global theaters. 45 00:03:24,340 --> 00:03:33,250 File here and that file is responsible for all the CCIs in one file, like the global success. 46 00:03:33,520 --> 00:03:38,530 Basically, it will be containing all of those cases which we are getting from the TSA. 47 00:03:38,540 --> 00:03:40,240 So let me assure you what you can do. 48 00:03:40,570 --> 00:03:46,840 So just create a global citizen file inside the source folder and just paste this two lines here. 49 00:03:46,840 --> 00:03:50,200 And imagine only this three lines are important. 50 00:03:50,620 --> 00:03:54,490 Only these three lines are there for your entire thesis in the. 51 00:03:55,960 --> 00:03:59,840 Project only these three lines are doing all you excuse us. 52 00:03:59,860 --> 00:04:04,900 Of course, we are getting things from one to six, but now we do need to type in excess. 53 00:04:05,590 --> 00:04:11,170 We just wanted to need to provide class names, got us last names according to our need. 54 00:04:11,500 --> 00:04:13,960 So that is what we are going to do right now. 55 00:04:14,290 --> 00:04:16,540 But we will be providing last names to this. 56 00:04:16,900 --> 00:04:17,440 So. 57 00:04:19,470 --> 00:04:28,830 US aim is equal to and now inside of this, we will right bedding life, putting more time should be 58 00:04:28,830 --> 00:04:29,340 zero. 59 00:04:30,090 --> 00:04:32,370 Max will be providing flex blocks. 60 00:04:32,730 --> 00:04:33,720 So this flex. 61 00:04:34,020 --> 00:04:36,120 This is exactly same as display flex. 62 00:04:36,570 --> 00:04:40,260 Inside we are just pruning Flex and Flex Wrap. 63 00:04:40,950 --> 00:04:43,980 And next, we will provide our. 64 00:04:45,700 --> 00:04:49,120 Small testify, we want to testify content. 65 00:04:50,450 --> 00:04:54,650 In between is between so and. 66 00:04:56,230 --> 00:04:57,130 This defy. 67 00:04:59,890 --> 00:05:03,900 Between DeFi, senator. 68 00:05:05,650 --> 00:05:12,760 OK, next, we'll be having the items in Decentraland Items Center, this item, satellite items center 69 00:05:12,760 --> 00:05:15,880 in the CCI's, and then we'll be having the border. 70 00:05:17,690 --> 00:05:19,820 And that will be. 71 00:05:22,020 --> 00:05:22,560 So. 72 00:05:28,010 --> 00:05:28,490 And. 73 00:05:29,500 --> 00:05:30,880 We will be having reporters. 74 00:05:33,690 --> 00:05:34,290 Border. 75 00:05:35,290 --> 00:05:37,030 It would be in the curriculum. 76 00:05:38,560 --> 00:05:38,890 The. 77 00:05:41,170 --> 00:05:43,900 Hundred and border. 78 00:05:45,840 --> 00:05:47,400 Would it be great? 79 00:05:48,440 --> 00:05:54,530 For doing that, you might be thinking how I know this, all of this and this thing glasses and also 80 00:05:54,530 --> 00:06:02,870 that I don't actually know, I just referred to the one CSA documentation now if we call a line by line, 81 00:06:02,870 --> 00:06:04,920 getting things from the tailwind seats. 82 00:06:05,270 --> 00:06:07,610 So that will be a little too long. 83 00:06:07,610 --> 00:06:09,770 And I thought our video will be to. 84 00:06:10,310 --> 00:06:10,740 Who might? 85 00:06:11,570 --> 00:06:13,070 It's stretched with that. 86 00:06:13,260 --> 00:06:19,090 So like it, if you come here and let me take you to the 20th of the. 87 00:06:21,340 --> 00:06:21,640 And. 88 00:06:23,950 --> 00:06:27,730 And then you go to the documentation part. 89 00:06:29,720 --> 00:06:30,740 This team right here. 90 00:06:32,350 --> 00:06:36,730 And you have every single thing, every single thing is there. 91 00:06:37,000 --> 00:06:41,650 You just this box, you're doing all these are all the properties, all the glass needles which are 92 00:06:41,650 --> 00:06:44,530 there, but you can see this glass names out there. 93 00:06:44,830 --> 00:06:50,140 So these things are actually there on the documentation and you can refer to it. 94 00:06:50,140 --> 00:06:53,950 But as of now, I will be just teaching you how to write and what to write. 95 00:06:54,190 --> 00:06:59,440 I will not be going to documentation and getting each line from there, copying, pasting, and that 96 00:06:59,500 --> 00:07:00,130 will not do. 97 00:07:00,430 --> 00:07:04,630 It'll just go to the mean part, which is required for us. 98 00:07:04,670 --> 00:07:05,740 That is that is it? 99 00:07:06,130 --> 00:07:06,520 OK. 100 00:07:06,790 --> 00:07:16,210 So after this, we will have another day, and if so, we'll create another Dave and Dave with the class 101 00:07:16,210 --> 00:07:16,780 name of. 102 00:07:22,150 --> 00:07:27,580 At the last minute, we'll be having the flags and we'll be having this to fight between. 103 00:07:31,910 --> 00:07:40,700 What remember had a small typo can mess up your styling because everything is like very sensitive, 104 00:07:40,700 --> 00:07:45,740 according to if you take a look at the case and also please be careful regarding the. 105 00:07:47,420 --> 00:07:51,980 So there will be a space bias and this would be the screen. 106 00:07:52,580 --> 00:07:56,300 So that is what I will be having the link. 107 00:07:58,330 --> 00:08:03,120 What's inside this definitely will be having a link to when you go inside, there's two. 108 00:08:05,010 --> 00:08:05,580 And. 109 00:08:07,090 --> 00:08:08,020 That is a link. 110 00:08:10,430 --> 00:08:17,060 OK, Linc property, our link is not self-closing, remember, that link requires closing back, it's 111 00:08:17,060 --> 00:08:19,370 not a self-closing tax, nor to. 112 00:08:19,670 --> 00:08:24,800 This, too, is the destination of where the link will take you to whenever you click on this link. 113 00:08:24,800 --> 00:08:29,510 So where you will go, that is the destination which is provided in there too. 114 00:08:29,930 --> 00:08:35,360 And here there will be a B tag inside which there will be class name because this obviously this is 115 00:08:35,360 --> 00:08:37,160 not a normal paragraph, posted the. 116 00:08:39,630 --> 00:08:41,400 Billion to assist paragraph 10. 117 00:08:41,880 --> 00:08:50,640 So we will write the last name is equal to and that will be the text of two excel. 118 00:08:52,360 --> 00:08:54,130 And color will be. 119 00:08:55,170 --> 00:09:06,210 New to new spellings right here, 500, this is the color, and actually we have the font as bold and 120 00:09:06,360 --> 00:09:06,810 text. 121 00:09:07,800 --> 00:09:09,170 Be quiet. 122 00:09:10,320 --> 00:09:11,430 That will be this. 123 00:09:14,790 --> 00:09:23,460 Go to and round, round and round and stuff, and that will be deep, dark background and. 124 00:09:24,870 --> 00:09:27,220 Decree, not pardon decree. 125 00:09:27,960 --> 00:09:33,210 It means simply means that darken the clear and critical at the next, we'd be having it dark. 126 00:09:34,800 --> 00:09:35,200 Next. 127 00:09:37,220 --> 00:09:37,940 He also. 128 00:09:40,770 --> 00:09:41,160 Gray. 129 00:09:42,400 --> 00:09:47,470 900, but this is the number which I'm typing here. 130 00:09:47,500 --> 00:09:51,030 This is the intensity of that particular class name. 131 00:09:51,340 --> 00:09:53,020 OK, so that is simple. 132 00:09:54,520 --> 00:09:56,050 Inside the space, we will right, 133 00:09:59,050 --> 00:10:04,970 obviously will not right or in the correct spelling of Google because we are not creating the exact 134 00:10:04,980 --> 00:10:05,370 tool. 135 00:10:05,980 --> 00:10:14,640 So here we will give emoji and a 30 emoji would be of searching like a magnifying glass or something 136 00:10:14,650 --> 00:10:15,040 like that. 137 00:10:15,850 --> 00:10:18,010 Let me search those missing. 138 00:10:18,810 --> 00:10:19,140 And. 139 00:10:21,990 --> 00:10:22,740 OK, this one. 140 00:10:25,150 --> 00:10:26,350 That looks cool, right? 141 00:10:27,040 --> 00:10:31,090 This is the like more which are going to use, Oh, you'll save it. 142 00:10:32,250 --> 00:10:32,690 So. 143 00:10:33,820 --> 00:10:38,950 Next, we will create some of the things, and I will create the pattern, like the button for white 144 00:10:38,950 --> 00:10:44,680 button for the dark mode, because dark mode button will also be dead inside the but only, but we will 145 00:10:44,680 --> 00:10:47,380 give deep dark mode button the button. 146 00:10:48,640 --> 00:10:52,300 And inside this, there will be the type of button. 147 00:10:56,350 --> 00:10:56,710 I. 148 00:10:58,160 --> 00:11:07,120 Or the type that it would be a button and then click on click inside this. 149 00:11:07,680 --> 00:11:14,120 That would be a function and in line for that or function, that function would be set. 150 00:11:16,220 --> 00:11:16,630 Are. 151 00:11:19,250 --> 00:11:25,730 This function will be making use towards the center, said a team. 152 00:11:27,140 --> 00:11:30,290 Would not be like it should be opposite of dark theme. 153 00:11:30,650 --> 00:11:34,760 If it is light to dark, if it is dark, subject light. 154 00:11:35,030 --> 00:11:35,750 Simple as that. 155 00:11:36,280 --> 00:11:39,410 OK, next we will be having a class name for that as well. 156 00:11:40,350 --> 00:11:44,690 So after that, we will be having a blast near glass name. 157 00:11:45,320 --> 00:11:46,340 Then we'll be having. 158 00:11:47,500 --> 00:11:49,180 So angst. 159 00:11:50,400 --> 00:11:53,280 Well, dark. 160 00:11:54,870 --> 00:11:57,230 Ground and. 161 00:11:59,220 --> 00:12:05,640 Basically, there are some gray like gray looks, we cooler, so that is 50. 162 00:12:07,140 --> 00:12:09,510 And we'll be having the. 163 00:12:16,800 --> 00:12:25,060 So this is for the text, and basically if you're if you're saving the time there by not writing this 164 00:12:25,100 --> 00:12:28,740 CSIS, the time is going basically here so. 165 00:12:29,740 --> 00:12:36,580 If you want to use, then only you should use this tailwind, see who says otherwise, I would recommend. 166 00:12:36,820 --> 00:12:37,540 You can try it. 167 00:12:37,690 --> 00:12:38,650 You can go for. 168 00:12:41,290 --> 00:12:51,770 The Amen sisters, so he will give the Florida border city rounded, floundered and wooden, and some 169 00:12:52,270 --> 00:12:54,670 like intensities will too. 170 00:12:55,350 --> 00:13:01,390 Yeah, this is the y coordinate like for the extraordinary coordinators to writing and for divine coordinators 171 00:13:01,870 --> 00:13:05,110 one day when we hover over it. 172 00:13:05,500 --> 00:13:08,110 So we can what we will get a schedule. 173 00:13:09,740 --> 00:13:12,510 Though it is not simple. 174 00:13:13,560 --> 00:13:18,300 Now inside this button, what we'll do is we'll create some JavaScript. 175 00:13:19,190 --> 00:13:19,520 So. 176 00:13:20,810 --> 00:13:29,090 There should be the dark theme, dark theme before it is dark theme, then show this icon. 177 00:13:29,870 --> 00:13:30,930 What is the icon? 178 00:13:30,950 --> 00:13:34,430 Let me make use of the emoji so. 179 00:13:35,550 --> 00:13:35,940 Well. 180 00:13:37,430 --> 00:13:43,520 Well, yes, this, but and we will write light. 181 00:13:44,510 --> 00:13:50,090 So next, we will be writing so tired of this. 182 00:13:50,510 --> 00:13:53,960 We'll make another use of technology to the Moon. 183 00:13:54,950 --> 00:13:56,450 The Moon is right here. 184 00:13:57,080 --> 00:13:58,550 You had to be in deep, dark. 185 00:13:59,550 --> 00:14:05,490 Dark wood, everything is good now, we will also add a search component, but as of now, we are just 186 00:14:05,490 --> 00:14:09,060 focusing on the Nova and actually creating this search component. 187 00:14:09,450 --> 00:14:10,410 Let me save it. 188 00:14:11,220 --> 00:14:11,580 And. 189 00:14:13,720 --> 00:14:16,840 We will see how how it's looking in the next few.