Let's duplicate that down and also provide in a slug and make that unique. So we have something a little bit nicer for URLs. OK, so before we go ahead and register the route, let's create out a full page live by a component for this page. So we'll go ahead and use live wire make and let's create out a room show component.

We'll put this inside of a chat directory, but also put this in a pages directory. So we know it's a page and we keep things nice and neat and tidy. OK, so we've got our component. Let's register this route out.

We'll head over to our web routes and just create this anywhere within our routes file. So we want to go over to chat and then use route model binding to pull this room out by its slug. And we can reference that room show component directly to render out that component. Let's also add some middleware in here because we know that we need to be authenticated to access this.

And of course, you can also add verified if you want. OK, let's run our migration. So we actually get that table in there and let's head over to the database and create out an example room. So let's just call this Laravel.

It doesn't really matter what we choose here and we'll go over to the browser and see this. OK, so let's go over to chat slash and Laravel. Now, at the moment, of course, it's not going to work because our full page live by a component needs a layout. So let's get to work on that component.

So if we go over to room show, let's go down here under the render method and we'll add in an attribute to point to the layout that we want to use. Now, we already have an app layout within the Breeze starter kit. So let's just choose that for now. OK, if we head back over and give that refresh, sure enough, we are now inside of this page and it's working nicely.

Now, what we're going to do is take the dashboard template that we've already seen and pretty much just copy it over to the room show blade file within our component. Now, we don't want to do this with the app layout, otherwise we're going to end up with a duplicate here. So really what we just want to do is get rid of this main layout here. We can keep the header, but we can just change around the content.

So now you can see we pretty much just have a duplication of our dashboard. So let's change the title of this to the actual room name. So over in room show, we want to make sure we pull out that room. And that will be automatically assigned with root model binding, and then we have it available in our template.

So in here we can just output room name and we should see that up here. Great. OK, let's figure out some of the layout stuff around this, because we want to use a section on the left. Hand side. And then we want to have the main section on the right hand side. That's not going to quite work at the moment.

So let's just add in some styles to get this working. Let's make this overall container a grid and we'll set the grid columns to 12 and we'll set a gap of six. What that means is for the individual things inside of here. So this is going to be the user section.

And why don't we just put users? And chat in there so we know which one's which, we can just set the call span. So let's set this to three and then for this one, let's set the call span to make up 12. Obviously, that's going to be nine.

So now when we come over, you can see that we've got a nice chat area on the right hand side and the user section on the left hand side. OK, we're not going to build out an index for all of our rooms, but that's just a case of grabbing all of the rooms, listing through them and linking through to them if you want to. We can now access a room. Let's move on to talk about the text area and how we're going to make this work nicely for a chat experience.