Converting a Figma design to Next.js with Tailwind CSS [LIVE Stream]

hello everyone I think we are live we should be live by now and yes we are live let's tweet about this uh all right let's copy the URL I'm live on mute YouTube converting a figma design to add to a next year's app oh wait aliens yes yes this is going to be fun and well I am doing this for a purpose because I'm looking for an internship so I looked up on the code down site by the way if you don't know code damn is a great YouTube channel let me just open that up first code damn so it's been around for a very long time it's been around since 2015. so yeah actually a very long time and so he then mehul he opened up his company by the name codam of course I was looking for an internship and I suddenly this suddenly struck my mind that do they have an internship for a react developer and I was like I should check it out and here is The Internship now to apply we have to finish this little assignment so let me quickly get that up so here's the figma design so you basically have to clone this in next.js and Tailwind CSS and I am on it so if you if I show the progress until now and I'm using the app directory by the way because I wanted to experiment with it plus it would make it look a lot cooler in my opinion I guess maybe who knows um so here is I like to open this up in a new window okay let that open up let's wait for it so yeah till now I just finished these Pages um the profile portfolio page this whole page and this whole page except for this button right over here it's something I want to do but it will take me a while to do so I don't want to put a lot of time in this I want to finish these designs first it's just three pages now and I guess not even three three and a half because this is going to be common in each page let's see here it is here's the profile page and if you go click on the resume button it will load up this resume page which is nice and simple for now let me know how it looks like and I'll also deploy it somewhere so right now I gotta work on this one this sidebar which is something I guess I haven't done before so would be a nice ride it's simple we simply have a card which I already have done before if we just um let me see inside of components is this the card nope let's see it was somewhere yeah in the resume if I I guess I should just look in here this was the one so it's stats right like this the one so it's basically in the card component where you have all this basic boilerplate and that's what we want in our layout so and uh okay first off I'm going to create a new folder for this so in the components but actually let's why do I have the nav bar here I should move it I should probably move it in UI yeah and so we have to update this all right that's it now in the UI itself I'm going to create a sidebar folder where I don't think I need a folder for this but let's create a file instead sidebar dot TSX let's export functions sidebar by the way let me know if the keyboard noise annoys you a little bit because it might annoy a lot of people I cannot hear what it sounds like right now so you got this sidebar um and what else do we need so it's going to be wrapped inside of a card very simple stuff then okay why do I have why do they have the Chrome icon here anyways it's fine let's copy as SVG and I store all of my icons in this gigantic file I don't know why this kind of I don't know sidebar icon okay maybe it's not the right thing if it's not then let me know okay once we've got this icon we also have this so it could be a border left Maybe okay that's going to be fun so in this sidebar there's going to be a flex box let's actually write it right over here so it's going to reflex Flex call and gap for maybe not we have got space y I don't know what's the difference between these two okay it's it's just margin top and bottom hmm interesting let's do a space Wi-Fi and so it's going to be a function inside bar item and it's going to return another plexbox where we're going to have two items and so we need a gap between them first one is going to be the sidebar icon and then row file okay this is what I would like to store instead of a span tag okay once you've got that let's actually go ahead and create a sidebar item and to view this in action I'm going to go inside of here export default function edit layout let's return okay what are we going to return that's an interesting question let's see the other layouts this one okay so it's just like this and we've got this sidebar then let's close this out close this close this so we got this page I'm going to export and default function edit page then we are simply going to return a div where we're going to have a P tag and just some random gibberish let's just instead of this let's just enter some law remepsen about that okay now the navigation because I don't think there is a way to navigate from this page to this page they they haven't shown anything like that so right now how do we navigate I mean what would be a proper place to put in a button to let the user click on it and then say just edit your profile I guess maybe there is this edit cover button but it's not something doesn't make any sense right you click on this edit cover but you get redirected to a page where you're editing your whole profile maybe I should put it right over here let's do that so it's inside of profile card where we have this button where I'm simply going to just say BGE secondary if I should edit profile let's see how this looks like okay looks fine so this should be wrapped inside of a link and this link should or take you to slash profile slash edit let's see if that actually works so if I click on it here we go oh this looks unexpectedly similar to what we want okay we've got Flex Gap 5 Let's do an item Center so that they are aligned properly then if you look closely they have a a different color okay when they are focused on a different one when they're not so this is the color and I better place it right over here okay it's already there it's it's gray light now how do we check if it's active or inactive that's something okay so in that case we'll have to make it a client component and so we could just get the path name from use path name from next navigation and I think I should just pass in props sidebar item props let's go down here Side by item blocks now if you are in if you are viewing this right now let me know what you think about all this in the chat if you understand if you don't understand anything okay we'll just have a chat that would be nice so we are going to have an is active which will be Boolean okay so we can do something like this is active if path name equals to slash profile slash edit now this is where uh things get a little bit more verbose I'm just going to say it's name String or actually label that would be string so for this one we've got the label of profile which is very basic and you just say props dot label right on this one here's where I will also take in the ah robs and so actually wait why did I close that after just apply these props Okay so we've got the class name which in this case would be would depend on is active all right so we've got if it's is active there we go it's it's pretty basic but instead of this text create 500 we're going to say text light gray or gray light and otherwise it's going to be text black all right wait so if it's active it's going to be lag else is going to be light gray and same goes for this one so let's actually just uh get this out of the way and paste this in let's see if this actually works right now okay one more thing if it's active it's going to be black and it's going to be semi bold I guess let's check if it's semible or not its weight is 600 same goes for here so this one doesn't really matter it's going to be a part nonetheless let's place this here this is going to be the dynamic part okay and we've got font bold okay bold is something else semi bolt is the one and there we go I think the size of this one is larger it's 16 uh okay 16 is fine so let's do the same thing with the others we have got profile socials portfolio and resume so profile socials portfolio resume socials portfolio slash portfolio oops resume and let's you make all right now okay if you take a look at this one okay fine uh but still this this is not what we are looking for so if it's active then do this else to this but it's not being applied interesting okay because this is the stroke right oh man do I have to edit this what if I remove this fine so maybe I could just have another okay so if you look at this icon this is the same thing but with a Different Stroke color let's see yep just that the stroker is different and I think we should actually create another icon so sidebar inactive icon and now I don't think I need any props so let's get rid of these we don't need these props so we don't need these what we can do if it if props dot is active we are going to show this one and if it's not we're going to show the sidebar inactive icon that's it it's done okay once we have this sidebar it's not really on the side so let's fix that okay this is the uh this is also left off so if I say let's see border right or let's take a look at this oh that's right sorry about that should be left okay interesting so how do we place this bad boy maybe I should place it in a bit should be absolute so this is going to be relative and then we're going to have an absolute one which will have a height pull I guess and then a BG of black let's see what the width is so the width is 10 pixels which is roughly yeah that's the width and let's actually get rid of this okay what is wrong why can't you have just a self closing div oh here we go work now all right let's see here we go so this is going to be left zero I don't think it behaves well okay that's because we have padding on the card right that's something we don't need so if I remove the padding and now that looks good so I can add the padding right over here well that's too much okay and first off this looks ugly let's remove this for one for one bit okay this does not look good so actually what we could do instead is we could add padding X to be 0 yeah varying X should be zero in that case this should enable what we want to enable let's get this out of the way all right and here we need a padding X of 5. okay looks good now we want this back again actually let's also we're rounded off LG fine okay now we want it to be on the left but more okay not this much but yeah you're at the point now how do I cut it in half because that's how it's being displayed here so to cut it half we should just take out the width I guess yeah or no not exactly the width should be two we have this rounded LG what if I change the width to one okay this will still be rounded let's change this to let's change this to 0.5 and rounded s okay let's start so if I make this okay fine we got this so it should be rounded e m d all right I think we are halfway there because this should now be left of one okay wait um if I increase this Z index for this one then no that really does not matter let's see how to fix this oh I think the width is the culprit here so if I make the width one now you see it should be on the left of point five maybe yes I think we are close let me look closely if we are or not think so yeah it looks good so now we only want to show this if is active oh I placed these bad boys here let's actually rename these things fine skip it that's it okay now these are not just spans but they are in fact going to be the link components so we got link the hrf is going to be oh nice props dot labeled okay this is genius Amazon just did what I wanted to do so now if I go there's gonna be socials profile resume as it's going to be hash this is brilliant I did not know if I could do something like this instead of getting a new prop all right um I guess this is it for this one I think I should displace this one this what do we call this I don't know what to call this thing this border when we hover over any of these so when any of this is hovered we can have some state or should we shouldn't we let's have some state because it's a client component right so I can have state or instead of that let's use hooks TS here we have got a bunch of hooks and here we go we're going to use hover now I'm just going to first off okay what's wrong default export is not a react component okay fine yeah I know what that is actually if I go to this page I'm just going to go ahead and copy all of this paste it here this is going to be called socials edit page unless you made it page and oh hi we've got two people in the chat both of them are my cousins it's kind of funny because it's too late for them to stay up okay so this should um this should probably be it so if I go back to the sidebar okay I don't want this itself to be the link so instead of this I should make the whole card a link let me get this out of the way so it should be like this let's copy this let's go up top paste it so we close this here and we get rid of this and now this should be a pan all right so now if I hover over any of these that's better just stopping by bro love the way you explain your thought process in your videos thank you very much ajanth good to see that really appreciate your concern all right what do we do now uh so we were doing this huge hover thing right so let's just go ahead and install use hooks TS this should take just a few seconds and once that's done let's see how we use it we simply use it okay with the ref no that's what developers do they just copy and paste all the code all right this is going to be HTML okay this is an a tag if I'm not wrong yep so this is going to be an A or anchor element and this is pretty simple so we got is hover and we just assign the ref okay wait the f is going to be over left and we go down here let's copy and paste this so if props dot is active okay so if not is active and we have hovering then we are going to show this bad boy it's simple and it works wow yeah we should sleep now and you should be the only one to wake uh you should probably go to sleep you might not have slept for a few days now okay we've got this up and running which looks nice uh should I also make this text in this known then it will be the same thing I could potentially just go ahead and change the background though so if if it's the hover thing let me let me just go ahead and do this okay this is going to be something like this then you say if is hover is true then we add ABG opacity of 20. I don't know what this will do okay that is messed up now because okay yep maybe I should change the background let's change it to light okay or gray light okay fine that looks terrible uh let's forget about this okay right now let's forget this we've got this one out this one out okay that looks simple so if I go to this page where we have the speed tag with Laura mipsum which sadly does not get displayed for some reason it should get displayed right because we are on profile edit oh because my bad I'm not displaying any children okay let's do this okay now now that looks good we've got Flex Flex call and GAP 10 instead it's going to be flex and GAP 10 and so not actually Gap 10 but I think a gap of five and in here we can make this Plex actually wait a main tag in here and this should have a class name of plex1 so that looks a little bit better now if I go to the sidebar here's where I'm going to add the height to full which does not work because the parent does not have a height of pull okay still the same thing this is where I kind of get fed up with CSS okay so you've got this Main and inside of this main you have another Main hmm okay this main does not have a height of full which means I have to go to the this layout I'll be here and let's make let's give this a height of full I'll I'll be back just a moment okay we are back let's see so how do we fix this now this height thing full height bar CSS okay I think you can listen to me nicely okay here's simplify so we got this container display table cell foreign this is a bit too much I'll just go to flow byte and search for sidebar there we go I think I should have copied this directly but no cheating okay here's the thing aside it's inside of the aside tag I should put that because of semantics and if they see me do this uh with the semantic set would be really nice um let's do this aside Zoom I hope it doesn't get ruined okay it does not fine okay once we got that it's fixed top zero left zero height screen okay should I do that I don't think I should let's try fixed top zero left 0 and height should be screen there we go it's now totally on the side that's not what we want which basically means I have to remove all this all right now that we have a height of screen we want to change it up a little bit so items should be start or just if I start if that does not do anything let's get this out of the way all right um if I were to add height screening here let me see width is this one height screen transition transform very basic but then you have height full overflow y Auto here you have aside then you have a div then you have the UL I forgot to just make this URL jewels then it should be this part should be inside of an Li why do I forget this semantics okay now all of these classes should go in here I think so yep okay now this makes sense now that we have height screen if I were to remove this and if I add it right over here hide the pull no let's remove this let's remove this right screen in there and then should not be exactly height screen I guess even though it's a canvas oh sorry it's even though it's a sidebar okay here we go we've got this nav and with this nav we have this aside which has a height of screen again let's see what could we do what possibly what do we do in here oh wait I don't even need that why am I messing around so much okay this looks fine it's just very small because it does not have any padding around it so let's add that right now it's px0 but what happens if I remove this and you've got a padding of six okay fine it should be PX 0. actually this one should have a px of zero and the rest of it okay so now this is going to be having this is going to have okay I think b x is fine but then this Gap should be seven and then this should be eight I think this this is not the right thing I did seven change that to five and change this to seven hmm now the only thing missing is the width of this one so right now if you look closely I gave this a flex of one which I shouldn't have given so let's get this out of the way and we've got a gap of Pi which totally makes no sense okay let's give it 16. so basically this does not have any width of wool so let's give it a width pull all right fine now that's that looks a lot better now if I were to give this Flex one let's see if this actually works um what have I done I give this part A Plex of one it should still have a gap of five and this should have a width of ah okay not not really half but one fourth yeah one foot looks reasonable that one fifth looks a lot better now let's just go with one fourth which is 25 percent so if I want to change it I might just change it to 33 percent okay now that looks terrible 25 all right one fourth is nice let's just stick to that once we got that and now what we want this part okay on this page is going to be on the on this page we are going to have all this stuff so we have one Flex box I think this should be in its own Flex box okay let me first go ahead and commit all these changes so it's going to be like that edit page sidebar if you guys are watching let me know in the chat how are you all doing and what all have you been up to these days I'm interested to know all right what else now we have to do so I'm going to go ahead and create a new I don't know a new folder so like we have the profile components I'm going to create a new folder called edit components components this is going to hold okay this is going to be one big component and this section is going to be a different component or maybe not because all of this I guess all of this should be a new song component except for this input box I have this input in the nav bar okay here we go we got the search box so I could just go ahead and copy this part and make this input a UI input so let me just go ahead and create an input ESX export function input done this paste this it's not going to be just that it's going to take in the props which is going to be input props input props okay this is detailed HTML what's wrong okay detailed HTML props input HTML attributes input HTML that's a lot that's a lot of stuff um what if I click this I will consider it moderators for your channel not yet not yet I would like to do it but not right now because I don't think uh if someone is spamming the chat right now also started learning Tailwind but till now I only used it with vanilla GS now he's using it with Frameworks is a lot easier because you don't have to worry about setting it up right you for example with Nexus you don't have to set it up very easily you can just set it up very easily okay how do I get these props react typescript input drops like how can I get all of these yeah input props extends input HTML attributes all right that's pretty basic so let's get rid of all this it's going to be input HTML attributes input HTML attributes and okay it's going to be HTML input element and all we do is just replace this prop okay and so let's replace this with input we don't need this we don't need this either should I jump to next um if you have known the basics of react if you know how basically react works if you've learned the fundamentals like props and you know something even something complex like the context API then I think it's fine next yes is just react but on steroids so you get a lot of features like file system routing basically then server side rendering it etc etc so you can jump on to next if you want to just don't get confused right away it will take time for you to learn next okay fine where are we so we were building this input which we would then need inside of here in the edit component actually let's just give this heart like my context API is remaining I mean you can skip the context API it's a fun thing to learn I've got a video on it as well so you can check that out but it's something that you should learn because you're going to have you're going to encounter providers and all soon enough we also have a label and this one okay let's skip that it's an it's also pretty easy it's just like you pass in props in any component and then if the component is deep down you have to pass in the props deep down to each and every component the context API makes it kind of global so you can access your State anywhere throughout your app so if I just uh show you a diagram of it there are a ton of diagrams right over here this is how simple it is okay so you basically you have app where you are going to hold all of your state then you pass it in layout header search bar and you have to access it in the search result as well so you have to pass in these props in the context API you have the data right over here on the top and then you can access it wherever you want it's also pretty uh fast I can say it's fast because you you want to read a re-rendering every component when the state changes so when the state changes all of your components get re-rendered whatever whichever component is using the state it will get re-rendered so yeah context API is Handy all right next up you're still stuck here so this is going to be inside of here edit components edit edit profile form support something from dot slash profile form turn a div okay it's going to be a div with black Flex column and a gap of five in my opinion I guess and then we're going to have one more flexbox where it's going to have a gap of three maybe it's going to hold the profile picture which will be I'll just recorded in this one now forget about this this is stored as public profile dot jpeg whatever okay once we've got that let's make it round rounded pull and then let's have a button let's say upload new picture now this button is going to be similar one that's in the profile card so let's just [Music] all right I think I messed up uh let's yank this and paste this right over here there's the first button the next one is delete which is going to have this one BG border okay now let's go back into this this page edit page where we are going to get rid of this and just use the edit profile form go back to the app this is how it looks like massive we just want to control it so round it full let's see what's the width here so the width is 72 and height is 72 72. let's see 72 yeah keep it 16. all right that looks nice but flexbox does not work nice okay now it does I think this button should have a little bit more padding right now it has a px of 3 and a py of 2 but it should have more see we've got 8 16 8 16. which I don't know what's 8 and what's 16. this one looks 16 so we could have a p x of or and a py or two see okay now it looks close maybe I guess the the font size is a bit too large that might be the reason for that it looks so huge anyways it looks fine also in the delete this is going to have a font of semi bolt so let's spawn semi board I want to finish this tonight now I'm feeling sleepy and sluggish we'll watch this in the morning no problem go ahead get some sleep that would be nice for your health no I won't I won't unlist or make it private okay once we got this I think it's far away from this uh sidebar so maybe I should go back to the layout and make sure that it's then the Gap is a lot more than we think okay yeah that seems about good now we have this label I think I should go back to the input component and I should have a label as well so let me first of all just go ahead and create type or interface here we go and it's going to have a label and name we don't I don't think I need a name because that already comes with input blocks label is optional so we could just go ahead and uh I don't know wrap it in fragments we have this label robs.label html4 now here's the thing I want to use this use ID hook in here but maybe I shouldn't if I provide a label I should also provide it an ID right so um I'm just going to go ahead and say pops dot ID all right if props dot label exists then we'll enter this out may be I to my may watch in okay sure foreign yeah you can watch it in the morning as well if you want to if it's night in your time you should go to sleep that's better for you okay this is uh let's see this is semi Bold and the size is 14 pixels 14. fine not a problem so we could just go ahead and give it a class name of font semi board and that will do it all right coming back to this part where now we gotta have this input um okay outside of this one let's place this input with the label should be display name and the ID would also be display name you do that and you get it okay wait there is some padding issues here so what I should do is just concatenate the class name right over here so let's do that class name in here and so this padding left 10. is the thing we want right over here okay that's how it looks like um but that does not mean we cannot add any padding let's add a padding of five oh that's worse uh let's see B3 bx4 okay what's wrong with this one switch to P2 all right this looks better once we have that let's see so we got display name the label shows up but the label is too far from this input what's wrong do we have any margin around it uh uh let's see what's stopping the label to be with the input oh that's because I have this fragment let's convert this to a div that should do it yep now it's totally flexbox and I have no idea why because input or label and either of these should be inline elements not Block Level elements so maybe I could just say block no that changes nothing or here let me see block yep great full does not change anything here so it should go ahead and change anything here all right this looks fine also this border border I think I should okay outline is secondary but I guess I could just make it outline primary because that way it's going to look a lot better yeah outline primary looks better anyways coming back this is going to be the secondary color if I'm not wrong yeah the secondary color let's go back to this form so we have a label and I think we should also add you know what do you call this helper yeah this should be What DOT helper and we are going to have a P tag which is going to hold this and it's going to have a class name of text secondary I don't think we need this one but yes now we could just go right over here and give it some helper text copy this paste this and boom there we go looks nice I think the margin top this should have an mb1 this should an mt1 so that they are not neither too far nor too close Okay once we got this one out of the way let's see what else should we do uh do we need a placeholder here um fine okay now this is a text area this is not an input so what do I have to do is I could receive the input element props but I don't actually just go ahead and say well is text area it would be Boolean and I guess false by default so oh no that's not how you do it pause fine so we got Boolean and it's going to be false by default of course if we don't pass it in but if it is right so Props dot is text area then we just want to display a text area since we're going to have a text area with all of these props label help per or not assignable wait a second labels to oh because this is um input element okay maybe I could add an all clause yeah that works now this class name of course should be added after the props okay now let's go back in here and I'll say text actually wait input here the label is going to be about and is text area let's take a look okay fine this looks nice uh just that we don't want this one this resizer but it's fine for now uh there's also adds let's also add a placeholder placeholder um write about yourself okay and here we could add a placeholder of light I don't know write your name or what is your name let's see let's see what uh what code Whisperer tells me enter display name simple okay we've got the profession which is also an input so as simple as this one it's not going to have a helper I'm just going to just be profession and profession enter profession all right then we have a date of birth okay now these icons this is going to be a little bit tricky um now if I want to complete all these pages in one night that would okay it's quite easy I'll do this I'll do this this one will take the most time I guess because these switches are also pretty I haven't done anything like this before okay what else do we need we got the profession the date of birth after the date of birth you could just uh give this a type of date it's going to be date of birth with a placeholder of DDM WHYY actually why why just that UOB let's see how that goes as simple as that I don't think I need a placeholder and the icon is just here so I think it's the same thing all right then this part gender I'll add three options okay because it's a controversial uh I don't know what to call this but anyways we got this class name um maybe I could take another prop right I could take another prop is drop down so is drop down it would also be a Boolean but then it is drop down is true then we also take in the drop down items yeah well um string away so drop start is drop down um I have to find my algae every time prop start drop down items dot map for each item we render this out okay let's blow about Globe by drop down actually should be select right not drop down okay but maybe select is the one you want in this case so you've got a label you've got select so if it's uh drop down then we render out a select then what do we do with this class name and these other props which I can accept like this HTML select element yeah and then we do a props drop down items dot map for each item we are going to render out an option tag which is going to have the value of item dot two lowercase in this case item and let's see let's also get the index and set that as the key okay now let's do this input is drop down and then we got the drop down items should be mail and what does have you got other okay this looks a little weird because we also have an input so if it's drop down then we show this if it's text area then we show this but if it's um neither this nor that then we show the input as simple as that um now this is going to also have a label let's see so this what happens if I also give it placeholder all right nothing happens just that the first one is selected I guess we don't want that right so if I go back um this is the select we could have one option which will be disabled selected that's going to hold the props for placeholder value okay and it's also going to have the class name of text seconded because I want to look make it look like it's a placeholder all right but why is it why does it look so weird anyways let's skip it anyways uh as it is and we're gonna find then we have this section visibility right we can have a thing NH 3 for this one first offer div with the margin top of five and in there I'm going to have an H3 should be section business visibility that's what the class name should be text l okay and then point bold and the subtitle will be in H5 and it's going to be just this part okay then it's going to have a text secondary shouldn't be bold it should be medium so font medium no not even medium okay as simple as that I think we should also add what happens if I add that type of five nothing really happens so we could add a Plex Flex call and then a gap of three well not three but two would do all right then we have this card which fortunately does not have any outline so what are we going to do we're just going to go ahead and create card or this one this card will have switches okay so it's going to hold three um choices okay and I think I should make a component for the choice for each individual choice so it's that function choice or what do we call this section choice I want the switches to work that's one thing I want so there will be state for each of these so in that case I need this in a separate component action choice which then it will of course go ahead and it's going to be a client component but is going to have an H H volt okay fine then we have this type of section Choice drops and that it will take in the title which will be string it will take a subtitle which will also be a string is going to just be that anything you got the props this section Choice props props or title we've got the P tag crops dot subtitle um the P tag is going to have a class name of text secondary the title will have Point bold flip close if this is just 16 pixels and this is 14. s m okay fine or not all right so inside of this card we are going to have one section choice it's going to have the title of followers and following let me copy and paste this it's going to have this subtitle copy this paste this let's take a look okay section choice is not defined why the hell can't you just import it because I did not export it my bad right now that should work actually that must work okay we got the card we got this title subtitle working that's nice what else do we need this switch so actually let me just create this XP and achievement badges let's create these first XP achievement badges so XP achievement badges I'll be paste copy and paste it all right looks about line we should probably just put in say Flex Flex call and GAP up three five yeah all right now inside of here we should have this as Flex and justify between right and items Center so this should be in its own div and we're going to have one more diff for this um switch I'm unsure how I can make the switch so let me just say hello byte there we go I mean flow byte is a Powerhouse when it comes to components I search for switch toggle switch there we go I think they probably picked a picked this one up right from flow byte it looks the same just that the color is different the color is primary in this one all right then I'll do the same I'll copy this code okay there's an input of type check box as simple as that right this should be self closing with water last name um yeah and then there is this div this whole big div it has all of this okay so first off dark peer Focus ring primary okay and then let's see where else the color is being used in here here checked no no okay yeah okay fine but like how do you check and uncheck this I think this Sr only and peer this okay Sr only makes sense beer this comes from blow byte I should probably add flow byte then why not you know they are most likely using it so why why why shouldn't I oh boy hang on just a moment I accidentally opened up WhatsApp all right now I have it closed let's go back in here install flow byte and then require the plugin inside the table configuration here and then also add this that the JS files I don't know why apply the classes right yeah and then require this I don't think I need to require okay bundle JavaScript then we have to import this import flow byte maybe I'd maybe add something right maybe wrong who knows let's see okay that I think we are halfway there because now at least it shows nothing plus and if I go back what's wrong see init functions esm CGS react yep install Tailwind oh I have to install this one sorry my bad MI low byte react then we use the react components I guess and I don't think I need all this mess I could just add my own component uh wait a second okay well this one um okay then you just do the almost the same thing I don't think there is any difference let's go over here and uh well docs dark mode customized components we've got switch I think it should be inside of input right then where is input form right it should be inside of forms switch there we go we got toggle switch looks nice okay fine let's do this I don't think I need this anymore all I need is a toggle switch which is going to have a different color so first it needs a checked and all so let's do this const something close to you state false uh let's import that is checked set is checked let's say check is expect and on change very simple you need a label I don't think I want to put a label what is bound Ry I don't know anyways hit save let's take a look all right here it is just that the color scheme is different now how do I customize the color let's see um theme okay let's see what happens if I add a class name of BG primary there we go create a custom theme you still change this right all right so highly experimental if you go back in here it says pure Focus peer checked right so I could do the same thing here checked G primary that way it should change this let's appear checked after transition all after rounded foil VG white how do I change this the toggle switch component to ask users to enable or disable this all right this is really something else okay let's see let's search the inside of the issues so dog will switch toggle Dark theme got that in line override will not work sometimes it will depend whether or not the custom class used is injected in the Dom above or below the default one okay that went up above my head make custom classes more specific to force preference okay interesting another option is to create your own theme so you'll be adding a new color and you can use something like this whenever you can you want to override already but it seems that the documentation doesn't leave it explicit oh okay so if I add this inside of SM this might work now it still does not work let's inspect the classes that's how I think we'll figure this out so this is the div toggle BG is the BG color which apparently I think no I have group Focus Rings Yan bgcn border CN let's see now BG gray 200 okay all right oh so here's the button there must be something like color blue nope that changes nothing I wonder what the color attribute is all about like where does it exist um BG okay wait let's see customize theme we've got this theme so if I were to just go ahead and create this theme so color primary is basically VG primary and then you have this custom theme or create a usable component with the theme let's see oh it's the button toggle switch oh there we go I didn't know something like this existed anyways toggle base and checked base I don't want to mess with that but checked I don't think I need a color it's this on this is off so on is going to be BG primary we don't need off all right um all right then what do you taken you just take in this thing custom theme I don't think I need the custom theme at all there we go oh and Yep this is it so this is going to be toggle switch theme and we just pass that in let's hope this one works all right it does it does work okay so basically if it's off at least we made this work so now if I go in here so color when it's off and on let's see when it's off I want the BG to be let's take a look so gray light okay light when it's on the BG should be primary all right just that the switch does not work like it works but it does not switch anymore maybe because of the theme whoa are there any constants um toggle switch props Now by toggle props switch Flow by toggle switch root theme but then this root theme how do I get it like this is just an interface this is just an interface all right there we go we got this theme so maybe I could do something like theme dot toggle switch and object Dot m dot dot switch no right I guess that makes a little a little sense but if I do something like this you see [Music] um what should we do now okay so what I could do is I could say well hey if it's all then you just have theme dot toggle switch Dot checked or then you add this the same goes for on so if it's on and you take on and then you just add in that was quite tricky but it works right there we go now what about this ring so we got group Focus ring four group Focus ring cyan 525 so and then there's also border I don't know why all right so for this one um group Focus all right let me just copy it this is the one copy paste this is going to be primary actually a ring Dash primary so ring primary divide by 25. just the way it is let's copy this oh let me check the check checked I think I missed something from the chat no if any of you are watching and want to have a chat with me just nice hop on we'll have a chat okay this one looks nice we are so close I guess this is it let's get rid of this that was some new stuff that I learned honestly I don't think we need this import anymore yep so what did we complete now edit profile page done nice now the other stuff once I have this oh what's this so I think it applied these styles to the input as well which which is something I really don't want all right how do I get rid of this all right maybe if I go to the Tailwind config and if I comment out these two bad boys then it should go away but it does not which means I have to enable them and we have this so let's see how long it's been it's been one and a half hour and I guess I'm having fun so far let me first check what's the matter here so if you look closely we get let's see when I focus it has a border two border border then outline primary and then undefined outline primary I am repeating these classes so I should better get this in their own uh but anyways let's see outline primary let's see how we can fix this if I remove this part now it's just flow byte right so if you look at flow byte input it basically has a focus ring blue all right so what do we need we need the same thing but instead of an outline we need a ring of primary no no we just want the outline we just want the ring to be primary but for some reason it does not work and that's because if we look closely you're trying to override these styles and that might be something floby does not like so do I have to change it a little bit sharing primary let's see if you can hear me properly I'll just check that out real quick okay so coming back I don't know why Low by does not allow this to buy react where are you so right over here there is theme change directly in the component the downside of this approach you have to change the class name prop in every component instances can be tedious and error prone or someone's nested oh you have to create a custom theme again then I cannot pass that in because you see I see there is one viewer and let me know about you if you're enjoying this do do all right I think I have I think I'm wasting a lot of time here blankly speaking because this is something I never thought I'd encounter why do they apply this on the input like what's the point on on a normal input tag on a normal text area tag on a normal select tag um maybe I should just change this somehow actually wait for now let's keep it simple okay focus outline primary that's it let it be what it is I know this is a little Overkill but it's fine for now let's work on these other pages okay now we have a link problem so let's go to sidebar and if you look closely there's this Ally there's this link all right this link should actually have a width of full that way I should be able to click on it from here let's see what's stopping us so inside the URL we have the Ally okay so the Ally does not have that's the problem skip this well okay fine that works so now if I was to click on socials we move to this page portfolio resume and profile all right that's a little issue right there because if you look closely in the sidebar I think yeah in the sidebar itself when it comes to profile should be slash profile slash edit and it should not show anything else so maybe I should just optionally take in the href let's go back in here and I'll optionally taking the hrf just for that exception that one exception so slash profile slash edit then what we do in here is we just say robs.hf or this there we go going back in here the resume is going to just oh wait what what just happened if I click on this it goes to all right so this is not going to work it redirects us to slash which I think hashtag right over here means just slash so maybe I should just um well let's get this out of the way we don't need this portfolio socials profile there we go it works just fine next sidebar navigation bugs wait but we have these three pages right on figma we only have two we have socials and portfolio we do not have the resume edit page which makes me think that we should be done in in just a few more minutes uh let's see how much time have I spent on this see if you've got projects code 10 profile and seven hours [Music] so many files seven hours the most spent in profile card anyways let's close all the tabs let's work more okay now I don't think we need the resume page uh maybe I should just say well hey resume resume edit page wasn't was not designed in the figma and I should probably just leave the figma link so oh where is share buddy stigma sharing all right here we go I just did not see copy link boom right I guess this is it in the figma design would have a class name of underline underline opposite to text primary that's it it should be Target blank all right so we have the socials and portfolio left off social is pretty easy just add a bunch of oh wait I I forgot one thing in the profile page there's this cancer and save changes I think this is common in each one of them so let's add it to the layout as you may edit page so in the layout I don't know if I should call it a footer or not but let's do that anyways okay this is not the one ah it's in layout edit right over here we have this footer which is just going to be let's see Flex Flex uh flex and then okay something is wrong all right we're back Flex a gap of five and justify end that's how I think we should do it so there will be a button which will be cancel and the other button is going to be cancel and then we've got save changes let's see where we have a primary button I think in the sidebar you know in the nav bar no where is it why do I always forget about that button okay it's right over here in the edit profile form this one copy go down paste and then just change this changes all right this cancel button should be pretty simple border and font semi volt let's take a look there we go let's okay wait I think I did something wrong in here it probably place the photo right over here but this should be in a different Flex container oh let's take a look now there we go nice and easy here this one is going to have a margin top of five or maybe 10 maybe not five but there we go so if I go to socials now this is how it looks like on resume uh uh I don't think I should include it on the resume page um okay fine okay on the resume page I could include it but maybe I shouldn't let's keep it anyways in the socials page right add quarter with save and thanks now in the edit slash socials slash page if I go to the edit page right we just have a div and the native profile form that's it now if I come over here this will be social edit part right it's going to be similar except first off we don't need this we don't need this this is going to be renamed to social edit form which we will export from here right we got a flex Flex call and GAP 5 which I don't think we need yeah we need that um and then all we need is a few inputs that's it all right so this is let's get rid of this div the label for this one is going to be git hub let's say GitHub placeholder get um profile URL let's make this uppercase and we don't need a helper so so let's copy and paste this a couple of times one two three four five times two two three four five and the rest of it should be demolished yep so once we got this GitHub then we have linked in in then no wait DT this you know what I will copy all these I'll open up chat GPT let's do that now tell jpd to do so okay so uh rewrite the code below or Facebook Instagram [Music] Rebel and the hands all right that's it let's copy this paste it go back socials okay it should actually go ahead and show up so for that we can just go right over here and social edit form there we go GitHub LinkedIn Facebook Instagram triple P hands and I guess this is it maybe it has a little bit more padding I guess but it's fine all right this page is done as well let's jump on to the big boy which is the portfolio page now this is where things get a little bit uh verbose I should say like it's too much work maybe uh right just do something on the right [Music] all right good we are good so all these Pages contain nothing but a div with this component that I have somewhere else charge apt is too smart does everything for me haha if you are watching right now I don't think anybody is watching right now it shows okay here we got one viewer if you are watching right now just drop into the chat let me know what you're doing right now what's the time zone where are you from uh right portfolio there we go this page so this contains this playground so this section I think I could just copy it from here or maybe I could just display this except I could uh okay all right I won't copy and paste it except that I'll just playgrounds let's see how that goes there we go instead of this button I'm going to take enough some props is editing right then instead of this button we just show see all right and I think it's going to be the same button except it's just going to be it's not going to have the text primary all right okay all right fine the only thing needs to change now is this part text primary it does not show yet because there we go I think this button should also we have Justified between but I think we should also have item Center which will yes exactly that makes this one this thing makes it better all right now how do we highlight this not just highlight but now we also want to show this a radio button which um well see it's kind of tricky um let's see a video let's see if the radio is the same okay it's just the same as blow byte I I guess I got the strategy copy everything from flow byte and then make changes on your own that's the best thing not everything from flow byte of course but at least the basic stuff now you've got this div inside the div you can have this input um now let's see how we can do that then I think I have to make this a client component if I want to make the radio button available okay so right now there is no radio button wait what's wrong with this Let's see we got this Flex yeah it should be a little more yeah okay now this radio button how do we add this let's copy this or I don't think I need to add it I could just ATO no bombs radio there we go we got radio button and I have to use client for this one which means I could just put this part or no I have to put this whole card as a client component interesting playground type all right let's see now interesting now what we do is we just produce client on top so all of these are the client components now to place this radio button right over here which means I could just do it right over here yes name class name should be absolute top zero right zero then this should be relative see now all right we're close uh it should be right 10 top 10. what the hell is wrong now all right I'm just gonna second five all right I will actually reload with uh vs code right now because it's lagging so much I'm I alone I don't see anyone Maybe every no one is viewing okay we need a name for each of these but if we look closely this could be the name uh but then it's not unique right so um what should we do launched ID equals use ID oh name should be same okay so I could just make the name uh now we can only select any one of these just fine so if it is selected I don't know which hook did I just install I use I mean use hovers all right let me see if we got any other one foreign there we go no wait value toggle insert value um use toggle is basically true or false right oh yeah but maybe I could just put this in oops so this is going to have a border which I think it already does but I could change the border to be primary and where is it all right there it is and the Border should be primary and the BG should be primary but with this opacity I'm not this much 20 it's too much why I think we're close yeah and we only want this to happen if the value is true right so this will be dynamic and so if we got it and this is it let's write down that thing is selected but on okay this looks like say default checked no [Music] um we got a name use toggles maybe use toggle is not the right tool for this oh anyway so right over here oh it's going to be selected so we go back in here right now nothing is selected then I have to make this a client component as well why just why maybe what I could do is I could just have export function playground cards this will hold all these cards so let's copy actually no let's copy this and these plays so all of these will stay down here let's see I import these bad boys so we just playground so we don't want to export this like this background cards and then we don't need all these we don't even need this we don't need this and so we don't need to export this interface all right same result but now we can have the selected one so const use state I think in this case I should just use the index you know just to play it cool so you selected that selected uh is selected so right so it should be like this there we go if the index is equal to selected but then how do we toggle this selected thing so basically [Music] um all right let's see um I should also pass in the index because why not all right then we get the index now I could say check is equal to props Dot oh boy okay that fades in and Fades out I think I should take a look right over here default checked oh sorry we got Spain um default checked it appears and then it disappears what happens if I just remove this okay it comes all right now I see what happens all right let's see let's forget about this right now on change oh yeah fine I think now we do need this no not this selected index but actually the actual index so we got drops dot index let's see this works now yep it does uh now the only problem is it does not work when I refresh the page so this is not checked by default let's see how we can fix that um let's see default checked oh boy this is giving me a headache not gonna lie uh [Music] also this should be the color how do I change the color there we go nope it's now that's not how you do things you straight up go ahead and inspect I actually better yet okay wow let's keep it this way right now okay I don't think it will be noticed much what will be noticed though is this that it's not checked by default so maybe I what I could do is empty index is equal to zero that way still doesn't work um okay I guess then we'll have to do the same thing here as well okay the difference is that we haven't made this part oh boy this is so so tricky just just this I mean simply the fact that it does not work even though it's mentioned that it will work I don't know what's wrong or maybe because the name right if I take this out and then if I refresh the page you see now this is checked this is checked everything is checked um maybe you're going to have the name if um Lobster is selected then we add the name right like and is selected I know a little tricky but that worked oh wow that worked so this and there we go so if it's selected then we have this name else we have no name so I could just add this condition and now wow okay wait so a better way would be to say if the index is not zero uh actually so now if it's not zero this is going to hold the playground yep dude this is crazy if it's not zero then it says playground L else it has this what if I change this one more time just Slips Away comes by and then goes home maybe I'll do this later on what else could we do now sorry if it is selected then I could have this playground but then or forget about that default checked props is selected um let's see hidden Max Min multiple it's possible to zoom in a little hey Dennis nice to see you around that's a big name right over here honestly I'm excited yeah here's I zoomed it in so the problem is I have this a Boolean is selected but it just does not work when I do something like default checked right on the first component itself as thanks Dennis I don't see anyone else it's just Dennis and me in this stream all right uh should I leave this for now because there's a lot more that needs to be done not a lot more I think it's not too much I think I should move on then all right led to the let's to the project section then playgrounds sections just um just to give you an overview tennis uh I am trying to apply in an internship in on in this remote internship on code damn which is a platform to learn to code basically I have to complete this task uh to convert this design into nexjs with Tailwind so I'm done with all the pages except for this one now this is the last one and I have plans to finish it just tonight all right now uh so we are done with the playground cards now I think we need to mess with the project cards so I kind of have to refactor that code again projects regard project card and all right let's see page portfolio projects back in here right this should have some margin top now uh I'll just go ahead and make it Plex Flex calling add some Gap yeah and the same thing with playgrounds let's copy all these props let's go right over here I used to use paste copy and paste that should do it except I have to enable this so now this should be see all all right one more thing that I have to kind of change is items Center right that's a little better now we don't need the icons when we are in the edit mode we just need this this and this Maybe [Music] I should probably just make a separate card for this yeah yeah separate card would be better then we should just get rid of all of this then except for this line discard the changes all right coming back get rid of this now in here edit components projects okay edit projects that's what I would name it edit projects done and there we go now this will be the same type of card I have this so it's going to be great let's copy all of this we don't need this yes we do need the button but the button will have a text of secondary that's going to be seal portfolio edit projects let's go back oh there we go oh this button is different so let's import our own button there we go so we got this up and running now we need a card all right so I I think I should make this a client component by itself that's first step now how do we so we have a card then we are going to have the image on top there we go we're done card where I think it's going to be similar to this one and forget about that warning all right so we have the title and we have this except for the logos so it's going to be HTML CSS and JavaScript as we have and let's copy this paste this we've got one minute ago oh that was pretty basic we got four of these so let's copy this grid actually you know what let's copy this paste this here we go this is not going to be 2XL just XL in this case and then there's going to be these three dots which I believe I have react icons installed yep so I just import that and let's just place it like so import something from icons hi and dots horizontal there we go h i dots horizontal foreign find a there we go all right so this next thing the Stacked images Let's uh where was this in the playground card yep there we go actually wait it's just this part right so let's copy all of this in this one we could just I believe yeah we can just paste it in so we got image one image two and then three contributors as it says there we go uh the only difference is that we got this SpaceX 8 should be two and the images are humongous so let's make them smaller yeah not that small but yeah it seems fine it's been two and a half hours man all right now selecting this pretty much similar to what we did in the playgrounds card playground card the is selected prop which we will get from here but now the only difference is that now we do not have any index so what are we going to do uh uh let's see copy this paste can I do it inside of the component like if it is selected or not actually wait a day of four EFI there we go oh new oh because we said array of four but we did not fill it with anything let's just feel zero doesn't matter yeah I don't think I need the new keyword either we got array fill then we map over it then we got the index which will be selected basically with the selected one here we have the props so it's going to be selected or actually better yet that's going to be index set selected we will be dispatch set action number which we can just pass it like so oh all right index is this I don't think wait a minute dude I hate this winter Rim just goes better with the vs code for the card I guess I could add non-click event listener on click we are going to set select I just want to finish this and get out of this let's check the Discord oh hey do it y EP it did not show notification when I was live I was live I don't know how long it's been three yeah two and ah well anyways let's see this Thursday as a meet and greet that would be nice member meet and greet right back to our code set selected prop start index does it show that I am streaming right now oh it it does it shows I'm streaming right now that's nice because streaming streamer mode is on I like it oh okay for a minute I was confused if this is my version or not so now we have the state even this is selected what else do we need we need the highlighting so if I go to the project card well not this one but the playground card this is exactly what I want except for the relative if anybody is watching would be nice if you would drop high in the chat alright now we have selected this is it except for this one though oh hi Cody damn I'm about to end this now okay let's commit the changes with enter projects page done now the only one thing left is this this button right over here hmm looks like a polymorphic button or so I don't know what to call this button uh that blends with the background White white is that a thing no that's mixed blend all right maybe I can try this on the button so let's go right over here on this one BG gradient we go right over here and edit cover this is not a practice challenge I am trying to apply for the internship and this is the task that I have to complete before applying so when I apply I have to submit this task which I really like I I don't think I have done something like this in a long time I mean a whole design so yeah this is something I really like and enjoy I did half of it uh just alone and now I was like let's do it with a let's read live on YouTube here it is let's see how do we make this even work I'll also share the link of this one I think you should do it live as well would be a fun little challenge to see who I mean if in in what time you can complete this how do we make this button BG okay wait it's translucent I think I saw any of these what if add the BG gradient here as well no I cannot do that no that's the old Tailwind documentation opacity no oh wait text White all right it has a border and it also has a color gradient ish color if I'm not wrong wait export as CSS well there we go so it's it has got a border it has got a backdrop filter oh okay right so first is it's BG White but with an opacity of 0.16 which is let's pick this one up and then filter let's blur it that way it's a load of CSS let's kill all of this all right at least we got the blur okay fine now let's add wait back drop filters backdrop blur exactly you know when women vs code work together they just drive me crazy all right now we have this oh boy okay that's probably it we got um let's know okay and then we just put in flicks and a gap of three doesn't matter okay items Center now placing this button right over there also the Border okay rounded LG and the borders should be the Border colors Maybe right border pixel there's nothing like that [Music] um first off no I just have to add flex and justify end right here or sticking a lot of memory what's using the most memory via scored at three gigabytes wow okay this was somewhere just if I end then yep and then there will be some padding which we might just give it some room and then that bordered let's see what in here what's in here border zero two I think we should just make it border with an arbitrary value now let's see all right that's too much probably what we need but then the the color in here is different the Border seems like it's even the border is a gradient yeah the water is a gradient so let's see if that no border color um no foreign maybe it's just um you add a background and then you okay create a box inside okay so you have a div that you just wrap this around right which is fine but not so fine actually wait I'll better make it a link component okay okay my CPU is making a lot of noise right now I think I should consider closing a few tabs oh that one so basically whenever I start typing the CPU goes mad all right close a few more tabs on the left is this the reason it takes so much memory but okay this had a lot this is a bit this had a better representation beforehand let's see um right now I think it's time to finish this I would probably just add no right first you have sure no problem thank you thank you for passing by expect justify Center foreign height 36 with full let's see what is up in fpg gradient what if I skip that wait is there no other way oh okay round and exhale with 52 . oh boy I didn't even refresh the page once it's been three hours now and this is about to finish uh what was that three pixels for the padding did LG oh I think I was really I don't know energetic at first now I feel very sleepy oh okay wait he's got the Border just at the gradient is what we need to cover so gradient goes from this color to this color I don't know how obviously it goes from this opacity to that opacity right yeah and the border is one pixels so yep so I could do something like this um BG gradient to bottom left and then I could do a from another two from this this let's hope it works ah okay now that's because I have to set a background in here which is PG gradient yep actually no this is a lot trickier I want this as my border but I also want this as my background so I want to have a transparent background what is this Phil from via okay BG current oh wait so instead of white 20 if I add white 5 that's close like a real close if I make it white zero it's going to be transparent and maybe I should we also don't want this so maybe I should make it just two pixels and all right I think I'm done so translucent all right I don't I think now we are done here it's been three hours continuously and I think I'm gonna take some rest so hope you all enjoyed this stream if you did leave a like comment below what you think about this stream and thanks for joining in everyone

Channel: Max Programming

Views: 4,615

Keywords: javascript, typescript, react, js, web development, node js, nodejs, nextjs, nextjs 13, reactjs, react project, next js, svelte, sveltekit

Id: fgrlH9pbVU0

Length: 188min 51sec (11331 seconds)

Published: Tue Jun 06 2023