So before we go ahead and create the settings page there's one thing that we haven't quite finished and that's the loading of this sidebar. You can see how now we just have a blank space. I completely forgot that we didn't finish creating our skeleton here. So I want you to go inside of the app folder platform dashboard components and in here we have our sidebar component and if I remember correctly here we have this loading state where we just added a lonely skeleton here. So when I'm making skeleton what I try to do is I try to replicate the actual content which is appearing here.
So what I'm going to do actually is I'm going to attempt to recreate this entire structure but inside of the skeleton. So I'm going to go ahead and create this first part which is actually just rendering the workspace and a plus icon. So this workspaces and a button. We know how that looks, right? So it has this space here and then this thing on the side so let's go ahead and do that I'm gonna go ahead here and I'm gonna give this div a class name of flex item center gap x4 actually we don't need gap x4 in fact we can just move them away from each other as far as possible using justify-between.
And let's add a margin-bottom-off 2. And then let's give this skeleton a class name of Height10 and width of 50%. So that's representing our text saying workspaces and then below that I'm going to add another skeleton with the class name of Age 10 and with a width of 10 representing the button. So let's see if that improved this. When I refresh, there we go.
I think this looks nice. You can see how we have a little loading box for the text and the little loading box in the same size of this button. Perfect. So now I want to create the same skeletons for this one. And I want to show you a neat trick that you can do by going inside of the component which you need and then using it to render a skeleton.
So I want you to go inside of the nav item component like this and then let's go all the way to the bottom and let's add a skeleton for it. So nav item dot skeleton is a function skeleton nav item and inside let's go ahead and let's return a similar structure, so a div with a class name of flex-item-center and gap-x2 and inside, let's open up another div let me just close this one, alright and give it a class name of w10 h10 relative and shrink 0 So this is representing our image component and let's add a skeleton inside with a class name of HFull which is going to be a maximum of 10, right? And let's go ahead and add WFull and Absolute. And let's also import the skeleton because it seems like we don't have it in this component so I just added a skeleton right here above the expert organization. Perfect!
So we have the skeleton now and just below outside of this div which is representing our image let's add a pure skeleton here with the class name of H10 and WPool like this. And the reason we're doing this inside of the component is because we can now go inside of the sidebar and now what we can do is just open up a new div which is going to render an array, well not an array but a couple of those skeletons from nav items. So this way we don't have to style it inside of here instead. Let me show you what we can do. So let's do space y2.
So they're gonna have space below one another and then we're gonna use nav item which we already have imported but we're gonna write .skeleton like this and let's copy and paste this three times and let's take a look at that now when I refresh there we go you can see how that looks it's representing this state right we are putting three of them because I don't know I imagine users are gonna have more organizations some kind of trying to get closer to what it would actually look like. Perfect! I think this looks much better now. Great! And now we are ready to create this settings page.
So creating the settings page is actually going to be quite easy because we have finished component for that. We're actually going to use this component which opens up when we click on manage organizations right here. So we're going to reuse this component but Clark offers us either to use that inside of a model or inside of a inline component. So what we have to do is fix this 404 first. As we can see in the URL that goes to slash settings.
So let's go inside of the organization, organization ID and in here create a new folder settings which is going to represent that route and then let's create the page.tsx inside const, actually call it settings page and return a div saying settings like this and x for default settings page and when I save we should no longer be having a 404 error instead you can see that this is selected now because the path name matches. So let me just show you where that works just in case you're having any errors. It's inside of the nav item here. You can see that we check if the path name is equal to route.href. And as you can see the href, let's find my routes right here, the href is slash organization, organization id and then activity right here.
So make sure you don't have any typos here like organization with an S or something like that. Make sure it has no typos. And then it should be working. Perfect. So let's head back inside of this settings page.
And all we have to do is we have to import organization profile from clerk-next.js. And then let's render the organization profile like this. Let's give the wrapper div a width of full and you can already see that rendering here and let's go ahead and add an appearance to it. So elements root box is gonna have a box shadow of none and a width of 100. And still inside of the elements, my apologies, We're going to have a card and in here we're going to add a border to be 1px solid E5E5E5 and we're going to have a box shadow again of none and a width of 100%.
Great and let's take a look at that now, there we go, you can see how we now have settings and when I click here you can see that it works on a different organization, so if I go back to this one it's another, if I go to test it's test perfect so now that is working as well great great job and if you're interested in what this appearance does you can go ahead and comment it out like this and then you're gonna see that it looks just a little bit different it has this shadow which kind of looks like it should have been a model but thankfully we have access to the appearance prop so we can add it necessary attributes to make it look more line and more according to our chat-cn components. Great, great job!