1 00:00:00,780 --> 00:00:05,520 At long last we finally got all this information fetching stuff complete so we can focus back on creating 2 00:00:05,520 --> 00:00:09,790 that header component that's going to be common to all of our different pages to get started. 3 00:00:09,810 --> 00:00:13,740 I got to find the client directory and they're going gonna make a new folder called components. 4 00:00:13,850 --> 00:00:17,310 So instead of here we're gonna place all the different reusable components we might need inside of our 5 00:00:17,310 --> 00:00:22,100 app inside there and then make a header dot J.S. file. 6 00:00:22,170 --> 00:00:27,240 So inside of here we really want a pretty basic header pretty much what we saw back inside our mockups. 7 00:00:27,240 --> 00:00:31,240 So she's going to be something that shows a label on the left hand side or a logo of sorts. 8 00:00:31,260 --> 00:00:35,590 I imagine Colin's application get ticks a little pun I suppose. 9 00:00:35,610 --> 00:00:36,560 Call it whatever you want. 10 00:00:36,570 --> 00:00:37,720 Not really big difference. 11 00:00:37,740 --> 00:00:41,340 We just need to make sure that the links on the right hand side are going to change depending upon whether 12 00:00:41,340 --> 00:00:43,430 or not the user is signed in. 13 00:00:43,430 --> 00:00:47,880 That means that we're going to have to create this component and expect that it's going to receive a 14 00:00:47,880 --> 00:00:52,210 prop of whoever the current user is. 15 00:00:52,270 --> 00:00:58,630 So instead of here at her Dot J.S. I'm going to do an export default and I'm going to expect that this 16 00:00:58,630 --> 00:01:03,540 thing is going to receive a prop called current user. 17 00:01:03,550 --> 00:01:07,810 So if current users equal to an object that means we must be signed in and we want to show a link that 18 00:01:07,810 --> 00:01:09,460 will allow the user to sign out. 19 00:01:10,060 --> 00:01:11,780 If current user is equal to null. 20 00:01:11,800 --> 00:01:16,570 That means we need to show links that will allow user to actually sign in or go to sign in or sign up 21 00:01:16,570 --> 00:01:18,480 page. 22 00:01:18,510 --> 00:01:18,810 All right. 23 00:01:18,900 --> 00:01:22,760 So right now let's just focus on showing some content to the user. 24 00:01:22,830 --> 00:01:24,970 I'm gonna place a nav inside of here. 25 00:01:25,230 --> 00:01:35,100 I'm gonna give it a class name of Navarre nav bar dash light and BD light then inside of you're gonna 26 00:01:35,100 --> 00:01:38,050 want to show an anchor element on the left hand side. 27 00:01:38,220 --> 00:01:42,210 So this get tix thing that should actually be a link that the user can click to go back to our main 28 00:01:42,270 --> 00:01:46,020 landing page in order to display a link with Next G Yes. 29 00:01:46,110 --> 00:01:48,630 We do not just put in a normal anchor tag. 30 00:01:48,820 --> 00:01:54,780 Instead we're going to use a custom component that's been created by link or speed by Next j s called 31 00:01:54,870 --> 00:01:55,880 Link. 32 00:01:55,920 --> 00:01:59,930 So the very top I'm going to import link from next link. 33 00:02:01,510 --> 00:02:06,190 And then right here where I want to display this anchor tag that's gonna go back over to my main landing 34 00:02:06,190 --> 00:02:06,570 page. 35 00:02:06,580 --> 00:02:15,580 I'm gonna put in link H ref a forward slash that will take me back to my main landing page or essentially 36 00:02:15,580 --> 00:02:17,700 my route routes then inside of here. 37 00:02:17,710 --> 00:02:23,200 We still do have to display an anchor element to the link itself is not can actually create an anchor 38 00:02:23,200 --> 00:02:29,140 for us so we can click on we have to place the link and the display an anchor link inside open and a 39 00:02:29,620 --> 00:02:36,300 class name of nav bar rant then I'm going to stick with the logo I showed. 40 00:02:36,300 --> 00:02:42,860 So get tickets like so soon after that I want to show the links over here on the right hand side. 41 00:02:42,980 --> 00:02:51,950 So either sign out or sign in and sign up looking to place a div with the class name of D dash flex 42 00:02:53,380 --> 00:02:56,520 justify content end 43 00:02:59,200 --> 00:02:59,880 inside of there. 44 00:02:59,890 --> 00:03:09,540 I'll show a L with the class name of NAV D dash flex a line items center no close off the well 45 00:03:12,410 --> 00:03:13,030 inside of here. 46 00:03:13,040 --> 00:03:17,820 We're going to eventually show a couple of different links either to sign out or sign up and sign in. 47 00:03:17,930 --> 00:03:22,550 Right now let's just try to take a look at that current user prop and display some text that says you 48 00:03:22,550 --> 00:03:24,300 are signed in or you are signed out. 49 00:03:24,730 --> 00:03:28,360 Well eventually then come back and replace it with some different elements to actually display. 50 00:03:28,370 --> 00:03:34,600 A user can click on so I can take a look at current user I can use that ternary expression and I can 51 00:03:34,600 --> 00:03:43,530 say if current user is defined then I want to show the text of sign out otherwise I'll show the text 52 00:03:43,530 --> 00:03:48,620 a sign in slash up so again we'll eventually come back and fix this up. 53 00:03:48,890 --> 00:03:52,570 But right now good enough to just make sure this thing works all right. 54 00:03:52,570 --> 00:03:57,310 I'm gonna say this file and then going to make sure this header component actually gets displayed by 55 00:03:57,310 --> 00:04:01,160 going back over to my custom app component at the very top. 56 00:04:01,160 --> 00:04:08,740 I'm going to import the header from up one directory components better and then I'll replace the one 57 00:04:08,740 --> 00:04:16,810 we have right here with header and of course we need to make sure that we pass down that prop of current 58 00:04:16,810 --> 00:04:17,780 user. 59 00:04:17,930 --> 00:04:22,050 We'll say current user is user. 60 00:04:22,320 --> 00:04:23,530 Let's say this. 61 00:04:23,780 --> 00:04:29,490 I'm going to flip back over refresh and now we'll see this header at the very top. 62 00:04:29,500 --> 00:04:33,150 I am currently signed in so the text I see right here says sign out. 63 00:04:33,320 --> 00:04:35,300 That's exactly what we want. 64 00:04:35,330 --> 00:04:39,620 Now let's test the case in which we are not signed in so I'll once again go to that application Tab 65 00:04:40,020 --> 00:04:41,620 I'm going to clear my cookie. 66 00:04:41,840 --> 00:04:47,230 I'm going to refresh and now I am not signed in and the header reflects the same thing as well. 67 00:04:47,270 --> 00:04:55,130 Perfect well this is looking pretty good now all we need to do is make sure that rather than having 68 00:04:55,130 --> 00:04:59,690 that plain text right there I want to show an actual collection of links without the user to sign out 69 00:04:59,990 --> 00:05:01,910 or sign in or sign up. 70 00:05:02,210 --> 00:05:04,550 Quick Basra here and continue on this in just a moment.