Live coding a Dropdown Component with React, Tailwind, and Typescript (Good Practice for Beginners)

well welcome to the stream y'all I'm going to try to build out a drop down so let's look at examples and this is what a drop down kind of looks like you know obviously it looks like is this a drop down you guys have have in mind um so a button you click it it has a little panel let's try to figure this out live I don't think it should be too hard hopefully knock on wood like a two-hour stream of me making a button so let's just make a little drop down widget so in next typically what you do is you have a components folder and I can make a new component called dropdown.ts alright so let's work on a drop down widget until uh typescript's also kind of new to me so like if there's anything anything I'm doing wrong with typescript like let me know but let's go ahead in this drop down we can add a button um and let's make sure that this button says drop down and nothing's showing up because I obviously haven't even imported it here let's do this this is what we're building I need to have like a little carrot which maybe we'll install like a font library in a bit but let's just keep this simple so in the drop down is showing up on the page now might be pretty small we want to style it to make it like a little bit gray so I believe there is BG gray 400 or something and we can like make this look a little nicer and there's also the ability to I have to remember my head is in the top right corner of this page so I might be blocking some stuff when you hover over it let's just have BG Gray go from lighter to darker I don't know what the property like ux stuff is is it darker the lighter I guess I could find out on any other type of looks like it's usually darker to lighter I guess it doesn't really matter let's add some padding to this so one attribute is like you could do e x of two maybe that'll add some padding to the left and right it looks a little bit better and then obviously the text how do I do let's see I think it's like text White all right anyway so we're trying to round it too so I think there's a you could say found it or something until when that'll make the button to look a little rounded and if we look at the image they have a little bit more padding on top I believe but we'd probably like py of one and I don't know if there's like a convention like you should probably put your padding kind of close together but yeah this looks okay I guess let's just add some overall padding to the page so we can say 44 okay that's way too much uh 12. here we go I just wanted to kind of get it out of the top right corner um so if you click on this button we need to kind of add some functionality to show a panel right and we'll come back and add a little down carrot so how do you do that well let's go to the drop down and typically you have to do some type of State so we'll say const uh is expanded that is expanded equals use state I'll say false so by default it doesn't actually show the the panel below now to get this to work what we're probably going to have to do is we're probably going to have to like wrap this in a div so that we can put a panel and have it not be displayed so I'm going to say if it is expanded I'll go ahead and show another div which we could like start selling as well and what do we want this panel to be I guess background color could be white um how do they in the in the image I think the page is like a an off-white like an eggshell so we might need to go back to the page which is here and maybe it makes more sense to put that in the global I don't really know let's just try putting it here I can say background is Ray of 50. and that did change the background but it only changed it for my little app component so I think maybe we had to like we might have to go in here do something or we need to apply to the body I mean you could also do like H full I believe and that'll kind of expand this whole thing to be the full page at least I thought it did but I guess not because why not so H4 makes I think the div expand to match its parents height but we probably need to just apply this color to the body to be honest so I guess the best way to do that is go to the global and I think you guys like body ply applies like a special keyword you can do to kind of apply other Tailwind classes so I can say BG or A50 that do the trick looks like it did all right just figuring stuff out all right anyway so we kind of got distracted with coloring the background color so let's actually make it so you on click this thing you want to basically set this expanded to be uh true proper probably or we could do a toggle functionality if you want to all right so let's double check that this panel is actually showing up so I'm gonna put some text here this is like uh panel and it does look like there is a panel here like if I were to make this a different color you could easily see it maybe I should do gray gray of 100 here okay I think that looks better all right so what are we building we are building this we're trying to build this thing so this thing has some border on it so I think what we could do is we can go back to the drop down and on the panel we could say order and that adds a little bit of board to it it's also a little bit rounded as you can tell here this is squared but if you look at the actual image they round the edges a little bit so we could just say like rounded here and there you have it you got a rounded panel uh padding obviously we should add some padding probably want to keep it consistent like with the button just so you have like a consistent look and feel so whatever pattern we use here maybe we should also use here what do I need to do here so inside the image they have some items so maybe we can do some type of some proper react component to where we take in a list of options something and options will be an array of string okay again we are using typescript so I want to go ahead and make sure that I'm passing options here and we're going to pass an array of strings so this image has item one two three so item one do three here we go make sure this shows up well I guess I wouldn't show up because I haven't actually compiled it but let's just go ahead and map so I'm going to say uh what did I call it options.map and then for every option that we have we need to create another give I know people use like ul's and L I's I don't know if that's better in terms of like semantic HTML um probably is but we'll just keep it with divs but Tailwind doesn't really matter because like everything's styled um like everything doesn't have a style and tail and by default I believe so like even if I put the UL it's going to look exactly the same as like a div and stuff let's just try putting a list item and see what happens so I'm going to say option.name clean this up a little bit I'm just going to put name here wait wait it's not it's an option not name these are strings so that one would probably typescript will probably complain I'm doing that missing key so key could be option now this I guess technically I should use index here because option is just going to have like potentially duplicates I guess you shouldn't have duplicates but let's just see we've got item one two three so now we what we want to do is I'm assuming that they have some type of hover State when you hover over the item it changes it to Blue let's try doing that um go back to the drop down and let us dial this thing so I'm gonna say class name is equal to let me put this stuff on some new lines I need to also set up my eslint I like it I like my code looking like this so every property is on it's like new line um I haven't yet gone to eslint and set that up I don't remember what the rule is and I don't want to waste time doing that but I I like my code when it's like everything is I don't formatted this way but that's a better approach there last name so if I hover over this thing I want to say hover colon BG blue uh let's do 400 yeah that looks like kind of closed no I think they're using like something darker let's do 500. and then obviously when it's hovered over they change the text to White so I need to also say cover text White I think I called hover wrong so we could do some more padding to these items again like we could just try to do the default padding in fact I'm not trying to do that I don't know if this is a good approach but I'm gonna go ahead and make a new class called like padding D default and I'm just going to apply adding X to and padding y1 just so that like every component has a very similar padding and let's see if this works if I add that here notice that the item has some cool padding Also let's do it here and there I don't know if that's a good approach but I think it you know you should try to clean up code wherever you can now one thing I noticed that there's no like cursor when I hover over these items I don't know how to do that it's just a cursor cursor pointer looking good um obviously the width of this thing is a little large like you don't want your drop down to be like four times the side of size of your button right so actually if we want to duplicate this exactly this thing doesn't even have padding on the left or the right so I need to actually go back and maybe this is why you don't do something like this because every component is going to be so unique so like this doesn't need any padding or this one doesn't need any padding X I believe the panel just keep it blank and go back here we don't need that just changing my mind on stuff but the thing that does need padding is obviously the item okay so this looks a little bit better um you know I want to make this stream probably better is so we can actually see what we're trying to build in the UI I think we lost support for the cursor so let me go back here and say cursor pointer let's add in the carrots here and let's try to figure out how to do that so I've been using react boss or as you can tell I made meatballs last night those are the recipes I was looking at be careful my history Zone you know what I'm cooking every night there's there's so there's a bunch of different um icon libraries I guess I was I'm using this one on a side project I don't know what the best library is usually I use Font awesome but this one has been pretty pretty easy to just like install an icon and use it so I might just do the same thing here just go ahead and add this one and we can kind of use it go ahead there we go close my debugger you guys don't need to see that so to use it let's just go ahead and import this and let's see if we can like get an icon to display I might need to install a do they have type stickler here it might just come to defaulted so let's um look at the drop down so inside the drop down itself which is this we need to display an icon so let's go back and we see an icon display so that's kind of working so let's go back and look at the actual list of icons that they have and let's see do they have a search bar here or icons search bar we want to look for carrot that's called a carrot down or maybe it's called a Chevron Chev Ron okay well I only have access to carrot down so I'm gonna go ahead and grab carrot down and I'm going to use that instead and then I'm assuming there's a carrot usually change I think it does so like when it's dropped down it has the down icon when it's not it either has like the right icon let me know in chat if you uh are a ux person I might just do I think it's a carrot right does that sound right all right so if it's expanded I'm going to go ahead and say go the down go ahead and do this go the down if it is expanded if it's not expanded then I'm going to show the right now something I've noticed a lot of people doing in react is they'll do ternary statements for some reason I just don't like using Turner statements for something like this I rather just have it be kind of explicit easier for me to understand and read but I know a lot of people would have just done a ternary here but I think it makes the code a little bit more complex but that's just you're welcome to try to change my mind and what one thing that um I've learned in my day job is we try to keep these components as dumb as possible and like they shouldn't need to know about like they shouldn't be coupled to like the naming of the the internal state I don't know if I'm gonna explain this well but basically instead of having these B is expanded you can make some type of computed like yo carrot down is equal to is expanded and show carrot up could be or show carrot right is the opposite now is this a better approach I don't know but when you read through this it just makes more sense but you don't care how it's like set right so it's just like kind of decoupled from your internal logic and if you have a more dumb component or you this stuff comes from external state like I don't know that's what we do at work it seems to make stuff a little bit cleaner but it probably doesn't matter let's be honest so I put the carrots inside of the button and uh when you first load the page it doesn't show the carrots at all so why is that is expanded set is expanded this button should have at least shown the carrot right right does that sound right like there's no way this is anything other than true and false let's just go here and refresh this page somehow this is true I mean obviously this is true let me do this it'd be easier to debug so is Carrot down as false is Carrot right is true okay so is Carrot right is true oh I know what I'm doing what am I doing I'm sorry y'all I've just named this poorly so I'm getting myself confused so maybe I'm just making this overly complicated and I take back everything I just said five seconds ago maybe you shouldn't do this all right there we go okay so the we we should probably toggle this so instead of just setting it to true when you click it let's just do this like this will be easier to just toggle not that big of a deal um now what we want to do is we want to have this carrot be on the right of the page and also it's kind of big like we want it to be a little bit smaller so instead of 32 let's do like 16. and then we're gonna we're gonna make it go to the right so with Tailwind how do you do this well I'm going to wrap this in a div and I'm going to give this a display of Lex I think that'll put it on the right so you have two elements that are on the right you could also give it like space between I believe but I mean the button is so small that like there's no space so it doesn't really matter um and what we could also do is we want to like align the items Center so I think you do like a line Center no item Center okay so item Center is how you bring it down we could try to push it over to the right sum maybe give the actual text some margin right of one so I might have to wrap this in a div and just say margin right of one or something okay that looks a little bit better and what else do we need to do oh yeah we gotta add that carrot inside and obviously the panel it looks like it's kind of faced apart so like we might need to do some like absolute positioning because if you have other components on the page I believe this drop down is going to mess up the uh whatever it's called the flow the layout so in the div itself let me take it take a second second and think about what I'm trying to do I'm trying to get this position like relative so that I can give this position of the drop down panel absolute as if it's not absolute then if you have like other stuff on the page in fact I could probably show you this real quick if I have like other content all throughout the page I believe the drop down is gonna like mess up the content and that's not what we want we want the drop down to be like Z index loaded above so I'm going to go ahead and figure out how to do that I think I just need to get this like position of absolute and that will make it so it doesn't mess up the layout or flow of the page and I don't since we gave it position of absolute I mean I think we could probably do padding top or something of something I don't think padding works for uh let's do margin top okay margin does work so we'll do margin top that looks better um we should probably give like a fixed width of 20 play around with this no okay 40. okay that looks pretty good um uh there is more if you look at this image there's like way more padding between the first item and the top of the panel so let's just double that to like padding y of two and somehow let's get that Chevron or that's not even a Chevron that's like a triangle so how do you do that I mean you could do some type of SVG but the fact is that the yeah you could do a triangle in CSS I just have to go Google how to do it um triangle in CSF uh I haven't looked at chat yet I'll come back and look at chat and kind of like getting way too distracted bottom top bottom border is this really how you do it Aero yeah this is how you do it so let's do the first one Arrow up now this is one thing that I mean obviously we won't be able to do this in Tailwind like there's no way you're going to be able to code exactly this stuff and Tailwind so like what what do you typically do in Tailwind do I just go over to the globals and just Define a new class called like up Arrow or do I want to keep this more component based and just make a new like inline style here for the up Arrow so I'll just maybe I'll try this I'll say like up triangle is a component that returns a div that has some styles on it and we want to basically do all this stuff uh yeah I don't know if this is the best approach but hey just make it work you know make it work make it right make it fast so we're just making it work right now so if we use a component-based approach to make an inline style and we could probably make the the size be a configurable thing that's passed in so we could say size is a number that's passed in as an argument and then we could basically interpolate some of the stuff how's that look let's see I all right moment of truth let's see how this works so I'm gonna put that up Arrow inside of the panel itself or sorry up triangle I guess was called and I need to give it a size of we'll just start with like 10 and see how that goes it needs to be a number doesn't it we have a little up Arrow um so we'd also need to add some order uh put the figure out how to do that I don't know if this is even going to work but I'm we're trying to work on this little triangle here and I'm trying to figure out a way to do it because like you have to basically add border top and I've done this in a CSS battle before I believe the one thing you can also do is like you can actually play with the elements here since this is all inline styling I mean what we could do is make this be White and we can move this up some so position absolute and we could say top of negative 10 pixels all right so it is it's hard to see but it's right there so top of negative 10 left of negative 10 I'm sorry let's just so that looks a little better is it is large we might need to kind of shrink that down to let's say five which means you got to bring this thing down too so let's see if I can actually like drag this that looks good now the issue is if I can make the Border left be yeah I don't know if I'm gonna be able to do this I might have to do a different approach yeah I don't know how to do that I'll be honest with you all I don't know if anyone knows someone said clip path I'm just not sure if oh hello this is a good idea build a cube and rotate at 45 degrees that's a good idea that is a great idea let's let's see if we can do that so he's saying like instead of doing this Triangle stuff let's just make a cube rotate it and give the cube some border it's like my mind's just been blown right now so let's just keep this component here just in case we still need it but I'm going to say rotated Cube uh you know I'm gonna say up triangle version two and we're going to make this a cube so we don't need we probably need border left border right but I think I can say transform rotate 45 DG which will rotate it uh and then we need to give it like a width of let's do this size make it square this one I think the Border just needs to be like two or something I'm gonna have to figure out a way to make this like match with Tailwind but I don't think I need background or this oh white is not defined okay let's put that in a string okay let's see is this uh so small I can't see it play around a little bit with the Styles here and we want to make this gray but it's not going to be bored by top there we go quarter top to gray for both of those let's resave this page refresh it going on here oh I think the border is just too big let's try like one pixel um so I need to figure out like what is the actual um color of the Tailwind Gray where's my other sidebar like you know how you get like the compute those right here I don't got much real estate right now to find stuff but I just need to find what the order is which is this gray here so what we're doing right here is kind of like really specific so I'm kind of like getting out of Tailwind I'm getting more into like CSS but we are just gonna try this and see what happens move it down some so close ours looks smaller so let's go back to let's make this like eight or seven this is a really brittle component let's be honest but this is a really specific widget so like we'd have to bring that up a little bit that's too high and I think the Border in the actual like thing is darker oh let's now I change the Border color Gray let's see what border I want to use that looks better it's like a little bit darker I'm gonna make this into a variable here just so that we're not like duplicating some stuff you know I could just make this whole thing do this since this is like complete in but it's kind of not that important all right I think we did it whoever let's see who gave the suggestion about the rotated Cube Gabriel you're a genius man thank you for that comment I think uh it's like when you're coding sometimes you get into this this tunnel vision where you just focus on one solution but there could be like five other solutions that are better but you're just so like focused in on one you end up spending like hours trying to implement this one solution that isn't even the good solution and that's why we where I work we try to do a lot of pair and MOB programming is because you have like four people three people all looking at the same code and like someone is going to say something that's going to make the code a higher quality are going to point out like a better way to do some stuff go ahead I mean that looks pretty good right I mean there's there's like a little nitpick stuff the Chevron obviously doesn't match the Chevron but I think we did pretty good other than clicking on the item should probably collapse the uh the drop down so if you want to make this more like a better a realistic component we could try to do that as well this thing could be like an on option click there here so we can make a on option click that takes in a callback function and we could have that just for right now just be a function that does a thing I think this is how you type it go ahead and just move some of the stuff to new lines I really need to find the eslint I'm sure I have another project somewhere where it's like set up correctly no I could also do this like how do you do it again is it like react functional component or the functional component typed to be this did that um so let's go back to the index and we're going to add a function here so we know when like an option was clicked we can do something with it you just console log it right now I guess the console log the option and make sure I put it inside the actual drop down like what am I doing option any is not assignable to oh go back here this needs to take in an option which is going to be a string right so now like when I click on the thing it should show it and we want to make sure when you click on the option here on click we're just going to basically call that and we should see some console logs I'm going to check chat in just a second and I've been kind of neglecting chat but if you click on the option goes item123 and it prints out to the console so now we have like a more reusable component we can use outside of it to actually get some cool stuff so one last thing we should probably do is Auto close the menu so we're just going to add some additional logic to kind of be for it before you click on the option to close it so I can say set expanded the false um but now when I click on item two it just goes away I think this drop down is pretty much done

Channel: Web Dev Cody

Views: 15,044

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: kLQNruAH1rI

Length: 33min 53sec (2033 seconds)

Published: Fri Sep 16 2022