Custom Drop down or Select Box + User Area + Language Area | Next js And Tailwind CSS Episode 02

hello everybody Welcome to my channel in this episode which is the second episode of our next Chase and telling CSS series we are going to implement some beautiful things let me show you this is uh like what we are going to implement is custom list box and you can see it is working we can select everything here it is so beautiful so we will Implement something like this and we create a new road for it so the road would be a slash singular slash select box and here we create a component for it this is the final component we created that you can see it and then it is open you can choose any one it will be shown here and this button bar would be closed and also when it is open you can click everywhere outside of this box and it will be closed automatically also using this created component you will create two different useful components the first one is this user area and we can create some user area we can use I simply create an expand with the user area but you can use your image here and you can have different roads here you can see on the bottom so I can create a user dashboard you can see that it will move us to the slash user dashboard it is not fun so we go to the NAT phone page but other problem and also we can use different roles here for example a slash user is like friends log out slash alt slash logo and it is working completely true and also we can have another custom select box for our languages you can see that this is it and it has this different flags for the flags we can use this icon it's the Flag icons and you can see that how you can use it that's it so by selecting the first one we can go to the slash en and by the next one you can go to the slash fa so these are flags for the United States and Iran you can use anything like you want or any text for example an expand instead of this or let me show you here you can use both of them here I have two of them span and an icon you can use both of them and this is in my opinion this is so useful in your project and also it is let me show you it is responsive so if you go into this part you can see that it is it and also if you go to the home page you can see that this is working and also this is working and that's it so true Okay so this is so this is the output of this video and if you are ready let's continue so let's start by using our git repository we created this repository on previous episode we created the main branch and Branch Viva okay let's copy this and go to drive F open a new terminal or command environment and I say git kilometers okay let's open this v3s code and that's it so the first thing is we need to have another Branch for this session so in when you are watching this video the main may be updated on the next sessions but you will have access to all of this current code if you want to go with me so make sure to create a new Branch here create a new Branch from and for this episode we are on episode two so choose this V1 so we want to create new brand from this and the branch name would be episode two this is it so we created the branch of episode 2 and we're working on this so let's simply install packages by using npmi we need the node module you know that we need this because non-module isn't saving on the gates repositories that's it so let's say in PM run Dev to see the current codes and the starts okay localhost 3000 let's have this in the right side and let's have this on the left side that's it so we created this on episode one and this is our structure so we have this menu I'm going to work on it so let's start the first thing is I want to create a new page for uh my component so let's go to the components and Main layout here we want to change the little let me show you we want to have a create a new inside this single large what's this singular okay we want to create a sub menu for this so let's cut all of these and create a new Division and paste them inside of these divisions format document and inside of the LI we have a division at on the button we have a ulv An Li okay and inside this Li I want to have two different sections a Lynch and an icon so let's import our icon our icon is Si so I say s i single SI why it is not recognized okay s i sing Single store this is it so inside of Li first let's have this icon then let's have a link and this link is for our select box this is the level of it and for the href you can use any address you want I want to have this road singular slash select box this is it so we need to create this Row first let's see the so here let's change this Flex to flex column on the first step okay now everything is good and so this is the Felix column just if I start is good but it's time for the items we must use a star to be on the left side and no it is good and for the top division we can use flex and this is a flex row and the justify content is a start to start from the left and align items up Center for my document okay now this is it and also let's have a Vita full to have the full width of its parents that's so good uh for no I think this is so this is the top for the button which is this UL you need to have some classes so let's have some separation from its top you can use margin left of eight and margin top of four so we have some space that's so good and for the LI you can use flex again so let's have Flex and justify its content of Center and align items of Center and the gap of four that's good so this is it and I think Gap three can be better so on the feature I need to change this and make this to a component but for now it is good and we have this link you can see that it is 404 for now but this is not a problem uh let's wait for it okay refresh to be sure that everything is compiled successfully now we have the select box okay and this is it so let's create a road for the select box and use it so I want to create a new let's copy this and inside of app I create a new folder I say this is singular and inside of it I want to have this row so create another folder with name of Select box and inside of it we have a page.js x so this place addresses will be our row let's say rafce if you're asking what is this on previous episode we saw that I'm using es7 let me show you es7 plus I'm using this es7 plus reactor dogs and this lets me to create new components using rafc Okay so let's change this by pressing Ctrl D we select this tree page and we say that this is my select box page this is my select box page and inside this division let's have some class names I copy some class names for you you can see that you can use these classes for all of your page or any class you want I use this color these classes it is inside of the repository on the redmi so you can use this so for the classes I say that VG white rounded LG margin X of 4 and padding of four let's check the result if I go to the select box this must be here okay let's refresh and you can see that this has these classes so let's delete this and create a new H1 this is Select box page okay and let's have some BR okay now I want to create a new component inside of this page because this page.j6 you can use all of your classes here but I prefer to create a new component so you can use let me show you you can use the main component folder or you can use exactly here inside of the select box you can create your components I want to create this here because this is not very general for now this is for this page for now so inside of Select box you have a page.j6 I create a new folder here I say components and here I create a new file name for example custom select box dot jse custom selectbox.jc so good and I say rafce to create my component so I created this and now I can import my new component here custom select box you can see it is important from that slash component slash custom select box so let's close this page I don't need it anymore and also this main layout so this is it so we created this component and we will use it here and inside of a custom select box you want to have the some different sections and if you go here into the headless UI to see what is plan of us you can see that see some tail glasses we want to create this you can see that we need to have two different parts a top and a button okay so we are going to do this and we need to have an estate to control the open and close and also we can select something so we need to have another state to work on it okay so we need to use two states we will do this the first thing is what is the list of the items I want to work we can create an an item for each of them or you you can have a bit of a Creator array and loop over it this is a react standard method so you'll do this first thing is let's have a con City so I want to have a list to all for it up to 30 to work on it so I say I have Tehran City and I have Shiraz and let's say I have yes Mash had ah this far okay so this is a list of some cities from Iran for my document no I have this list oh I want to work on it so inside of the division you can have two different divisions at top and but this is let's create our Estates first to see the structure of it so I want to have two different states cons of selected City and set selected City equals to a user state of the first one which is Terra or you can use any name you want there is no difference between them so this is one of my Estates and also let's have another state for the open set open and we want to have an estate and the default value is false okay now it says that you are importing a component that is used component it's right because we need to see say this is client you say use client to say that this is a client component and form a document no we don't have any error you can see that I have this okay now I created my Estates and for the top one I can simply say that here you need to have a span and you need to show the selected City here inside this okay this is terrible now and also I want to have an icon here so let's import our icons I want to import an icon from react icons a slash BS and I need to use a BS expand Chevron expand I want to use this icon here after this is fun that's it okay for my document so good and also here on the button I want to have two different sections for each item so the first thing is we need to render our items so I say my cities Dot map and I receiving an item for each one and for each one I will create a new Division and this division have a key of item that's it and inside of it I want to have two different sections the first one is expand uh I want to show this item yeah okay now you can see it and also we have an another icon here so we need to show it so inside of this division we need to have another icon let's import e so let's copy this uh on the top you say that we need to import something from Ai and what is it we need to import AI out line change that's it you can see how cool it is worth it right icons and before this S Pen let's have this so let's check it okay now you can see that I have anything but no I want to work on my classes so far so good let's format document now we have two different sections now let's work on our classes we have our Estates and we have our classes and so for the main division we need to use some class name for example BG gray or 100 and I say this is a flex and it is flex column the direction would be a column and for justify content I use Center and for line items also I use Center and for the video we can use let's say you can use any vt164 I think that's not bad uh um or you can use W fit to be under your content but I think with 64 for now is good let's form a document we can then change it to whatever and for the next division which is this the top division this is it we need to have some class names so we need to have we need to have a name and an icon okay so the flex would works here so we say this is a flex but the direction is flex row we need to use a justify content of between uh the line items of Center let's see okay that's so good and let's have a BG of white is better for it and also let's have a bit of 48 and okay no it is good let's have margin y of Two and a padding of two and also let's have a rounded LG to use for the radius for it this is better and let's have a cursor appointed because we want to click on this for my document okay so this is for the top one okay now you can see that this is so good you can see that how easy it is to use it's a stable classic yeah that's it so we created this and for this color this is the AI sorry this BS Chevron expand let's have a gray color for it so we say that text 400 and format document okay now it is better and the next thing is even we want to work on this part when we open on this this must be hidden and open and kilos okay so we need to use an anti-league for this division so let's press enter and here I say that on clicking on the top side you need to change the open so let's say that on clicking you need to change the set open and receive the previous value and not of the previous value so if it is open it will go to the close and if it's closed it's going to the open so for my document you can see that on the initial uh state it is false then it change between false and through using this comma that's so good and after this we have another division on the bottom so for this we want to change it conditionally based on the open so for the class names instead of this double quotations I use a clearly brace and back teeth to have access to JavaScript so let's do this the first thing is I say that this is a flex and a flex column because I have some different items that know that's so good let's have a PG of white for them for these divisions so good and let's have a bit of 48 like the top okay much more better let's have a margin y of Two and a round of LG for this division or you can see that okay so good for my document and no I want to change it conditionally based on the open State this is so easy we have done this using this button on our previous episode now we are using exactly the same okay so here we want to access to JavaScript we open if we say dollar sign calibrases and here we say that if the open is true do something else do something else okay so if it is open you need to have the opacity of 100 okay and a height of Auto to be shown as if it is not you need to have the opacity of 0 and the height of zero this is it so let's refresh and check it so based on the open this must have different values so if I click on turn you can see that this is showing and it is closing this is so good for now and let's have some transition for it to be better so I say that the transition yes all and let's have a duration of 200 that's so good and also because we want to let me show you because you want to have this uh busy colors we can use overflow of hidden for this so after this we say that your overflow would be hidden and let's form a document okay this was the classes for now for the top divisions okay so this is for the palette in order to be sure if I use the BGR red of 500 you can see that oops uh if I say BG red 500 you can see that this is the this div okay so that's it let's go to the next part and inside of this cities we creating some different divisions and for any division you want to have a class name so let's say that you have a key okay and for the class name because again I want to use uh Dynamic classes I can use curly brace and back ticks okay so for these classes we can say that each one of these divisions is the flex okay no it's so good and justify content is a start to start from the left and align items is centered and let's have a gap of X of 2 between them okay so good let's have a padding mix of two to be inside of it okay and let's have a padding y of one okay so good and also I say that on however I want you to have the BG orange of 100 format document now you can see and if I didn't you know you can see that I don't have any overflow if I don't use this overflow hidden let me show you this is the reason we used it okay now you can see that we have overflow in this Parts on this Edge but we don't need it so you're using this overflow of heat and everything will be hidden everything that's so good so after this however we can use a cursor of pointer because we want it to be clickable okay no so good no it is time to work on our Dynamic classes and we say that you can see that I I am receiving an item for each one also I have a selected City and here you can see that when something is selected when we open it it is it has some backgrounds okay so this is what I want to do here on this class you can see that I'm on the cities that map and for each division I want to say that if the selected City equals to the item have some classes else nothing okay and if I if it was the item was like the selected City you can have the busy orange of 100 let's form a document okay just to remember I'm using prettier let me show you I highly recommend it to code formatting purchase is a good tool please use it so your code is uh it's much more cleaner and that's it so we say that if it was like the selected City you need to have the busy orange of 100 so refresh and when we open this you can say that they don't have visual if I if I click on these it it is not selecting yet but you work on it so everything is selected it has the busy orange of 100 that's so good the next thing is for the uh this teach for this T we want to show it based on the selecting okay like this you can see everything is selected it has and let's work on this so for this uh item for this icon we need to have some class name and this must be Dynamic based on the selected City okay so let's say that you always have the text Orange of 100 and based on the this selected City equals to item based on these condition if it was you need to have something else you need to have something so if I say that if a selected City equals to item you can have the display of block and you can have display up now let's check it for my document we said that for this T item we're saying that if select a city equals item your display can be blocked and your display can be hidden let me show you this is not good and this is not working why uh okay no the color is okay this must be something like 400 to be shown because the background okay it was like the background okay now this is r300 is better I think yes so this is not good because when you're using display hidden everything will be removed from your thumb and this is not good we can use opacity so instead of this we can say that your opacity can be 100 and as your opacity can be zero this is better so with the opacity it has the space in the down refresh okay now you can see that the place is reserved that's so good and it is working completely true so this was for it and the next thing is when we are clicking on these items you can see here that it this button would be closed this button Division and also the selected will be changed you can see this is it so let's do this and for any of these divisions after this key we can have an unclick okay and in this unchilic we can say that you need to to have two different works the first thing is please change the selected City to the item so it will be changed also change the set open to false okay that's it for a document no I think this must work let's check it again and you can see that if I click on yes okay this would be closed and the yes would be selected and then open this you can set yes this the default selected and it has the tick and has the background if I choose Shiraz it is working completely true that's so but now we have another problem let me show you here when you click on this and this division is open it would change the height and this is not good let's say that we want to use this here to have the user area select box and when we clicking this then the hand and the logo then I've got everything we have here would be expanded more and this is not so good so this is not what you want and we need to change it how we can do this we need to change the display of this to be something else so this is what we are going to do no for the button division let me show you here so we have two different divisions okay top and bottom for this bottom division we need to have a slightly different classes so for this we want to have another for okay for this division the button division we have some class name of these and so I think you have a problem here because okay this is wrong because this is just the dynamic part so we need to change it these parts must be outside of our Dynamic power so this is let me show you quickly here okay so this is my Dynamic part in order to show you completely I'm working on this so this is the dynamic part okay if it is open it has opacity of 100 and height of Auto else we have the opacity of zero and height of zero okay that's it and after this we need to have our classes of transition all duration 200 and so let's format document okay now you can see it if this is the dynamic part and we say that if it's open use opacity of 100 and height of Auto is opacity of zero and height of 0 after this we have transition all duration 200 and overflow of hidden that's so good so let's work on this after this the turn the Overflow of hidden we can say that for this the position would be absolute okay absolute absolute okay and for the top you can have four rim or 16 and for the left you can have the zero okay and for my document so that's it but you can see that it is working but it goes to the up because the position of the absolute needs a relative pattern to be absolute on it so what you can do this is the patterns okay this division is the pattern so after this width of a bit uh 64. we can say that your position is relative so the absolute would be a stick on you yes it is working so for my document now you can see that it is not affecting the height of everything and this is completely independent no it is so good okay and this is not on the on this this is understandable this is not on the center because we need this to be exactly on the left as this so let's change this a little and instead of Vita of 64. let's say width of feet okay now it is working and wait for it no I think everything is working correctly is fun okay everything you know is good in my opinion and we just want to have another functionality for it so when you are opening this if we click somewhere else it would be closed and this is what we need to implement so we need to have a place to click on it okay in order to doing this it is simple let's close this uh let's close all of this so we have a division we need to have another Division and when we click on it it would be clicked and it would close this estate let's have another division outside of this division and because we cannot use two different divisions without any parents in react and xjs we use a fragment simply and we wrap the fragment around these two divisions so for my document okay now I have another division uh for the class names of this Division I can simply say that you can have a for now let's see it it is a busy Square 500 and the position is important it is fixed and you need to use top 0 left 0 right 0 and button zero in CSS we have instead of zero it works it so we can simply say that in set 0 and instead of zero you know that it has left but left zero right zero top zero and button zero okay that's it and after this let's have the opacity of 500 to see everything okay now you can see no if I click on this I can say that close this but the problem is when this is on the top we cannot click on everything because this is on the top you know that in CSS we you can use the index to handle this so I say that your Z index can be let's say zero and for the top division we can say that your the index can be 30 okay no this has the priority this division now you can see it this is behind the this division okay now we can work on it and also this is available so for this division we can say that if someone clicked on you see you can simply set the open to false okay formats that's it wait for it so if anyone click on this it will kill us let me show you if this no this is open and if I click on this the open will change so and the next thing is we don't want it to be shown when it is kilos so let's have Dynamic class again on click and key last name for this division let's cut everything from here and again change it to Dynamic and paste the classes and we say that on the dynamic part we say that if it is open if the open state is true your display would be black and your display won't be hidden I don't want you to be turned it down so for my document no it is it so if you format okay you can see that when we are clicking on this this would be shown and when the it is closed the open is fast it should not be shot so good and it is working so now let's know that we saw it let's change this PG Sky to 100 this is better and also we can use BG Grace much more standard okay refresh okay now you can see that we have a simple below here you can use any color you want or you can also use no color it depends on you and your business logic so if you click everywhere it would be closed and this is the priority of Z index of 30 so it would be shown when it is open this is the place we can work on it so good I think for now it is okay and we can okay I think nothing is where it is working completely as I want so let's have a comment for this and let's go here press press this to see the structure okay so um layouts you have this change here so good page.j6 created this and custom select blocks okay so we say fit for the feature add what let's copy the name from yeah add custom select box okay so this is for the commit message press these and these and this okay and commute publish branch so this is our new Branch for this episode the second episode okay no everything must be on there yes you can see that if I refresh it is detected automatically it says that episode 200 pushes less than a minute ago component pull request and we have episode so good so let's continue we created this let's go to the home page we created a select box here uh instead of the select box we created this beautiful custom select box it is independent you can see it and it is working completely to rule and if you go to the app singular select box page or this is its page and inside of components this is it so here you can work let's close this and open the top division uh this is it so here on the cities you are using ankylic and here you can change anything you want and also you can use for example redirect your user or do anything like logout or anything you want that's it so it is selected the next thing is we want to have a user part uh sorry a user area here and use the exactly the same component and handle it let's do this so in order to doing this we need to change deleted so let's go to the component no you can see that we have the main layout this was the main layout for us and also if you have a main header so inside of main layout we use this main header and this is my main header no the program is developing so we need to have different folder structures so inside of components I want to have some config some changes let's create a new folder and name for uh layout and let's come let's move this main header and main layouts today layout folder it is better okay now you can see that these two going there and we need to change we need to go to the app to the layer of JS and change the import from the new road but you can see that it is done automatically in next.js it is so good so it handles automatically by the next Json it changed the main layout Road from slash component slash layout slash main layout so good no let's go to the components and inside of this layout inside the main header I want to have a user area so where was the user area here so here I want to create a new component so instead of this let's create a new component and import it here so inside of my layout I say that I want to have let's in fact you know what let's copy from here and change it it is easier so instead of Select box component we copy this custom select box and inside of layout we paste it here okay so custom select box we need to change the name to anything you want for example instead of custom select box I can say user area select box or any name you want so this is user area select but let's copy the name Ctrl C okay and let's close this custom select box and here I want to change the name so con stuff user area select box is this and Export default of user area select box now let's import these inside of the main header I say that user area select box okay you can see it I created inside of a division because the main division is flex so it is better to have it instead of a division in order to being better categorized so know it is it and you can see that it is imported this is the area from that slash is the area selected box this is it so let's go to the user area select box and have our changes so the first thing is I want to have different uh structure inside of this so let's change a little instead of cost of cities I want to have another structure so here I want to have some actions okay and for this actions I delete everything I want to have different items and loop on them okay so every item has an ID and every item must have a label and also every item must have a root okay so for the first one we say that you are user dashboard for your label and for the road you can say that you can go to the slash users slash dashboard okay this is the first one so the next one would be transactions and slash user slash transactions or anything you want the next one would be to read and after transactions we can say for example user orders and orders this is just a simple example you can use anything you want so whatever let's say friend friends and slash users slash friends and for the next one we can have let's say a log out and for the path we say that it goes to the slash art slash logo okay so this growth is different so let's form a document no I have this actions okay and this time because all of them are roads I don't want to have any selected or anything else I don't want to select anything so I don't need to use this estate I delete it uh let's go here and change everything so this time inside of my let's show you here okay we have two two divisions and it's divisions okay everything is good so this time I don't want to have let's go here to the top one so I have a flex a flex of column I don't want to use this PG Gary for now let's delete this uh I have a Philips Philips column okay justify of Center and line items are centered okay and I don't want this Vita fee this must be automatically handled and the relative and the 13 okay we are on another division for now so let's go to the next one we have another division here and here this uh ankylic set open and previews and not previous must work so good and for the class name this time I don't want to have two different steps so I just want to have a span I don't want to this item so I delete this item and here I don't have any selected City I simply say this is a your level is always a user area or you can use the image of your user here or anything you want you can see that this is the template so instead of this expand you can also use an image okay so this is it and because of this I don't want to use the flex because I don't have anything else Alexa justify between item Center I don't need them uh you can use BG white but I don't want it because I have already BG white on my nav bar the vids I don't want to change the sweet this must be based on its pattern you can use margin by 2 padding 2 rounded and in fact you know what I don't need this margin y because I'm using absolute and it is not needed here and here's a pointer is good and because we don't have the BG we don't use this rounded LG so for my document now you can see that we used exactly the same structure but we edited it okay and this is it so this is the user area S5 and for its the user area for this span we can have some classes for example border two and a board below of 600 and I have some cutting and a rounded of LG so it is shown better that's it so this is for the first one for the next division which is inside of it first thing is we need to delete every selected City okay so let's select the city because we don't have selected City we have some errors you can see that so let's delete the selected City and here select the city let's delete this Dynamic classes okay and also here let's delete the selected City okay so for my document so uh after this we don't have the cities it is actions for now let's say that actions.ap and on its map you say that your key is item okay on click ok so we don't want to use this AI outline check we don't need any more and we have an s-span for no we say that your item dot label must be shown here so format document because no our items are objects okay and this is it so do we have any error refresh for no we don't have any errors so good if I you can see that this is the top one this is my top one and with the span okay and by clicking it it is working so good we have the BG you can click on it we have it so we need to have a little changes okay this is so this is my user area okay let's continue so here inside of this uh down you have Flex Flex column BG uh White W of 48 and on the LG and on the open we say opposite everything is okay transition okay everything is okay but let's have the top up must be closer so top of 12 wait for it okay it is better and instead of left we can use right because now if you have different positions okay so for the right we can use zero no you can see that it is much more better and that's it but let because this is on the nav bar let's have some background here so instead of this pg1 we can use BG a sky of 200 to see it better okay no it is so much more better and instead I think that will be 40 Master better it is too big okay now it is better and I don't uh you know what so let's continue so I changed the backyard to 200 and we can also have 100 I think it's better okay so good and W of 40 you know the LG okay opacity everything okay transition okay it's overflow hidden position absolute top and right that's so good so let's go down and here on this division we say that your key okay on click you need to change set open okay for the class names you have the flex just if I start so here we can say Center it is better because this is a different component okay everything is centered it is much better and there are nothing or centers okay all right so because I have just one item I don't want to have the gap okay I don't want to have this padding of two I don't need them but no I think padding was good so we can't say that let's have padding of two for everyone okay better and okay no because you have the backing on the sky of 100 we can see that on Hover you can have BG of sky or let's say 300 or 200 and here's a pointer is good okay now it is better now you can see that we don't have any overflow that's so good so let's format document and that's it and what do we need to change again okay we don't have any problem here so good and here this item you want to change this expand so I want to have a link in order to use it so link must come from next slash link you can see that this is indeed import link from next slash link it is imported automatically but if it isn't you need to import it manually so what is the href so this hdf is dynamic it is coming from item dot row you can see this is the way we work with Dynamic routes here we change them here we we can use this way and map over okay so this is it so everyone is a link and it's href is item that road and the label is item dot label and that's it you can see it's so good yeah and also you can use rounded for each one but I think this is good for now we can use it so for a document and let's go don't do we need to change anything no it is the index of zeros and it's a 13. okay everything is good I think this is completed and let's refresh okay no I have a user and you can see that if I click on this it will be open and I have the background I can click on this it will be closed and I can choose anyone and let's go back because okay everything is a row you can see on the button left everything is a row but we don't have this roads so it will it will go to there if I please say transaction it will go to the 404. so good let's uh handle 404 and before that let's delete these two okay and I think this is working good and it is completed so let's have another comment so let's go here and close these okay so I say that in layout it is changed okay I have these new components inside of this layout everything is okay and I deleted this okay yes we'll change the location so I say that feed what we added in this section we added this let's copy the name from here so we say that feeds added user area select box okay let's commit that's it I think okay so let's check everything by creating a new a page for the not phone so in the app directory you can use not phone so let's create it not found dot JS or jsx and here I say rfce okay the name is not like this it is and nuts phone and for my document okay let's refresh okay now let's go to the home page okay we are on home page so good if I go to select box everything is okay and if I go to somewhere which is not let me show you here for the class name of this I use a BG of red of 300 and we have an H1 we did not found so if I go to anywhere I want I want this to be shown so if I go to this transactions you can see that it is user transaction it is not imported it is not created yet so we receive this not phone okay but there are some little bugs in this new version of next.js you can see that it is refreshing automatically so I searched a lot about this it seems that they have some issues with this not phone and we can handle this by catching dynamically and changing so let's do this so inside of this app you can see you can create a new folder with a dynamic rows so we say that dot dot dot uh not found and here we create a new page.jse and here we say rafce and this is a not found page okay let's have a class name of BG green 300 so I delete this not found that j6 and what I've done inside of app I created a new folder with this name curly braces dot dot dot not found and page.js6 and I created these uh let's have an H1 and for the class name I have let's say text green of 500 and change this to 200 format document so let's go to the home page okay and if I go to somewhere which is not exist I need to go here you can see that it is created but no it is not refreshing it don't doesn't have any problems this seems to be a bug in new versions of Nexus and we need to check it later so we created a general not found page and if I go anywhere for example friends it not exist we will go to the not found page so good no you can see that it is working so okay so we created an iPhone page so let's add it so we say feet add General not phone page okay so commit sync to push the server so let's have another place here we want to have some custom select box for changing the language of our site okay let's do this and we can see that we can again use this classes let's do this so let's go to the components and inside of this main header you can see that I have a brand let me show you here so I have here I have a division this is a brand and I have another division on the right side views justify between so inside is the right side I have a division which is a four bars it's eight and I have another uses area select box it's it and I want to have another division let's do this so be four these this another division here and here I want to create my component so let's do this I here copy the exactly user area select box I want to copy these so Ctrl C and here let's a copy and here so this is it so we need to change its name so we say that this time this is [Music] language select box okay let's copy the name and let's close everything so inside the main header I created a new language select box okay let's import it here so uh language select box no it is not important let's change its name yeah so let's change the name of the component here okay no the component name is language select box and here it must be recognized okay language select box it is imported automatically different dot slash language select one so good let's close the main header okay the next thing is we want to work on this so you can see that this is exactly the same like it and we have the functionality just we need to change it okay so the first thing is we need to have two different languages for our site so instead of is I delete everything and I say this time I have a language as for each language I want to have an ID which is let's say one and what is its flag it must be something and what is the road by cliching this I want to change my road to another level so the first one is the slash en for the English and the next one is a slash fa4 Persian or Farsi so in order to use the flags let's change it this is flat you need to use flag uh some SVG icons for your flags there are as package it is a Flag icons this is it okay let's go to its GitHub uh it's GitHub it says that you can use it like let's do this npm in sulfillight Icons copy npmi Flag icons that's it is installing next it says that you need to import the CSS so import it like this let's import it inside of it must be imported globally or wherever okay so let's check it first here inside of just this component and if it isn't working we can import it on our Global layout let me show you here if we import it inside of layout.js it will import it automatically to all of our project but we don't need it there we just need inside of this component so let's import this here and then we check if you have any problem or not okay so we imported the file of CSS okay next it says that or use CDN okay okay this is it it says that you can use an S Pen okay like this so if I use this expand let's check it quickly let's say npn run Dev and I copy this S Bar okay I go to the home page which is page.js6 here if I paste this span and I check let's see if it's working or not refresh I think we have error for no yes of course you have error because of this actions let's simply comment this for now so comment this language select boxes to avoid the errors okay if I go to the home page for now so this is you can see that this is that a span and for example if I use a span with class of f i and f i u s this must be United States and if I I are this must be era okay you can see so this is the way we want to work we need to have expand with these classes okay this is so let's delete this and close this page and go back to here on comment language select box go back to the language select box so this is it and we can have these classes and add them to the span so for the first one we can say that it is f i and f i us and for the next one it can have the class of f i and f i Dash IR by there you can go back there you can inside of this Flag icons that lip is that there you can search for all of the countries you want and you can add for example AI is angular a o AR is Argentina and all of them okay so let's go here this is my languages Okay so uh first let's go here uh let's close the top again we don't need to have any selected thing we just need to change the road so this so in the button we say that this time instead of this action we say my actions it is languages so we receive an item for each one we have a division which key of item and click we say set open files okay class names it's okay and we have a link with hrefi of item row okay instead of this in inside of this link I say Ayah expand and the class name is dynamic it is the item dot what was the name it was flat okay so we say item Dot flag and for my document let's check do we have any error or not wait for it so if I wait for it okay you know you can see that it is working and this is not a user area this must have a globe icon so let's do this on the top here I don't want to have user area so I delete these instead of user area I want to add a globe icon so let's import the icon and I say that import something from again react icons you can see how powerful react icon it is and it has a lot of themes so from the actual icons BS I want to import BS in Globe Americas this is it copy and inside of the spa paste it for my document so this is e no you can see that it is here but this board that is weird so we don't need this border true and Border below delete and also we don't have this padding one we don't need it and also we don't need the rounded LG because we don't use the board just we say that you can have a text of 2XL and for my document refresh okay now you can see that it is here and we can choose it you can set when I clicking I have this back here so good and it is working correctly you can see that also the roads are working so if I press this America it goes to a slash e and if I click on either it goes to a slash fa so good let's go to the home uh just we can have some different chains inside of this classes so let's check it and again here let's check everything so Flex next column justify Center item Center relative everything's okay and on this division we have the P2 cursor pointer okay text to excel okay so the top division is okay just for the button divisions let's have something change for example this time we can use another BG for example BGR red BG orange basically let's say orange so this will be different if it is working or not BG okay Orange okay okay so and we can have BG orange and its weight can be different because we don't have a lot of weight okay it is better Vita 16 and we don't need this margin because everything is there absolute and relative so and we have rounded LG and this open it is 8 exactly and for the transition all okay okay everything is okay top 12 and okay but because we have this right and this is it because we want them to be different we can use a different right for example write out eight would be much more better okay no everything is different so good okay uh okay these two are secrets from each other and let's check everything language.map okay Keys item ID and key set open files okay and here for this classes you can use flex that's very center right in center okay padding of two and okay padding to this oh on holiday we can say that because this is an orange you can also again use the orange Okay so wait for it okay now you can see that BG is around 100 and on however this is better visualize 13 and that's it and I think this must work completely true okay so I think everything is completed and let's check it again okay okay okay let's uh have another comment uh sorry another comment so we added Flag icons okay again and on Main header we added this okay and we added this so let's copy the name of this and here we say that fit add language select box commit push okay so this is it I think everything is okay let's do the final check and finish this episode so what you have done let's go to the home page okay we are on a home page refresh okay we created a new UL inside of this singular so the select box created this is a slice single or a slash select box and here we created a page written compound in this component we created these you can see by selecting it is working correctly that's it everything is okay and also inside of our main header we created these two different sections a user area and a language area so in this user area you can also use your image like this by image you can use it but I simply created this this is an S Pen you can change it with anything you want so this is a user area you have user dashboard transactions orders friend logo you can see here on the bottom left you can see that everything has its own Road for example clicking on this must go to the slash user slash dashboard for now it is a not found page but it's not a problem for us and the business logic is working completely too so let's go to user transactions slash users slash orders slash users friends uh Slash art slash logo so you can see that this is dynamically vulkings and so good and also I go to the home if I click on the next one it has different background different hardware and we have you can have a name like let me show you in select box you can also have this thick and thickness this name you can have another span inside of it no you are aware of this but simply I use the flag so this is for the English you can see that if I click on this I will go to the slash em which is not exist for now so it says not found and if I click on this it goes to the slash fa which is also not fun for no but it's not a problem our business logic is working so this is it for this episode you can see that by following the and tell me in Celsius classes and the CSS rules that we know already we can create anything we want and you saw that we created two parts which is really too important for us in another project so you know you know that how you can simply add them to your projects and you don't need to use so different packages like material you are you and these are anything you want also I'm not saying that they are not good I'm just saying that if in any project you just want to have a custom select box you can use this component and also you saw that first we created inside of the singular select box we created this component and then we changed it based on our environment and you saw that the logic is the same so far so good so this is it I hope this video helps you please let me know if there is any opinion any comment and like this video and leave some comments for me and also don't forget to subscribe to my channel and if it is useful please give a star to the GitHub repository so I know that you love this tutorials and I will continue them better so have a good time and goodbye

Channel: Dev Empower

Views: 3,217

Keywords: nextjs, tailwind css, next.js, tailwind css tutorial, tailwind, tailwind crash course, tailwind css project, react tailwind, react tailwind project, tailwind tutorial, tailwind tutorial for beginners, next js 13, next js tutorial, tailwind next js tutorial, nextjs and tailwind css, nextjs tailwind ui, next js and tailwind css project, next js tailwind css dashboard, nextjs tailwind course, next js and tailwind, next js, next js 13 tutorial, next js project, next js 13.4

Id: Gcf9SwWKTNc

Length: 72min 33sec (4353 seconds)

Published: Mon May 29 2023