Building a Front-End Web App with Next.js 14 @shadcn & @TailwindLabs — 4K [2 hours] 2024

hello everybody my name is Gom and welcome to this brand new course about shatan and xgs 14 in the next two hours we are going to create together a dashboard with NEX gs14 shaten but also we are going to use a library called nvo that is used to create charts and stay until the end because I'm going to create a special package for you this package is going to be called user item it helps you to display your users and I'm pretty sure this package will be very useful for you guys if you are trying to create your own SAS or web applications I hope you will enjoy this course if you like it please put a thumbs up subscribe let a comment and I wish you a good course welcome everybody into this new course where we are going to create together a dashboard using next gs14 and shaten of course we are going to use other libraries but here the main library that we are going to use it's shaten UI so for those who don't know shaten UI it's a library that you can use actually to create Dynamic components dashboards playground forms etc etc so we can see here that we've got an example that with um shaten we can create this entire dashboard that we have here so of course I'm not going to create this dashboard that you got here that you can copy paste directly me I'm going to use chaen to create my own dashboard to get a different result at the end and we are going to combine this with tailin CSS and of course you can grab this dashboard into the comments into the description of the video where I'm going to give you the repository all right so the first step is to create a project which is totally empty a next GS project and here if I open my my terminal I arrived here and I got nothing else actually than nexs 14 with TN CSS that that I already created so it's pretty easy if you want to create a new nextjs application you got to type npx create next app latest okay so me it's done what I want to do is to click here on get started and I'm going to go here on the top on installation so if I go on next GS we can see here that we've got the full um the full actually tutorial to install everything so here there is um the step to install um your application so me I installed it with typescript tellwin CSS and eslint and then down here there is this command I didn't run yet and I'm going to run this command so npm shat CN UI latest so I'm going to click here on npm I'm going to get back to my project and I'm going to type enter and so from here I'm going to have some questions to fulfill so here I want to install shat CI to the project and here the first question that we've got it's the style so shat CI is giving you different style I'm going to take the default one the base color is going to be for me the neutal color um if I want to had the CSS variables for colors I don't think I think so yes I'm going to say yes and then it's going to install shaten then I will have here the dependency and stuff immediately if I come back to the project I got these components. gon that we got here with actually the configuration of shaten here so we've got here the schema which is on an URL then we've got the Tailwind config RSC and TS6 on true and we've got the alas where we can go grab the utils and components so let's take a look at components I'm going to go here on components and for now it's empty but if I go on lib and ues we can see that we've got some code that has been written we're going to let it here because here shaten will need that to work with tailwind and on my application right now I got nothing else than the starter pack of NEX GS okay so if I go down here I can see that I can add some fonts also I'm not going to do it for now and we can see that we can can extend the font family directly through tailwind and then here we've got the example of the folder structure just after um we are going to install the components because shaten didn't install by default all the components what we're going to do is running a command every time to install the component we need and we will get access to the code after so here we will see that we will have a folder called UI with all the components inside this UI folder and of course the Liu that we saw so if you want to know every component that are available you can go here we've got all the components basic components that we would retrieve in any um components Library the main difference with chaan UI is that it's not a um Library as I as we understand a library is it means that we didn't install shaten with all the components we have to install manually every component it has a lot of advantages the First Advantage is that it's going to take our project lighter and we will be able to get ends on the code okay so if I come down here we've got an example and we can add here the button so here of course I'm going to use the buttons I'm going just to copy paste this I'm going to get back I'm going to open my terminal again and I'm going to run this common npx shii ATL latest add button so I'm going to type enter and what's going to happen is that you you can see here that on the UI folder I got the button. TS6 and if I go to look at it look at this it's amazing we've got here all the code of the button so we can use directly the button inside our UI so I'm going to get back directly here on my homepage and I'm just going to return here a div and it's going to be a hello div there we go and I'm going to run the project so I'm going to type Yan and Y Dev it's going to install entirely the project and after that we will be able to visualize our next year shaten project directly um inside the browser so which is really cool is that we've got this button that we will be able to call everybody everywhere else sorry so here I'm going to type Local Host 3000 and there we go so we got hello up here so I'm going to go down and we can see that I can import the button so so I'm going to come back in here I'm going to close this and I got an empty project for now so what I'm going to do here is to type button and we can see that I can grab the button of nextg of shaten and I can put it directly inside here and after here I can put my button so I got the click me option and if I come back to it we can see that we've got the button of shaten that has been added to the project okay so it's really cool now if I want to have some options what we're going to do all along this course is to come back to the section of the component we are looking for and here we can see that we've got different styling here we've got the code again that's what we saw and we can see that we've got for instance here variants so this variant here will help me actually to um change the style of the button so I'm going to zoom here I'm going to unzoom I'm going to zoom again there we go I'm going to come here and add my variant outline and we can see that my button change the style of my button changed of course we can see here that we've got other examples so we can turn the button into a secondary a driive outline ghost link icon um with icon for instance uh we've got a loading state so if we look at the code of the loading state which is cool is that we got this disabled and we've got also here an icon coming from Lucid react we're not obl should use it but it will be very useful so you understand that we install shaten and now we are going to install every component every time we would need one so this is the basic we are going to use to create the old dashboard so there's a lot of elements that we're going to use for instance here there is a calendar we are going going to use an avatar there is an alert for instance etc etc you got to understand that I'm not going to use every component that is here it's just a course to show you how to create your own application using shaten and to create at the end of dashboard that you will be able to use so here I'm going to use some elements not every of them but which is cool is that every time you need an element you can go to the components part and grab this element it's as easy as this if you have some concerns about the taming you can go here and chaten we can see here that shaten is using tyn CSS so I mean we are using tyn CSS basically with the application but here we can use also tailn CSS so here we can see that we will be able to actually work on the architecture of the whole application with tailn CSS for the dark mode we got here um the option to install next them themes that we can use also we can use the CLI so the CLI we installed it there is some typography options that we can look at so here we got on the titles um on the paragraph on the codes it's a whole package of style that is already um provided by the by the whole um shii package there is also the figma so if you do some design and you need to use the um basically the the the old the components and all the the team of shaten you can go directly here using the figma okay also if you are looking for some example again you can go here on the top and please if you can go to the um go to the GitHub here and please add here a star to the package because um this project has been elected the best project on GitHub this year uh last year in 2023 and it it's clearly an amazing project that will be very useful for a lot of you a lot of frontend developers so please go here and add a star another library that I'm going to use it's nvo so you probably don't know nvo but nvo it's a it's a chart library that you can use to create very beautiful chart so let's give an example here we can see that we got different charts that we can use and if I click here we can see that it's going to display a lot of other elements such as here the grid that you can see on GitHub I'm going to use this library to display some graph directly into my dashboard it's built on top of D free and react so if you are not following this course with react you probably can find another options but here this is the library that I'm going to use if you are using vgs and you would like to use chaten with vgs um you've got some libraries that are porting actually Shen to view so here we can see that we got a version that is applied for vgs to use exactly the same component and we've got exactly the same okay we've got exactly the same forv so if I look for shat cnv here we can see that Hunter bite Hunter has ported actually shat CN to zelt so if we look at it quickly we can see that we can also use it for zelt ETC ET ET there will be a lot of um libraries that will be adapted to the framework that you want to use okay so we are ready to start this course let's go let's start to build our dashboard we are going to jump you understood between shaten between Neo and between Tailwind CSS all right we are back on our project and immediately what we're going to do is to go on the layout I'm going to let every everything like this and what I would like to do before working on a context or whatever to externalize externalize all of this is to create a first component and this component is going to be my sidebar so basically I will have a sidebar a header and then I will have also um a body where I'm going to display all the children so for now until the moment I decide to work on the authentication and on the context or whatever I would like to put some SC lat on to my application so I'm going to create immediately a sidebar. TS6 component and I'm going to use here sidebar here with hello and I'm going to call it sidebar okay so I got this sidebar right now and I'm going to come back to the layout and I'm going to put my sidebar just here so we can see that we can import the sidebar and if I come back to the project I'm going to update we can see that I got the sidebar and the button that is here okay so at first what I would like to do is to just work on the size of the element so basically my sidebar here it's going to take by default 300 pixels okay so I will have my sidebar with 300 pixels and I would like to have a border on the right okay so basically I'm going to add this and if I come back we can see that we've got this border uh we don't see that much but it's good and I would like to have a min8 which will be actually mean8 screen Okay so we've got this and the problem is that down here we can see that we've got here click me which is supposed to be on the right so what we would like to do here is to we can keep this uh here this class name here in class name and here I would like to have my side barar and my children next to each other so I'm going to use flex item Center and justify between so when I come back to my app we can see that my button is totally on the right and then my sidebar on the left so what I want to do here is to wrap my children here there we go here and then I would like to have as a class name here with full eight full that's what I want to have so when I come back we can see that we have here the button that is on the middle so it's not actually itm Center but it's itm start and when I come back there we go that's what we want we will see later that this sidebar will need to be fixed but we are going to come back on this okay so now that I got this I'm going to come back to the sidebar and I'm going to focus exclusively on the sidebar for this uh course so this sidebar has for now a width of 300 pixels a border here and and mean h screen I'm going to add some padding to it and here I'm going to add a padding four to start and let's have a look we can see that we've got the sidebar moving in here so I'm going to inspect this element and here we can see that we've got the padding four that has been added here and we are good okay so 300 pixel let's take a look at it it actually doesn't take exactly 300 pixels that's the thing because here we have a 26 that's a problem that's not what we would like to have so basically padding for it means here and I'm going to zoom a little bit because otherwise you're not going to see it padding four it means 16 pixels so if I go to padding one here it's going to be actually nothing one it's going to be four pixels so one it's four pixels two it's eight pixels three it's 12 pixels etc etc so I'm going to keep on padding four to be on 16 pixels and we can see here that it's supposed to be 300 pixels but it's not so let's have a look at it it's 2 59 so I'm going to take mean WID and here 300 pixels so I can add this and suddenly we have the real size we have 300 pixels here that has been deployed Okay so we've got the sidebar here and what we would like to have in this Side Bar it's free Parts I'm going to explain so I'm going to have here the user part then we want to have the menu so I'm going to add the menu and at the end we want to have something like settings or probably notifications or whatever okay so we arrive here and we've got these three elements however we would like the menu to take all the eight eight and the settings and notification at the bottom so what I can do here is to use flex Flex call so I put some Flex between my elements and here on the menu I can have a class and this class is going to be grow so suddenly we can see that menu take all the eight and is pushing actually the settings and notification to the bottom okay so suddenly we can see the menu is taking all the eight and I'm going to add probably some background to see it we can see that menu is taking all the eight with settings and notification so that's what I want because here I'm going to have a lot of items so I'm going to come back I'm just going to remove that and let's focus now on this user part and on this user part I want to create a new component a basic component here that I'm going just to make myself so it's going to be user item. TSX okay this user item here is going to be a user item that I'm going to use for every user of the application so I'm going to type user item here and I'm going to add this user item in here okay so here we've got our uh element coming from user item so when I come back I got user item on the top here so let's go let's work on this user item so here let's say that at first the user item is going to have a first name let's say Gom and then a um let's say an add code with Gom or probably more the so we are going to come back in here and it's going to be cod with gum gmail.com there we go so when the user will be logged in we will have these two elements something that we can do immediately is to add an avatar exactly like Shad so Shad CN has a Twitter account you can go on it it got exactly this Avatar and we can add this code and we can ask him um actually to to the UI to add this Avatar component me I'm not going to use it because later I will try to create the same one so the first here Liston that I'm going to show you is to reproduce the code of shen but later just after this one we are going to use all the time the component okay this one is just an exception so here I'm actually I'm going to put that into a div and here I'm going to use here a div called Avatar okay so this Avatar here will be rounded full at first we'll have some eight so remember here we can had some size so if I had um actually eight yes there we go and here I'm going to have BG green or BG Emerald 500 Emerald 500 here we should be good so when I come back I got this little round here I'm going to add probably some width there we go we have this little round and inside what I would like to have is the initials of the actual um here so GD with a text white okay and a font of 700 if we can and we when we come back there we go so I'm going to zoom a little bit so we got this and I'm going to flex itm Center justify Center and it's always the same so we've got this element here we are going to WRA them next to each other so I can go back here on the top use flex item Center justify Center and I want to have a gap of two and suddenly we've got these two items here but we've got a problem we can see here that we don't take exactly the minan width and minan weight so I'm going to use minan W and minan eight and we should be good okay that's the first step step we are going to continue here what I'm going to do is to add a border and I would like it to be rounded and I would like it to be rounded 32 pixels so 32 pixels is probably too much I'm going to add 16 and if I show you this now it's because you can use the system of Tailwind um with the numbers or you can use between brackets the numbers that you want so here if I use rounded eight we can see that it doesn't work because here it's supposed to work with Excel LG Etc so here I'm going to use actually my own and I think it's going to be 12 pixels 12 pixels it's a bit too much I'm going to add eight and we should be good then I'm going to add some padding into this so I'm going to type P and here I can add P4 and if I come back we can see this so we can see that we've got a big problem in here first we've got um probably some too much padding on the top and we've got those elements that are too big so I'm going to lower them I'm going to come back here and I'm going to type text 16 pixels and here I would like to add font bolt which I can use also so when I come back we've got it in here and here I'm going to type class text 12 pixels and I'm going to add a text neutral 500 so as you can see every time I type um I actually use intellisense of Tailwind CSS so if I go to intellisense Tailwind CSS and ofs code we can see that it helps me to actually find the colors of Tailwind I'm not obliged to use them we're going to see after there's also a package for shn Okay so we've got this I'm going to come back and suddenly it's a bit clearer so I'm going to just stay on 100% And unzoom directly from here we can see that we've got too much padding so I'm going to remove this going to get back and if I go here we can see that I got a px2 that I can had on the size and actually a P2 on every size and suddenly we've got our element here which looks really nice I'm just going to lower the size of the this rounded element or probably put it on 10 so I'm going to go back here on 10 and we should be good here we put justify Center but I'm to add justify between and again with that I can use grow directly and when I come back we've got something really nice for the moment another thing is that we can see that there is no gap between here the user element and the menu so if I come back here on my sidebar what I can do here I can see that I got flex and flex C so I can use Gap here Gap two or Gap four to put some space between my elements so if I inspect immediately we can see here that we've got these yellow lines and those yellow lines are showing me the gap between the element and it's more clear okay this was a first element we are going to continue to add a menu to our sidebar okay previously we've been working on this sidebar we created this user item which is custom now we would like to add actually commands and actually we are going to use commands to create the menu which is here because if we look at the preview we got something really nice down here inside directly this input we got the command here and we've got the command input here so if I come down here we can see that we can add the commments so we're going to add the commments directly and see how it looks like so I'm going to stop that I'm going to use add command and suddenly it's going to install every component that we need to have these elements that we are going to use inside the sidebar which is very useful okay so I'm going to reuse that and here we can see that we've got here the grow menu etc etc so I'm going to use here this whole list of element because I would like to have almost the same I say almost because on most of the the the examples that we got here we don't get exactly this okay so the input let's import it also the command list let's import it the command empty we import it the command group we import it and the command item we import it also so we get here the command separator missing okay let's come back to the application and let's see how it looks like so I'm going to run it again and we are supposed to have all these elements that we got here which are very useful so we got calendar search Emoji Etc ET so here there is a search I don't think I would like to have the search so I'm going to remove this and I'm going to remove the input and I don't care I got my elements that are here okay but we miss here we can see that we are missing the um actually the um icons that we got here so we can see that here in the description we've got the calendar the icons etc etc so me I'm going to do instead of having all of this I'm going to create up here a menu list so here it's going to be a static element so here it's going to be Manu list and this Manu list is going to take um the model okay so we can see that we've got a group so here I'm going to add a group and here it's going to be a group called General so here in the eding we're going to have General then on the items okay on the items what I'm going to have is it's an array and in this list I'm going to have a link so here I'm going just to put the link so when we will click on it we will call the router to move to this path and I'm going to add uh actually I'm going to add a text so we're going to have this so the first one is going to be profile and then after I'm going to have uh for instance um billing let's say we're going to have billing there we go then probably before we can have another one called um inbox okay and after that we can have another one which will be logs for instance and at the end I would have another one which would be uh actually uh no we're going to create another group at this point okay so we got this and what I want to do is to copy this General group and instead I'm going to have settings in here so here I'm going to have um General oh no general settings yes general settings there we go after that here I'm going to have a privacy for instance and at the end here I would like to have notifications so later I will come back to every page to put my uh Slash in here maybe it doesn't make a lot of sense to have notification here probably I would like to have it in here and logs should be probably into the settings there we go okay so now I got all these elements what I can do is just to remove this okay and even I think I not going to put the separator probably after yeah here the separator we will see so here I'm going to type menu list and I'm going to map for every element so I'm going to close that just after at the end so we're going to have this and here is going to be menu which will be of type any for now and after this I'm going to have my key which will be a number and I'm going to put here we can see here the key directly here and we should be good what I want to do is to return this element okay so here what I need to do is to remove for now the element that we got here I'm going to go to the bottom for you to understand clearly what's going on and on the heading I'm going to use here what but I'm going to use actually the um menu. group so menu. group here menu. group so the name is not really accurate but it's going to be enough for now and here on the items what I want to do is to loop again so here it's going to be menu. options and I'm going to do exactly the same so I'm going to put here my element and instead of having menu and key what I can do is to put option and here option key and as a key here I can put my option key and we should be good and instead here I'm going to put my option so I will have my option and later I will come back to put a link into it so here I'm going to update menu. items. map and here we should not forget that we would like to have option. text so when I come back look at this we've got something really nice profile inbox billing notific ification general settings etc etc that we can use now let's come back and we can see here on the top that we've got icons that we can use directly in here so I'm going to look at Lucid react so if I want to look at the icons provided by Lucid I'm able here to grab all the icons because if I look at my package.json I already got Lucid react icons in here so I can come back and next to every element I can had an icon so so here if I look to profile I'm going to type enter or probably user I think user will be more accurate we've got user that is here so I can probably here copy gs6 there we go but if I copy gs6 and I just paste it in here we can see that we call only user so if I look for user from uh here from Lucid react it's easier so here I can put the icon okay and the icon is going to be my user so now I can come back down I can put my option text but I can also put my option do icon which is here so when I come back to the app we can see that I got my two elements here and I'm going to do this for every icon that I can find and finally here is the result we've got the icons and then we've got the text here and if we come back to it let's look take a look we display here the option icon here I added some custom C SS directly to the command item and here I added a style of a flow visible because here um it's supposed to be for the command bar but I'm going to use it in here so there is a eight that is uh resigned here so we've got all the elements probably as you can see here we would like to add some cursor pointer and I'm showing you all of this because I want to show you that shaten has a design by default but you can overwrite it directly in here or directly inside the component because here I'm doing it in here but if I come back here to the command I'm going to go down here we can see that we've got access to the full code so we've got the dialog content and we've got the command here with some uh code that has been added in here so I don't necessarily recommend you to go here and to change everything yourself but you got to know that by default if you want you can add your own style to have some design okay it's time now to add a header to our application so I'm going to directly go to my components and I'm going to add a header. TS6 so me I'm using my own Snippets so here basically on your Snippets what you can do is to add your own configuration to C code and I got a snipet that I called en comp and every time I type en comp look at this code I'm going to just add directly this template here with the name of the file so this is a a classic configuration of vs code that helps you to go faster so I'm going to go here and if you look at what I'm going to write end comp here we can see that we uh created this gs6 component with header coming from ed. TS6 so this is the the first tip that I'm giving you now now another tip is that there is a shaten UI here package for vs code that we can use created by su Maad that helps us to actually directly uh download here we can see on the little presentation here we can see that we can directly download from um uh vs code the components from shatan so I'm going to click on install and I'm going to use it and now we should be good and now when I can do here is to type here so command P here and I can type shaten UI add a new component so if I type here I can see that I got everything that can comes from the website it's exactly the same as doing it into the terminal okay so here I don't need it right now because I already got the command that I want to use so we got this header so I'm going to type hello header and and I'm going to come back here and inside my main I would like to put my header directly from the components header so when I come back I got my header so here basically it's going to be the same as sidebar so I got my sidebar which is down here we can see that I got some elements I'm just going to copy paste this directly into my header and what I want to do is to give him some shape so I'm going to type here Flex I don't want to have a flex call and I don't want to have a specific eight or width but I would like him to have some space so I got my hello header here and what I want to do is to come back to my main page which we got in here going to type homepage down here and then we should be good okay and here on my header I would like to have a border on the bottom so remember we would like to have the border on the bottom but the thing is that here we can see that we've got the homage at the bottom and the sidebar is moving there is an overflow so what I would like to do basically is to have my sidebar fixed so if I go to sidebar here and I type fixed in here what's going to happen is that it's going to be fixed but the content is going to actually be on totally on the left so I need to move the homepage from 300 pixels but the thing is that after we're going to have trouble in uh responsive design so we are going to come back to it after so what I can do is to type here p l so padding left 300 pixels which is exactly the size of my sidebar and we can see that suddenly I can scroll here but the sidebar doesn't move this is exactly what I want okay so I got my hello header we can see here that I got with full eight full here what I can use and I'm not going to use flex all the time because I want to show you a lot of things is to use the grid so if I use the grid here I'm going to have here my hello header which is down here and we've got my element here so I'm going to look at this and remove here my mean8 and my border and my Gap I'm going to let it for now and we've got our header however the header we would like it to be fixed also probably we are going to do it after first we are going to come back in here okay so remember we've got this command bar which is really sexy so let's come back to the top we can see that we've got this search bar with everything down here so you know what I'm going to do I'm just going to probably use the whole code that we've got in here so we can see here that if I press g i got this as a dialogue which is really sexy this is not necessarily that would something that I would like to have here I got this full command bar demo so I'm going just to copy paste this whole command bar demo and just going to come back to it in here and I would like to do something specific okay I'm going to keep this code here but later I would like to come back to it so I'm not going to insert this command down here I'm going to use it directly as my own component so as a command. TS6 and if I put command. TS6 as a name it's for you to continue to follow so we've got everything in here so now I can close and just have the elements that I want I got my header and I'm going to use command coming from where coming from command demo there we go and when I come back to my app I got suddenly the search bar that is taking the whole stuff and I got the options down here and if I type calendar I arrive to calendar and stuff of course you understood that I don't want to use this I'm just going to use the command bar as a demo so so what I'm going to do here is just to come here and the comment list I'm not going to display it actually I'm going to display it only okay if it's open okay so I'm going to type this open and there we go and here I need to create an open set open which will be a user State as a Boolean and it's going to be on false by default so I got a be careful because here it's a client component so I need to use use client on the top and when I come back I got this beautiful sidebar which is here however it's too big and there is some Shadow we would need to come back on the design after so here what I want to use it's not Flex it's grid and I'm going to use grid and I'm going to use grid calls 2 and when I come back I get the bar that is taking all this space and on this one I'm going to uh use another space in here to add something else and I think what I would like to add up here is probably a notification icon so if I come back here to the button that we already created we can see that we've got the option here button with icon so if I click on button with icon we've got this down here here login etc etc and we've got this element in here and we can see that I got a simple button and this simple button is going to be for notification so exactly as we got here so I'm going to come back in here I'm going to use button and here instead I'm going to use Bell so here I got several icons I'm going to use Bell icon for instance and when I come back here we can see that I got this beautiful icon in here so I'm going to use here class Flex item Center and justify and for now we are going to stay on this and later when I will be able to work on that I'm going to come back on this okay so now I'm going to add a lot of text and I would like to have up here is probably to have some design that are corresponding on the left and on the right and also I would like to remove I would like to remove here um the shadow because I got up here this notification Bell and probably I'm going to add some other elements later but it has to have some coherence on the style all right so what we would like to do is probably to put the command bar here with less Shadow so what I can do is to come back here on my command demo and I guess it's going to be here on Shadow MD we can see that I can remove my shadow MD and suddenly we've got this and suddenly it looks way better we can see that we've got here our search bar that doesn't do anything for now and we've got up here this notification now we would like to have some drop down that's what we're going to do in the next lesson previously we worked on the sidebar and we created also a header and up here we've got a notification Bell but it does do anything what we would like to do now is to turn this into a drop down with a list of notification and which is cool is that which at CN we have a drop- down option so if I go here we can see that I got a drop down menu and I can use all of this that we got in here so what I'm going to do is just to copy paste this I'm going to get back and what I'm going to do is to come back here stop my server and and type npx shat CN UI latest at drop down menu then after that we are supposed to arrive with a file which will be a drop-down item so I'm going to run again here and I'm going to get back and I'm going to go to my header to decompose a little bit so right now we got this button with this Bell icon and if I come back here to the option we can see that we got all this piece of code Okay so so I'm going to import everything here on the top at first then what I'm going to do is to import here the drop down menu so I'm going to copy paste coming back and instead of this button I'm going to have my drop- down menu once I'm back to the app I got this open here menu which doesn't do anything except showing that so what I'm going to do is to come back here and I'm going to use instead here this Bell icon instead of open I'm going to put my icon here and I'm going to just remove this or I could use the button also okay here I'm using just the Bell icon that we got here so I'm coming back I'm going to get back on what I did and instead I'm going to use this button that we got here and I'm going to remove the Bell icon and when I come back we can see here that I got the button with the rounded and the square around so here we got the menu that is down here but this is not necessary what I would like to have here we can see that we got a separator menu but before we work on the design I want to work on where we display this item because when I click here we can see that we've got the panel position here that is supposed to change we look at it it's that we have a drop down that is taking actually um the whole space and we would like to align this drop down on the right and to have it also on the right side so I'm going to come back here and what I'm going to do I'm going to go to this drop down menu content and I'm going to type align and we can see that we got access to a props called align I'm going to type end and suddenly when I come back to it here we can see that it's perfectly aligned so I got all my elements that are down here however here the notification that we got it's not really nice we would like to work on something different so what I want to do is to Del all of this and up here I'm going to create some kind of notification okay so I'm going to have notification and set notifications for now later we probably are going to put that into a hook so I'm going to use my state which is here and for now we don't get any model so I'm going to put that and of course for user state I'm going to use user State and I'm on a uh here menu so here what I want to do is to have a model for my notification ations so what I can do at first is to put for instance a text so this is a notification okay I can add a date let's say that here it's going to be uh two01 yeah let's put that and then at the end we can have read on true or false okay so I'm going to grab this and then after that I'm going to put read on false for this one and this is another notification for the same day okay I'm going to Loop through all those notifications so I'm going to just come here and type here notifications. map now what I can do once I got my notifications is to have this drop- down menu item so when I come back we can see that I got my system of notification which are here so basically what I can do um is here to create something nicer let's say that we're going to have here a paragraph with the itm text and then just after we're going to have the date and at the end we're going to have a span with actually if it's read or true so we can see here that puts we can put read or unread for now and we can put an element just after so basically when I look at it I got this however this is not necessarily what I want so I can add here some design to it I would like to have for instance a bit of padding okay and I would like also to have a cur pointer when I pass on it and on Hover I would like to have a BG for instance um neutal let's say 50 and a transition okay so I'm going to save that okay and once it's done I got my notifications I can Loop through and I added some style to it so basically I got this little uh green pop when the notification is not read so basically here I should invert this because here we can see that if it's not read we would like to have it on green otherwise we would like to have it on neutral and then I'm showing the date and then the text so you see that inside my drop down menu item that I got on the top I'm actually displaying my elements there and if I come back to the app this is the result we've got this notification system and at some point we would like to trigger here the read on the notification to say hey this notification has been read so here we've got our drop down with notification it's really ni nice another element that I would like to put here it's some kind of Pop also on the heat um I'm going to do it right away so I'm going to get back and remember we've got our button in here and I can basically do exactly the same so if I come back here I'm going to go here and what I can do is to say here if notifications and let's say that if in notifications notifications we've got actually an element that is unre so I need here to find any element that is unre we are going to display BG green so x. read is equal to true we're going to find this and then when we come back we can see that we've got this little pop so I'm going to zoom a little bit there we go so what I want to do is to put here inside my button I'm going to add a class name and it's going to be relative I'm going I want to put it on absolute so here it's going to be on top zero and I would like to have it on the on the right not on the left and I'm going to add a right zero and when I come back we can see that we've got the element here it's not necessarily really nice what I would like to have is to have it on the top so I can put a minus here on the top and a minus right and here we see that it's not enough again I can put minus there we go we can see that we've got our little pop up in here so we've got our drop down menu that is installed inside our app so we will be able to use it later and we also have here on the header this notification Bell which notification we could display it is time for us to work on our homepage because it's definitely empty and we would like to have a very beautiful dashboard and for that we are going to put charts on them and we are going to use cards and we are going to continue to use shaty Andi components so if I go to nvo remember we are going to use Neo it's a d Free Library that is used to make data visualization so we got a lot of options with it for instance we got this beautiful map on the world that we could use to display some elements and when we pass our Mouse here we can see that we can use the elements also here we got this beautiful graph and let let's say that the first card we would like to have here it's this element that we got here so what I would like to do is at first to install nvo so on the GitHub I can find the command so y add at nvo core nvo bar for instance so I'm going to get back I'm going to stop my server and I'm going to use this nvo core that we've got here so here for instance we have the definition but I don't want to use the bar I want to use the nvo bump so I'm going to put here nvo bump instead and it's going to install to my project the nvo core that will be used so once it will be done we will create a card and this card will be dedicated to use this element okay so I'm going to type yandev and to work a little bit on this architecture I'm going to talk to you about how I want to um put some Arch on this project okay okay on this folder so here I got components I'm going to create a dedicated folder for cards because I'm going to use these cards directly inside my homepage here okay so this first card I'm going to call it general. TS6 okay doesn't make any sense for now probably I'm going to come back to it but here it's going to be the first general card I'm going to type en comp and here I got my first card so I'm going to get back and I'm going to go to page and here I'm going to have a specific behavior for this page so I'm going to come back to it later but here at first I'm going to call my General card which is here I'm going to delete this element and I'm going to have my card so what I want to do immediately is to use all the code that I got in here and that I can directly use into my uh element so I'm going just to copy paste okay all this code I'm going to get back and I'm going to just inject instead uh this whole uh element directly in here so we can see that we got a specific behavior so I'm going to use it here on the top I'm going to save that and here we see that we don't get any data so I need to grab the data and here I got a lot of data if I want I can click on roll the dice and if I roll the dice I will get some different uh uh specific data generated autogenerated so I'm going to copy paste also all this code and there's a huge part of the code and there we go so here let's say that we are going to receive data as a prop and we are going to return the component which is here so I'm going to put the data down here of course this data is going to be used as an example later we will be able to fulfill our own data so I'm going to Ty type data is equal to this huge object and actually this huge object it's supposed to be an array instead of a used object a big object so I'm going to come back to it and I'm going to clean it because otherwise it's messy and we should be good okay we've got the big object which is here we need to transform here this into a gs6 component which is the force actually of react so I'm going to return and I get my full element here and we can see here that we've got some common make sure parent container have a defined eight when using responsive component otherwise hate will be zero and no chart will be rendered so you got to be safe with that if no chart is rendered it's probably because you didn't use any eight so I'm going to go down in here and I'm going to use what I'm going to use my responsive bump that we got here and we need to inject some data and of course the data is going to come from here for now probably later it's going going to come from um either as a props if you want to or either we are going to fetch the data and get it directly here okay so if I come back and I try to uh update my page probably I will get nothing why because no data has been rendered so what I want to do here is to Define some width and eight so I'm going to type wful and as eight I'm going to put for instance a 400 pixels and suddenly look at this there we go we have all our element so be safe here you need to pass the props and here I'm passing the data props or you can put it directly into uh uh the component but this is really nice we got a very nice element here so what I would like to do is to put that into a card so of course which is cool is with shaten we've got here a beautiful card that we can use and this card here has a behavior that is looking looking a lot like the design we have right now and this is why we've built this design until now so I'm going to come back and I'm going to install this component card and of course this component card will be very useful in the future because we are going to use it everywhere so I'm going to come back here I'm going to stop that and I'm going to add my component card and I'm going to wrap this element inside this component card so here we can see that I had this element here so I'm I'm going to just get back and I don't want to put too much code into it I'm just going to use card and probably I'm going to wrap it into card content because I see here that we've got a card content but I don't necessarily know it yet so I'm going to just use card instead and if I come back to it I should have something wrapped uh so my chart should be wrapped inside the card and there we go we can see that the wrap has the the chart has been wrapped so what I would like to do here is probably to put a card content or a card title so we can see here that we've got a card title so if I look at the code here down here we can see that we've got card header and card title so card content so I'm going to do exactly the same and I'm going to wrap my element inside of it so I'm just going to copy paste this going down here and I'm going to use the card content here as a closer at the end so I will be fine so card tile card header is missing I need of course to import them so card header then card title and card content card content oh no I I already got card content okay so I got everything that I need card description okay so I'm going to put card description down here C description and we should be good so instead of this I'm going to put here analytics this week I'm going to put this week this these are the results of this week for instance this is an example so when I come back to it I suddenly got this element however the problem is that I didn't put a full width and a full he to here to this element and we are good okay the last thing that I want to do is to come back to my page and here we see that this is the homepage so probably later I will change it what I want to do is to come back back to the layout and here remember on the layout we've got a grid and we've got a padding left and padding right so what I would like to do is to wrap this children here into a div and in this div I would like to add some padding to it so remember one it's four pixels two it's eight pixels so if I come back we can see that I got some uh element so here I'm going to look directly to the padding that we've got and here we can see it's one 1.5 so if I go to computed we can see eight what I would like to do is to have 32 pixels so basically I'm supposed to add eight and we've got 32 pixels and probably it's much better here we've got something really nice so we can see that unfortunately the padding is taking everything so instead of having this what we would like to do is to have some calculation on the full width okay but before I need to remove this width full that we got here because right now we have this and look at this suddenly it's fine we are definitely good on this so when I come back to it we can see that we got a very nice padding that will be applied to every page then I want to come back here and I would like to create some Bento like some space between elements so I'm going to create here a grid and grid calls to and I'm going to wrap inside this grid my general item so suddenly we've got this however the problem we can see that we've got some eight so we need to come back to it and probably add more eight to it and this is going to be a problem so I'm going to put some eight like this I don't have here um the need to get the full eight of my element and suddenly we are good so we can see that we got this graph but the graph is looking better with a better eight and we are good we've got this very nice element not very seable but that's all right okay so we've got all the basis of our graph here I'm going to add more cards here I'm going to fulfill a little bit of space because here it's too little if I would like to I could change the whole behavior of My Graph removing some elements the axis etc etc I can do it if I look at the here on the on the Neo um tester we've got a lot of elements that we can use you can see here I can play on a lot of elements the outer padding etc etc and here we see that it's way better so probably I'm going to use it this is why I love this Library guys because it's really easy to use and I can also work on the colors as you can see which is really cool I can work on the lines actives etc etc we can custom that later but now we got the first card of our dashboard let's pass to The Next Step previously we haded this main chart here coming from nvo and this Library help us to display very beautiful charts okay so here it's a bit empty on my dashboard I would like to fulfill this white space that we got here and what I would like to do is to create some kind of Bento Bento are piece of UI that are disposable like this so you got some grids and you got elements that are stucked in top of each other and if you look closely sometimes it's really a regular if we look here at the versal Block we can see that we got a block here a block here a block here a block here and we can see that the Gap are not exactly the same this is really nice so basically what I would like to do here is to put two different cards here and to add some more cards on the bottom so I'm going to get back here on my uh CN UI dashboard and I already got a one grid here so let's say that I'm going to have a new grid here and I would like to basically uh just had here a new grid with a grid C two again so what I can do here is to call card from chaten and had another card and if I look to it I will have two elements like this I will have to work on the Gap here so if I work on the Gap I can have those two cards next to each other like this but this is not necessarily something that I would like to do I would like that that both of them would be on top of each other so if I come back I got those two cards in here I will see what I'm going to put into it again okay so just after this grid I want to create a new grid and for this new Grid it's going to be different I want it to be actually on class grid here I'm going to add the cards again I would like to have three different cards and I don't want them to stack okay I wish they could actually um be next to each other so I'm going to add a grid CS free and I'm going to add a gap of 32 pixels again so once I got this I want to also put the Grid on top of all my elements so here it's going to be exactly the same and I'm going to add grid Gap 32 pixels okay so when I come back I got my elements that are here and they don't they there is nothing actually inside of these cards so what I can do is here to for now for this example just to put a hello world inside those cards and when I come back we can see that I need to fulfill the space for them if I would like them to have some kind of eight I can already come here put a class and put a minimum eight here for instance of 300 pixels and when I come back I got my beautiful grid and this beautiful grid here is displaying different element that now I need to fulfill with wheel components so here we can see that we've got these cards and we're going to look at the responsive later because when we're going to move here the the actual um UI will need to arrange okay so cars will come on top of each other there will be some kind of responsive behavior that we are waiting for okay so now I want to fulfill these two cards up here and if I go back to nvo I get this time range which is really nice so what I need to do here is just to install nvo calendar and to create a component with that so I'm going to come back going to open my terminal I'm going to stop and I'm going to type Yar add n core and I'm going to add Neo calendar okay so once it's installed I'm supposed to have the component so I'm going to install it now so I'm going to install this n calendar and I'm going to create a component my calendar I just copy paste the code coming from the chart itself and then I'm also copy pasting the data or if I want I can write a function exactly like I asked chat GPT to do to generate for me a data array and after that I'm assigning the data here to an array then what I need to do is to import the card and have the card content I'm putting eight to it so we will see what's the response and what I need to do here instead of calling my card I'm going to call my calendar directly so inside my calendar I already got the card so I will have the layout of the card this is the result we got from now it's really easy you just have to go on nvo and copy paste here this element that we got here on the code side it's really easy to do so we end up with this GitHub calendar that we got here that we like a lot we missed this part okay so I'm going to come back to General and on General remember we've got the card header and the card description so I'm going to come back here and if we take a look quickly at the component it's really simple we've got here the card with the card content the card header and we are going just to copy paste everything that comes from shat cnii and we've got a brand nice result so I'm going to uh save this calendar let's say I'm going to uh these are the numbers of this year let's save that and when I come back look at this we've got these two beautiful cards so there's a problem on the eight what we need to work on it's the eight and there we go so we got those two calendars where we got a lot of elements here and we got the days that are displayed in here so those two calendars are really nice to use really fast as you see and I propose you to look at the code together because it's easy to show but I want to give you some details okay so we created a calendar. TS6 component that we imported here directly inside our app and we use the responsive time range from nvo and I made actually a custom component here on top of my main function which is the calendar where I'm calling the calendar here then what I do is actually to grab the data so basically the model it's value and day and then we can push here the value and days and depending on the color it's going to display a different color okay so here we've got this generate data for year 20 free we want to generate some data and return it so for every day we want to generate actually data between um the values between zero and 300 and then the formatted date and at the end we return the data so basically here just for the example I created this function that help me to do what to actually push into my component my responsive time range the data so you probably later in your database you will have a model that looks exactly like this you want to grab the value and the day and you can push it directly to the component so here we created a calendar that we use directly inside our Bento inside our grid that we inject in here and now we've been working on the GitHub calendar here we can see that we've got the classic chart the chart with lines that we got here so basically what I would like to do is to in inject this chart in here this is the latest uh chart that I'm going to use with lines from nvo so I'm going to do exactly the same I'm going to create a component that will be called actually lines and I'm going to inject this component to get the lines but before I would like to customize this chart so if I take a look here with the generator I'm able to here customize here I can see that I can change the behavior of every line okay let's say that it's over we are going to create this component right now so I'm going to come back to the project I'm going to go to components and I'm going to stick to the architecture I'm going to stick to cards so here I'm going to put a new file and it's going to be called lines. TS6 I'm going to create the component immediately in here and I'm going to come back here I got the code what I'm going to do is exactly the same as before I'm going to grab the code and I'm going to go here on the top and I'm going to turn actually this um element coming directly from nvo into a gs6 component that is going to return it's going to return exactly the component itself okay so data here it will come from any and we've got here the nvo line that we need to install so again what I'm going to do is to to come here and to type npm install neol line I'm going to copy paste the data and now I need to wrap my element inside the card from chaten so I'm going to just import the card from chaten I'm going to come back to the bottom and here instead I'm going to change these lines these are numbers of the Year these are the starts of the year and exactly here I'm going to push the data and my responsive line back to page I'm going to remove this and I'm going to call my components lines which will be the first component in here I'm going to rerun again my application and there we go we got something that doesn't look really nice we need to customize actually everything that we have in here so if I come back to my responsive line probably on this one I don't want to have the Legends so I can probably remove the Legends and I can load again if I want I can remove also the margin I can remove also the Legends and if I come back here I'm going to remove a little bit because it's it was a bit higher probably 200 and 64 pixels would be good and when I come back look at this we've got our lines that are displayed down there okay so now we've got our very nice Bento with cards now here what I want to put its tables and we're going to see that Chan is really good with tables we are building our dashboard and we got still two spaces that are empty here we got four graphs here that are really nice now we would like to fulfill here with some real data so data that we are going to see through like a table and shaten is amazing for tables so previously we installed shaten and we saw that we need to import every component um to the application we are coding it's not automatic Shan it's not a library so here I want to import the data table so here we got the table component which is the first component that we are going to insert in here but also we have another table which is called data table and we can see here that there's a difference between both of them one has filters the other doesn't have filter so I'm going to start with table and what I want to do at first is to install this component table of course so I'm going to close everything here and I'm going to add my table directly to um uh my UI and I'm going to type yev and I'm going to take a look quickly on my UI because I got my table which is here and we've got a full component here that is playing the role of a table so we got tons of code and we export at the end the table okay so here let's say that on my card I would like to add a table. TS6 and I'm going to call it table. tx6 for you to understand that this is where is the table of course if it's going to be a table about users you can call it users table whatever but here is just for the example okay so I got my table I'm going to call it table component so I will don't get any problem and we can see here that that we've got the full code of the table so I'm going just to copy paste okay the example of shatan and later we will be able to Loop through these elements and to fulfill the data we want so if I take a look at it in here I can have the full code which is here so I'm just going to copy paste this full code so it will be better so I can come back here either I start myself either I use the example for Shan okay so now I got my table I want to put it into my UI so remember we've got this card here so inside my card I would like to put my table demo so if I type table demo we can see that I can import it and we should be good so now let's come back and let's look at it quickly so I'm going to update my application and suddenly we can see that we've got the table that is taking all the space and we've got everything here so I'm going to come back and I need to fix at first the eight but also the padding because here I didn't put any padding I'm going to put p32 pixels and there we go we've got our elements here the problem is that here we've got a huge issue on the terms of height So to avoid this kind of issue we are going to limit the eight of the entire grid which will be to 300 pixels okay and I'm going to put an overflow hidden and what I want to do is just I can now remove this and I come back what I can do is just to put an overflow on this one so I'm going to put overflow y scroll there we go so what I can do now is to scroll inside my table if I want to okay so as we can see we can see here that we got some data displayed however we miss here the title so I'm going to add it and we should should be good so look at this we've got these orders that we can scroll it's not really nice but we've got this table that is displaying directly some code so let's take a look at this code this table so we imported actually everything coming from the UI table we installed previously and here we can see the invoices here the invoices array got a certain model invoice payment status total amount payment method and every object got this model so when we we look at the table demo coming from chaten we can see that we've got this table table caption table header table RW and we display everything directly in here and also we Loop through the invoices to show every invoice that's really nice but here there is no filter and we actually can't uh look at a specific element into this table so what we would like to do is not to use table for this it's useful just to display element but what we would like to have is a filter like this with elements like this so what we want to do here is to actually install also tack react table which will help us to create our second table which you will find into the repository as data table okay so I'm going to stop here my process I'm going to install tan stack and react table which will help me to filter my elements we are going to use tan stack for that all right this is done so I'm going to come back to my components to my card here and I'm going to create a new file called datat table. TS6 okay what I'm going to do is really simple I'm just going to copy paste the whole code and we are going to look at it so it's longer here we've got a way longer um component and we can see here that I'm missing some piece so here I'm missing the checkbox and when you see this you can just type npx Shian UI add latest and we can add for instance here the checkbox so I got the checkbox but I also got the input here and if I look at it we should be good so I'm going to just import both of these elements checkbox and input directly inside my UI folder to be able to use it through my data table so most of the time if you miss some elements like this you can uh type in PX shaten UI to install them okay now I got my data table I'm going to come back to my page where I'm supposed to display it and I'm going just to copy paste exactly the same as this one I'm going to call it users these are the users of this month whatever this is just an example and instead of table demo I want to call here my data table here data table demo and when when I come back I'm going to update down here I'm going to have this little table so here on this example of course we can see here that on this example I got a little table most of the time I would have a bigger table I can put it everywhere else but we can see that I got my users and let's say that I want to filter for a user and we can see that we got Ken and if I take something else we can see that we've got no results I can also check for the columns that I want to display for instance the status and we can see already that it's responsive so here it doesn't make sense to don't get any column but here I can just put the email the amount and we can see that I can also uh just um scroll here directly inside um my table so here is the main difference between those two tables that we can use from Chen on the left here we've got a table without filters that is just displaying elements like this so here we are in a Bento configuration so it's little but you can have as big as you want and you can inject here depending on the columns all the data that you want here for the data table it's different if you want to use a table where you can filter elements you need to use the data table coming from shaten and as we can see here so we have the columns we can select the columns but we can also use the filters so here from the biggest to the lowest and here we get for instance a search bar that is working directly here and all of that is coming directly from the code of shaten that you can copy paste so basically of course you can use the basic table but you can also customize your own table thanks to shaty nuui okay previously we created this sidebar here and we put a padding left of 300 pixels we can we can have actually this part fixed and this part scrollable okay we are going to start to fix this I'm going to show you a better way to implement this so what I'm going to do I'm going to remove here this padding left 300 however we can see that here everything collides because I got the sidebar that is fixed I'm going to come back to the sidebar and I'm going to keep the fixed here but I'm going to remove the Border and mean h screen and the P4 also so I'm going to come back here and suddenly what we got is the sidebar element in here so let's come back because we are going to uh come back to the sidebar just after and I'm going to wrap my sidebar inside here inside what where inside the Border here and mean h screen P4 and what I want to do this is here that I want to put my mean wdth of 300 pixels and I'm going to put here a BG red 500 to show you that it's going to take the whole sidebar so when I come back look at this we finally got here the sidebar that is next to the element here and when I scroll here we see that it's not scrollable so here the sidebar here need to be fixed a little bit and we see that the padding on the sidebar itself it's not probably the best option so I'm going to remove it coming to the sidebar here and add my padding in here and we are good so now we miss something we miss the mean h screen because we also want to have a mean h screen and there we go we've got our sidebar that is on the top and we've got the settings notification that we didn't do yet that is down here so as you see here what we did we fixed the scrollable thing and the padding that we've got here to get actually the sidebar fixed inside a component that is not fixed itself but when we scroll we can see that here it works it's fixed so now what we want to do is to work on uh this sidebar also as a responsive element so what I want to do is at a certain point of the life of the application when I move there we had we we have a lot of problems okay it's not responsive at all so let's work at first on the sidebar what I would like to do is to hide this sidebar when I'm on a certain point so here I'm going to put here um my element so I'm going to have MD flex and hidden under MD so it the result is this we've got the sidebar at a certain point and when we arrive down here we don't get the sidebar anymore and it's probably probably too late we would like to hide the sidebar really earlier so when I come back here I can move something that we can see here on this chart is that we've got a margin and we can sometimes see that we've got margin everywhere else on any other component so if I come back to my general component that we got here and if I look at my responsive bump which is actually the the actual component we can see down here that we've got some margin so most of the time when you are going to work on these components you have all the props you need to act on their CSS on their behavor so if I come down I can remove this margin okay and when I come back suddenly we see that the chart is taking the full eight so we see that some elements disappeared in here and here it's not a problem for me but if I want to work again on the margin what I can do is instead changing all of this so let's say that I'm going to put 10 everywhere and we're going to see what's going to happen so if I put 10 everywhere and I come back we can see that I got some size inside the element that is pretty nice okay so I like it this way probably I should do exactly the same for here up here this calendar so if I look at the calendar we can see here that I got some space which is put some padding on the bottom and on the top that I could remove if I want to however here we can see that it's part of the card Behavior so I'm going to let it like this so it's always a question on how you want to display element and how you want them to act so me personally I'm going to let this calendar like this but here on this uh chart here I needed to change its Behavior okay so if we look at the responsiveness of these uh tables here here we see that we've got a problem the problem here is that our charts are are either too big for the cards or the cards don't behave the the right way so what we need to look at is at the CSS and to determine which is the problem here the problem it's my card so I'm going to just open here my um table as a responsive and I'm going to grab the elements just here okay so let's debug quickly here if I look at my card we can see that my card don't have a overflow hidden so we can see I got uh just here BG card I'm going to zoom a little bit I'm going to just put it down here it's going to be better if I put an overflow hidden suddenly we can see that the cards here just respect the width of the container okay so we can see that this BG card here is probably coming from a Chen so what I want to do here is probably to have this as a result so we're going to come back to it just after so I'm going just to remove this I'm going to update again and here the CSS reset so I'm going to go to Global and to my global. CSS down here I got some CSS so what I'm going to do here I'm going to add the class I'm going to overwrite the class and I'm going to put overflow here hidden important okay I'm going to save that let's come back and let's see see if it solved my problem so when I come back here and I'm going to put that in here it solved my problem except that here my graph has to readapt to the size okay so it's another issue here and if we update we can see that we finally got the graph without without the the Legends so probably we would work again on the margin to get the Legends down here we've got some elements which are here and what we could do also probably is is to hide here Monday Friday and just put the calendar this way okay first we are going to fix this uh line item down here so I'm going to come back to my page and if I come back to my page down here we can see that we have let me look at this calendar here and we've got grid calls free so if I put a LG in top of it it's just going to appear on the um on the LG part so when I come back suddenly I'm going to update again here when I come back we can see that I got my cards here uh in the right order however I don't have the elements just after because here I got my eight at 300 pixels so I can put here a large also and suddenly we can see that my element are displayed okay this is not really perfect but this is how we work on uh CSS so here I got my uh charts that I need to fix I'm going to try to fix it up a little bit I'm just going to update again and here we go it looks a bit better what did I do I just work a little bit on the margin that we have here on the right I haded 60 pixels to have at least here all the legends that I can display on Earth if I don't want and then here I got every um label for every line that I got in here also what I did is on those cards that we got in here I just um added some space on the bottom because it was ugly and I still got the opportunity here to um uh look add the data however remember we put the Overflow hidden on the card so now we can't scroll anymore I'm not pretty sure that here we would like to scroll inside those cards it doesn't look really good instead here we would like to have just some elements it's up to you to uh display the elements that you want but don't do something like you have to scroll inside the card it's not really nice when I was making this course I was thinking about this item up here which we called the user item up here and I showed you how to create this user item however I had the idea to create a special package for you and I did it so welcome to user item dodev this is the package I created for you that is not inside chaten but this is a package to display users because probably later into our app we would like to be able to display other users and we would like to use this user item that we got here and I don't want you necessarily to code it I showed you how to code it but now you can use this user item that we got in here and we are going to to replace this user item up here by this one you go to npm you can find this package here called user item with a short description and how to use it so let's look at it we are going to install it by typing npm install user item on react you will import user item from user item on xgs you will have to use dynamic because probably you want to use it on SSR it's not the case right now you can only use it on client so you will import here on SSR fals the item and then inside your code later you can use this user item with the title the description that you want the Avatar URL if you want to have a status online offline there will be also a drop down but here it's not uh uh possible yet because I didn't work on it yet I have to change this to put it on false and you've got also the verify option if you want and you can of course trigger the onclick if you want to know what props you can pass here you got a list and up here you got here on the right the status if it's ready or not as you see drop down is not ready yet it's going to come later so this package it's free to use if you like it just download it use it for your nexts application if you have the time go to the description here on user item on my profile just put a star on it and you got exactly the same description as on npm so let's go let's implement this package I am back on my dashboard I'm going to type npm install user item is going to install the latest version of user item coming back to my sidebar and we can see that I got import user item coming from actually the component so I'm just going to hide this one and what I'm going to do I'm going to type import user item from user item here if you are on typescript you can see that you got here a declaration So to avoid this you can actually create a custom . D.S and here you can type declare module user item to don't get this problem anymore and what I can do is coming back here and I can just copy paste for now this example that I'm going to change after this course so I'm going to come back here you can't use the drop down again and I'm going to put here my user item with joho with the onclick I don't want to have the onclick I don't want to have the verified I don't want to have all of this and I'm just going to remove this I Just Want To Have joho and jondo mail.com probably I would like to have Shadow FS so I'm going to put Shadow false and I'm going to remove the old user item that I got on my component so here I'm going to come back here I got the user item that I used here now I got this better version I'm going to remove this and let's look at the result now I came back we can see here on the top that we are using my package here and if I want to I can put some style to it so let's say that here I would like to have a border let's say one pixel solid red I'm going to save that and when I come back we can see that it applied the style because I passed the props to this new package now we've been working on this user item package I propose you to create a team member page where we will be able to manage the team members of the uh dashboard let's cut together a team members page where we can display users and we can also add or remove them uh you remember here on the sidebar we didn't do anything here on the bottom here we got settings and notification so what I want to do here is to come back on the sidebar and on the bottom of the sidebar I got this settings notification which are here so here we can see that we got general settings here I'm going to put settings let's put it like this and probably we've got an icon that we can grab and we're going to grab exactly the same icon as here on the settings okay so we got general settings let's say that we're going to have here a div and it's going to be the same and we're going to take these team settings directly in here it's going just to be a link okay and this link here is going to be actually a link to go to the page team settings there we go instead of a div we can use the link from where from nextjs so I can go here on the top I'm going to type link coming from next link so what I need to do is to put the hre and here on href I'm going just to put slash team okay so I'm going to save that and down here we can see that we've got the element going to SL team okay so what I need to do now is to create this page team because I don't have it so I'm going to create a new folder called team and inside I'm going to create a page. TS6 I'm going to initiate my component I'm going to call it team settings and here I'm going to save that and put team settings so when I come back and I click on team settings okay suddenly I arrive on an empty page called team settings and this is where we are going to work on our system of displaying users using my user e package that I created before if you didn't see it user item it's a package that I created to display users like this okay so let's go let's create this page so here I'm going to create here header and I'm going to call that here A Team settings probably not an H1 probably it's going to be H2 team settings okay and I'm going to save that and there we go so I'm going to put some weight here it's going to be a text 36 pixels and I'm going to add some font so here font 700 and we should be good okay we've got team settings in here down here I'm going to add a module it's going to be my team module okay so here I will have my team module and here I'm going to put some um grid so here I'm going to grid Gap four there we go and so we're going to have our team module which will display all the team members so now let's work on the model of these team members so let's say that I would have members here and set members because later we want to be able to set the member I'm going to use a state of course and here it's going to be an array so in inside a member we are going to create the type member so we're going to have of course the email which will be a string we can have the full name which will be a string also and that's it oh we can add a background color because here I will not have any uh uh URL for now to use I'm not going to use an API to grab some fake user I can do it I know but here I just want to uh do it like this okay so here I'm going to have a um user state of member which will be here and the first member of course it's me so me I will be also the admin probably later we will have some different roles so we already know that we need a role and this role would be of type string I can also Define the roles if I want to here it's up to you okay here I'm going to add my email so it's going to be a code with Gom gmail.com there we go then I will have have a full name which will be not code with G but Gom there we go and then I'm going to have a background color and we can see here that for instance I can add white but white it's not going to be really good something like this it's good then as a role I'm going to put an admin okay I got my first member so now what I would like to do well basically I would like to create a table remember on shaten we used this table component in a previous course let's come back to it we imported this table here that we've got here we are really happy is taking data directly from an array and displaying it like this on shaten in this case this is not probably something we would like to do what we would like to do is first to display for every user one line inside a custom table because we would like to inject here my user item there are ways to do it with chaten but this is not the topic of this course we can probably come back to it later okay so first I'm going to have a div with a border and let's say it's going to be rounded this is going to be my div okay so now I got this I want to Loop through my members and we will see after that we will have to come back to this okay so here I'm going to map through my members and every member will be a new line okay it will be a new line so here I'm going to add a type of member and I will have a key I need to pass my key and here it's going to be of type number not of type key of course okay all right so now we got the member and let's say that we want to display the email let's just look at the result okay we've got this doesn't take any space any something special so what I want to do remember is that I can use my actual component user item remember when you want to use user item for now with xgs you need to import it as a dynamic component so remember with nextjs we need to import user item as a dynamic component and I'm going to take that going to the bottom and I'm going to use user item here so user item there we go and I'm going to pass all my props down here so here the description will be actually for the email I'm going to pass here okay so I got my member email then I have the prop title that I can use for the full name so here I got the full name and I got the props background color background color here and I can use the color that I had before I want to remove this email up here I want to hide the shadow so it's going to be Shadow false and I want to remove the Border also so by default we got the Border probably I should change all of this and when I come back look at this there we go we've got our user item which is here let's add other users and when I come back we can see here that I got a list of users that are displayed here what we would like to add is actually some um actually some elements here some buttons to remove them or to add them and also we need a header but first we would need to have a line on every element that we got display down here so I'm going to come down and what I can do here is to use TN CSS for that and what I can do here is just to add a border B and if I come back we can see that every element got a border however we've got the problem here of the last border so how do I do to remove here the last border there's an easy solution for that and this solution is just to add here last border B zero so here last help us to Target the last element so if I come back here we can see that we don't got the Border anymore okay so remember we've got this user item but let's say that we would have a button and this button here would add remove so button of course I I call it directly from components UI button and here we can see that we got remove in here so this is not what we want again we are going to put flex itm sender justify between and when we come back we've got the button remove here but we need some padding on the right so I'm going to add some padding on the right and here it looks better we can see the button is Big probably on Chen we have the option to put a lower button so if I look at the options I can see also that I got some different variants on the button which is very cool with Chen so if I come back here I already know that I want to put some variant and here we got secondary or we could have the variant here uh destructive probably would Mak more sense but anyway oh I can see that I got the variant ghost probably the variant ghost is the best so I'm going to put that and this is the force of chaen we can see that we got um predefined uh styles that we can use so back here on my header I can see that I got my team settings and then on my div here I can put actually a new div and I'm going to reuse the button that we've got in here so I'm going to put that into a div and in this div I'm going to have add a new member okay so I don't want to have the variant ghost probably the variant secondary let me look at it so remember in the command here we've got this common and common input I can just grab them and put them in here so I'm going to just put this command and I need to import command and the common input so I'm going to come here import everything from chaten that we already installed and it's going to just filter here and if I come back here we've got here type a command or suchar so this is not exactly what we would like to have uh here we're going to put type an email here and there we go and we can see that we got some class name some behavior in here probably I would like just to put a flex okay itm Senter justify between and I'm going to add some Gap and here it's going to be Gap two so when I come back we've got this very nice element type an email to invite all right and I'm going to have ADD actually a grid to all these elements so here it's going to be grid and a grid Gap four so if I look at it suddenly we've got this input which is way too big we need to put actually another um another input in here all right so here I'm supposed to type an input I don't check anything in here because it's just a design course of course if you type here an email you get to invite somebody so let's say that here I'm going to add a a new email which would be for in Jean gmail.com and then I'm supposed to click on add a new member and we are supposed to have Jean added to the list just here okay but the problem is is that we need to have some kind of status like a status pending or whatever so what I can do is to come back in here and here I can add a status on every of my element and I will need to add this status of course to my member type which is here okay so I'm going to add this status here and here it's going to be a string okay status will be mandatory for now let's say that Philip will be actually on status pending Okay so we've got Philip that is on status pending and we would like to display here on the column the status of Philip so we got to review actually our old component which is here we've got right now now a grid here um which have the common input and we've got this element so this list this is the table so here what we would like to do is inside every element to have some kind of grid also so if I put here grid and grid calls six for instance and I save that so here we can see that we've got some Flex item and I can save that it's going to change totally the behavior of my component so when I come back we can see that I got these elements and I got some uh columns so what I want to do is here to have a div call span two I want that on six columns this element is going to take two and when I come back we can see that I got more space all right this one here and I can put a div because probably later I will have other buttons I'm going to have have a class name called span here and I can put one okay and when I come back we can see that I got one and in between what I want to put is to fulfill the space that I got so I can put div here call span and here I got already three on six columns taken so the two columns for the user item the one colon for the button it means that I still got three columns so I'm going to put div call span free and when I come back we can see here that we've got all the space that has been fulfilled and here we can see the button remove is arriving here but not exactly on the end so here what we want to do is to push the buttons on the end so what I can do simply is to put flex and justify end because later we'll have elements and we can see that I get a button here I'm going to come back and here I'm going to create a new div and in this div I'm going to have what I'm going to have member and of course the status the status of the member and we can see down here that we got pending for the moment what I would like to have also is the role we didn't forget the role so we've got here admin admin youa and next to it we got pending so those two items we would like to have some flex and put some Gap to here okay you see these items here we are going to turn them into tag okay let's go so let's install the badge from shaten once it's done I start again and I can come back and I can use here the badge with the variant so I'm going to just came back to this element here I'm going to go here and add my batch going down in here and instead of having those div I'm going to call batch and when I come back and I update we will see that those elements will turn into badges and we see here that we got some side effect that we need to uh check right now so what I want to do is just to put member. status and here I'm going to display and there we go so now let's change the colors so there are several ways to do it probably you want to put here a class name and for instance a BG red 500 for the roles but the problem here as we can look we got some side effect otherwise you can use the variant from uh chaten so I can remove here and go back to variant and here put secondary which is in my opinion the best option so we got here the variant otherwise you can create your own classes with tailwind and me that's what I would like to do so here we can see that we got admin viewer as roles and we got here pending just down here so what I want to do here is to just customize as much as I can here using tawin CSS there are other ways to do it but we are going to use tawin CSS so what I would like to do especially here is just to put for instance the member Ro so I'm going to put the member role as a class and I'm going to do exactly the same here but for the status so here I'm going to put the status and before that I want to prefix that with tag okay and inside tag I will have the member role and the member status okay so what I can do now is to go to my CSS and down here I can put tag and then I can put the role so basically the role here if I come back to it it's going to be actually admin with a capital letter which is bad it's supposed to be here like this on the um database we don't want to have um uh we don't want to have capital letters so when I come back here I forgot to put that I'm going to put admin for instance there we go when I come back here we can see that we got lower letter so I can avoid this by coming down and to put here on the tags either capitalize here either I had capitalize to my tag here so I can put here capitalize and I can save that and when I come back we can see that we got our elements okay so let's say that on admin I would like to add a specific color and I can add here either a text color either a background color okay so if you want to know all the colors of Tailwind you can go on Tailwind CSS and check the colors so here I got the whole list of the colors let's say that the admin will be orange 500 so I'm going to get back and I'm going to apply BG orange uh 500 but we will see that here BG orange 500 it will be actually too much so I'm going to get back in here and there we go so here we can see and when I pass to it on over I can see that I got this effect so actually it's going to be text orange 500 and then it's going to be orange here 100 so here it looks better right and on Hover I want to avoid this uh here so I'm going to type here BG orange 100 and so when I pass we've got this so we can see admins are here in Orange and what I can do is to do exactly the same for every role so what other role do we got we got viewer so I'm going to put viewer and here instead of orange I can put another color so for instance I can put sky blue going to get down here use the pending that we got here and on pending I'm going to put Amber and if I come back we've got Amber so the problem is that here admin is on Orange and pending on yellow but that's all right okay that's just a beginning but that's really nice I don't know what you think about that we can have a full list of users in here now let's just finish on one point what do we do if we don't get any member well basically it's not supposed to happen because if you are logged in you are supposed to have at least one member which is you but if we want to avoid this we can go back down here and what we can do is to put if members and members map and we have the list of members but if I suddenly remove all my members here if I suddenly remove all my members I end up with this ugly line that I got here so I'm going to create a last component to just display if there is no member actually I already got at my border so what I can use is to put here members length is equal to zero for instance and I can put here a fragment and put there are no members here no members yet going to remove that and when I come back I get this it's just a fragment the problem is that I don't get any padding so here I can put a div instead and I'm going to put class and P4 for instance and we've got this there are no members yet so here what I can do here is just to come back to the model that I had before and here I'm going to had exactly the same model that I had before all right we've got a basic team settings page with a module that we can reuse where we can click on some elements display some status and display some roles also of course we can go deeper into creating this uh um page such as when we click on remove which should have a popup asking if we really want to remove it really depends on how you build actually your request and all the rest but here it's totally useful we are using the package that I created to display these users faster it's working it's nice it's efficient we can use it

Channel: Codewithguillaume

Views: 25,860

Keywords: course, free, code, javascript, startup, dev, nextjs 14, shadcn, fullstack webapp, frontend webapp

Id: j2iWwaPW5OE

Length: 117min 9sec (7029 seconds)

Published: Sun Mar 03 2024