At long last we finally got all this information fetching stuff complete so we can focus back on creating
that header component that's going to be common to all of our different pages to get started.
I got to find the client directory and they're going gonna make a new folder called components.
So instead of here we're gonna place all the different reusable components we might need inside of our
app inside there and then make a header dot J.S. file.
So inside of here we really want a pretty basic header pretty much what we saw back inside our mockups.
So she's going to be something that shows a label on the left hand side or a logo of sorts.
I imagine Colin's application get ticks a little pun I suppose.
Call it whatever you want.
Not really big difference.
We just need to make sure that the links on the right hand side are going to change depending upon whether
or not the user is signed in.
That means that we're going to have to create this component and expect that it's going to receive a
prop of whoever the current user is.
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
thing is going to receive a prop called current user.
So if current users equal to an object that means we must be signed in and we want to show a link that
will allow the user to sign out.
If current user is equal to null.
That means we need to show links that will allow user to actually sign in or go to sign in or sign up
page.
All right.
So right now let's just focus on showing some content to the user.
I'm gonna place a nav inside of here.
I'm gonna give it a class name of Navarre nav bar dash light and BD light then inside of you're gonna
want to show an anchor element on the left hand side.
So this get tix thing that should actually be a link that the user can click to go back to our main
landing page in order to display a link with Next G Yes.
We do not just put in a normal anchor tag.
Instead we're going to use a custom component that's been created by link or speed by Next j s called
Link.
So the very top I'm going to import link from next link.
And then right here where I want to display this anchor tag that's gonna go back over to my main landing
page.
I'm gonna put in link H ref a forward slash that will take me back to my main landing page or essentially
my route routes then inside of here.
We still do have to display an anchor element to the link itself is not can actually create an anchor
for us so we can click on we have to place the link and the display an anchor link inside open and a
class name of nav bar rant then I'm going to stick with the logo I showed.
So get tickets like so soon after that I want to show the links over here on the right hand side.
So either sign out or sign in and sign up looking to place a div with the class name of D dash flex
justify content end
inside of there.
I'll show a L with the class name of NAV D dash flex a line items center no close off the well
inside of here.
We're going to eventually show a couple of different links either to sign out or sign up and sign in.
Right now let's just try to take a look at that current user prop and display some text that says you
are signed in or you are signed out.
Well eventually then come back and replace it with some different elements to actually display.
A user can click on so I can take a look at current user I can use that ternary expression and I can
say if current user is defined then I want to show the text of sign out otherwise I'll show the text
a sign in slash up so again we'll eventually come back and fix this up.
But right now good enough to just make sure this thing works all right.
I'm gonna say this file and then going to make sure this header component actually gets displayed by
going back over to my custom app component at the very top.
I'm going to import the header from up one directory components better and then I'll replace the one
we have right here with header and of course we need to make sure that we pass down that prop of current
user.
We'll say current user is user.
Let's say this.
I'm going to flip back over refresh and now we'll see this header at the very top.
I am currently signed in so the text I see right here says sign out.
That's exactly what we want.
Now let's test the case in which we are not signed in so I'll once again go to that application Tab
I'm going to clear my cookie.
I'm going to refresh and now I am not signed in and the header reflects the same thing as well.
Perfect well this is looking pretty good now all we need to do is make sure that rather than having
that plain text right there I want to show an actual collection of links without the user to sign out
or sign in or sign up.
Quick Basra here and continue on this in just a moment.