Now that we have our dashboard finished, let's go ahead and let's create the settings page where users will be able to connect to their bank account as well as manage their subscription. I'm going to go inside of the app folder inside of dashboard and I'm going to create a new folder called settings and inside I'm going to create a page.tsx. Let's go ahead and call this settings page and let's return a div which simply renders the word settings for now and just by saving this file and ensuring that you do a default export the 404 error should be gone and you should be now be able to visit your settings page right here as always you have the navigation component in case it doesn't work. So make sure that the href matches the dashboard settings page. Now inside of this page let's go ahead and let's do the following.
I want to give this div a class name of MaxScreenToExcel and MaxAuto. We've already explained a couple of times in the project what this does, right? So it limits how far the screen will resize. We give it a full width, a padding bottom of 10 and we do our little trick so we get that nice effect that it's kind of using half the header and half the body here. And I'm gonna go ahead and develop the whole thing inside a settings card component here so inside of settings create a settings card DSX like this and this will be a use client component Let's go ahead and let's import everything we need from components UI card.
So we need card, card content, card header and card title. And now let's export const settings card. And let's simply return not a div but our card. And let's give the first card the class name of Border None and Drop Shadow Small. Then inside let's add a card header with a card title Settings and let's give the card title a class name of text extra large and line clamp 1.
Now let's go back inside of the page and let's import the settings card from ./.settings-card and there we go. We now have our settings right here great so now we're gonna create options here so let's go ahead and let's add a separator from components UI separator so just always when you're importing Shazam components so when you try to do auto import like this, make sure you don't accidentally import from Erratics or something else, right? So make sure you are using the components UI folder. So that's reserved for ShatCN components. And now below the card header here, let's open up the card content.
And let's add a separator at the beginning here. And then let's open up a dig with a plus name flex flex call get y2 lg flex row item center and py of 4 and inside a paragraph bank account And let's give this a class name. Text small font medium. Full width LG 16.5 Rem. There we go, like this.
And now what I want to do is I want to add a div below the paragraph with the class name full width flex items center and justify between And inside of here I want to add a div which will do the following so let's go ahead and let's pretend like we have the data whether the user is connected to the bank account or not so I'm gonna call this const connected bank and I'm gonna make it null like this so we're gonna imagine like we have this right and now let's add our CN from Libby Utils here so we're gonna make this inner div dynamic by giving it a class name CN by default it's gonna have a small text which is also going to be truncated, flex and items center. And then if we don't have the connected bank, it's also going to be muted like that. And then inside we are dynamically going to render the text so if we have the connected bank we are going to say bank account connected otherwise no bank account connected there we go So this is how it looks like on mobile, right? But if I expand this, there we go.
They are side by side. And now here, we're gonna add a button to connect to the bank account. So we're gonna add one last thing outside of this div, which will be a button, components UI button like this which will very simply say connect and that's how this is going to look so we're going to have an option to connect here and let's just prepare it by giving it a size of small for now. And let's also give it a variant ghost. So it's gonna have these two properties for now.
Of course, we're gonna add the proper handlers. There we go. So this is how it looks like now. Bank account, no bank account connected and we can click connect here. Great.
So I want to end the chapter here. So we only work on the UI of the settings page here. What we're going to do next is we're going to go ahead and we're going to connect to Play. You can see that I already started preparing some things here so I'm gonna teach you how to get to this dashboard and we're gonna go ahead and look at the documentation here and we're going to learn how to actually create this flow to connect to your bank account. Great, great job!