set up and ready to go. So first let's move our welcome page into a separate directory called pages inside of our views directory.

So let's go and create a new folder and let's call this pages and then we'll just want to move our welcome page directly into there. Next we'll need to move into our routes to make that adjustment.

So render just changes to pages slash welcome. Cool. So we should be good there. Now we're going to create all of our pages inside of the pages directory just kind of keep them separated from everything else.

Now for our layout we're going to do something a little bit different since we're focusing on components within this series. We're not going to use your typical layout to create our actual layout.

Instead we're going to use a component to create our layout. So let's go ahead and get our components set up here. Within our project we're going to want our components to reside underneath the views

directory inside of a new folder and we'll want this folder to be called components. We'll do a slash. Now we can place all of our layouts inside of a separate folder inside of components

called layouts and then we'll just call this app dot edge. So what this did is created a components directory with a layouts directory inside of it and a file inside of it called app dot edge.

Within our app dot edge let's copy all of the HTML markup from our welcome page and paste it directly in here.

For the actual contents we're going to have a div with a class of max width for Excel MX auto and M y 8.

Inside of here we're going to have kind of a header section so we'll do header class

BG gray 100 P 6 negative MX 6 margin bottom 6 and rounded MD.

Inside of our header we're going to have kind of a breadcrumb so if we're not on the home page we want to display a link back to the home page.

So we're going to do at if title does not equal home and their if statement then we'll

just play anchor back to that home page with a class of text extra small and call that

home and then underneath here we're going to want to display our H1 for our actual header

class text to Excel bold and we'll display our title there and then underneath this header

section is where we're going to want to display the actual page contents. Now typically within a layout you would use a section for this however since we're inside

of a component all we need to do is use the main slot for this to render out the main

slot we just do three backticks a weight slots and then call the main function.

The main slot is always going to be provided even if you don't provide any content into the component itself so we don't need to worry about this being undefined or null here and

the three backticks as opposed to the two backticks allows us to plop raw HTML into the page which we'll need to do for the slot.

Cool so we should have our layout all set up and ready to go let's dive back to our welcome page and give it a run so we can get rid of everything inside of here and we actually

have a couple of options on how to actually go about rendering out our component so we

can either use the component tag and go to our components slash layouts slash app give

it our title of home and our component and then do slot content here so that should work

just fine so we can go ahead and dive back into our browser looks like we have an error from whenever we move the page just give the page a refresh that should be fixed and there we go so we have our basic layout here we have our header section up here rendering

out home and then we have our slot content here so our layout is working just fine as a component however with the way that we called this we use the component tag to render this

out since we named this folder components inside of our views directory we're actually

able to use the component directly as a tag and that's because Adonis JS renders those

components inside of the views components directory globally as edge tags the example that they give in the documentation here is a button so they have a button at resources

views components button dot edge looks like this and they're showing that you're able to render that out by just reaching directly for button off of the at character referencing

it as a tag directly if you're using folders as we are with our layout you're able to reach directly inside of nested folders using dot to separate out between those folders and

then reach inside of it directly for a file you have a couple of examples here so if you have form input dot edge you reach for it via form dot input tool tip would be tool

capital T tip checkout form would be checkout capital F form dot input and for our case

if we dive back into our file we can replace our component here with layout dot app and

of course adding back in our home title and then end this out we just get rid of component from our tag and just have end there give that a save and everything should still be working a okay.