All right.
And once we're completely done with Landing Page, let's quickly set up a logo component.
You see, we will use this logo in a few places so it makes sense to set up a separate component and
that way we can skip on setting up the imports and setting up the return.
Basically, every time we'll need to use Logo, we'll just import the component and effectively we want
to set up a components folder where we want to create a component.
And just like in pages, we also want to set up import and export in the index.js because there are
going to be quite a few components.
And just like with pages, it just makes sense to import from one place.
So first of all, let me navigate back to my files.
I'll close the wrappers and then in the source we want to create a new folder.
We're going to call this components and inside of the components.
First, let's start with the logo.
And effectively, here's what we want to do back in the landing.
Notice we're importing a logo image from the images.
Correct.
And the path stays the same because they are both in the same level.
The landing one as well as the logo in the components.
So we don't need to change that.
So let's navigate back over here.
And then as far as the return, well, I just want to return that image.
So back in the landing, remember this guy over here, We can just cut it out and then.
No, that's not what I wanted to do.
Close all.
Yep.
Save and effectively, we just want to.
Create the logo component.
Let's say it's going to be our function and then.
From this function, we want to return our image.
So copy and paste, save it.
And like I said, we also need to create that index.
JS And we want to set up that import and export.
Now if you want to save a little bit of time.
You can just navigate to the index.js in the pages because again, the syntax is going to be exactly
the same.
The difference, of course, is going to be the file.
So in this case, it's not going to be a dashboard layout.
We are looking for the logo.
Yep, that's the correct one.
Let's save it.
And now let's navigate to the landing one notice.
Of course, we don't display the logo anymore.
And now instead of the image, we're just going to look for Logo and I'll try to rely on my auto import.
It should work.
Now, for some reason it doesn't show.
So let me see logo.
And of course I didn't export from this one.
My bad.
Now.
It should work.
Let's refresh.
Yep.
Now I can nicely display the image and all the imports are in correct place as well.