1 00:00:00,050 --> 00:00:00,350 All right. 2 00:00:00,350 --> 00:00:05,720 And once we're completely done with Landing Page, let's quickly set up a logo component. 3 00:00:05,750 --> 00:00:13,400 You see, we will use this logo in a few places so it makes sense to set up a separate component and 4 00:00:13,400 --> 00:00:18,680 that way we can skip on setting up the imports and setting up the return. 5 00:00:18,680 --> 00:00:25,100 Basically, every time we'll need to use Logo, we'll just import the component and effectively we want 6 00:00:25,100 --> 00:00:28,730 to set up a components folder where we want to create a component. 7 00:00:28,730 --> 00:00:35,690 And just like in pages, we also want to set up import and export in the index.js because there are 8 00:00:35,690 --> 00:00:38,600 going to be quite a few components. 9 00:00:38,600 --> 00:00:43,550 And just like with pages, it just makes sense to import from one place. 10 00:00:43,550 --> 00:00:47,660 So first of all, let me navigate back to my files. 11 00:00:48,050 --> 00:00:52,880 I'll close the wrappers and then in the source we want to create a new folder. 12 00:00:53,120 --> 00:00:57,080 We're going to call this components and inside of the components. 13 00:00:57,080 --> 00:00:59,060 First, let's start with the logo. 14 00:00:59,780 --> 00:01:03,570 And effectively, here's what we want to do back in the landing. 15 00:01:03,590 --> 00:01:09,380 Notice we're importing a logo image from the images. 16 00:01:09,380 --> 00:01:10,010 Correct. 17 00:01:10,040 --> 00:01:15,170 And the path stays the same because they are both in the same level. 18 00:01:15,350 --> 00:01:19,010 The landing one as well as the logo in the components. 19 00:01:19,010 --> 00:01:21,070 So we don't need to change that. 20 00:01:21,080 --> 00:01:23,060 So let's navigate back over here. 21 00:01:23,060 --> 00:01:26,900 And then as far as the return, well, I just want to return that image. 22 00:01:26,900 --> 00:01:33,350 So back in the landing, remember this guy over here, We can just cut it out and then. 23 00:01:33,590 --> 00:01:35,540 No, that's not what I wanted to do. 24 00:01:36,020 --> 00:01:37,040 Close all. 25 00:01:37,640 --> 00:01:37,940 Yep. 26 00:01:37,940 --> 00:01:41,150 Save and effectively, we just want to. 27 00:01:41,920 --> 00:01:43,950 Create the logo component. 28 00:01:45,030 --> 00:01:48,690 Let's say it's going to be our function and then. 29 00:01:49,410 --> 00:01:53,490 From this function, we want to return our image. 30 00:01:53,490 --> 00:01:55,560 So copy and paste, save it. 31 00:01:55,560 --> 00:01:58,590 And like I said, we also need to create that index. 32 00:01:59,260 --> 00:02:02,920 JS And we want to set up that import and export. 33 00:02:02,950 --> 00:02:05,140 Now if you want to save a little bit of time. 34 00:02:05,980 --> 00:02:10,449 You can just navigate to the index.js in the pages because again, the syntax is going to be exactly 35 00:02:10,449 --> 00:02:10,780 the same. 36 00:02:10,780 --> 00:02:13,570 The difference, of course, is going to be the file. 37 00:02:13,570 --> 00:02:16,960 So in this case, it's not going to be a dashboard layout. 38 00:02:17,170 --> 00:02:19,420 We are looking for the logo. 39 00:02:20,310 --> 00:02:21,870 Yep, that's the correct one. 40 00:02:21,870 --> 00:02:22,770 Let's save it. 41 00:02:22,830 --> 00:02:26,910 And now let's navigate to the landing one notice. 42 00:02:26,940 --> 00:02:30,330 Of course, we don't display the logo anymore. 43 00:02:31,350 --> 00:02:39,120 And now instead of the image, we're just going to look for Logo and I'll try to rely on my auto import. 44 00:02:39,120 --> 00:02:40,350 It should work. 45 00:02:41,030 --> 00:02:43,100 Now, for some reason it doesn't show. 46 00:02:44,010 --> 00:02:45,810 So let me see logo. 47 00:02:45,810 --> 00:02:48,120 And of course I didn't export from this one. 48 00:02:49,100 --> 00:02:49,790 My bad. 49 00:02:51,510 --> 00:02:51,930 Now. 50 00:02:51,930 --> 00:02:52,980 It should work. 51 00:02:53,720 --> 00:02:54,820 Let's refresh. 52 00:02:54,830 --> 00:02:55,250 Yep. 53 00:02:55,250 --> 00:03:00,740 Now I can nicely display the image and all the imports are in correct place as well.