hello guys welcome to today's video so in this particular video we're just going to be building a generator from scratch and we will be building this with nextjs clock authentication super base for our database typescripts D CSS for styling Shad CN for our component Library frame motion for animation and also color rod for our color manipulation without wasting much time let me quickly take you through what we're going to be building so this is the particular site and this is the landing page to use the color generator you need to sign in and our sign in is been handled with clar art and let's click on sign in to use generator we're taking to the sign in page and let's just quickly log in with Google once we sign in with Google we should be routed back to the landing page okay so at this point you see a different button which says start the generator and clicking on starting the generator you taken to a generate page where the color palet is been generated and once the color palette is generated you see this nice interface where you could interact with the color a lot of things are actually happening here and we will all be building this from scratch so first off we have we have a feature where users could remove a color you could copy the XX you could drag this particular color across the screen and you could also lock this particular color and this is all Dynamic data based on the particular color that was generated and we also have some other features like when you press the space bar you could generate a new color I'm currently pressing the space bar on my keyboard and that is why you see a new color is being generated and for every time you press space bar we generate a new color right and we also have some other feature here where you could view the color in case you want to get the color name or the color X or other values of the color right and you could see different values based on the particular color this this is just a quick view you also have the option to save a particular color palettes let's say for example we want to save this particular color because we find it interesting and we want to use it in our design let's save it let's say let's save it as new color description let's just say some or we could just say and save this automatically this is saved to our database which is currently super base right our super base progress database and you also have the option to export the particular color palette right as PDF as URLs or as an image or as an SVG let's quickly export it as a PDF so we could see and we get this night nice toast I'm let's open this up real quick and see here we have the color palette being exported as PDF let's also try to export it as an image and we should have a PNG that is been exported here and this is our current color palette you could also choose to export it as an SVG and this is also saved to the user system and the user could actually see all the save color palette so this is the one we just saved right now new color and it's saved here right then let's quick check out the other features like I said we have the remove feature so for example if you click on this particular icon that particular color goes away right and you click on the next one and it goes away and you click on the next one so at this point we are actually handing the colors for when you get to like the last two colors and we take out the particular icons where you won't be able to take out any color anymore in our color palettes so like the whole application there's a lot of attention to detail and to show you that let's quickly create a new color palette now if you look at this we have this color this we have this current color and we have the name which is showing in black but for this particular color we have a white text so if we say we try to generate a color that is black or with a dark background let's just keep creating till we get that okay so I think this works for us so now take for example this particular color which has a black background right or which is a black a black color right we actually handling the attention to detail for this particular color palette because if the text for example is just default by black you won't be able to see the particular hex value on this particular color palette so that particular attention to detail is also added and if you also see the view the quick view we have a good attention to detail too and we will all be learning how to actually do this in this particular tutorial and video some other features you could copy the particular hex now this particular X has been copied to the user clipboard you could copy a single color from your color palette you could use it in your designs and you could also drag a color like we already showed and you could also lock these colors when you want to generate a new color let's lock this one and lock these three colors and try to generate new colors if you notice this three color did not change only this two color change right so we could actually lock our colors to and this and this is amazing one last feature we could actually show here too we could ch the particular color palette where you when you click on the particular color hex we have the um the Color Picker so you could choose a particular color the hex value here or you could just inut a particular color you want here and you could actually manipulate and edit the colors based on your desires or based on your needs and these are all Dynamic if you notice our text is changing based on the particular value and we're actually doing that by checking the value the luminance of this particular color and we'll be seeing how to do that in our our next year react application and apart from that I think we also have authentication in this application we have protected routes right now the user is signed in and you could sign out and our authentication is all managed by clar Arts shout out to clar arts for this amazing feature of adding authentication to your applications and we could sign out once we sign out we'll be taking we'll be taken back to the landing page and I think that should be it then lastly this particular particular application is responsive right one could use it on your particular mobile phone and you could do almost everything you could do on your desktop right now you see we have the button here right when you click on it you could generate a new color and a new color a new color and a new color you could also see the quick view for the particular color palette so instead of a mod out this time it's just going to come from instead of a mod out it's just going to come as a drawer and we're all going to be handling this with shadu UI component library and also this also comes out as a drawer instead of a dialogue on our mobile devices right and also this and you could also see your save pallet on your mobile device and so the application is 100% responsive so let's go back to the landing page again you see this animation happening here which is all handled by frame motion we also be looking how to actually do that how to create animation sequencing with frame Motion in this particular application and I think without wasting much time let's quickly jump into building this application from scratch and I hope you like and enjoy this particular video okay so let's start the installation and setup for this particular project for this we're going to be using nextjs and that will be the first step so let's quickly drag this directory into vs code and what we just currently have here is just an empty an empty directory and let's quickly pull up our termin now okay the next thing is basically we're going to do MPS create next app at latest the name of our project we're just going to call it colors clone we want script in this project we're going to using ES link we also want CSS set up so you like to use the source directory no up router yes we like to customize the input at least no okay so at this point our project should be installing and we'll be back once the installation is done okay so at this point our next just application is installed let's quickly move into colors and open it this up in vs code real quick and we could close this instance and open this up okay if you can see here we have our nexs application already installed with the starter code and everything we need so for this particular video we're just going to be using um frame motion for most of the animation on this particular project so let's quickly install frar motion we're going to say npm install frer motion we also going to be installing color for our color manipulation and also we are going to also install random color which is going to help us to generate our colors Okay cool so if you go to our package.json right now we have this packages installed frame motion and the other ones okay cool okay so for this particular project we're going to be using Shad UI for our component library and let's quickly go into the documentation and and installation process so we're using nextjs and what we just need to do is after installing our nexts application which we already did we have to install the package so let's open up vs code and P in this particular Command right now what we could do we Just sh UI at initialize and that should get us ready Bas on commentation it says it's going to ask us some questions and what basically want to use okay let's quickly look at V again and see what we have right now okay so what style do you want to use you want to use a default style I think we could just use Stone CSS variables no initialize and yeah so at this point Shad should be installing in our application we successfully installed Shad you are in our application so let's quickly run mpm run Dev let's run our server okay our application should be running local 3,000 and one thing we could do to confirm that sh has been installed in this project let's quickly add a button component and I think automatically should go you should go into the component directory we you have a button if this is successful and let's quickly go into our app and take out most of this code we have here right now we won't be needing them okay cool so we have our button installed let's quickly try to use the button here let's say on our own page we just want to show the button we just installed let's import button our component UI and this button we're just going to say we're just going to call this testing button let mod this properly and yeah cool so we have Shad successfully installed in our application just to go through what we've done right now we've actually installed Shad we've installed our nexts project from scratch and we have CSS installed we have also installed colorage which is just a tiny a tiny tool right to manipulate colors and like like to have conversions of colors says color is a tiny yet powerful tool for high performance color manipulation and conversion I'll put link to this particular repo in the video description okay so for us to continue let's quickly take a look at the application one more time so we just have the landing page which is the page where we see this SV image that is being animated with frame motion and we have some text and a button on click of the particular button you be routed to a new page which is generate page then on the generate page this is where we are doing the color generation then once the color is generated the user will be routed to this particular Dynamic route then we have the images and we also have the color we also have some buttons here which is just a dialog and we also have another dialogue which has a form for us to save our platelet and we also have another dialogue for exporting for particular color and without wasting much time let's quickly this UI comp component from Shad directly so it will be easier for us to be able to integrate and work with this UI since they already installed in our application okay so for us to quickly do that let's go back to to Shadow's component and I think we could just take this to the side and also do this for this we need to install the draw right we're using the drawer to show the mod on mobile let me quickly show how that works so right now in our example here let's try to see this in mobile way if we make this mobile and we try seeing a particular color a quick view you get to see this is actually coming out from the bottom instead of instead of a mod out and this happens to all our dialoges right but if you go back to desktop mode and you try to view they all going to be like a regular dialogue okay so just that little attention to details we're going to be doing that install the draw and let's quickly take the code again and see you need the dialogue do you want over yes let install draw and let's quickly see okay so let's quickly install the dialogue right now and we also need to install need to install form so let's quickly install form because we'll be using the form for saving a particular color platelet to our database on super base so let's copy this real quick and also install this and install form after installing form we also need to install input so I I want us to do it at the beginning right now so we just focus on just like building this stuff without worrying too much on trying to install later okay so we're done installing form let's quickly install the inputs so to install input and um next thing we need to install let's install text area and um we're going to say so let's quickly copy this and install text area and there the F way of doing this right so we could just say MP install next we want to install two star and we're also going to install the to tip and we also going to install the toast right it so let's quickly install this this should be a faster way of installing the component we need here right now I think at this point we should actually have all our component ready so let's see toaster real quick okay let's go to toast Okay cool so we have toaster to tip and to or installed so let's go into our component right now and see what we currently have we have the button dialog draw form inut label text area to to start two tip and I think we are ready to continue building cool okay so let's quickly close this up and okay so the next thing I want to do I want to set up the route for this particular application so based on the the example we have currently have three different pages so let's quickly try to sign in real quick and let's continue with Google after successful sign up it's going to rout us to the hom page let's quickly sign in this we're actually logged in and let's start the generator so we have the the hom page we have the generate page and we also have this Dynamic page has been created once the color plate is generated so let's quickly do that cool okay so right now we just have our homage already so let's create a new page and we're going to call this our generate page and inside here we're going to have a page right and let's quickly create this page and we're going to call it page just put some domy text which is just going to be generate page for now then the next thing we need to do here we need to create the colors the Dynamic Color page right and and inside here we also need to create a slog this is going to be dynamic right and this log is just going to be a page and um let's quickly create this too let just say this just going to be dynamic or dynamic page cool and let's take a look at this we have the generate page you can hit the generate page and see the generate page text and let's quickly try hitting the dynamic page let's just put for example let put 1 2 3 4 okay so it says 44 right so let's quickly see this we have a colors directory and this slog so this slog should be dynamic right and we need to rename this and yeah and at this point we should be able to access the page okay cool we have the dynamic page right now okay so that should be it for our Pages the next thing we want to do right now we want to actually add authentication to our application because as you can see on this particular page we have authentication here on our Pages we have our protected route if you go to the landing page and you're already logged in you get to see the button and let's say let's say for example you sign out right and once you sign out you don't your avat anymore to Tres to sign out you have the text where says sign to use generator right so you need to sign in to use generator so let's say for example you try hitting a color platelet we have protected route right so you'll be thrown to the login screen where you need to sign in with Google or with your email and password so let's go back to our landing page so for us to do this we are making use of clar art which kind of make it more very fast to like add authentication your next sh applications let's quickly pull up clar documentation and you could just say CL do and this is the documentation right now we are working with next okay cool let's quickly install this it says to get started with cl use the SDK to your project add the SDK to your project then add the provider and yeah let's quickly go back to vs code and open up our terminal so at this point want to add CL okay so is been installed right now and okay so we have clar we have clar next J rapper installed right now so let's quickly continue what we're doing let's do okay let's take this to the side and the next thing we need to do we need to wrap the provider around our layout so let's quickly go to our application and move into our layout and we should be able to see our layout here we just have some text here we could quickly make use of the provider and just do and just do this CL provider and we're going to wrap it around our whole application and we're going to say CL Pro provider and copy all our HTML and our body into this part cool then next thing it says add authentication to your app it say create a middle. TS let's quickly go to the root of our application let's create a a middle a middleware TSX right and is just going to serve for handling the authentication with clar provider directly right so it says it allows the user Des sign out user to access a specific so let's say for example you want your users to be able to access a specific route for our own case right now we just want the users to be able to access just the base routes right so we can intercept the request from our middleware so this basically means the base route so we want signed in user to be able to access the base route okay cool we have our middleware and now let's quickly go back to our application that should be Local Host open up Local Host real quick okay so it says missing clock secret key let's go back to documentation so let's quickly open this real quick go back to documentation go back to home and go back to clock and I think we already signed in so we could just go back to dashboard directly so quickly let's go back to dashboard and create a new application and we're just going to call this colors clone that will be the name of our new application and we just want to set up Google and email authentication so for your for your own use case you could use maybe phone number or LinkedIn or twitch like depends on what you actually want to use just for Simplicity we're going to be going with just Google and email all Okay cool so it's showing us what we need to what we need to do here right now right we just need to copy this since we're using working with next CH let's just copy our clar publish key right so let's copy this and our clar clent key and go into let's go into vs code right so what we need to do next we need to create a environmental variables right so we could just call this envy. local and we're just going to paste our variables here right now so these are the variables that being used by clar to authenticate us and like to authenticate the user which is secret key and the publish key so if you go back to our host we should be able to see just let's just wait for our Ser to restart and we could just take this one and take this one out we don't need them okay cool so at this point we already have clar our application just to confirm let's try hitting the generate page right now cool so we can actually hit the generate page because at this point we already told the middleware to protect all the pages in our application apart from the base the base route which is what we are using which is just our Local Host right and let's also see if we could actually access the dynamic page which is going to serve for our colors we won't be able to do that right okay cool so we could say CL has been installed in our application and we could go back to doing just one more step so the next step of what I want to do I basically want to create because if you notice if we hit a particular page we are being thrown to this to this URL which is not in our application right now this is actually not in our application it says clar is in development mode right so we want to be able to access this in our own application directly in our own route inside our application not some other application hosted somewhere so for us to quickly do that we're just going to create two pages I think for this we could just create one page and we're just going to call it this is going to be our sign in page in dash in our signin page and our signin page is just going to have a regular page TSX and um we could just say this is just going to be our signing page okay so we also do the same thing for we'll also do the same thing for our sign up page so we're going to say this just going to be sign up page TSX cool and this is just going to be page SX and let's just quickly say let's copy what we have here right now this could work for us okay so we just have page page and cool one last thing we need to do we need to tell clar right we need to tell clar H that we actually want to handle our sign in and our sign up Page by ourself right and how you do that is also through your environmental variable let's quickly pull up the environmental variable again and okay let's go let's scroll to this path and and what we're just going to set this up say okay we're just going to say the next public or signing URL should just be our signing page the next public clar sign up URL right should just be our sign up and after signing takes us back to the base and takes us back to the base cool okay so at this point let's hit our application again see what we currently have Okay so let's try hitting the generat page which at this point is a dynamic page generate cool says it takes us to the signing page and mind you we just have pages so let's quickly go up and fix that real quick what we're supposed to see there is the sign in page right so so we could just quickly say our signin page we just going to import our signing page from from clar directly so basically clar gives us some components which we could work with in our application right and as you can see right now we just have the signning page and our Google and um sign in and our email signing very easy to do right and quick so we're also going to do the same thing for our sign up page well for our sign up page we're going to be importing the component called sign up from clar art and um let's just quickly do that and let's import this this is this will be coming from clar art next CH Okay cool so let's go back to home again and look at 3,000 and this is what we currently have now if you say the dynamic page we been redirected to the signning page cool so we could say authentication has fin finally set up in this application so if you say continue with Google right and you try logging in we should be able to log in once we are authenticated by Google okay so it says page not found okay let's quickly try to debug this okay so when we try loging in we getting an error let's try fixing that so we go back to our sign up page here and what we currently have is sign up. CSX which is directory and um that should be sign up and I think at this point we should be able to we should be able to use we should be able to log in sign with Google and we are signed in right so let's quickly go back to our base page we could quickly import use section from um next art and in our application here we're just going to use it so use section right and we can actually take out some valid from there and some valid we could D structure out is we could D structure is signed in and we could also destructure is loaded so what we're trying to do I just want to show you how clar works so we're going to say if we is signed in if the user is signed in we're going to show a text of signed in else we're just going to show sign out right just an example and let's format this page and see what we currently have okay so we get this error it says use section is not a function let's quickly make this a a client component so this actually works let's refresh this page and so yeah it shows we are signed in right so again sign now then we are signed in we already signed in right okay so currently we just have authentication already set up in our application and if you try hitting the sign in page now it should be routed back to the base page if we try hitting the generate page we should be able to go to the generate page because we have authentication set up right now Okay cool so that's just how you set up authentication with clar so the next thing we want to do remember we're also using super base for our our our database so let's quickly set up super base too so there's a way you could actually set up super base with with clar alt directly so we could make use of super base as our database why clar clar ought to just be our authentication provider now mind you superbase actually has super base art but um but for this particular video we're just going to be using the art from from clar art and not from super base So currently let's just create a new project on super base let's create in this organization we're going to call this let's call this colors right colors clone and type a password let's just choose any password and um let's just create a new a new project okay so cool so we have our super base application set up so the next thing we need to do we need to set up our databases right and let's quickly go into the table editor okay so let's quickly let's just wait a little bit our project is being set up and we'll be back okay so cool we have super base our super Bas application set up right now so let's quickly create a new table okay so for this table we're going to call this particular table we're going to call it our platelet because this is where we're going to be saving all the plat for a particular user and description we could leave it opened our Ro level security we're going to set that up later so what we need right now we need an ID right we need an ID we need a created ad we could also add another column which is just going to be the title and we're just going to make this text and add on that column this is just going to also be our description for the particular lat that is been saved and this is also going to be text and um let's use V okay also we're going to say our colors right because we have to save our colors so we could just make this one also and that should give us what we currently want then lastly we are going to create a user ID right right there's going to be underscore user ID so the user ID is just going to be the particular authenticated user from clar client right for our CL provider directly and how you could actually do that we could save this for now okay let's quickly add a type here let's just say this to just be let's make it a text for now and save for now Okay so we've been able to create our table so one one next step we need to do let's quickly go into our SQL editor and inq editor we going to see let me quickly make this in our SQL editor we're just going to run this SQL command from the documentation directly we are trying to create a new function right that request for um the user ID and we are creating it in our SQL editor directly so if we run this right now it's basically a function to retrieve the request the request user ID so now if we go back to our table editor go back to our table editor and go back to our platelet and now we're going to use the function in this part particular place we're going to say want to edit this column and this column is just going to have going to be a text let's just make this text then the default value would be the function we just created in our editor right and this is just going to be it request user ID cool and we could save this okay so successfully created this particular table right so let me make this wi so we can see so we have the ID we have the created ads we have the title we have descriptions we have the colors and have the user ID because you need to be authenticated before you be able to create a before you be able to save a color platelet so one more last thing we need to do in Super is here we need to add Ro level security to our table and for us to do that we are just going to say the road level security right we're just going to create a new policy and what we are going to do straight up is for inserts right we want to be able to allow only on dedicated users to be able to insert into this particular table right and we check right we check basically it's just going to run our function we created SQL function we created previously so the request user ID has to be equals to the user ID right so if you save this let's name this so you just say insert insert platelet cool and we can save this particular policy let's create a new policy again and for this particular time what we are going to be creating something similar but at this time it's just going to be also using the request user ID but we're not going to be using the insert we're going to be using the select so we want our users to be able to select or to be able to fetch their particular already saved so let's just say select let's name this select latet cool and save policy okay so the next thing we also need to do here we need to get our JW secret key from Super Bas so we could set it up in our clock dashboard and for us to do that let's quick go to settings our our project settings then we should have API and okay so we are just going to copy the JW Secrets let's quickly review this and copy it and we are going to go to dashboard for our particular dashboard and and navigate to our JWT template so in our JWT template we're going to create a new template and for this template we're going to say it's going to be a super template because we're already using super right then we are going to say then under the signning key we are just going to paste in the secret key we collected from from Super Bas right and we don't have to change any other thing here and let's see if changes okay cool we have our JWT templates for super already set up with clar yeah so I think at this point our application should all be connected so now we need to do one more thing for us to be ready to make it of super base in our application let's quickly install the super Bas mpm install super b super base.js okay so we have super base already installed let's go back to Super Bas again and look for our keys and the first key we need here we need the super Bas URL let's go to let's go to our environmental variable to do that so we need to set up let's quickly set up our super base let's quickly set up our super base so we need to get the super base URL and our super base key an ominous key so let's quickly get that so this is the key and in your own case right you'll be making use of the making making use of the key directly then for your super Bas URL this should be our super B URL and yeah that's cool so at this point we already have super base we have super base set up in our application we have our clar art also added in our application so let's go to creating our client component that we could use to fetch data directly from super base okay so for us to actually do that I think let's open this up properly and take this out so we could see it properly okay so the next thing we need to real quick here we just need to create a new directory in the base here we could just call this we could just call this super base it's going to hold our super B our super base values and super base and inside our super base we're going to create a client right so we could say this should just be create it should be create create client. TX so now this this particular client is just going to serve for our super Bas and also our clar our clar Authentication because we need to tell super Bas that we want to make use of clar as our as our authentication provider and to fetch our data let's quickly import our our creates create clients our create clients from from our super bejs and I'm just going to past some code here and go through what's happening here so currently we just have we just have a function which is returning our cre client from Super B and we are trying to access our URLs in our Environmental variable remember we set them up here already right and we're just going to come down here and see going to call this our client right client is going to Beal to the super Bas super based client now it says clock does not exist on the window type so for us to fix this remember we're in next year application we don't have access to the window objects on the server so let's just create a type just take away that error so this is a Type window cl to any okay so for us to be able to use this across our application let's quickly export this and we should be able to use this in our application right now okay so at this point I think we already have super base and clar art connected right so I think we'll be seeing we'll be seeing how that actually works together when we start building out the application I just want to take out time to to work on this first before we start working on the UI right just to give you the clear understanding and of how you could actually integrate super Bas with clar then we jump into building the UI one more last thing we could do here because if we try assessing these values right now we don't have types right we don't have types for each and every of our values I think for that we are going to do that in the later in the later chapter of this particular tutorial so let's just move on and go back to our landing and start beaing out our UI okay so I think we're done here we could close this out we're also ready for our dashboard we could also close this out and let's quickly start building out our UI okay for us to do that let's quickly see what we're going to do if you go to the already hosted one so in the landing page we just have an header and also we have we have this particular page and this animated SVT here right so let's quickly view that very very first okay so let's quickly VI that out real quick so we come into our component and instead our component let's just create a new file we're going to call this our header right and our our header is just going to be a basic a basic header let's rename this to let's rename this to header and we are going to say header and also we're going to import the user the user button from from next clar right and let just put it here too so this this is just a component exposed from from CL art let's refresh again and now we're going to make use of this header components inside our layout right because it's going to span across our pages so yeah right here we're just going to see header and we're just going to quickly import this from we're going to import this and let's quickly move this to this part and move this to this part and let's see this okay let's refresh the page and see what we have here so we have some errors what's the error says add field okay let's go back to our header and our head out we just have this and okay so for our head out we're just going to do this and basically what we're doing here we're saying we want to get the logo from our asset so let's quickly go to where we are currently and just just say let just create a new directory we're going to call this our asset so we have our asset so this this particular asset we're using across the application will be available in the video description too so it says there not because doesn't have props so you just need to import image from next CHS um let's import image from next sh and um let's go back to our page and see what we currently have okay so I'm just going to quickly drag in our assets into this particular page you also be able to have a link for this particular asset if like if you want to code along right so we have us to link our images our logo and let's see what we currently have let's refresh the page it doesn't work let's restart our server and let's go up here and restart our server we currently have let's go back to our header and see what we have right now it says just we just have a style of pattern of four absolute of white and Z of 10 okay so at this point you might not be able to see your header okay let's go back to our base page and let's reload the page and see what we currently have here so we have an error that says hydration fied so let's quickly go back to our layout and see what we currently have oh there's an error this isn't supposed to be here this is supposed to be on top of our children children props and inside the body tag so if you refresh the page now we should be able to see the header cool Okay so we've been able to add up the header we have the logo which takes us to the homepage and we also have this particular nice drop down from clar or to undo our authentication like signing out or managing account and other stuff just with a line of code just with this line of code user button we able to add this to our application and this only shows up when the user is signed in so if I sign out right now it it goes away right and which shows that the user is already signed out cool and you remember we already set this up to to monitor our signing state which is signed out right now so let's hit the signning page again let's just sign in and so we could continue continue what we're working on so we're going to continue signing in with Google okay currently we just have the header and let's start working on the homepage so for us to work on the hom page let's just quickly open up the homepage right now and we have this is this should be our hom page and where we just have test button so we're just going to take this all out and the next thing we're going to see we're we're just going to say this should be let's quickly break this so we can see this properly I want this page to be a flex page think we could take out this class already and we are going to make this a padding of 24y Center and okay that works for us so the next thing we need to do we need to set up another div which is just going to hold our text and we could actually make this two divs one is going to be for our SVG and one is going to be for our text right and inside our text we're just going to see an H1 right that says the text of the the super fast PL generator we should be able to see it right now on the page right now okay cool super fast generator and we're just going to give it a class of since we're using TN CSS and let's break this down it's going to be a text of 2.25 RS but when it's on large it's going to be like super large okay cool let's continue we also have margin X to place it in the center font black to be font of 900 de Center and margin button of 30 pixels then beneath this we're also going to put a P tag which is just going to hold the text of to create a perfect platelet or get inspired by beautiful color schemes right and this is just going to take a class this is just going to take a class of large margin bottle margin text with a lighter dark color and text as Center okay so I think that works for us and let's just see it one more time so this are all in the center and let's go ahead working on this now the next thing we need to do we need to also add the buttons right so we could quickly add on that inside here and we could just call these buttons just to identify it and and what we are going to see we're going to create two different buttons so the first button is just going to be having the class of okay so what want to do we want to show two different buttons right and for us to do that we need to make use of the values from a signed in we have to make use of the value from from clar art right and let's just create a button here let me show you how we could do that so we have a button from Shak right and you could just see this this could be a button and this button is just going to be start the generator right and this our button is just just going to style this for a class of of this okay we have an error and we need to close this real quick okay cool let's see what we currently have and we should have a button on our page Okay cool so we have we have a button that says start the generator and for over when you over the particular button we just want to change the background color to this same color right here that works for us and we could also see this should have the height of this button should have the height of 46 pixels and the padding left and right of 21 pixels and the margin top of top and button of pixels and make it rounded let's see what we currently have here right okay cool and and the next step we need to also add the second button and for us to just do that so we could like so I could show you what we really want to do here so we want to say something similar to what we said before so if it's signed in right if is signed in we just want to show the button that says start the generator else if the user is not signed in we're going to show the button that says that says sign in to use generator right so let's just quickly copy this and paste it here and also paste the second one here and this should be signning to use a generator signning to use generator okay and that works for us now let's take this out real quick for my document and we should be able to see two different buttons based on the state so let me show you this again again let's refresh the page one more time you see there's a start there's a onload of the page right is signed in is false that's why we are getting this this glitch right now happening so for us to fix that the clock the clock value here also Expos is loaded right so we're going to use is loaded and see if the user is signed in and is loaded which is a buling right and it's loaded which is a booing that is when we going to show the right button so we don't get that glitch right and let's just refresh this page and cool okay so the next thing we also need to do here we're done with the buttons and this button is supposed to take us to the generate page right so when you click on it it should take us to the generate page and for us to do that we're just going to make use of um the link and the link component from right to try to push the user to to the generate page if the user clicks on this then for the sign in to use generator once you click on it we want the user to be taken to to the sign in page okay so let's quickly let's quickly test this and see what we currently have so we have just one button showing on the page and at this point the user is signed in right and if you click on start the generator takes you to the generate page cool so that works and let's just sign out and see what happens here signing out the user is signed out and the text we see this time is sign in to use generator and if you click on sign in to use generator it's supposed to take you to the signning page okay let's see where this supposed to take us to take us to the signing page and yeah cool that works nice okay we need to add another button since this are just just going to be since these are just our authenticated buttons and um we we should add another button that's just going to say explore this button basically is just going to say explore trending platet and we are going to use similar Styles and we're just going to say class name of this is going to have a class name of x black who height of this and ping of Y and top y okay so we can see this should be a variant of outline okay so we have two buttons and this just this is just going to be like a dummy button for us right while this is the one we're using to like do most of the actions here on the page okay so I think we we're done adding the buttons and we could just collap this for now we have more room on the page okay so the next thing we need to do real quick we need to bring in our SVG and I think before we do that let's cck style the main container of this and we're going to see this item right we're just going to put appearance here that we want it to act as the rapper around the whole page right around the two different div we have here right now and we just going to do some little calculations to get a particular width which is just going to be width of 100 minus this value then plus 180 pixels right and yeah I think we can remove this justify between and just make it justify around see the fet try now until until we have our SVG on this page okay so let's just quickly go go ahead and do that so this our our content just call content this could just be content then this is just going to be our SVG our SVG here cool we copy our SVG which you also get to we should also get access to the link in in the video description okay so we just have our SV and also our text now this is in the center right this is kind of wrong so let's quickly go back to the parents and we're going to say this is flex of colum we want this to be on large we want this to be the flex of row this should be a row then let's okay I think we're just going to say large then column Das res column Das reverse and take out this break point and um let's quickly see what we have here okay still on one line there might be a problem what's happening here right now and this solution this solution will be because the only problem will be because of what we're doing here should this this particular we should only be for our text right and this SVG is going to stay outside of this particular one where we have the weight and where we have this calculated weights yeah I think that should work for us since we already have Flex let's H this and our SVG is supposed to be here now this is actually working the way we want it to work but we might not be able to see the sves yet because we don't have like a predefined we for this container so let's just start this this just going to be like some basic Styles we're just going to set the WID and the WID is just going to be we of 66.6 pixels the sense and margin bottom and this and that yep so let's quickly see this cool so we have our SVG and also our Landing so let's go back to the hosted one again and check something we just want to confirm this buttons our buttons look very very they're looking very long or very are looking very large so let's just quickly go back fix this because if you see the one the completed one we have shorter buttons and let's go back and fix that so we have we have our buttons let's quickly go assessing our buttons again and see what we have here and our buttons are looking very let's fix that real quick for us to fix that let's quickly go back to this parent holding each of our buttons and we're just going to say we're going to add a WID here right now and see this should be a we of it will give a value of like 260 pixels and we're going to place them in the center and that should work for us refresh our page real quick and we have our buttons similar to what we currently have here now you look at the original one again when you when you fresh refresh the page we have an animation happening to our text right there's an animation happening to our text like a drop down animation happening to this container and also we're going to add an animation to this SVG okay for us to add an animation remember we're making use of frame motion which already installed at the starting of this application starting of this particular project right so let's just go out here and see let just create a new file we're going to call this variant right so we want to use some variants to could just call it a TS file a variant. TS and we just need this two variants right now we need two variants which is number one the fade down animation variant and the blow button variants because if you go back to this animation again if you go back to this page you see the button has a different animation compared to the to the text let's quickly let's quickly add the animations to our component here okay for us to do that let's go back to our page and in our page right now we're going to say this is already a client component right and we're going to go back go down to our to the parent holding our content here and we're going to convert this to emotion component if you don't have experience working with if you don't have experience working with PR motion I think you should check out my other videos check out my other videos on FR motion I have a full playlist on fre motion where we break down each and every concept about motion so import this Auto Import is not working for us right now so we're going to say going to import motion motion from frame motion and let's put this here so we could see this properly and the particular variant we're going to be using right now is it's just going to be a particular the particular variant we're going to making use of here right now is just going to be something similar to what we already have here yes so this takes in our staggering children and and our staring children is just going to be to we can set them to 0.15 right and let's format this properly so what we're doing we're just trying to copy this particular structure of the object we have here because if you see we have the hidden and we have the show right and this if it's just the parent wrapping each and every every item inside this particular container to give us that drop down animation for each of the values so now with that we can Now quickly come here and say convert our H1 also to motion component H1 and our variance is just going to be fade F variance animation variant cre down animation variance and we also supposed to use this on our paragraph two here and we're just going to say this should also be using that the same variant but you have to convert this to a motion component for it to work let's our code and we should have that sliding animation right now we should have the clean animation now let's see this in your wider screen refresh the page okay doesn't seem to work so let's debug it together we have our paragraph motion component already inst installed in our application we have motion rep from fre motion we have our wrapper which is wrapping around this particular text and our children variant and okay yeah one more thing is missing here so if you set a variant you need to make use of the initial property right and initial property at this point in our application you just going to be set to Hidden yeah it's that's amazing and we're going to say animat it's going to animate on show yeah so I think at this point we should we should be able to debug that error that we have right now yeah I think we we've debug it and we could just add one more value we could just say viewports is just going to be equals to Once once it just set true and also named rename this to Hidden yeah let's see what we currently have let's make this larger okay let's do this nice so once we reload the page we have a drop down animation one two interesting Okay so we've been able to add the animation to the text let's go down to the buttons and add the animation for the buttons too so for the buttons I think it's going to be very straightforward and for each of the buttons we have in our application for us to do this we're just going to say motion right dot you just make a motion do button and it's just going to take in our initial to Hidden animate to visible transition variant and import this from our variant yeah so I think we could just reuse this across all all our buttons and we should have the next button here okay cool so we're just going to use motion button directly the motion component exposed from PR motion yep and we also need to do this for the last button the the one we have with the outline and let's just do that for this two let's see this should just be initial and I think that should be the wrong button the button we're trying to Target is this guy here and let's take him out out and um just on a button here throws eror fine we're just going to this is going to be motion do button Das fix our error and um I think we are good outline at this point we won't be using sh button anymore so let's just use a normal regular HML button cool so if you format this right now and I think we shouldn't have an error why do we have an error okay cool that's out okay so we have reload the page let's see the animation again cool so we reload the page we have the but we have the text coming up coming down and we have our button showing up here so if you notice the buttons are actually delaying in in a different way right because we are adding different delays right so this one comes up delays for like 0 5 seconds then this delays for 0.8 seconds yeah I think that's it for this particular animation so I think at this point we could focus on this and let's quickly take this back here and now for us to animate this values I think one particular animation we could just add here very fast animation right we could just say let's convert the parent to a div let's conver the parent to a motion and motion d right we're just going to say initial is just going to be equal to opacity of zero so what it means is you're not going to see this anymore on the page let's refresh this page and you shouldn't be able to see it yeah it's going to be opacity of zero you can't see it right then on animate we just want to animate this value to the opacity of of one St let's this again and see what we currently have yeah yeah yeah yeah okay cool okay cool let's let's see it in a bigger screen and see what we currently have here so the start application you don't see it it just comes up right okay I think that works for the parent the parent the parent animation like the container wrapping this particular SVG now if you see the hosted one right the one we already have hosted it's actually animating through the each different Val right and so how can we actually achieve this that I think that's the next thing we'll be doing now so we'll be trying to animate this values and we are going to be using the use animate Hook from frame motion to achieve this so the use animate Hook from frame motion says it basically gives you animate function right with scope skelets and automatic cleanups it says it provides a way of using the animate function that scope to the element within your within your component right so for other animations we have here we made use of the motion component which is this motion. D motion do paragraph or motion do button but for us to want to animate this value for the one we have on local we've been making use of the use animate value and yeah I think this should be straightforward for what we want so it exposes two value right use animate hook exposes two values the scope and the animate and you could use the scope the scope is just a reference to the particular container you you that scoped right right and the animate is just a function you use to animate the properties yeah I think we let just go back to code and um think we could also close this for now let's just focus on Local Host okay so to animate this let's take this to the side and go up to our application and close this I think we could just close the second one just to make this little neat our SVG is just on this speed directly okay we could just do this now we need to import the use animate hook right use animate Hook from frma motion and we're just going to say it exposes two values right like I said which is the scope and and also exposes the scope and also exposes a function which is animate you could use to animate your components yep we have use animate imported now let's let's have a breakdown of how we are going to do this animation right now first off let's quickly take the scope like I said the scope is a reference to the div so let's take the let's let just set the ref of this particular component to be let's set the ref to this particular div to be scope right so we have scope and so what this means is every value inside this particular div will'll be able to access the values with our use animate function so now if you see what we currently have here we just have one it's larger we have 1 2 3 4 five five different colors right which are just static right now so we wanton try to animate the values as time as time goes by right so for us to do that we we are going to be using the use the use effect to achieve that right and before we do that we need to we need to create a new function for Simplicity I'm just going to put a function here right and this function what the function does is to animate random colors and I think we're just going to put this also up here right so what this function does to get random color we're just making a value that gets random color right to the string of 16 and it just returns a particular color for each of the iteration and we're using a while loop that says to true so while we're using a while loop here because we want this to be an infinite Loop right that generates color in every iteration then we are awaiting we are awaiting right for each of the animation to run then we are changing the F of this particular SV because if you go down here you actually see that we are targeting the fs the fuel property right so if you check the last name now we have first we have second we have third and we have fourth so these are the values we'll be using to access the animate this is the those are the values we be using to access our animation from our animate function here cool and so we just going to set up a use effect so the reason why this is like this is just to make it reusable right so what we're doing here we're calling the first function so the function right this animate with random colors takes in a value which is a target it takes in the first value which is first takes in the second takes in the third takes in the fourth takes in the fifth so let's quickly import use effect and import yep takes in the values then it just makes a random color right and animates your values of the FI property of each of the values we already identify by the class name right so we access the fourth we access the fifth and this is just going to be an infinite Loop since we're using the w w Loop to achieve this yeah I think with that we should be able to get the animation end as you can see this is changing and changing and this is this is amazing so now we have a duration of 0.3 we have a delay of 0.4 we could do something we could say a delay of 0.9 just to see how the animation how we could change the values let's refresh this page real quick you see how slow it is changing changing and changing and changing okay changing between each different colors and I'm think we could just leave back our value what we have is 0.4 interesting okay so we have our animation working on the landing page let's quickly jump into the generator page so let's take this to to the side and so working on the generator page should be very quite easy and let's just go to the generator page okay so there's an error which says scope provided but no element detected okay let's go back to our animation there should be a problem with our animation right now on this page let's quickly see what's happening here let's format this one more time and see okay so we're making a while loop animate so once we leave the page right this basically kind of sets or sends our application into an infinity loop because each of this our values won't be available anymore right on the page or in our D so let's quickly fix that for us to fix that we need to say I don't want to run this animation only if the scope right if the scope current is available and only then and only then should we animate right with the Target and the field color and all now if you leave it this way this will send your application into an infinite Loop because this is an if statement inside a w Loop so while so this our particular Loop will always be true so this will send your application into an infinite Loop so we just put an else here right says else we want to just break the animation cool I think that way now we could actually fix that error we have there now let's go back to Landing okay cool and start generator yeah cool so we we fix that and they not is okay cool um I think I could make this a little smaller and bring this here so we have more room for our generator page okay so we are inside the generate page right now when we click on generator we want to come to this page show some spinner on this particular page then redirect the user to a new route which is containing the new color right that's actually quite easy to do so let's do that so on this particular page we are going to first off we're going to create a use effect right use effect so this use effect is just going to be on this page so when this page when this particular component mounts okay let's import this from use effect amazing so want this page mounts we want to make of the Ed router from next navigation because we have to make this component a client component so we can make use of the use navigation so just say use client and so once you come on this page we are going to do some things here once you come on the page right we want to navigate you to to okay so this is not spelled correctly we have navigate so we want to navigate you to want to push you to let's say to the dynamic route which at this point is called color then we have let's just see 1 2 3 4 5 okay amazing so let's go back to our hom page okay so we in the base route and start generator we come here and we are routed to this page very fast right so it says page cannot be found now why this is a 44 page simply because our route remember it's called colors right not color and let's refresh this p real quick and we should have access to okay let's go back here and start generator takes you automatically takes us to yeah takes us to the color page so we're on the dynamic page right now so that is just the base of what we want right now so for the jsx we are just going to make a very little spinner and we don't have to do something too fancy we'll just make use of T CSS to to handle the animation right just use CSS we're going to use TN classes and the animation from taing directly just to show a particular animation here and we're going to make this a height of um of full right so it shows across the whole screen and let's close the div real quick we have a background of white width of screen flex and a height of 100 VI cool let's refresh this real quick and see what we currently have here so there's an error it says div is not closed this this and I think this shouldn't be an error for us okay let's go back to the homage okay so let's just take out one of the div div and div class and we okay so this is the error cool no don't worry in the error so we just say return we're going to return a jsx right and make sure we close the tag else it's going to tr errors okay forat this guy and error should go away at this point okay so we have the spinner showing up on this page and let's go back here let's take away our Navigator push so let's refresh this page again let's go back here and see on the generate page okay start generator we have this guy Happening Here on the full page loading then for some seconds we generate the color here then take you to the next page okay so let's just work on that so for us to work on that right let's quickly create a new variable we're going to call this um we call this call this generate Generate random color and our generate color Generate random color right colors is just going to be be equals to our random color so if you remember in the beginning of the application when we're installing mpm packages we're going to be using we installed random colors right I think we just quickly pull it pull up documentation here so random color JS and let's see what it does so the random color GS is just a tiny color generating tin for generating color right and this is how we use it use it in a variable we already installed it and you could pass in you could pass in some values the formats and for we what we just need we just want to pass in something very simple right passing an object which is just going to be here it's going to be equal to random yeah we could just make this random and next we also want to pass want to pass the count to to five since we want five colors right we want to generate five colors and next we're also going to pass in the Luminosity our Luminosity for this is just going to be also be random let's quickly import random colors okay let's say import random color from from random color okay so we have this so let's just try to log the colors we have right now so let's say Generate random colors let's just log this what what will be the values so forat this real quick and we're on generate let's reload this page and see what we have okay as you can see right now we have with our console ninja right now we've been able to see five different colors right so we've been able to generate five different colors at this point and so the next step is just to navigate the user right now so let's quickly go back to the generate page where we have our loader and we're just going to say push and let's just pass in this variable right now the variable we have right now is just generate color which is just a string right so let's quickly see this let's make this larger and so you go back to the landing page and let's refresh the page one more time okay so we have start the generator we get to generate page then cool routed to this particular Dynamic page now if you look at the the you look at this part of our browser you'll be able to see we have the colors each of the colors right all being represented as string and they are all separated by commas now that's not actually what we want we don't want that kind of we don't want we don't want the colors to be structured in that particular way so for us to fix that real quick what we could do here we're just going to make another variable we could call this this could be our rout bars right and it's just going to be equal to to Generate random colors Generate random colors we have because if if you remember correctly they are all in an array right so we could map through the values right since is an array and we have access to each of the colors and we could just type this say the color is just going to be a string and what we want do with the values this we just want to say each of our individual color right in each iteration we just want to splice out the first value one right and once we're done with that we just want to join back this particular value and join them by the string of dashes so what we seeing here we we just want to map through the data and we just want to map through to Generate random color data take out the hash which is what we currently have here right okay so what this variable here is just doing for us is just to map to the data and splice the first the hash values we have here right now and join them back and if you try loging say console log the params which is where we want to navigate the user to which is going to be our Dynamic page right okay so we're trying to we're trying to okay so we are trying to log the route pars and see what we currently have let's quickly go to the console and see what we currently have let's pull up our console here real quick and go back to our generate page right now okay I think one one thing we need to do we let's just take out the redirect again where we are pushing the user to those Dynamic Pages you'll be able to see the values properly let's go back here and okay let's go Local Host again okay we have local 3,000 start the generator loads up and we should be on generate page and being on page let's take let's take a look at the console again right now the console just shows us this value right we just have each of our color hex without the hashtags and they are not separated by comers anymore they are all separated by dashes so this is a very comfortable structure we could use to Route our users so so what we could do now is since we already have this variable holding our routes which is automatically our color we're just going to use this instead of the route params and if you notice the redirect happens very fast so in the sense of like when you hit to generate page once that particular component is done mounting since we're using the use effect the user is being routed to the new Dynamic page but we just want to show a particular feel of of the page loading right so for us to do that we're just going to use set time out and we could just run set time out here and save okay our set time out is just going to be a regular function right and this is just going to push the user to the dynamic URL in 2 milliseconds which is equivalent to 2 seconds yeah let's refresh this page and take a look at what happens next okay let's go back to the landing page okay we on the landing page we hit the start generate takes us to the dynamic page let's go back again okay let's hit here again all right start the generator okay let's make this for like 4,000 milliseconds start the generator for 4 seconds before you be routed to the dynamic page yeah amazing so at this point we have the dynamic page with each and every of our values here up in our up in our browser here right so that's just one step so we taking to the dynamic page and that is basically how we are going to do it just take a recap of what we did we generated a color with the the random color libraries we generating five different random colors right and we mopping through the values that are been created from this variable I'm mopping through the values taking out the first value which is the hashes and we are joining the particular array again joining them by dashes right so we could what we're doing here we're just restructuring the data so we could use it for our need and the next step is just to use a US effect that says when this particular component mounts navigate the user to this new Dynamic page based on the the colors right and we are navigating the user on in 4 seconds once the user hits the page after 4 seconds user will be routed to the next page for us to continue let's quickly take a look at the colors page right the place where our color plest is been generated let's take a look and see how it looks like so on desktop what we just have here we just have each of the values that we have here right now which is 1 2 3 4 5 colors and we have some icons on top here and let's quickly just work on this color part first okay so let's go back to Local Host and we are on Local Host and and we are on the dynamic page let's quickly open up vs code and go to the dynamic page which is this okay so we are inside this particular page now the first thing we will have to do here we have to have access to the particular particular pars because remember based on this this are all Dynamic these are all Dynamic values right coming directly from from the browser tab here right so we need to make sure that we're making use of the of the params directly to do this okay so for us to do that the first thing we need to do we are going to make sure that we have access to it and for us to do that next just makes it very easy for us we could just D structure the property out and we're going to call this params and um for typescript purposes we could just type this and say our pars right just going to be just going to be having the value of a slog because you remember we named our Dynamic page slog and our slug is obviously always going to be a string string and let's see this okay so we have this value now just to show you a quick example of what we are trying to do here let's just put in this value here let's say we just want to show our property value which is props do slog we want to show it on the page directly yeah cool think let's just put some style here to show I just want to visualize what we're trying to achieve right let's say this should be text Exel and take out our value and put it here now if you preview it in the browser and go back to the homepage start the generator again loads up and takes us to this page so you see we have Dynamic values and these are the same values that we have here cool so that's the first step so we having access to these values is just the first step of what we'll be doing here so the next thing we need to do we need to then use this value which is coming from our props directly right and for us to do that let's quickly come down here and say okay this is just going to be let's create a variable we're going to create a new variable we could call this this could be our generated our generated colors and our colors is just going to hold our pars our pars do do slog right and we have an error it says can't find in pars actually we can let's see what is here function Implement immediately um okay let's take this out real quick let's fix this and this should be return we're going to return the GSX directly take out this guy and okay so the aror should just be coming from here and place this here and I think our error should go away now cool so we have a variable holding our generator colors and the next thing we need to do here we need to we could just say on that variable we call colors and colors is just going to be our generated colors right and if the generat colors exist we're just going to say generat colors do splits we just want to split this and we are going to split out the the dashes right the split method basic basically takes your string and turn them into substring right and it just returns an array now so what I'm trying to do here now is I just want to take those values which we already converted to a string right now and convert it back to an array so we could map through that value and show it on the page okay so that being said we're just going to create a new state right and first of let's import you States from react use States from react and the next step we just you say create a new variable that's just going to be color platelets so this particular use State this particular use state is just going to be a it's just going to be an AR um let's take this out we don't need this and it says you're having an error I think this should be a reverse this should be a react server component error and to fix that let's just go up here and see use client let's take out the i n here client use client error should go away and and let's quickly refresh this page use client okay cool all right we've been able to fix that so let's say the next thing we need to do here again we need to be able to use this value right now so now we have an array like if if you want to take a look and visualize what we currently have we just have an array right now an array containing all our colors and if you look at the finished one right these are all showing on a particular rule right meaning that in in a sense you can say these are all an array that we mapping just to show different color on the particular page okay let's take this to the side again and go back to Local Host and the next thing of the next thing we could do here we could come into our component here and say let's just create a new component right our new component will be called let's just call this this is just going to Ser for our each and individual platet we're just going to say platet each an individual platelet and inside our platelet is just going to be a regular component and let's name this properly this should be platelet let's take out the side okay so this platelet is going to do it's going to hold some values for us right now right and um for the meantime let's just make this very simple as possible our platelet component is going to accept some props right and we're just going to say this particular component going to accept some props first it's going to accept the color props it's going to accept the colors it's going to accept the lock XX also going to accept the color index and the set color hexes so these are all the values that we're going to be passing down to this particular platet and in a moment this will all make sense okay and um for also for typescript reasons let's also try to type this particular props are coming in here right now okay and okay so just to visualize this real quick let's say we just want to show each individual color that will be shown here now let's go back to our page our color page right and what we could do here we could say we could say we want to map through all our color platelets right and we say map and mapping each of the values we just going to pass in individual colors which should just be the color and just taking the index to which is just going to be a number okay this should be just be a number and we just want to return our component here right and the component will return in is our platelet okay and yeah let's format this real quick and see what we currently have it it says property map does not exist and type string okay so now the reason why that that will happen right now is because we haven't typed this particular this particular value we are mapping here right now because we're just taking the colors from here and we are adding the colors to this H State as the default State okay so for now before we try to focus on T script parts let's just pass in color right so color will just be equal to each IND individual color that is inside our is inside our array and we could also say passing the key is just going to be color for now our color Index right which will be using later it's also going to be equals to index and we need to pass in all our colors which should be using on the later part it's just going to be equal to Colors now colors is the variable that we have here right now which holds all our values directly okay I think okay let's just this should be colors yeah that eror should should go away now what this okay cool the same type script error we have here so let's quickly fix this TS error so we're just going to type this real quick we're going to say this colors right colors variable could just be at the point it's going to be undefined right and then once we have the value this is going to be a string of array of strings and okay and this could just be this could just be any yeah I think I won't advise you using any when you're working with cs but like so we could actually move move on with this and yeah so if you add any the error goes away and we still have some errors here it says some of the values are not being passed down right I think definitely work on that in the coming chapters okay go up here let's take out this log we don't need this log anymore we have our values we have all our colors okay cool that's that's a good step and let's quickly move into the platelet and focus on working on that part so since we have each individual platelet which is this we could start think about how we're going to style this and for us to sty style this particular values what we could do here we're just going to say let's create a right okay I think we could just use this one we have a d and we're just going to add a class of like we do full high- large Flex Flex R reverse and so in a minute we'll see why we need this and one last thing we could do here we're just going to say style our background color right the background color of this particular div since this particular component is inside an cation right we just going to set it to um to a variable we're going to call we're going to call this variable color instance yeah and we haven't created it yet follow instance and okay let's quickly create this variable up here because you know in CSS right when you're working with hex values your hex values has to be it has to have the hash right in the beginning of the particular color if you look at let me quickly show that again okay I think we could just take this out for now I just want I just want to explain what we're trying to do next okay cool if you look at this values right we have we have just the X values without the hash and CSS won't be able to identify or be able to interpret the colors for us right on the browser so for us to be able to tell CSS that we want this values want these values to just be X values we're just going to create a new state and we will just quickly import okay so we're just going to quickly import you state from react and what we're doing here is we're creating a new state say instance and we are adding the hash right to that particular state so that we each and every of our color that been passed down as props right will just be represented as hashes right and we could directly use that value on our background now let's see this and cool let's make this wide okay cool now if you take a look of what if you take a look at what we have right now we have our hes with our background colors so far so good that's making sense okay so I think at this point what what we still need to do we need to do more of the styling and for us to style this properly let's go back to the parent okay let's quickly go back to the parents and this should be this part and let's break this down the platelet should have a parent over over here right and the parent is just going to Define some values here so let's quickly say we have we want another div and this D value we're going to change it in a while but like for now let's just make this look good we're going to say we want to Flex of we're going to say we want Flex right we want the values to be flexed and if you look at this now we have this because this is the parent right so we want them flex and I'm just add some break points here so when it's large we want this to be Flex of column I think that should be Flex of row since it's just going to be on a row Flex d fle d column and with Das F then WID D full and height D screen okay so we say this should be WID of full and height of screen right and with that if we take a look at what we currently have in the browser let's make this wider okay we just have our columns 1 2 3 4 5 and yeah I could say this is looking good so far and it's also responsive right thanks to doing break points right okay so we still have more styling to be more styling to be done here okay so one more thing we could do here we could say we could quickly say we want to style these values because if you look at already finished one right we have we have the colors right on a row and we also have some icons and we have some text the way we place the text and we're doing some conversion here we're doing some color conversion and other Logics on a particular color PL directly okay okay so for us to do that I think let's just quickly style this part let's just style this this text so let's go back here and take this down here and go into each an individual platelet we have the color here right now okay so for us to for us to kind of manipulate the color right now because if you look here we have the color name and we have the we have the color name and for us to get the color name I'll just show you guys how we're going to do that and that should be pretty much straightforward to do and okay for us to get the color name what we could quickly do here we're going to make use of the library if you remember from the beginning we we installed a particular library right which is called color and that's we're going to be using to like get the particular name of the colors we have here since we already have the heis values right we're going to say import this from um this should be for color and think I just want to open up documentation again we take a look and see this and this should be let's take a look at this so it said it's just a tiny yet powerful tool for high performance color manipulation and conversion and we're just going to use the values I think it has it also has some plugins you could use to to work with this so now you see see this we have colors right provide options to convert a color into a CSS color name and viver I think this is what we're going to use at that point this is what we're going to use right now so we already imported this I think let's just take this real quick and go back to vs code and I think go back to vs code and see just want to import this guy and we also want to import the name plugin and once we're done importing the name plugin right um let's also see how they dig it here we have to extend particular name inside our component before we can make use of it and for us to do that let's just see I think we're going to outside yeah let's just do it outside and at this point we could actually get the name of each and every color we currently have here okay so make it easier and make it easier I think what I'm going to do here I'm just going to create a function right and I'm just going to call this function this function just going to name right and our color name it's going to take in okay this is going to be a function obviously and and this function is going to return our color right our color library then color library is going to take in a particular value so we could just call this x taking our x value and the x is going to be coming from this part and once we have the X we're going to go to name we want this function to return the name and yeah I think we're cool with this now this is a function we could just use directly down in our GSX right but for Simplicity we could just say create a new variable you say color name it's just going to be called to our function and we're just going to pass in the value of our color instance if you remember we already have our color instance right which is just our direct color that's coming from our props and we just type this real quick it's always going to be a string obviously and let's go up here and see color name and color name yeah so we can now say okay take color name and show color name down here and show color name okay cool okay so if you see what we currently have here the the library is returning black the library is saying okay all our colors are black which is um at this point which is wrong right because not every not all our color is basically black now to debug we just need to understand that there's a mismatch between our values because you remember the colors this color directly just coming as a string without our hashes right and that that was why we created an instance right where we using the hashes directly and I using on the background so the library cannot actually identify what color it is so we're going to use the right value so instead of using the color without our hashes we are going to use color instance here and color instance and we can't see any color name here right now let's go back to the library so it says undefine if the color is not specified in CSS specs right and us to get the particular color we just have to pass in closest to True okay so let's quickly do that let's go up here and say okay since the color is not available for most of the colors we have here right now um let just say closes I'm sorry closes should just be true closest to true and once closest is true we should be able to see some color names yeah cool let see if we can sty this real quick right okay so we could just make a paragraph and we're going to say our paragraph is just going to be this and we just have to put this particular this particular icon just to represent that says oh this is something similar to the particular colon name okay so let's format this properly and see what we currently have now let's visualize this properly cool we have dark gray let's go back to our H page and generate a new color so we could see this let's start the generator again and we can see the particular color that has been shown okay so I think the next step what we need to do let's continue sty styling this properly okay so let's continue styling our application real quick okay take this to the side again so we could visualize this properly and we have our colors and what we could quickly do you could quickly see this deep that wraps our particular our particular erent and this deep DS our particular component we just want this to be we want it to be absolute right and for us to do that we have to create another div down here right and let's just say we have on that div going to take our values into here and see okay so we have our values in this this perance is just going to be absolute right absolute okay this just going to be absolute when it's um when it's on large left of zero I think in a moment you see what we're trying to achieve here it's just going to be flex and items we're just going to make this Center be Flex of colum and also we say this is just be a WID of this going to be a WID of four and imagine button of one okay so with that particular style if you could see this correctly we have our values right at the center of this particular um of the particular color platet okay and even on mobile it looks good right so let's format let's format this properly and continue styling so the next sty of what we need to do here we need to say for our color cuz if you remember we haven't styled this this color is just going to be you could say this could just be an H3 right and let's just close it here I'm this going to be on H3 and our color is just going to be an H3 and um Glass St we could add here we could say class name is just going to be equal to I think for this let's just make it taking string later out and I'll tell you why in a bit why we're doing that the text large and and when we on large screen we just want the text to be something around 30 pixel else and this should be upper case right also font of semi bold which should give us like 500 or 600 yeah okay so C pointer and we could just align the text to the left I think this should give us a good style for our color names directly cool so this looks bigger now let's make this bigger and we have the color name and we also have the X values let's go back here and see color name and color values okay so we we have color and we could just quickly change this right now I think let's just use the color instance directly instance right and if we use a color instance you'll be able to see a little different from what we currently have we have the hashes and we don't want to show the hashes so what we could just quickly do we could just use JavaScript value of replace right we're just going to search through the particular string right and we're going to say search for anywhere we see the hash right and once you get the hash just replace it with an empty space and that should give us the values without the hashes cool okay and so you have two options right you could just use the color values directly or you could just use the color instance but I just want to use the color instance since it's what we already created here and we're still going to be doing some manipulations with the value so it makes more sense since we already have this value we just use it directly our component okay so we are getting closer I think the next thing we could do here we could try to okay let's take a look and see how this looks like this is looking good this is looking different from what we currently have here and how we going to do this right now okay let's take it to the side and the next step of what we need to do here we need to still continue styling this particular properties okay so once we have the color now right now the next thing we could do we could actually work on this options this particular options we have here where you could like take out a particular color or copy a particular color or like move it and stuff but before we before we get into that right I just want us to do something so let's quickly write a function because if you see right now in the completed one where we have this if you look at this color for example this color looks good on white right that is to say that the luminance right of this particular color should be favorable on a white text so what am I trying to say if you try putting black text on this particular kind of color it's going to look bad right for a particular design or a particular like when you're working with accessibility colors or when you're working with colors that really works for the web right so for us to fix that we need to have a function right that checks for the Luminous value of a particular color then based on that particular value or based on the particular value that it returns right we are going to show different color texts right I think to show you how that works again let's go back here and see start the generator okay so once generator start now you see for the black background for something that similar to Black right this particular X we are sh white text now imagine we didn't handle this right this is just going to show a black text and we won't be able to see the name or the particular the particular hex value so I think that should be that that should be what we should try to like try to do right now okay so for us to do that let's take this to the side and we're going to go into our utility we should have a utility here and so we're going to add on that function here and what this function is just going to do for us here is something very simple right first off we have to import color because if you remember using colors like do the color manipulations and most of the color manipulations on this particular application and we're also going to import extend yeah I think that's cool and we also have to import another plugin okay so I think let me just quickly show you guys what we're trying to do right now with the plugin now if you go up here and we're looking for this the accessibility colors right okay this is what we're looking for it says add accessibility and color contrast utility right so we just going to import this we are going to check the color luminance if the color luminance is 0 0.01 and 0.71 or one right based on those values now this is it on that way you could do this you could say Okay contrast text on black white on black but for this particular video we're just going to use luminance to get the values I hope that's clear and that's clear of what we're trying to achieve okay so I think at this point we could even close this because we won't need it anymore and let's make use of this here and what we're going to see we're going to just create a function here right okay let's quickly do it we need to export right since we be using it in our component just use an arrow function and we're going we could just call this handle color text class yeah I think for you you could name this something something way better but I think this name works right since we're going to use it like generate the class's name which we're going to use CSS to to style now I just want to show you something else again if you go back to the um to the hosted one if you notice the SV values to are working together with the particular color text what do I mean we have a text of white on a black background our svgs are all white too and if you try Okay where we have something like black here too right the SVG are black so we'll be using this function across most of our most of the components will be building right our chapters so we just have this function something very simple right like very very straightforward we're just going to set a constant call luminance and the luminance is just going to be to our going to be equals to our library right then we're going to take the luminance then let's just make this a string in typescript basic string and what we just want to do here we just want to return right very straightforward luminance right if luminance if luminance is less than 0.3 we're just going to return a string of wh else text should be black now you might wondering how we going to make use of this in our component and how we going to use it to make the dynamic colors I'll show you how we going to do that let's quickly go into the platelet and to do this very straightforward right okay so let's quickly make it of the function here so we're going to go to the parent right to the parent of the whole container right and okay I think we could just take this out for now and show this first off before we even add it let's just see this we have this text on a black background we can't really see the text properly right because we're just showing it and we're not doing like some conditional rendering based on the luminance okay so let's quickly make use of the function so for that we're just going to make this this should just be a string literal and also this should be a string literal okay and the reason why I'm making string literal so we could just use our function here now remember our function we called it we called our function andle text class so let's create a variable we're going to say color text Lumi right it's just our luminance and we're going to import our function handle color color text class and this is just going to take in the particular color our color instance right and we're just going to use color text Lumi and this is just going to be here add it to the class here okay and we're going to use it here so we're going to say if the color Lumi right is equal to White right return your text of white else black and let's format this and see what we currently have here all our text are all white and that sounds very tricky don't worry we're going to go back and generate a new color platelets so let's start a new color plat and we should see what next after 4 seconds all our colors are still white okay let's try it again and see okay now this is what I was saying right you can see we have the color black here it seems like it wasn't working the function wasn't working but it was because of the color that were being generated now we have color black right and we have the white text let's quickly take out this particular logic we just added here let's take this out and say let's not use logic anymore just show me the colors directly now we have black black black black everything here is all black right because that's default colors for the text but now we just adding this we've been able to add a little attention to detail for our particular application so the the text color behaves based on the particular luminance of the particular color I hope that is clear let's format this real quick and think we could just take this up real quick and see okay all right so we've been able to add that and the next thing I want to do here is to to start working on adding the icons so if you go back to column let's name this properly if you go back to let's go to this particular one again okay if you go back here we see that we have this icons yeah I think let's quickly do that so for us to get the icons right the icons are all SV right they are just basically svgs and just basic svgs and for us to do that we will need to create another component and this time let's go into play Let's go into components and say this will be call our options options just going to be components right and what we want our options to undo most of the values we have here it's going to undle we seeing this icons and everything that needs to be seen here right and what we quickly do here I think let's go into component and create a new component and this component is just going to call icons and for icons what we do is we're going to return each and every icon we have here right and this icon just represent each and every icon you see here on this particular the hosted version of our of our app and let's quickly take this out and go through what is happening here so we have icons and they SVG icons they all taking the current color which we are typing here to just be a string and we are returning the current color for the fuse and the stroke and we just exporting the colors you don't have to worry this particular SVG will all be available like in the stter K repo and let's go back to options so let's create our component this is just going to be our component we're going to call this options and inside options what we're going to do options is going to be very very straightforward right and okay we have an error it says CL network error let's refresh I think that should be a error and okay let's quickly hit back Local Host 3,000 and um let's refresh the page and again and see what we currently have here are we having an error no we not okay cool okay we're back so let's start a new generator and our color is being generated real quick and once it generate we have our colors again and okay so our colors is actually not working the way it's supposed to work based on our luminance and I think we're just going to take a look and see what we currently have in C right and components we have this right if is this then it's going to be white then black um let's refresh the page again and see what we currently have Okay so let's create a new color on platelets and see what we currently have soon we have an issue here since this particular color is not working anymore our particular logic is not working anymore let's see what's happening and um okay I think at this point it should work let's try creating a new color and start generator Okay cool so this is working so let's go back to working on our options our options right is just going to take in it's just going to take in all our icons we already exported right from that particular component and let's quickly just import it and we're just going to say copy icon cancel icon drag icon just import all of them here right and we just quickly do something here to make this very very simple for us to understand we are going to show each of these icons right the first one we're just going to show you we're just going to show I think for now let's just show the drag icon on the drag icon we have the the lock icon right and we have some errors from all these icons because we are supposed to pass in the current color open okay we have our two icons and let's quickly create the current color variable that we'll be passing in our current color variable is just going to work as what we just did for the text right it's just going to do we're just going to import the function we created before right and import it just going to take in color and if the color is white the current color is going to be white else it's going to be black and we're just going to say current color is equals to the current color I just want to show us how we're going to make this work and from there we'll be able to move on okay so current color is current color and this color is not defined right now we have to accept color as a prop from the parent right and we have color and our color is just going to be coming from there and we're going to accept some otheres but for now let's just take in color just going to be a string right and that should work and let's go back to platelet okay so for our platelet where we have all our platelet showing up right now let's quickly let's quickly render our options here we're just going to see options it's coming from which is just a component right we're just going to import it and put it here and we're going to pass in the color it's accepting a prop of color and this is just going to be a color right let's see color could just be color instance they're just passing color instance and I think at this point we should you be able to see some icons of what we have here right now let's make this bigger okay cool don't worry about the styling we're going to fix it in a bit let's just see what we have here so we have two icons one two one two icons two different icons let's take take it to the side and see what we currently have again go back to options take out let's format this properly and where is this all coming from okay so let's quickly just search for o and say oh where we just have okay here and going to take out o we've been able to fix that so let's go back to coding so we have the icons and these are not all the icons we need right now we need let's go back to Colors again and we're just going to leave this open here so we could use it as reference to what we're building so if you go back to Colors right we have three different icon showing on mobile why on desktop we have four icons which is actually five because of we have the lock and unlock of the color okay now I just want to make this very very easy for us to follow along we going into option and what what what we could quickly do here quickly say since in this one already we're going to show some like we're going to show some two tip and if you remember let's quickly go into our components we installed the two tip right from shadu so let's just use it directly here and um for us to do that we're going to say okay we're going to say each and every of our particular now right let just make it div here and this div is just going to be posting this particular values so what what we're seeing here is this by saying we want to show the copy icon passing the current color and we also want to show the two tip that is being imported from the shadu library directly I think let just import it here up here I'm pretty much straightforward okay so we have the two tip and two tip provider and we all have the values here let's format this real quick and I think our error should go away now okay if you go back to this we just have um we don't have any icon here and we could ref fresh Okay cool so we have icon and we have some other icon let's let's try in some other place let's see this take this to the side and copy icon yeah we have copy XX copy XX okay cool amazing and let's quickly do it for the other icons too right so we have this one which is for copy we have the next one we just going to call it on that div and this div is just going to hold um this div is just going to hold the next one which is just drag right the drag icon and we're also going to say for the last one you want another one here right just going to be is just going to hold on the twoti provider of um of our lock values now mind you we don't have access to this particular this particular array yet so we can't use it but we're going to accept as a props and I will show you in a bit why we need this okay so let's just type this real quick our color XX color you see color XX just going to be string of arrays right and okay so we have our icons and cool I think we quickly pick out this one and we should add another one on top here this is just going to be the delete right delete color and mind you we're going to add like the functionalities to each and every icon here okay we have all our icons set up let's take a look at how this looks refresh the page one more time okay this is looking this is looking really good and we just need to style this okay okay so for us to style this we just going to say let's format this one more time and okay so we're just going to use this class name and say for our appearance right let's quickly sty this guy we're going to see this should just have a class of this values and just regular classes we going to set it to flex Flex rle Flex column and um let's quickly fix this error we're having here and item that Center okay we what we're trying to do with this particular class we're trying to add we're just basically trying to add some spacing in between each value let's see the error we have here equal to this and okay this should be this and this should go away yeah should go yeah and we look at the browser again and see what we currently have okay let's see this in desktop mode so we have some spacing in between our icons and let's go back here and see what we currently have if we go back to the the the particular color page and we have the platet and inside the platelet that's is where we are showing the options right now based on the one we already have hosted the one we're done with if you take a look at this we are showing different icons right on desktop and also on mobile and the way I actually want to achieve this I just want to make use of a hook and to do that you are going to do that is very like very very straightforward there's a particular hook we're going to make use of to achieve that and this hook would just be just going to be used right inside our components where we have like Library have components outside here right in the root we could just say we want to create a directory call want to create a directory call hooks this are just going to hold our hooks I think we'll still need like other hooks for other functionality on the app and this particular hook we're just going to call it use media use media qu. TS and what what this particular Hook is just going to do is very straightforward right we're just trying to have some responsive Styles right changing an event trying to change an event listener to our page then based on the values we'll be able to show different different icons let's go back to options and I think we need to use this in the platelet and let's go back to our platelet components and inside our platelet components right now we're going to make use of this hook this Hook is called the used media query and we're going to we're going to set say if is desktop right if is desktop if we on desktop right then we're going to use this media query and the particular value or the particular minimum WID of what we going to be looking out for it's just going to be something around 760 pixel which is like a desktop size this should just be a string and an error and this should be a string okay I think like this we are okay and this should work for us right now now what are we going to use this hook for if you ask me we are going to use this hook to to show some values now since we have this right and and if you go back to this part and go back to the hom page we generate a new color once you land on the color PL just notice we actually seeing the icons directly we actually don't want that behavior right we don't want that to happen because if you see on the hosted one the icons only shows right when we are Hing through the particular color platet we're going to use the desktop to do that because on desktop we are not actually hiding it so we're going to use this media query hook we created right to achieve that now let's take this guy to the side again and say remember we created a file called variant which hold our variant and what we could quickly do here we're going to say go into our variance and ins our variance we're just going to place into variant this is just going to be column variance starts show column variance column child variance opacity of Z and one okay so we just the variant are just we're going to be using in frame motion right to tell frame motion to hide these particular icons once we come on that particular once we come on the particular page and for us to do that it's quite very straightforward right we are going to see here right instead of showing the options we're going to say if if we on desktop right if we're on desktop remember we have a variable up there called desktop right if you're on desktop we are just going to show something and else going to show something else and what we're going to show here it has to be a motion component right from FR motion I'm going to come here and say we just need we just need a motion right motion div animation. div right is just going to hold our options our option components and I think let just write this properly our option components are takes in our color and our color instance and there is some M stuff okay so that is that for this why if on on on smaller devices right we're just going to show we're just going to show options directly and render options yeah and yeah that should work it for us so let's quickly import motion from frma motion up here so we could make use of it and so this eror goes away we're going to import motion from motion from FR motion go down here and see what we have here and we have some errors can't find name did you mean can't find a motion I think that error should be fixed now since we already imported motion from frame motion and um think one thing we could just quickly restart our server okay let's quickly restart our server and see okay so our our server is up again so what we could quickly do here we're going to say so since we've been able to add this right now let's make use of our variant remember we created the variant right let's make use of our variant and um for us to do that we are going to quickly see we going to make this also a motion right since this is this will be the perance and we're going to say you're going to hold a variant right and our variant is just going to be equal to what we call colum variant which we exporting the column variant right then this particular one that will show up on the desktop just taking a variant of colum child variant column child variant and let's quickly finish up this so we're going to say on initial initial is going to be called to it's going to be called to the start of this component and then why we over this while over so this values are all just coming from frma motion right Our advice you check out documentation or a tutorial of how to use this so we say show and what we're just doing like a straight example or straight explanation of what we're trying to do is we saying start and show of the parent of the parent colum variant here right which is just empty values they actually not doing anything and let's go back here and see what we currently have again so we just want to go back to the platelet and this should be the part where we are and we over initial show and I think this this does it for us this does it so far okay so if you go here now right and you a through the particular color you get to see the different option not like the way it was before so if you don't really understand what what we did here let me take this out real quick and show you what we did okay just take this out and cut this out and also take out those parts let's just do this so I will show you so on desktop like when you when you're viewing this particular on desktop right let's refresh the page real quick and see what we have all our icons are just showing up straight up right all our icons are showing and this is not desired Behavior so that's why we had to create some variant right which we going to which we are making use of here to say okay I'm show this guy when it's show this guy when it's on desktop else just show the options directly now with that particular setting of what we just did once you come on the page you won't be able to see the options until you have all through the particular platelet Mak sense make sense let's go to the side and the next thing we need to really do here is to style this because I just realized this is not looking really good this text all supposed to be in the bottom from here and the icons in the middle here let's quickly take a look and see the styling of what's really happening okay so we are in the color plat and this holds the desktop okay this holds the desktop and our text let's see our stylist go down here again and see what is holding all our text we have absolute large right and once it's large right we are also going to say left of Zer Flex large item Center and then we have our text which are all just going to be which all have our Styles and okay I think the way we could debug this right this is actually behaving really wrong I think this should be very very easy to resolve because since the parent is absolute right and each of these item on top here on top of the parent are also absolute the issue should be that they are all on top of each other and to fix that one of them have to have a different property for the bottom so I feel this should be our solution okay let's take this to the side again and see how we're going to fix this is since this container right is absolute let's let's take this to bottom right this should bottom of zero that should fix it for us hopefully let's refresh the page again and see yeah cool so we have this in the bottom of zero I think this is two down let's quickly take it up a little bit and for us to do that we're just going to say we could say this should just be a button of like let's find a particular value let's say 14 let's see how 14 looks like on desktop mode okay 14 looks good and we've been able to add the particular animation now if you see this we have all our animations 1 2 3 4 five like as you go through a particular color you get to see you get to see the colors and each of our icons just have our our particular colors they all have our particular two TP which we using from shadu directly and I think the next thing let's fix this two tip because if you see in the hosted one the two tips are all black what we currently have here are just they having white backgrounds and now one important attention to details if you notice it the icons are working according to the text so for example we have black this is also text of black we also have our icons black now this is possible thanks to the particular this particular function utility function we created before we're also using it right for our options to pass in the current like that is what we're doing here we're just saying okay handle this turn to white black if it's white just make our current to be white else make it black then we passing it into into of our our SVG component accepting it as a string setting the stroke and the feel straight out like that's how easy it is to se very little attention to details when building applications like this okay so I would say at this point we are getting something very clean so we still have more work to be done and so far if you got into this part of the video please leave a like and also make sure you subscribe and leave a thumbs up share the video because similar videos will be worked on in nearest Future and I don't want you to miss them right and if you've watched to this particular part of the video you are doing amazingly well so far so let's continue walking on so back to our components let's take a look again and see what we could quickly do now if you go to our hosted one you see we have okay let's see this we have select color right so let's quickly add the select color let's quickly add the twoti for that so for us to do that we need to use our twoti provider again inside our color platelet inside our platelet and we're going to say how we're going to do it is very straightforward right so we're going to take in our provider and our provider is just going to do one thing and one thing alone this is where we have the name right and we're just going to put our provider here and see H1 color replace color instance replace which is already what we're doing right and let's quickly import the twoti provider to import this okay cool we have this imported and I think we could just take this out we're not working on this yet and format this properly now if you go here and this and let's have all the other one right okay let's say this again how the first one okay it's not working out expected so we could take out this other H3 we don't want to so when you have our H3 this is the trigger right then just going to show you content of Select color let's refresh the page and see what we have so come here and do this select color okay cool select color we could see select color and let's quickly fix the background of the two tip and to fix the background of our two tip we're just going to go into two tip right and what we just need to change here is the text right I think just make this into a separate line okay that's going to throw errow and let's break this right alternate um Z that's the command key to do that so we're going to say going to switch the values background or white we don't want background or white we want this to be background of stone right which is like black PG we're going to say BG Stone 950 and X of um white yeah I think that's only what we need to change here and if you go back and have a look you'll be able to see that we have some weird two tip showing up here and we don't want any border we could say border of none yeah think that should fix our issue and let's see what we currently have okay cool we have this we could say select color yeah this is looking amazing so far we have this tole color we have drag we have copy X we have remove color okay so we have some values to we have some features to work on so let's quickly go back to our platelet so for now I want us to focus on working on the options right let's go back to the options and this is where we're going to like work on each of these icons right now let's start with the first one to remove a particular color now okay so to remove a particular color we are going to create a function obviously and um this function we're just going to call it on we could just call this undo remove let's name this cam casing and remove color and and remove color is just going to say it's going to take in our color you can see a con of colors each and every colors we have here right and this color is going to be equals to slug slug do split and we're going to split it by the dashes right and we don't have access to slug yet so let's quickly go up and fix that and now you might be wondering what we need this look for what we basically need it for here right or how we're going to get the value we're going to make use of the use pars right use pars from next year so the Ed pars right is just used to make this wi we see it it says is a client component who let you read the route Dynamic pars filled in by the current you URL okay so what that means is we want to be able to read let's go to Local Host we want to be able to read this this params right and once we click on this particular on a particular color or a particular icon that says remove color we are going to take out the value okay so to do that very straightforward to we just create a variable here that says and we're going to D structure slug right slug is going to be coming from our use pars and our use pars yep and let's see par is reported from next navigation and we have a typescript error it says it does not exist on typ string here so if you come over here and see how they doing it right you could actually Define your types so for us let's quickly Define our our the type of our current use params so since we are using SLO right our use params is just going to accept the the structure of of the slog right which is just going to be a string and that way we can split it and okay this should be closed properly and yeah at that point we should be able to split amazing amazing stuff and okay so one thing I'll just want to do let's log let's log slug we'll see what we currently have in Slug no this should be slug okay so slug gives us the current the dynamic parts right the dynamic params like he said here just a client component that let you read the route and we've been able to read the route which is this we've been able to get these values now we've gotten the value and we are we going to use it inside our remove color function which is this we're splitting this right and the split basically is just going to return an array so once we have an array we can we can filter the values based on the particular color that was clicked so one more step this particular function should expect a color a color to remove I think that what we're going to call it color to remove so we could understand properly right we're going to pass in a value that needs to be removed and the value that needs to be removed needs to be a string and come down here and say we could see very straightforward right okay so what we are doing here we just have a function right that's going to help us remove the color and if you if you create a new variable here we're just going to call this updated colors updated colors right it's just going to be equals to our colors and we have to filter this no not F we have to filter and just call the C and what basically want to do is we want to say the C value and we're going to remove right this is how you actually remove an item from an ARR and you say color to remove which is just going to be a string let's format this and for now right let's just log let's log updated colors Okay cool so now this particular function we are going to use it when we click on a particular a particular remove icon so we just add an event list now on click right once you click on this we are going to pass in the color that needs to be removed and to color to remove handle color remove and it's expecting a value the value we're going to pass in here is just going to be a particular each and each color and mind you color is coming from our from the parent right and I think we can demonstrate this and yeah we can demonstrate this right now so if you make this wider we have all our colors and let's say we remove this color right and let's take it to the side right now you click on that we have our updated colors still as five now something is wrong in this particular logic if you click on this click on this this should take out our color but now if you look at our console log it's not taking out our color because why this colors each an individual this colors we are seeing here right now doesn't have the hash right while the color to remove hashes because let me log the color okay let's log I just want to show us why this is not working okay so if you see color let's say color because that's what we're passing to the function right and cool amazing so you see color right have the hash which is like a complete exid decimal color why our values we are getting from the params right doesn't have the hashes that is why JavaScript cannot filter the value properly so for us to do that we need to take out the hash from the to remove so we're going to say do replace right we're going to replace this value and add some um reg x value here and we're going to say okay so find find every hash we have here and take out every Ash okay sorry be other one no take out every Ash and replace them with just strings straightforward like very straightforward and okay color to remove and Dot this okay cool let's format code color to remove what's the error cannot find color to remove do you mean color okay that should not be an error Okay cool so I think at this point um okay to visualize this properly let's do something here let's say let's make this and widen this and okay I doubt that works for us right now let's take this out and so now I think at this point since we' we taking out the hash from the color to remove we should be able to filter the properties so if you click on this we should have an array with just four values if we if we handle this properly yeah so we have an array with four values so right now this first one we clicked on which is 8 a a38 47 has been taken out the array right so now the array starts from 2 um 53 f1g so we could say we are almost there right taking out a particular color now this is returning an we can't really use this to do anything because we need it to be just regular strings right and we could just create a new variable here say this new variable could just be call our new route because we're going to send the user to the new route that is how you can update the user and update colors dots we're going to join the values right and and the join value is says add all the elements in an array into a string right so we have an array we want to send them all into a strings and they'll be separated by the dashes like what we have currently here and we have new routes let's log before we use it to do anything right now let's log new routes okay and let's take out this color let's take out this color if you go back here we have oh we have eight we have two um 25 we have B8 we have B7 now this particular color has been taken out that is how you actually do it so if we say we take out 8 a and we take a look at our console one more time it is no longer in our array because we filtered it out right with the filter property exposed from your array methods okay we've done that nice so now the next step of what we need to do we need to Route the user so once the user clicks on this particular stuff we want to Route the user to the new particular route because at that point this values this value does not exist anymore so we want to R to use that to the new page and we're going to use router right and we haven't imported router yet so let's just say router push and we're going to Route the user to to the new route okay this should be small C case this should be small case and let's go up here and say we want to import we want to import router equal to use router that imported from like use navigation from being imported from next navigation okay cool and okay it says what the push does not exist okay okay that has been taken out so now let's quickly see this so we have Let me refresh the page real quick so be able to visualize this properly so we on the landing page so we on the platelet page once to click on the particular color it goes away you being pushed to a new page click on this takes you to a new page and if you notice this particular the URL is being updated if we do this we just have one value right and let's go back to our Landing and okay let's generate a new color again and okay so we have this color looking nice and we could just quickly say we want to remove this color right we remove this color it gets updated we are routing the user to the new route and yeah yeah that kind of works for us and um I think what we could quickly do to make this work or to not not to make it work but like to fix it instead of using the push right I say let's quickly go to documentation let me show you real quick router replace next yes so so I think this is actually the pages router what we need is for up router yeah Okay cool so if you go to the app router documentation for use router you see it exposes some value right it says it exposes the router the push which is what we're using right it says it performs the client side navigation to the provider route and add a new entry into the browser history and um we have router refresh and this is what I want to show you guys so it says perform a client side navigation to the provider without providing without adding a new entry into the browser stock so what does that mean it means that let's quickly go back here with this now with using the router. push you see we can actually go back right we could go back and go back and go back we could even go back to the generat page and which is not a particular desired Behavior you want you you actually want to use in such application right you just want this color is already existing the user has taken it out we don't want the user to be able to go back to those colors anymore because we are actually using the the URL here to handle the colors so now if we go back here and say instead of router the push we just want to replace right let's just replace the route and okay so we have this colors and let's take out this color take out on that color now if you say want to replace it takes you B to generate you can't really like go back to the colors you already took out right so if let's try it again you take out the color you remove this color you remove on that color you can't really go back because if you go back based on what documentation say it says it says it it add new entry without providing you access to like being able to based on document said it gives us the route without adding a new entry into the browser history stack so we can't even really like make use of the browser here anymore because once we go back it takes you to the previous page so that be the particular use case of why will say we should use the router replace now one more thing I need to do real quick here is if you notice if we go to Local Host Local Host generate we shouldn't be able to hit this particular page here right and um let's go back to generate where we are generating this page instead of push we're just going to say replace right and we we're not we are not going to like push the user to the new color anymore now let me show you this if you go to Local Host generate right and you go back you go back let's let's start from the beginning one more and see this so once you start the generator right you hit this page cool and you go back we won't be able to go back to generate anymore I don't know if you saw if you saw what we tried doing there so before when we using push right once the user hits let me show you again once the user hits the generates page they from generate page you're being routed to the dynamic page right before right before now once you click on the back button right you're being taken to the generate page which is not actually a behavior you want also in such application so we're just going to replace this and the user the browser doesn't have any previous history for that particular route so it takes us back to the base so that will give us a very good user experience and streamless usage for this particular app and mind you this is based on based on requirements what you want to do okay cool so let's go back to our component and see what we could do next we've been able to take out the colors you can remove colors right now and now there's a flaw in this particular feature if you take out this color you take out this color right and you take out this other color it can't work right it's not working anymore and this is a flaw in the design this is a flaw in the particular feature so what we could do here we could say let's go back to the home and come back here so let's go back to options so what we could say is before we write the code right let's just talk about what we do so what we could say is once we've taken out colors and we have just two colors remaining right this particular icon should disappear now let me show you this what we're doing currently here so let's take this out we take this out we take this out and you can't see the remove icon anymore right all you just have to do is just you could just drag and this and stuff like that you can't really like take out a particular color anymore amazing so let's go back here and try to implement that so to implement that very straightforward right we are going to say this should be on our on our particular remove icon which is this right and we're quickly going to say since this is the container right we're going to say since we have access to our slog and we're going to split it right and split it right returning it to an array right and we are going to say check the length if the length is greater than if the length is greater than two that is only when we are going to make use of this we're going to show this particular this particular div so this is it so let's place this inside here and take out this eror yeah I think this should work it very straightforward and um let's refresh the page page and see what we currently have so if you try removing a particular color remove this one remove this one and once we get to the last two remaining colors we won't be able to see the remove icon anymore yeah I think we've been able to fix that and let's quickly make a new color again so we could work on the next feature okay so start generator Okay cool so I think the next thing we could work on now the next features we could work on let's quickly work on the copy right once you click on this you should be able to copy and work on that is very easy right and I think first off we need to create a new hook right let's quickly go back to our hook directory and we're just going to call this use copy right and what this particular Hook is just going to do is very straightforward right um it's just going to help us be able to create values right when we copy a particular value we're just going to copy a particular value to the user clipboard and the user will be able to paste it in any other application they need to right very straightforward and oh and now let's go into options and could be doing it inside here again for Simplicity we have okay let's clean this up real quick take out our console think this works for us take out this logs for now and the next one we're going to do now we're going to say this should just be F we just call this handle copy right handle handle copy and um just going to be an arrow function and this should just be straightforward for us right now okay so what this is just going to do is we're going to call our hook right our hook exposes two values we just quickly do it here say Okay cons this course to use copy right and use copy exposes two values it exposes the copy function which we use to copy and and I think you also have access to the copy um the copy text okay so if you're wondering what's happening here let's just go back to our component so now this is use copy right and we are exporting use copy and saying use copy should return the copy text and copy now there's a TS error wondering why we have that and the other reason why we have that is because okay so we just have this and we also have access to copied copy text I just want to show us this and copy copy is just going to take in a string of for now let's just say hello word so I just want to show you an example right so handle copy I think a better what should just and do he copy right that's more descriptive and we're just going to come down to this is where we have copy right okay no that is actually remove color let's see copy okay this is copy we're going to say on click right un click I think we just pass this handle x copy we could add that since we're not expecting any value right and or we could quickly just say okay we could just pass in color since it needs a particular color and handle color just going to take our color just going to be a string you know mind you we have this color already directly inside this components and we still passing it down as a as a parameter in our function I'm just doing that so we could like in case you want to reuse this particular function right else in a different scenario you could just use the value directly but this still works for us so we've binded it to an event listing now when we click on this we have to make this work like this right and yeah let's make this wide press repeat one more time and so let's go here copy we've copied the particular V let's see what we copied let's paste hello word yeah cool so that works for us right so now we we want to copy hello word in a real life application or what we want to copy is just a color right direct color and we also need to show a toast because if you remember we are we already installed the tost from shadu right so we just need to do to from Ed toast which is our hoop right use toast then inside here we're just going to say this should just show a toast of title color copy to the cboard very straightforward amazing and let's format this real quick okay so let's say copy let's copy the value and copy we can't see anything here right now let's see okay let's make this white copy x copy XX okay it doesn't work now the reason why it won't work is because if you go to Shadow right Shadow Qi you you get to to see how you're supposed to set up the particular toast right let's go back to documentation let's go back to components and what we need here is toast right and that should be right around here this is toast and to make his of it right we need to import the toast the toast in our root layout that's why it did not work right so let's quickly go to the root layout which is our layout import this and just use to St we need our we need our children prop yeah so I think at this point with just this little change we can make use of the tool and it should work now let's say you copy this and let's refresh one more time okay cool okay so we're done loading up and let's copy yeah col copy to keboard amazing and we have this color copy to cboard amazing color copy to cboard amazing we could show this and this works for us let's quickly style this this particular post that we have here because if you see the one we have in our hosted the hosted site once you copyright it's looking more rounded and looking more more it's looking more better and let's just quickly go into component we're going to go into the component called toast right and we're going to change some values here and the values we are going to change I think let open this properly and try to break this okay the values we're going to change here we're going to change the background right like you saw there we just want something to be to be having a back background of black right so we're going to say this should be a WID of 280 pixel and we are going to say the default right the default of what we want here which is I think this is default right the back of white we want this to Black the text of or white yeah I think this actually works for us and we still have one more value to change here we need to make this rounded and before we do that right let's quickly say this should just be rounded Das f and take a look at what we have right now go back to this and let's try copying right yeah we have something like this colored copyed to the cboard okay this is looking looking very very big compared to what we had here okay so I think we need to in we need to reduce the font size and font size of what we're going to use here we're just going to use a font size of SM let's come down here and find the description or the title I think this is the title okay we already have SM and we're just try to sty this and think the next value we could do here let's take out there's a border we don't want this border right copy X we don't want this border around this this particular post and to take out the Border let's quickly we quickly search for Border we don't want any border none let's say this again and okay let's refresh one more time and yeah we have this amazing let's quickly create a new color platet let's create this 4 seconds we should be done okay cool now so if you copy copy x copy X color copy to the clipboard okay let's see what we have here again okay I think we need to reduce the padding right the padding of the default styling that we have okay let's look for where we have padding and in the variant right padding that six we we won't be needing that much padding just going to say padding of let's say four then Marin rights might not also be needed based on the particular design we need and padding of four let's reduce it to like three which is equivalent like 12 pixels and refresh the page again and okay let's copy this amazing so we can copy this and copy this and copy this okay that works right we've been able to like add the copy right to copy the values to the user clipboard and mind you it already works right if you paste the value we already paste the par with the he with the hashtags right or with the hash SI decimal so I think one more thing we could do here let's open the toast provider I think that should be toaster okay I think I think the toast we have right now works for us let's see this use toast so toast remove delay right we could just reduce this to like 100,000 and refresh the page again and okay so once we click on copy color copy to the cboard and that should dismiss very fast copy to the cboard 1,000 milliseconds is out yeah I think that works for us okay so what we're going to quickly do next now we're going to work on this particular feature to drag a particular color platelet and rearrange them let me show you an example of what we're trying to do right now let's go to the host the hosted one we generate a particular color platelet and once we are we could drag some colors across each other and so yeah so to do that we're just going to be using frame motion reorder right so it's just a set of component Expos from frame motion you could use to reorder your your components and um for this tutorial we're going to we're going to be using it with some react states with a reuse States right so we could really get a smooth animation and get the desired result of what we need let's quickly go back and start coding okay let's take this here and quickly go back to where we have our platelet and I think this should be the parts let's this component again and see what we could do here the first thing we need to do okay I think we could do let's quickly bring up this documentation again so for house to do this we need to import reorder right we're just going to do it in this in this component here because this is where we have this is where we have the component holding our platelet and that should be that should be inside our Pages up here this is where we have our platelets and our platelet is just the parent right holding each and every each and every item we have here right now so this is it right so we need to import reorder right and we're just going to make this particular component we're going to call it reorder other do group right this is going to be the parent once you set that we need to set the values right which should just be an array next we also need to set on reorder what do we want this to do and think also set AIS which is just X or Y AIS and for now we're just going to leave it at X AIS and the next thing we could also set here we're just going to set the ref the ref is just going to be equal to a target a Target ref right and let's set this up quickly up here we have this and this and this okay amazing so if you look at this particular place now the values should just be our color platelet which is what we have here which is just an array right an array of colors which we are splitting at this point CU you look at the example we have here you're just going to pass in the values and on reorder you're going to set items and we're doing something similar here based on documentation as this is X the values I just color plet real we're going to call the set from from our state we're going to say set color platelet right and our ref right our ref is just going to be okay I think we don't need to pass in any ref for this reorder directly Okay cool so we have values we have reorder we have the asset of X and we are going to move into the platelet component and this should be the children right because it says we have the reod and we have we have the the reod grou group and we have the reorder item so we also have to import reorder here too in this component and okay we already have imported so this will be the parent right we take this out this this also going to serve as our this is also going to serve as our motion components no worries it's still going to work and reorder the item okay there's an error let's see what the error is reorder item okay this should be CS lock amazing so we have the other item which is the rapper like for this each individual colors and and let's quickly see what we currently have and we just have our colors and okay stack this up we could drag a particular color right now and it's actually working in a way but we don't have we are not there yet because what we wanted to do is we want to be able to drag only this particular icon so it could move right we don't want to drag we don't want to be able to drag the whole color platelet that not the desired feature so let's continue working okay so we go back to Let's quickly go back to think can drop this down and let's quickly go back to this page yeah we have the reorder and our reorder is just going to be color pages group order okay so let's go back to this platelet and inside the platelet we're going to set some values here we're going to say since we have the item we're going to say drag we should have access to drag listing now and we're going to set drag listing now to a particular bu we're going to set up here let's quickly create a a booing right a booing state that just going to be equal to dragable then this will be our set up dragable sh okay that's wrong dragable then since it's like this just going to be use State and use State dragable and set dragable and beginning of the component it's just going to be forse okay set dragable and dragable is just that and we're going to say drag list now to be false right and let go back to documentation again you'll see where this is being set so if you go down here you could actually set this up to to actually not drag only when you when you add a draggable a dragable control so what do I mean the example we have right here right now you can actually drag the whole item compared to the one we have up here where you could drag every item like from the parent directly so we want to just bind a particular part of this container to be the draggable part right so in our own case we just want the um the icon to be the dragable part right okay cool that is the desired Behavior we want that's why we are using dragable setting it to a a buing and a set that which we're going to use in a minute so we say drag dragable list just going to be dragable that is false okay what else can we add here we're going to say the value is just going to be color and you just pass in key also key is just going to be color make sure you don't use the index as the um the index as the key because it won't really work because FR be won't really know which value to use okay so we have this and we have the value we have the key and we have a particular function we can set up here on drag right and we just need to add another event list now right which is called on drag on drag end on drag end right we just want to set set drag able to force we're going to set this to force okay so this will all make sense in the Beats all right just it it all make sense in the Beats so now let's go back to our code and see this now if you see this we can't really drag we can't really drag these items anymore like we previously did simply because of simply because of this particular value we have here which is the drag list so if we put the drag list now to fals meaning that we can't drag it so now mind you if I change the states to True right we should still be able to drag this now okay and I think you just need to refresh and it works okay so we can drag we can drag our items across and you see how it's acting up right you can drag this you can drag this one you can drag this one you can drag this one it's actually kind of buggy and that's why we need to make it first on the beginning of the page and we just going to use some EV listeners to fix it directly so what we want now is when you drag a particular icon that is when we're going to set drag a to true and to do that we're just going to send in drag to our options because remember our components are just doing it there and before we do that let me show you here let's put text call you put a text call drag and yeah we're just going to add an event listener right and while event listen just going to do is it's just going to do something very very simple right all very list I just going to drag let's do this and I think so we're just going to add some event listing now that says on Mouse enter true on Mouse leave course on touch starts true so we just want to use the drag to activate our animation okay so this is just an example let's make this big again so once you come here come to drag let's refresh page one more time okay so we come here to drag and drag this voila we can drag a particular item now if you try dragging from the parents like okay I want to drag from the parents right I want to drag from the parent body no it won't work right it won't work because we set the drag listing out to four except we are dragging from this specific item so now we can drag this and we can drag this to the left we can drag this and also drag this right yeah and um this is very responsive and yeah so instead of doing it with our paragraph We just need to pass in this particular seter right let's undo this part we're just going to we're just going to pass in this particular seter into our options and to do that we're just going to go back to our options and say we're going to set drag a to set drag which is the set we also need to pass it for for this um the mobile instance right let's go into options option is just going to accept dragable and dragable okay let's just undo this dragable at this point is just going to be Dr just going to have a type of a void right what this means is accepting a value which is a booing right and that's very straightforward so set dragable we can now redo what we did previously on the particular P tag right just copy our listeners come down here to where we have the drag where do we have the drag and okay just this drag then we can now put it on the parent here and see okay on Mouse enter through this through then we want to drag let's format this properly and go back to our page now if you come back come to the first one hold this hold this um seems not to be working we try dragging not working try dragging also not working this is working why it's not working okay it works now okay cool okay okay it's actually working amazing amazing so we can drag this to the end and drag this to also to the end okay that is quite satisfying and very amazing too now if you think about it what by mobile how we going to be able to drag on mobile right since if you go back to if you go back to the components where we are seeing our re child um let me close up most of this and close up our signing what we are not using we go to this part right and we have our item right and we let's just move let's just move to the to the main to the main um parent main par component which is our other group right we have asses of X so a quick solution of how we could do that because what what what what what it means is when we are on desktop right we want to drag on the X AIS or if we are on mobile right we just drag on the Y AIS okay so to do that it's quite very easy to do that we just we just have to import our use Query remember we have a used query where we a used remember we have a used media query which we used previously and we're just going to import this use major queries just be coming from our major query and we're going to set the minimum we with this value now we could create a new Dynamic variable here that just going to be dynamic assis so if it's desktop that should be X assis else just be y AES that means on on mobile devices let's take Dynamic AES into into the AES that we have here instead of just putting some string because if you see this is supposed to accept X or Y so at this point we're just going to put our own value here which is just returning X or Y to based on the E desktop media query so I think with that you could say this is going to work on mobile and also on desktop well we just have to try it we can't see for certain we have to test and see if it works okay so we are on desktop and we on mobile let's see if you can drag we can't drag let's refresh okay let's see this and this is quite buggy and let refresh again so we have this is working on the X AIS okay this works then you go to mobile let's quickly open up mobile and let's take something very little and we drag in okay cool that works amazing it works on mobile we can drag we can drag our icon and it's going to reorder our color plate let I mean that works yeah so we could say that particular hack works for us right cool and um let's open this up again in a bigger page and see what we could do next so we have the remove function working we have the copy X we have the drag right and yeah I think we're pretty much almost done with most of the features okay so the next feature we want to work on right now is the lock feature where us will be able to lock a particular color so now let's go to the hosted one and if you see this now if you lock this three colors and we generate a new pressing the space bar like what the instruction says here if you notice only these two color changes if we do we lock this and we also lock this again and lock this and lock this so This four colors are locked right this is only the color that should change when we generate a new color right now I'm pressing the space bar and you notice this is only the color that has been changed so let's quickly add that feature to our application on loal H right now and um let's go to the side and for us to actually achieve this it's quite straightforward work what we try to do cuz if you go back to the color plet remember we are seeing a props called locked hex and set lock he which we haven't even passed in yet so that is what we're going to be using to do the whole the whole locking of the colors okay so cool and let's go back to our page right and we're going to go back to our Dynamic page where we are where we doing this and we have our okay so going up here we're just going to say we going to create a new state right our new state is called loog X and set xx and it's set to an empty array and it should just contain strings right strings of we're going to say this should be what this should be taken in our particular props we're going to pass them as props here right now the Lockes and also passing in the seter which we're going to use to set the hexes now if we go into where we're going to be using the two pet right and we are going to be using this values here to to actually toggle this Val to actually tole this icons because if you notice this let me zoom in properly okay so we have an icon here which represents open and once we click on this this should to go to the lock icon let's quickly do that first for us to do that we are going to see I think we already have we already have it set up right let's go into our options cuz that's where we're doing it each of our options have access to the lock hex and yeah if the hex do includes then we're going to show the lock icon else show the open icon it's kind of straightforward right so now we just need to create a particular function that's going to handle that for us so we say con handle we call this handle X to right meaning that we're going to toggle it like open and close just want to use one function for the two purposes and it's going to accept the x value right which is just going to be a string and basically what we're going to say here is if our log XX which should we should in as as props right then if it includes if it includes our hex hex value then then are only then are we going to say are we going to set the loog the loog X we're going to set loog XX to our loog XX of what we already have right the lock XX and the loog X okay I think before we continue let's quickly bring in the set loog X we have the X's here and let's go back and see option okay I think we're actually doing this in the wrong component so let's take this up real quick and take it into right and just put this function here and see if it includes right if the XX includes we're just going to filter we're just going to filter our values we just call our values X right and Val here just going to say if is it if it's not in there we're just going to take it out from the particular AR and remember how to take out a value from an AR then we're taking out the x value directly equal to this yeah this is quite straightforward so let's format this again and so we could look at this clearly what we're saying is if the log X's right are include right if the log X is includes and we're taking the set right and saying if the log X is filter okay so what we're doing here we're just creating a now okay so we just have a function called what we're just doing here we just have a function called handle he to and we're looking for the the particular lock XX so once you click this right we set the Lo X into this particular array and we're just looking through that particular array if it's available then we filter in then if it's not available we're going to take out the particular value and um I think a better way of explaining this just to say this in action right if you say handle X tole and we should just we're going to use it for use it for our option and we could just set this into option and we're going to call this we could just call this tole xx and also pass it down here too to XX is just going to be here and we have to X right to X and we are going to use to X where we have the icons right now to on click of this particular parent or on this particular icon container right we're just going to say on click then once you click on it right we're going to set that particular color let me show you how that's been done we're going to set and to X then we're going to pass in the color right and remember the color is just coming from the props here tole XX let's quickly type this so we don't have TS errors our tole X is also going to be just like a function right our a string and I think we are okay so we have an error here it says empty Express I don't think this error exists because yeah the is away the eror has gone away okay so let's quickly review what we currently have now now we have loog hex's right and for us to really preview what we're trying to achieve here let's just log the log xes on to the log our lock x's and let just wait for this page to load up real quick and refresh this there's an error said handle to X is not defined let's see where this is coming from handle tole X is not defined and that should just be handle X tole okay so we made a mistake in the nameing that should just be handle X tole and passing the values and I think we should be fine this time the error should go Okay cool so let's go back to our options and see what we currently have here okay so our lock hex is undefined simply because we don't have any any of our hexes are lock let's click on this one the first one has been locked second one locked and this seems not to be working see what's happening okay on click we're calling in go X right so once you click on this passing in the color and the color X um let refresh this one more time and see what we have okay um let's see our console if we have any error let's quickly look our console for any error and see if an error could direct us to where the issues coming from surprisingly we don't have any error in the console so let's see this one more time okay let's try to debug it we have our function we accepting here as a prop and let's go back here and see for passing in drag we passing in XX right and what's missing here color string we requ and type Lo XX is declared yeah okay okay beautiful beautiful beautiful I think we've been able to see where the issue is coming from if you go back can see we have Lo XX here right we expecting Lo xx and we're using it to like change the icon but we are not passing in the value right and that should be the issue and um successfully we to debug why we couldn't do that so let's just copy this and take it down here also and this should work okay and it says what it says buing is not assignable to type string okay no that error shouldn't exist so if you click on this now okay I think let's just go back to option and see if you can visualize this with console ninja real quick so we have an empty array cool not undefine anymore so once you click on a particular hex we lock this particular hex right and we lock this particular X and we lock this particular X doesn't seem to be working neither okay let's continue debugging one step forward we have Lo XX we have the to xx and the too X is okay so the tole x is saying if the loog x is included UD right we're just going to set the log X's to that value and we could just also add an L statement here right we just going to say else if if it doesn't exist then this is where we're going to do the Locking then we're just going to set our loog hex's to an array right containing our previous log hex's if there was any any color existing then with the new hex with this this should work now we're just saying else now just just to explain this further right what we're doing here this this is actually doing two different things not like two different simultaneously but like based on the if statement so if the x that has been passed inside here right goes through this first line of code and it exists we're going to take it out else we're going to add it do you understand so that's is just giving you like a tole effect on and off if the x that has been passed into this function does not include or does not exist inside the loog hex ARR we are going to add it if it's in if it's inside we are going to remove it and that is what we are doing with this okay so let's quickly see this now the color is locked and I really want us to visualizes very well I think I could just zoom in properly okay let me refresh again so this is start of the application just mounted let's say hot pink let's lock hot pink like you notice the differences right and we have we want to lock this too we want to lock this and we want to lock this amazing want to lock all the old colors now let's go to options now if you check our lock hexes where where we were trying to log it previously that wasn't working now we have five different colors all in our lock xes now let's refresh this page now we have an error that says what let's go back to Let's zoom out again to 100 fa to load clar I think that should be a network error okay we fine now so if you lock this we have this particular color is locked right lock this this particular color is locked and lock this this particular color is locked so right now we've been able to lock the color and based on the state right if the particular hex is lock or not we can show two different icons which is what we are doing inside the option here right here if it includes right if the color includes we're going to show the lock icon if it's not there going to show the open icon and we are triggering it through this event listing that I are using on the parent here to click on it and this will come in hand this will come in handy when we are trying to regenerate a new color like what we have currently right now when you just press the space bar you generate a new color right and that is when we will be able to use the hex values since we already have an array containing the lock values if they are locked we are going to use them in a later chapter in on this video and okay so I think at this point let's go back to Local Host and we are come we take a look at this and wider screen we have our remove color we could take out a color we could copy a color we could drag amazing we could also lock just like update the UI and I think we have everything we need here right now to make this work now let's go back here and see where else can we add quickly we still have some features to add I think one feature we could quickly add here is the Color Picker right so if you click on a particular color and a particular color X you'll be able to see we can change the background color and it gets updated in the URL if you change this one to gets updated in the URL and yeah I think that should be the next thing we do and I think once we're done with that we could just move into into working well I think once we're done with like adding the Color Picker and stuff changing the background color we could move into working on this other part of the application okay let's quickly work on that so for us to do that we need to install a particular package and what we need to install right now is just we just need to install a particular package and the particular package we need to install it should be the react GP let's quickly search for Google on that and react GP mpm actually be a very hard pi to get we will find it and I think let's just go to npm okay mpm and this should be the G Pier zero packages found okay let's try searching for the react G color Pier think we should have a result now yeah this should be the exact one we need yes yes I think this is the exact one we need here and let's quickly take a look at the homepage which should be a g reple okay so it say a simple color X speaker a simple color Pier for react applications and pretty much straightforward what you could do with it we're just going to take in this command mpm install and go back to our application and open up our terminal okay let's open up a new instance and we're just going to put this and say install this okay while that is installing let's quickly go back to our pet our pet component and inside our pet component we're just going to do some stuff here right first off we need to create we need to use state right which we're just going to say it's just going to be something very straightforward right just going to be Show color pier and the show color Pi is just going to we're just going to use that value to show the color Pi real quick and and um we are going to come down here and say once we click on a particular text once we click on this particular the color XX which should be this should be it I think the H3 right we just going to set it to true then based on the value we're going to say based on that particular value we're just going to show based on that particular state right let's quickly do it here based on that particular State we're going to show you could say based on Show color Pier color Pier we're just going to put this for for now that's not how you sp Pier okay color Pier else no there's let show nothing okay so our our our mpm package is actually installed and we are ready to start working with it with the particular components but this is how it is we're just going to show unchange and unchange value red okay let's copy this real quick we're going to use it in a bit but let's quickly look at this again so we just have this once you click on this it show the color Pier right click on this show the color Pier click on it show the color Pier I think let's just go back and create another color Pi so we could have like five different color Pickers Okay cool so once you click on this you have the text you have the text you have the text you have the text color Pickers are been shown right and we are going to do something we want to set up another hook right now this particular Hook is going to do something for us right now we want when we click outside this Spirit we're going to close this particular Color Picker so before we do that before we do that particular step let's add our Color Picker okay so let's go back here and say we don't want this I think this could also be always be no but at this point once the color is set to true we want to show our Color Picker and let's quickly import this from okay let's go back to documentation and see how we could import it it says we're going to import it from GP let's quickly go up here and say import this from here and we are good good and on change let's just leave unchange open for now we're going to style this and also add the logic to it I just want to show the Color Picker real quick let's open up the page and see what we have here um let's reload the page why do we have an error do don't have an error very weird Okay so let's just say let's just take out on change or let's just say no one change for now this should still run okay so let's make this wider and see what we Curr have once you click on this we can see the Color Picker click on this we can see our color Pickers color Pickers and color Pickers okay amazing amazing amazing stuff so let's go back here and see this and let's quickly style this we're going to say color peer let's format this Pages let's forat this real quick and we can make this real small so we could have more room for our code yes amazing so our color Pier right now let's just add a a parent around it right and this parent is just going to be some styling it's just going to be PN of and we're just going to make this absolute and the Z index of 50 so it stays on top of the page and also set the value right the value of this this particular color is just going to be our color instance instead of passing red directly the value is just going to be color instance and I think this is pretty much it right so react is screaming so let's quickly take this into this guy and format the page right now for M we're returning no and let's see where this error is coming from we should don't have this error no okay okay so it says on change is actually missing here right and onchange let's just do this let's add onchange right so onchange is how we're going to change the particular color and our un Change has access to the value um it gives us access to the value and we just need to set a new we need to set a new a new function this our new function is going to be called H let's just call this handle handle um handle set color right and going to be an arrow function and this will just be a function that takes in we going to take value we're going to take in the color and we're also going to take in the index of that particular color right so our color is just going to be a string we don't want it to be anything apart from a string our index is just going to be a number so what we want to do with this handle set color right now is when you choose a particular color we want now let me show you this let me show you what we're try to do so let's say I do let's just use the function here before we are done setting it up we're going to pass in two values here we're going to pass in the value that is been available which is the particular color that has been chosen and and the color index which we are passing as a props now color index is coming from the top of here let's go up and see we have color index here right now that's how we passing it down into this parent that is how we passing it down into our function okay so I want this to load up real quick so I'll show you what we currently have okay so we have this color and this is going to the bottom and let's we're going to we're actually going to we're actually going to like fix that so let's go back to vs code and see why that is acting that way we was showing our color where is it this should be the part for this real quick and okay let's take a look again and see so it's staying here because okay so I think the only the only explanation of why this is acting weird right now is because this color Pier is in the wrong position in the hierarchy of our our particular component so let's quickly go into this part and see where we have color Pier so now the problem let me quickly show you the problem why this is acting weird now is this like I said we have absolute absolute and that is very weird so we don't want the color Pier to be inside this parent here we just want the color Pier to ro free and be on its own since it cannot be like showed this it's going to be showing on render right or it's going to be showing on condition on a particular so that way we'll be able to like be able to fix yeah okay let's format this again and see and open this up widely and refresh the page so we just have this and once we click on this we open up the particular color and if you notice the color that has been set by default here is there's a particular color that we have on this on plet so let's check this again and see this and see this and say this and see this right so we have Dynamic values in each and every of our color platet and that is only possible because we passing in the value to the color instance which is the x value directly okay so now we have our set color we haven't really said what's going to happen there right to do that it's kind of kind of straightforward to do and what we could say here is okay I think what we could say here we could just do we could just log our color for now just to show you what we're trying to do here so once you choose a particular color this particular function should be able to accept it so let's say want to choose this color yeah we have rb15 and we change the value we have RGB 77 so we're going to use this value right now to to update the particular the particular background yeah and the particular color plate that I was selected and how we're going to do that now is this okay so what we just see here is we're going to say just create a new con call this new color right and our new color is just going to be equals to our color and we're going to replace our color we're going to do the same thing we did before and we're going to take our the hash because this particular color has the hash right we want to take out the hash from here and we're just going to return nothing so once we have this new color and once we have once we remove the hash so now let's let's just do this let's let's log I think we okay let's quickly do this let's log new color think let me show you guys what we're trying to do again if we take a look right now and we change a particular color let's say we change it to this color and or we change it to this other color or something like this right um we are we are not getting any log right now let's see let's refresh this page one more time and click on this real quick or this let's click let's do this okay cool so if you see this we are getting the value right the particular color value in RGB red green and blue and what we are doing here we're replacing hash meaning that this is not going to work because hash does not exist in this particular string of colors so we need to go back to where we have our Color Picker so our Color Picker also has a value called format we're going to set the format to be X so once we set the format to X to be X any value that is been set from this particular color Pi will be return as X then once we get the x value the X decimal value we take it out and return a new color without the hex's and that should be good enough for us to do what we want to do here right now okay so if you see this now let's do this cool so we are returning hex so we we're returning the X with the hash in this line we're taking out the hash and we returning it without the hash amazing let's create another here that's going to hold our new colors so it's going to hold our new color platet right the new set that we have currently and you'll see the reason why we need a new state in a bit so we have new color and going to see if there's a new color right we just want to do some comparison here so new colors which is plural is just going to be equals to all the colors we have right all the colors we have currently from the from the user or from the all the colors that was generated for the user right and once we have the whole colors then we say new colors right which is a plural of what we just created for each of the index is just going to be equal to the new color right and if so then we're going to set our new color platelet to to new colors so this will all make sense in a bit right now let me format this and if you come here and say con let's say let's let log let's log color palette there's an error here this should be log and let see this one more time okay so we have empty colors and let's quickly do this yeah we change this the first value and we change the second value and we change it again for the third time so now like what this is doing right now is this if you could see this properly so we have an array right containing five different colors yeah and when the particular color is being changed we want to be able to identify by the index right which of the color was changed right and by by identifying the index of which color was changed we are going to use the new value we have and update that particular color by it index directly so that's what we're currently doing here so once you change the color since right now we have the index of zero our array starts from zero right so once we change this to this particular X it updates the first it updates the first value in our array now let me do it for something let's say the second value here index of index of one index of two so let's say we want to make this color right now this is what's going to change to remember the particular color we have here is just 1 91 9 B12 but this is set to FFF what we currently have here yeah so that's just what we're just trying trying to do so if this is all set we are going to set we're going to set our new instance right our new color instance to color and I think that should do the whole the whole trick for us right now to do this let's open this up real quick reload the page okay so if you come here a click on this change this to Green yeah the background changes to Green real quick and now we're just updating now this last line I added here which is just set color instance to color is basically going to be the value that we are passing in from here right so since we are updating this value update new color since we updating new color and setting the instance right to the color that was chosen so what we are trying to do here right in essence is this we want to show the user if in ual right when the user choose a particular color want to show the user how it looks like in the background directly without directing without redirecting the user to the new color PL right okay let me let me again and show you what I mean So currently we have some colors here right and let's say the user wants to change this color let's click on this you have some values you have the color wheel and the color Pickers here you could create a new color if you want let's say want to choose something like this we want the user to be able to visualize on the background too not just on that's why we are changing the back ground and we are setting the color instance right outside this particular if statement here now that is how we do that so if you choose a particular color choose choose the next color that does a trick for us the next thing we need to do now is once the user clicks outside the Color Picker we want to redirect the user right to the new color PL that choose and we're going to also keep the background color intact and for us to do that we have to set up the hook I spoke about earlier okay so let's go back to the side and go back to our hook our hook will just be called use click outside TSX yeah we could just make this TSX and this is just setting a ref use when we click outside add an event list now click then once you click outside we could use it to we can use it for any function we want but for us we want to use it to close this particular model which is basically setting the shap Color Picker to force okay cool let's quickly do that so you go back to color platelet and this okay so so the first thing first you need to create RF right just going to be equal to use click outside so what we're trying to do we're trying to use this particular hook we just created and use click outside it's just going to take in a particular let's say let just call this function onclick um let's un click outside on outside and click outside and let's quickly create the function up here so what we want to do is this we want to okay so do this un click an arrow function on right and this and we're just going to say set two Color Picker right to for like that's just what want to do first just set it to false and let's quickly look at what we have let's refresh the page one more time okay so once we click on the Color Picker we click outside this should set it to fors okay this doesn't work for us so let's see this why this doesn't work so we have a color okay so we have the click outside so the reason why it w work because we are we are not making of the ref yet and the ref we're just going to bind the ref to The Container right of our pier where where is it here yeah I think this should be it we're going to bind it to here we're going to say the ref right we're going to reference this then it's just going to be equal to this ref we just have up there so what this means is once you click anywhere outside this appearance we should close let's refresh this and this should work okay cool we have this and we click on this click outside click this now we can click inside click inside it's not going to affect it not going to close it because of the ref right the ref is basically looking for any event outside this this particular container once you click outside it closes yeah so we've been able to add that so once you click this closes click this it closes click this it closes amazing so let's just choose on that color here let's just choose something green let's come here let's choose something red let's change the color to something grayish this silver cool just drag it or let's just leave it way it is now mind you if you refresh the page this particular color you just choose right won't be save right because what will be what will be added there now is the old value because remember we are reading from the um the pars directly to create this color platet so the next thing we need to do is once the user choose a particular color right once you choose from the color Pi we want to we want to persist that particular color you choose want to P it right by redirecting the the user or let's say routing do replace that particular route with the new color hex yeah let's quickly do that so for us to do that we are going to see we going to go up here and say we're going to do it inside this guy and what we're going to see here is kind of straightforward we just say con our new rout is just going to be equal to our new color because at this point we have our new color plet right and it will just be saved in an is an array right and we're just going to join it to Strings right by dashes and we're just going to navigate right I think before before we navigate let just import router from use router yeah that should do the trick for us and we just going to say router do navigate okay so I think something is wrong use router from next router next navigation we're just going to use some next navigation here cool next navigation come down into component we want to push the user to I think we're just going to use replace and replace is going to take the user to our new color ARs and router this is kind of straightforward to do new routes replaces the routes takes you to this part okay let's wait for this to load up and make this larger PA the error router was not mounted um okay okay so let's just quickly restart our server and let's just say Y and okay and stop this from running just open a new tab and say local 3,000 and wait for that to load up okay so our Ser is up again and let's just go back to to the generate page okay so we have this colors all set up and let's see this so once you choose this particular color and we close it this is refreshing the whole page and cool it says this page cannot be found okay so you could say one thing is working and this is taking us to color I think this should be colors let's check if I'm correct let's quickly add an S here right and see s yeah okay so cool so that works for us so we could just say when you pick this color we want this color to be this particular blue right and click on it it Chang only the background for now we are we are not being routed to this particular color yet but once we change it you notice how this changes now let me do it for that color let's do it for this this one let's say we want to make this red this particular kind of red and once we close this changes the value that works for us that works amazing so we see how we could actually dat the state directly and redirect the user right with me next shes and now there's an issue I don't know if you so it's let's quickly go let's quickly hit a particular column if if you choose the XX value right if you click on a particular x value and you try open a Color Picker and you clicked outside the Picker right you didn't pick any color the redirect is still happening so let's quickly see how we could actually fix that and one we of fixing that right now is just for us to say just use an e statement here inside where we are redirecting the user right so if we could say we just say if new color L like if there's already a new color has been set and updated then and only then are we going to Route the user else just set it to force right if if there it has been set because color is going to be empty right for the initial in initial of the application but if you click on the and you do not choose anything you close it back it's just going to set to force so with this particular condition now we' been able to like fix that error when you close it it redirect us when you close it it doesn't redirect us when you close it it doesn't redirect us cool so we've been able to add that and I'll say so far our application is looking good and let's let's take a look at this again and see it on mobile it's looking good on mobile we can copy on mobile amazing you can also drag and drop on mobile we can lock and we can do all our features are actually working on mobile amazing so this is mobile responsive and also very fast so if you got into this part of the video okay also if you've watched to this particular extent of the video I'll ask you to please subscribe make sure you leave a comment make sure you like the video make sure you share to support the channel and to make the channel grow and um I really appreciate that from you without wasting much time let's continue building out our features we are not done yet okay so the next feature we need to start thinking about to build now is let's go to the hosted one again so we have all our features yet working and the next feature we need to start thinking about now is this top part where we have this guys and to save to super base and Export and also to see our save color platlet Okay so let's go back to our code and how we're going to do that okay so now let's quickly work on this heading Parts where we have the space and other icons so to quickly do that let's quickly go back to um the pallet component and see what we could do okay so the pets represent each and every of this item okay so let's quickly move into the application and see how we we are going to add this heading and also the vent listener to change the color on press of space bar okay so first off let's quickly go back to our page right and this is our our slog and so yeah we're just going to say reorder we want we want to have another container on top of here and the container is just going to be serving as what we need here right now right and we just going to apply some sty here and that was kind of straightforward and the next thing we could also do here we're just going to say this should have a paragraph right and and the paragraph let's format this again the paragraph just be just going to be there and setting the opacity of 0.5 heing and this let's make this wider and see if you could see this right yeah let's refresh the page again and see what we currently have refresh the page and we have this press the space bar to generate okay amazing and let's format this properly and we need to add more more stuff here because if you see the already finished one we have some icons and icons that are being here right now so for us to do that we need to create some components the first component we're going to create here is going to be for the view right the quick view of um of the color and yeah we're going to call it quick view right and just going to comprise of um let me show you what the quick view does so the the quick VI that's going to comprise of mod from Shadow component directly and we are going to be showing different colors and the X values and you could also get to like see the values and screw and see the different values in hsl RBX and also the name okay so for us to do that let's go to quick view which is just going to be a regular component and number one thing we need for for quick view right it's just going to be okay so we have the quick view and we also need to create other components right I don't want this component to be to to be doing too much logic so we're going to say quick view dialogue right so this will be the dialogue directly and the quick view dialogue basically is just going to be a regular dialogue right and in the regular dialogue we are also going to be showing a drawer because if you go into shadu if you remember when we installing our components from shadu UI we install the drawer and we also install the dialogue right so if we're on mobile we want to show the drawer if we on desktop want to show the dialogue so I'll just copy this piece of code and paste it here it's kind of self-explanatory of what's Happening Here Right Now right we are importing the dialog importing the button we are putting the um the use media query we are using this particular media query right the hook right says if we're in desktop we just want to show dialogue else we are on we on mobile right we want to show want to show a drawer so quick view doesn't exist yet let's just hide this for now and okay cool quick view and quick view doesn't exist for now so we're going to make use of this particular component view dialogue and we're going to use it inside our page inside our slug page right and let's quickly go down here and see this so we have quick quick view you see this is just going to be view dialogue and let's import this real quick see how we could import it oh and let's go into the view dialogue again and see what is supposed to happen there it's supposed to accept props of colors which is all the colors right and we're going to use the colors and pass it down to the quick view and for now let's just see what we currently have okay so if you refresh the page again okay let's okay so let's just create a new color blet and see what we have right now if you look at this we have a view here once we click on this we have quick view right and that is actually working and I think if you take a look at this again okay let's make it wider again and see take a look at this we have two canel we just want only one right and for us to do that we can do it by going into our dialogue right and we are going to take out just some close dialog close and look for where we're using dialog close and take it out we don't need it anymore and also take it out from the export that we won't have the automatic and dialog closed we want to actually close it with our own particular we already set here let's refresh the page again and see okay so view step assist okay I think let's just take this to the side and open up vs C again take this to the side and okay okay let's just see this and go up here and take our view dialogue right we have close right and we have the quick view we have the quick view text and let's refresh the page all over again and see this is actually this is weird Okay so let's just look at this so if you see right now we have two close buttons and we just want to make use of our own button that we actually added and for us to quickly let's just take this to the side and we're going to go into dialog into dialog directly and look for this this should be what we take out and one more thing you could do here we could change the particular background color for for the overlay right this is just what take out right so we just want to change the background color for the overlay and this should be the overlay we don't want it to be black of 8 we just going to use an x value like this yeah so we that now we could say let's take a look now we take a look at view okay let's refresh so we see this real quick amazing so we say quick view we have access to quick view and we could close this and open this and close this amazing stuff we've been able to add that and and the next thing I want to do right now is to also add let's quickly go to the hosted one again and see let's go here actually want to add the whole dialogue we need for now let's go down here and see we have the quick view dialogue we have the quick we have the save right and we also have the export let's quickly add the save dialogue too so the save dialog is also going to be similar code as what we already have right and we're just going to call this save going to be DSX right and this is just going to be this and so we're making use of the form directly which does not exist for now but we're going to create it so we could quickly create this also so we could take away this error we're just going to say from TSX same form save platelet Das form right and this is just going to be RFC RFC save platlet form and let's just rename this so we use it properly form and save dialog we should have access to this and um at this point we are going to quickly show this dialogue right we going to show the dialogue page let's go into page and this should be the part and we're also going to say save dialogue save dialog is just going to show up here and I think yeah that works for us let's quickly go back to Local Host and refresh our page and see and um I think we should have access to Colors because this components need some colors and let's go up and see if we have access to colors yeah we have access to a variable called colors and we're going to pass it down as props down to each and every of the component right now we have colors we also need to pass colors to save dialogue for now and if you go into the save dialog what just happen here similar to what we already have we're just importing the dialogue from shadu UI right and we're just showing it and we're try to draw our mobile and we also showing the dialogue on desktop pretty straightforward right and for the trigger we're just showing an icon which we reporting from um from the from the Lucid Lucid react icon library right which comes with shad by default so you don't have to install that automatically you you have access to this and this SV are just coming from the SVG assets we already have which you also have available to in the video description okay so without was too much time let's quickly go back to what we're doing and let's see what we have right now so we have View and save so if you say save we have save color platelet we'll be able to set up this dialogue we able to set up view we're going to work on this in a bit I just want to set this up so we we just quickly do it okay so once we have that once we have this the next thing to do I think this is going away from the page right now let's just make this let's go back to let's go back to page and fix this this is supposed to be inside one container and take each of them right now and say okay no you guys should just be in a container together and I want you guys to be F items obviously and I want you guys to be Center as center right okay cool and let's see what we currently have here again and let's format this again and yeah I think we come so if you notice now we don't have the press the space bar to generate new color here because we hiding it right when we on when we are on on smaller screens so just to replace that we just need to put a button right from shx and the button is just going to be a regular button from shadu we're just going to say button of a class of just this Hing and this button basically is just going to hold the button just going to hold a text of generate in the minute we're going to bind it now just going to hold generate interesting cool so let's format this real quick and see what we currently have there's an error the error okay let's say this it has no closing oh okay okay oh this is okay cool let's format this properly refresh this page and okay so we just have a button that say generate and well if you go into desktop mode we have the text showing space bar to generate new color platelet okay cool that works for us right now this button does not do anything and okay so I think what we could quickly do first is to generate a new color platet right and to do that we are going to create a function a new function and think I'll just bring in the code and we'll go through the code together okay cool we need to import this types from react and let's quickly do that import the types from react okay amazing stuff so Random you also have to import the random color right what we're using before to create random colors okay so it's pretty much straightforward what we're trying to do here so what we're doing is we just create a new function right that accept a particular event so it's nether going to be a an it's NE going to be an HTML div element or a mouse event so Mouse button event and we're checking to see the event type is equals to key down then then we're running some part of the code so basically what we're doing we're just checking if the user press the space bar right and if it's so then we're going to generate a particular random color and also try to get all the colors and the loex and the random colors and put them into a particular color and if the length is greater than or equals to 5 then we redirect the user to the new color route right or the new color route that was created now to set this in action let's quickly fix something real quick here let's say con navigate we could call this navigate um Na navigate to use router navigation from use router navigation and yeah so now how we're going to make use of this right now we're going to say on key down of the parent which is this this particular um this particular component so once the user press the space bar we want to we want to call this particular function with the event and the event we want to pass down is key down so now let's go back to local local host and refresh our page and see what we have Okay so let's let's open this so what want to say is once we press the key the space bar right the space bar key we want to generate a new color and we press this it doesn't work right okay so now it doesn't work again because this particular this particular container isn't actually like is it's not actually the the active right it's not actually the active container when it comes to like active tab right when it comes to the active tab on the browser so for us to make sure that works we're just going to say this Peri here is just going to have a tab index of zero right and with this right now let's refresh one more time okay so this should be the first active item on this page so once we press the space bar this should generate a new color right now cool it says page could not be found that means our function is actually working right so so what we could say here we could go up here and say don't take us to Colors take us to Colors plural since that since that's is our we're just going to route to Colors since that's our Dynamic route so let's go back here and go to Local Host again open this up we click on start the generator loads up one two okay cool and we say we click on the tab cool click on the space bar we are generating new colors new colors and new colors and new colors and new colors as you can see right now and these are all changing real time now this is changing changing changing changing we could have infinite color plet depending on your test and depending on the kind of colors you're looking for amazing and if you notice how reactive this particular application is like our text on the the color the color platet itself are reactive right they are changing in real time based on the states which is fair reactive which is the beauty of react so let's quickly go back here and say one more thing one more clean up we could do here we could say right now you click on generate nothing happens right we haven't binded this particular generate function to to the button and for us to do that right we just need to do just need to bind an event here we just say on click of this particular button we want this to take in the event and what we want this to do is we want this to handle generate new color platelet and we're going to pass in the event right and once we have the event we want to pass in a particular event listen now which is just going to be click because that's what we'll be doing right we'll be clicking if you remember what we did for this other for this other one was on key down we're passing down the key down so once the space bar is pressed we generate a new color but this for this one now we want to generate a new color only when we click on generate right and because that is how we want the user to do it on mobile so if you click generate this should generate new colors for us let's see this should work one more time and see okay generate a new colorate a new color we can generate a new color and yeah cool so that works for mobile and let's make this larger and we've been able to add space bar to generate a new color I'll say the next thing we need to do now let's just go into here and work on the quick view and once we're done we move into the save okay so the quick view should be quickly should be quite very fast to do this is just where each and everything will be happening right we're just going to call this quick view and quick view quick view is just going to be this for now let's just put this quick view and quick view is going to be equal to quick view is going to be used inside our quick view dialogue and let's just put this right now since we need it since we since we need this right now and we're going to say quick view is just going to come from quick view and the colors okay quick view yeah we're inside quick view and we have access to colors inside our quick view and we're just going to type this say our colors are just going to be um array of strings okay cool okay first thing first putting a new state here say selector and let just import it from react real quick use use states and and use State we are also going to say so this selector right we just be used for let me show you what we're going to use that for let me show you what we're going to use that for and this is it right now we're going to use it for we're going to use it for this that was selected right so this is what we're going to use this new state we just created so let's let's build this particular component right now and quick view right just going to be like this and we are going to see this particular component it's just going to have the background color of selected color selected color right now is just equal to the color right of the index of zero so colors is just an array containing all our colors right and we just going to set we just want to set this particular div to the background color of the first color right the index and we could also add some class here and say I'm going to add some class and say class name is just going to be this class name is just going to be this for now and yeah I think yeah once you click on quick view we have this particular color which is the first index okay so this is working all fine and good amazing and we have this and let's add more contents here right now okay so if you go back here and see this we have each of the column names the hex and different values that has been set right we have all the values and we have the name we have the hex we have the the hsl like in different conversion right for the particular column I think let's just put this here real quick to undle the whole of that we're just going to say we just going to say this we're just going to say this and for us we're just going to Let's quickly put this inside react fragment to help us visualize this properly right so inside here we're just going to put a whole conversion inside here and I'll explain what we're trying to do here so first of let's import color Rod right color Rod gives us the ability to extend our color and also also going to use the extend the plugin name which we used earlier and and also extend it so we could have the names cool and just to show you what we have here we have just a div right showing us the name and for the name we're saying Okay show us the name right then for the hex we're saying color can you convert this color to the hex then for the selected for the selected color right color can you also change this to the B string that's just what we're doing so let's okay so you open this real quick we have this color as you can see here quick view and let's see what we have here quick view okay interesting we have quick view and we have this particular color the color name the hex the hsl the RGB and if you want you could actually add more colors to you could actually add more color conversions to your own project but I think this should just serve for us right now and we're also adding an over State like when you are over this particular container we just have some background just this background and everything here is pretty much just doing classes which are kind of like self-explanatory of what we're doing okay this doesn't look good at all and we're going to fix that in a bit let's format this now just to show you how this works if we change the color to index of two we should have the dark magenta right showing up here cool we have the dark magenta showing up here right now and this is supposed to show the text of white we showing black if you remember we have a utility function we are using to do that so let's just quickly do that we're going to create a variable called color Lumi and color is just going to import our particular a particular utility function and we're just going to use a function here let's view cool let's quickly import this and yeah think we've imported it and we can use color Lumi and say and basically what we're going to say with color L is we're going to say color Lo is just okay since this is just a string literal just going to sayi right if color Lo is equals to White you want text of white text of black now let's view this right and this doesn't work yet okay yeah this works now right so it's taken the right value so if we generate a new color where we have black and white text let's quickly view this we have white TT correct this works amazing so one thing we need to do if you see our design here our our modow doesn't look like this looks very weird and we are just going to fix that real quick right we have to take out every padding from this side and also the pattern on the top okay so let's quickly go to dialogue and see how we could do that right now we also have to change some values here again and okay so let's look for every pattern we have here and we don't want the pattern of six anymore we're going to take out the pattern of six and close this up and refresh the page okay quick view and yeah amazing we have this right okay this actually works for us click here save let also have something similar yeah that works for us and if you look at this we we don't actually have the Overflow here let's see how we could take that out to take out this overflow to take out the Overflow right we are just going to go into our quick view and format this real quick and also format this real quick and we have a class called no scroll bar and let's quickly fix that if we go to our global. CSS we could just create a new a new layer and so what this is saying basically is this is the class we could use this in our our components and this is just going to take out the screw right the screw indicator or the screw bar on the browser and once we refresh the page we shouldn't see we shouldn't see the scroll anymore amazing nice so we have the scroll and the user can also scroll down if you wish to or if you want to scroll down okay so that's just one one of that and let's format this again this up a little bit I think pretty much getting there a new a new component outside outside this particular div so what this is just going to do for us is this think we could just paste it here and um go through the code what it does is this we just have a container right and we're mapping through the colors which is an array and in each of the colors right each of the colors we setting the the selector and setting the background color have some class of from CSS classes and if the selector color is equals to the particular color that was chosen we are going to show this particular indicator and the indicator is based on particular Lumi color we're also using here right passing in the color and yeah pretty much straightforward let's format this and see what we currently have if you go up and take a look at this let's just make this index of zero again since we already have a way we could select the color so we're using this of the set color to set the particular color so once we set this the color basically change and click view set this set this and set that and set this and set this and set that and set this and set set this that does that does the whole Magic for us so let's just generate a new color again generate generate generate and generate view amazing so little little little attention to details again once this is Black Background or something that is above 0.3 Lumi based on the function we created earlier right we're going to show white right so just little attention to details like that to make your application stand out and I think with this we could actually say we are done with quick view just change the color else and that works for us I want to see how this looks like on mobile if it's actually working the way supposed to work so let's say quick view this comes up as a drawer and amazing amazing amazing and so this works right let's say this I think we could work on the safe platelet we could work on the safe platelet but before we do that I want to do something else I want to work on the export so we want the users to be able to export to be able to export the color platelet right and let's just quickly do that first before we go into the save okay to do that we also need need a dialogue right so we're going to say we're going to create a new a new component here that's going to be export dialogue TSX right and what this is just going to do for us is just going to be a dialogue a direct dialogue and we need to create another component which we're going to call Export this is just going to be the main component which we're going to import into dialogue and inside the export platelet it's just going to be a regular function it's just going to be component and um we're going to call it export and let's rename this export platet and um think we say this and this and this amazing stuff right and this so what we just have here are just they are just links right they are just icons that have been imported let's just take out all this on click for now so this is this should be pretty much straightforward for us and we also need to import this icons that we're using here right now from the icon libr has been used from Shad directly that way when you go to export dialogue it shows you some error right it says export does not exist I think that should exist now and um react to PDF this is what we're using to save the PDF right and and I think we don't even need this here yeah cool let's see what we currently have we have this and we have this and we have each of our components and we could just quickly go into our page here and say page is just going to be equal to this and we also need something else here before save I think it should just be after save after save we want the export let's SP thater export dialogue and once we go into the export dialogue we are just using we're just showing the regular dialogue like we've been doing we're showing an icon with exports and if it's on mobile we just want to show a draw up okay kind of self-explanatory of what what we're doing okay let's take this to the side and take a look at what we currently have again refresh the page Okay cool so we say export once we click on export we'll be able to see all our icons we could export we could export as as PDF image and SVG so this doesn't really do anything right now because we haven't we haven't added the like the um the logic for it right now so for us to start adding the Logics let's quickly install a new library and the first Library we need to install we need to install react to PDF right react to to PDF I think this this should be it and react to PDF we're just going to add this to we're just going to use this right and say react. PDF we just want to install react to PDF and the next one we need to install here too is also we also need to install HTML to image right HML to image mpm package and this is what we're going to use to save our images as as an image which is just PNG or SVG Okay cool so we have HTML to image we're just going to wait for this other one to be done and copy this real quick and wait for this to be done this is done let's also install HTML to image and let's go into color platet right and okay so while this is installing let's quickly start working on these functions the first function here we're just going to say andle handle this is equal to it's going to be equal to this andle copy URL is going to be equal to this and inside I do copy URL what we just want to do here is we just want to be able to copy right you just want to copy the particular URL and we're using the particular hook we created previously right so we are reusing it here also okay so we have we're importing this and we're using it inside here and that's we need to import here we need to import the toast because we have to show you toast right we have to show you toast when we copy or when we export our images so toast we don't need toast we just need the use toast and use toast and I'm inside here now so what we just see is once the user clicks on this copy URL we want to just do this so let's go back to our browser and reload it okay so once you click on this you get an error it says part name is not defined Okay cool so we need to get the path name of the particular application and use use part name right it's just a particular Hook from nextjs let's quickly look at it it's similar to the one we used previously where the client H that lets you read the current URL part name so we just want to get the current URL name and that's what we're going to be doing right and let's just quickly import this from react navigation okay so once you do that I think we should be fine let's refresh this page real quick so once you export you click on this URL copy to keboard right you copy to cboard so that work so if you go here now and say you paste this right this is basically pasting the the path name I think once you'll be able to host this you can just concatenate your particular URL or the particular hosted URL right and update it with this particular part name and you could actually share this URL with with your friends and people to check out the color platelet okay let's undo this for now so one more thing we need to do is when we click this we want to close the mod out right we don't want the mod out to be open after the action has been processed so for us to do that let's quickly go back to our export dialogue and let's see what we have here and we have some states which is open and set open and set open right set open is being passed down to our platelet and we just going to accept the property here now let's just accept the whole props just going to set open and and we're also going to try to type this this is just going to be type of any and we're just going to type this and just we're just going to type each of the props that have been passed down and we're just going to see since set open has been passed down here right once the user click on this particular URL copied so once the user have copied the URL we're just going to set set we're just going to set open to fals and that should be it okay let's quickly see it once you copy this set it to false okay and click on this set it to false amazing okay so the next what we need to do let's thinking about how we're going to export to PDF remember we already installed the library to export as PDF right and I think the first things we could do we could just okay before we do that before we do the PDF let's quickly work on the images first which is the SVG and the PNG let's just import some values we'll be there in a bit so we want to import to PNG and also want to import to SVG from HTML to HTML to image and and based on the um the documentation this is how you do it right so basically we have a function that says export SVG we're using a use callback from react and we're going to say export SVG right so if the current T Target is equals to no return then that means if this is no this going to return nothing is going to happen right then if not we're going to say to SV takes in the current do then since it's a promise then convert it to an SVG then download it then there's an error we're just going to log the error for now and once we're done just close this right that's just what we're going to be doing with the library so let's go to export SVG and and we're also going to do the same thing for exporting as PNG since the library already allows us to export as SVG and also as PNG so export to image export to SVG let's go down here and see what we have if you see SVG we're exporting to SVG we also have to export as image now this won't actually work because this target TR we haven't set it yet right and we are we are just accepting the properties here and from the dialogue here we accepting Target ref coming in from here and Target ref is supposed to be Target ref is supposed to be passed in from the page directly so let's go to page of our color page and so now we already binded the properties to to image and SV for Simplicity right I just want to do something here and let's just collapse this so if you see how to make use of the the okay so if you see how so basically we just how to actually use the react to PDF library right if you look out look at the documentation real quick again let's quickly go back and um see what we had but this is how we basically do it you could use the hook directly and I think let's go to the playground okay let's go to the hook actually we just want to use the hook use PDF hook right and the use PDF Hook is what is what we're going to be using to like export our platelet and just let's just quickly do that and Okay so in our page here we're just going to say to PDF this is coming from the used PDF right we're just going to say to PDF and Target now for each of let's close this and close this okay so it says use PDF is not defined we're just going to go here op here and see we just going to import you and that should be fine react to PDF and it can't it can't resolve module react to PDF conf find module okay and we actually installed it let's just confirm we installed it right react to PDF and let's go into our packet. Json and see what we have here react to PDF react PDF react PDF reactor PDF let's just look for it react PDF okay so a few we actually installed the wrong package we're supposed to install react to PDF okay so let's quickly look for the react to PDF Library the right Library react to PDF I think this should be what we should have installed yeah think this should be it exactly okay so we installed the wrong package and let's just fix that and we could take out this since we won't be needing it anymore just take out this particular one and say go into here and say use PDF and while this is installing let's continue building oh okay we have to wait for this to install and okay let's just let's just comment this out and continue what we're working on so what I was trying to explain was each and every of the libraries we are using to export this values right or to export the color platelet they they need a ref they need a ref in react right to reference a part of the page they are going to take a snapshot or a part of the page they are going to export or they are going to turn to for example it's going to turn the HTML to an image or it's going to turn the HTML to a PDF or it's going to turn HTML to a PNG so it needs it needs a particular ref right instead of creating different ref we're just going to make of the ref that is being exposed from you used PDF directly right we're going to make use of this ref for all our exporting and everywhere we need the ref reference of the container I want to export and that being said let's quickly go down and go into this export we're going to say passing ref Target ref in the export dialogue and if you go inside the export dialog we're accepting the target ref and we are passing it down to the and the platelet is accepting the ref and inside the ref it's using the ref right to export if the ref do current since it's going to be a regular a regular reference right we're exporting it we're going to export the image or we're going to export the SVG depends on what we want to do so we're just using one ref to serve for all our exporting so let's go back to our page and see what we have here we also need to say Okay so let's go up here and see what we have here we already have this installed so this to PDF right now is a function right which we could use to generate the PDF Direct L and we are going to pass it down to this component we're going to say handle we're going to just call it handle export PDF right and pass it into the dialogue here and accepts it and once it accept it we also have to pass it down to the down to the export right which is what we're doing here Tak in this and this component accept this and once you come down here right we're going to use the export hand and the PDF export hand basically what it's going to do it's just going to make of the function we are passing down as as a props right just going to make of the function we passing as a prop to um to export the values so now we have an error it says we can't find export PDF andul right and the reason is because we haven't set that up so since we want to do some things after the particular download or the particular button has been clicked for the PDF we need to reuse we need to use that function inside another function right and we're just going to say export PDF hand call in this function pass as prop which is coming from which is coming from the page which is to PDF right export from the library then we're going to show it toast and we're going to show it we're going to set this to force let's refresh the page and see what we have okay so we're right back and um let's quickly look at this so when we export as PDF export exported successfully let's export as an image let's also export as an SVG it doesn't do anything for us right now okay so we just have to debug and see what's wrong we click on URL copied click on PDF exported let's take it to the side and see what we currently have again to debug this should be quite easy right because we should have access to Target ref there's an error right there's an error that says can property of own document at pixel okay okay interesting we have an error okay let's go back here and see what's our Target Target TR is coming from spot and let's go back to the homepage let's go back to the color page p and Export and forat this one directly let's see the ref right now so the reason why it won't work right now is because we just have the target ref and passing it down but we haven't added Target ref right to to any part of our application and what we could just say we just say ref right now is just going to be equal to ref because know when you use ref they use ref from from react you need to B it to a particular a particular item on your D we' binded this to and yeah I think that should be the reason why we had the error let's take this to the side and open this real quick and Export Okay cool so once we open this up we click on export let export as PDF okay cool we have platelet and our platelet contains all our colors amazing so you come here again and say want to export as PNG exports our image but as an SVG it also exports this particular part as an SVG amazing amazing stuff amazing stuff I think with that we just generate new colors and yeah everything is kind of working right now we could export we could copy we could export as PDF successful we have our our tool store coming up there you also export this as an SVG and that works for us yeah let's go back to the exports blets let's just take a look one more time and see what we could clean up here right now PDF export we going to make this work because I need to add we also need to add the toast right for for exporting the images and for do that let just say this particular function is supposed to handle image so we're just going to say image exported successfully and for this part we also going to say if it's okay I think what we could do to make this really work after downloading right we're just going to say SVG was exported successfully and um since it's a promise right only and only if it's successful that's when we're going to show this toast image exported successfully yeah we have little fix let's quickly take a look again if you export let's quickly export an SV once you export we get the toast once you export the image we get the image yeah okay so cool that's little attention to add so I think at this point we are actually doing pretty much well and the next thing we need to quickly do here is we need to give the user the ability right to save their color platelet to Super Bas and and that is what we're going to do next right and let's just take a look one more time and see what we want to do so this should go to 100% And once we click on Save open up a form that takes in the title and on the text area here right and we're just going to save to just going to save to our database which in our case we are using super base if we try saving without putting any value we have some validation that's just been handled by sh um form so let's just quickly take a look at that sh react form sh react form right it says forms are tricky one of com application but also one of the most complex we designed HTML forms yeah what this is just saying they just make it more easier for you to make use of forms right in your react application so for us in our own case we're also going to be using the form right to simplify stuff for us right now so remember we have the save the save dialogue that is where we're going to put in our forms and and we are just going to show okay save platet form and save platet form is just going to be save platet form and this is what we're just going to be showing here let's go back to this part save PL left form amazing okay so for the save PL left form what we just going to be doing here is very very straightforward we're just going to put in the form directly from from Shad how they they actually advise you to make use of it right so for us we're just going to import a bunch of values from Shad re we're going to import the form we're going to import the input we also importing the text area and we also have to we have to import Zord which should just be used for the validation of the data and we need to import tost right because we also want to show you toast and let's just set up our schema right so our schema for what we're doing we just need two data which is the title it's going to be a string minimum we just want two titles and we're just going to say title must be let's name just real quick TI must be at least two characters description must be at least five characters and once we have that we one step closer to building out our form okay so this particular form is just going to accept some values right now this particular form is going to accept some props it's going to accept the set open because we need it right after submitting the form if it's successful we want to close the model and also we're also going to be accepting colors which is all the particular colors for that particular instance we should be sending to the form in we should be sending to the form right to super base to save our database okay so we could quickly just type our data here let's just do this real quick and this is just going to be color string set open to this and yeah I think we're pretty much getting there and let's quickly open save save dialogue passing in the colors we're passing in the form passing the colors passing in the um the set open right okay cool and um let's go back to the form let's start working on the GSX right now okay to work on the GSX it be pretty much straightforward we just have a form with two values right and the jsx is just going to be this we're just going to say just return two forms right just return two form Fields number one our ty2 and number two should just be our description and let's just put this out for now and also go up here and see and also look at the errors we're having right now okay so the error is just being regular error because if you go to that how they ask us to do it is here okay so we have the form right and you also need to pass in the form values and um let's go up here so this should just be the form value right and for our own case our form value is just going to look something like this look something like this right which is just resolving our title and our description then this is just going to accept on that function called on submit which is similar to what we have in the documentation here let's just copy this function and let's it here so this on submit just going to hold our values yeah amazing and I think that way will be able to have a form now let's see what this error says okay we don't have any error amazing stuff amazing forat this real quick and let's just see this so once we open um think let reload again here there's an error that says clar error this should be a network error let's refresh again and cool so once you click on Save we should have this the platet TI to and our PL description very smooth right very straightforward let's take this to the side again and see okay that's kind of straightforward for us right now okay so we have this and we just need a button down here and we could just put a button for now and take out most of these values right and I think this button we're just going to use it for State when we are submitting the when we just submitting submitting this for now also going to say this should be use States we have this and there is an error the you state is not defined okay that should not be an error anymore so we have export this and we also have save we have our save and let's just quickly do this let just say I'm testing go into description and say testing and testing testing let just put some dummy text here and inside here we should be able to see our values let's say save right yeah we've been able to save our values and we have our vales we have a title and we have a description okay so I think at this point the next thing we need to do we just need to hit super base and save that data to super base then if you remember if you remember we already set up our project with a create client right and with a create client which is just basically the super based super based client which is what we just setting here right now and we're also fetching the clock section to get the particular token and make sure we are using the clock section when we are pushing to pushing to super base to authenticate that this particular user is trying to making I'm trying to the actions on the particular database okay let's quickly go back to super base again and see our data let's go and let's go to super base.com and want to start a project let's just authenticate again with h so this should be color clone we already set up all this from the beginning and if we go back to the table editor we just have one table called platelet and this is the table we're going to be saving all our platelet to right and let's go back to our let's go back to our form so our form we have title and description right so the title and descriptions let's close this the title and description are what we're going to save here and at the same time we're also going to send in the colors and the user ID will be sent right and the ID is just going to be dynamic for this particular for this particular and the ID is going to be dynamic and the user ID is just going to come from clar ID like we already set audio like we already said previously the function to retrieve the user ID okay now let's quickly do that and the first things first I want to do I just want to make use of the first thing I want to do or the first thing I want us to do is to use super Bas with typescript so we could have the the type support let's quickly open that and okay let's go up here and I'm generating type so we just want to generate types for our particular database and we're going to use it in our application directly so just to give us a very good use to give us a very good developer experience and we're going to generate types and for us to do that let's make this T mode yeah and we'll be using the Super C to do that let's go to documentation together TP support we need to to generate go back and okay so it says you could also generate the types from the dashboard and I think let's just do it from the terminal right so let's quickly open a new instance let's quickly open a new new instance of our terminal so we're just going to say MPX login npx super Bas login let's login First okay so it says you can generate an assess token let's quickly go into here and open this up real quick just click on this link and let's generate a new token we're going to call this color colors right and generate a new token and copy the token and just paste it in our terminal and yeah super base is logged in and let's go back to documentation so we're logged in right now so the next thing we could try we could say let's open this properly right now and see we're just going to copy this command and say MPX super be generate types types script project ID and the project ID for our particular project could just be cutting from when we go to Project settings and we going to get the reference ID here right and and this should be the reference ID and we're just going to paste this yeah okay so we have database types right so let's look at the command again so it's say MPX base generate types generate types types script project ID data database types generate types I think there's an error there's an error on how we did it but nethertheless we actually have our file here already right called database and if you look at the documentation it's just supposed to save just one file for us here okay so it's it's pretty much straightforward right and you just see the reason why I wanted us to use the typescript types for the database right now because right now you look at this file that we just created from the CLI we have the public tables the platelet right and we have our colors create T user ID and we could we could just use this for auto completion and for a very good user experience and yeah let's go back to our application I think at this point we could close the tabs we won't be needing them anymore yeah and I think we could also close this let's just leave that open for now if you go back to the clients which we created at at the beginning of of our of this particular video we have our super based client right now it's actually not typed right and we don't have typescript enbl for us webas clients so one simple trick we could just say let say we just want to import database right from from this particular file because we're already exporting database here let's go back to our create client and look at this okay so quick fix should just tell us to import this from okay let's just import it manually so we have database base is imported from types cool so this particular database is just going to serve this particular database type is just going to serve for each and every each and every table we have inside our super base our super base okay so this particular database is just going to serve for the tables that's available on super base for us and we will have access to the types in our application directly here so if we go into the form where we are submitting we are submitting this data to super Bas what we could quickly say here is okay so since we have the values here right we okay so we should be able to import client since we already exported the for me right so let's go inside and see we could just import let's just see client for now that should be client from superbas instance okay no let's undo that again and say you want to import client right from superb create clients the one we created here earlier then we want to just access the form value and at this point what what we're going to do here we're going to assess the okay so let's just look at this again this is actually not working as expected let's go back to our database we have our database here already and we have all our data okay so let's go back here and see this where we are using the types okay so we are saying create superbas client we just need to pass in this particular Types on the client directly right and that way all our comp components we have access to the types for our database so when we go inside here now we could automatically have auto complete right complet L and if you check super base we only have one table which is right and once we have this we what once we have this what we're going to do next is we're going to insert right and um we're going to insert into this table right now and just going to say TI two our TI two is just going to be the values the ti two and description is just going to be now you can see the auto complete all working out for us right now right description is just going to be values values dot description we have auto complete already then colors which is coming from the types directly is just going to be equal to okay so let's quickly look at what we have here now we're acting colors colors right now is just going to be in the structure of what we can't really use let's comment this out and let's log what color is okay so we say to the log colors right so let's quickly say this so once we say want to save right and let's Okay so we're trying to log the colors right now and if you see AR of string but we don't want to send this to the database as array of strings we just want to send them as Dash values so we'll be able to use them on on the save platelet right so we'll be able to use them on the safe platelet as URL directly like the way this is structured right now okay so the next thing we could do to actually do that let's just undo and bring back our superbas client and um our colors is just going to be equal to just create a new constant here just call new color new color is going to be equal to our colors and we're just going to join our colors and say want to join them and separate them by dashes so that way we could now use new color and push new color toase so all this are just going to be asynchronous actions right since we're going to pushing into the database and we're just going to be doing on the client side directly right and for we to just do that we could just quickly make sure this function is just an Asing function and we're just going to a wait right and to clean this all properly let's just put this in a try and catch block and try and block yeah so for try we're just going to try AWA this and for catch right we could just log error for now error and you could also bind Dot finally so when this is finally done we're just going to set set open to false and we also have access to the Loading state which is just a regular state from react set is loading to we're going to set it loading to to fals amazing stuff okay cool and M this real quick finally yeah you take out this logs and once this particular function is been called you could say set loading we just set it to True right State and that is what we're doing here with the button here so if it's loading going to show save saving else it's just going to show save like what we currently have right now now we format this and we go up here I think we're ready to push our data to to okay so let's quickly open up super again because we need to we just need to confirm super receive our data real quick okay to project and let's go to Colors clone and quickly go into databases okay our data let's go to our table editor our plet our plet is currently empty right okay so now let's try saving a particular color platet let's just generate a new one and let's generate this one actually like this one okay so say save we going to call this first first saving the description is just going to be my first follows saved and if all works properly should be able to save so you click on Save we have saving and has been closed now let's see if actually received our data yeah cool and super Saed our data saving first color saved on the app and we're saving the colors as dashes that that was what we did right by changing the array to like strings that have been separated by dashes and this is the user ID right this is the particular user ID from clar directly that we set up in the beginning of the of the authentication part of this video okay so right now let's just try one more let's try generating a new color blet okay let's just save this one second saved let's go save and come to super base yeah we have saved and one of the beautiful thing about this is this particular data is just scoped it's just scoped to this particular user right if we try fetching this data the user is just going to see only the data that relates to him or her right or the data that that was created by him or her and I think that's the next thing we do right because right now the user needs to be able to see the current saved or their current saved color platelet like what we have right like what we have on the hosted one where we have this just clicking on this you could see your current save platelet this actually save no saved platelet right so let's quickly fix this okay so let's quickly add this particular function let's quickly add this particular functionality and that should be pretty pretty much easy to do I think we could close super base for now yeah our connection to super base works and let just create a new function here and our new function will be called our new function is just going to be called saved saved platelet and um this will just be a regular component RFC okay cool amazing stuff and um we have save platelet so what save platelet is just going to do for us here is very simple and very straightforward save the sfe platelet is just going to show all our safe it's just going to handle and show all our safe platelets let's go back to the let's go back to the page right and let's see this one more time what we have here and we have we have our re group and we need to add the safe the show safe platelet right we need to add it in this particular page first things first let's just create a booing State and our booing state is just going to be show sa and what this is just going to do for us right now is just going to be inside here and say okay if if if else we're just going to show no and nothing right okay so we're trying to import and that should pretty much straight forward to import this and so save right and we're importing it in the wrong part this should be outside and above here so we've been able to import this properly and this particular function let show and the only reason why it's accepting that is because we'll be using it to to do some values we'll be using it to set some values okay we're just going to say this right going to accept this and we are going to use this which is just return the value of buing and yes I think this this is okay for us okay so let's go here and add this close this real quick close what we don't really need right now close close everything and just open the ones we need we just need only this and let's go up real quick and in this part this is where we're going to put the icon the menu icon that will be shown so for the menu icon we're just going to say the menu icon just be imported right from um the icon library and this is just going to be a regular icon I think you could just make it a self closing tag and add some class and this particular class what we're going to use to animate the values so we're going to say this should just be call this should be call the menu icon right so once you click on this going to set the and else is just going to set to foral so you just want to use it to go okay so with this now we could refresh this page again and let's see the changes Okay cool so we have we have this icon and let's quickly see this okay I think for Simplicity we could just wrap this we could wrap this icons in a button and in the button we mean just need to wrap it around the button and we should be able to have okay so I think we just refresh one more time and see if this is going to give us what we want okay so we have we have this so once we click on it it's going to show color platelets and we can't really see it right now let's click on this and nothing is being shown because we haven't styled the color components yet so let's go into this components and say let's just return let's just return some text here right just to show you how this is going to work and just do this open this up cool so we have this close this you close it open and close it so this is where we're going to show the current save color platelet and think the next thing we could do here we're just going to do some styling right and what we're going to do we're going to make use of of the particular hook we created before which we called desktop right which is basically the use media query hook we created before and this is just what we're going to use it for we're just going to use it for to handle where we are on mobile and also where we are on desktop right because if you see this example let me show you this real quick once mobile and you click on this this comes like an over overlay over the particular page and you have this particular dark background overlay right and when you click on this it goes out if you're on desktop right if you're on desktop let's make this large it's just going to show by the color plet so we're just going to try to achieve that with with this particular value with this particular okay so what that means for us is this we're just going to say if um if it isn't desktop meaning that it's going to be mobile right if it isn't desktop we're just going to return it jsx return jsx basically that just does something very very basic and we'll just copy this here over here real quick and and what what is just doing here is we're just going to um I think we could just hide this for now because this will just be used when we fetching the data and let's also add this and sa blet we haven't fetched the data super base we're going to do that okay so we have this and say X is not imported let's quickly import X from our icon library and go up here and say this now for animation we are just going to do use we're just going to use PR motion for the animation and we're going to use use animate from frame motion to do that and that should be pretty much straightforward for us to do this particular animation that's going to happen on this particular page when the user tries to see their saved color scope is not defined okay cool that error is okay for now okay so we have this and open this up okay I'm going to work right now because we haven't defined the one for desktop so the one for desktop basically what it's supposed to do is something similar um let just take it this and this is just going to be the one for desktop let's just return the GSX here and take out the parts we haven't added yet we haven't added the loading dat years we haven't fetched the data yet and um I think this is pretty much fine yeah okay so let's just do this and reload the page one more time so we open this up we have this and we close this we have this and open this up and amazing okay the want attention to details is we we could actually animate this icon once it's open we are going to rotate it and once it closes we are also going to rotate it back to the state and for us to do that that is very very very straightforward to do let's quickly go back to the page and we're just going to do it on top of here right first off we're going to do we have to import use an imate hook because that's what we'll be using to do this we have a cons that has access to the scope and also the animate and we're just going to import use animate on to use animate from FR motion okay so we have use animate from frma motion we are good to go okay so once we have access to this remember in our particular icon or in the particular icon we're using we added the class of let's scroll down repeat we had a class of menu icon so we're going to use this class name to access the value and for us to do that we're just going to use a us very straightforward right just going to use use effect that says once we have the value right once once we have the value right we're just going to say animate and which basically takes the selector and here what we actually want to do so once the menu icon which is what we're going to be using to select the menu once we're going to be using the menu icon to select the particular icon then what we basically want to do here we just want to rotate right we just want to rotate this and we're going to say if the show plet is true we're going to rotate it to 90° else going to rotate it to 9 to 0° and format this real quick and okay I think this is pretty much clean for us yeah and yeah and we have an error somewhere okay okay this is looking clean so we need to reference the scope right now let just say reference of scope right we need to make it of the reference and this is just going to be to scope and this is what this means right now is this for each and every value inside the spirit that has the class of menu icon it's going to like rot the value right that's why we are actually using the scope as a reference on the parent because the parent holds the whole container of what we need here which is just this menu icon we access right pretty much straight straightforward animation using use animate so let's refresh the page again and see so open this up lger and you click this and it doesn't do anything really right because why it won't do anything because we areen setting we we are not setting this use state right we're not setting this use effect to monitor any state right because this state changes right when we click on the icon and when we click on the particular icon we supposed to update and tell the use effect to run every time this value changes so with this now open this up this should work click this opens up and we could rotate this and yeah we could just add that little animation to our application okay cool and let's quickly go back to our save platet our save platet what we just need to do here is once this once this particular component just mounts we are just going to fetch the data and for us to do that we're just going to use another use effect inside here which is on a separate component right so what we're going to see is on the use effect let's just taking the use effect here if the used effect is imported we're just going to fetch in this function right fetch user platelet so we're going to import clients remember we have clients that we already imported from we already exported from the super base instance we created and sa plest is just going to be a particular use State we already set up here and also we're also going to set the loading State now we just need to type this particular this particular save platet and for us to do that we're just going to set a type outside this component which is just coming from database and okay so don't mind errors we're going to fix it real quick we have use States import this we're also going to import use effect from this also going to import our clients from our super based client and yeah we could just use this function here and see this is just run for us and F our data straight up amazing okay and we could just log outside this just to see if we're going to get our data we're going to log our saved latet and see what we currently have okay let's refresh this page one more time and try to see if there's any error okay cool database is not imported we just need to import database from our database. type cool once we have this let's refresh p one more time and open this properly and we should have our data fetch by now let's take this to the side again and see what we currently have in our console cool so we have some data we have one two remember we we saved two values to our database from this particular user we saved one first saving and second saved right so that means we're fetching our data correctly from super base and we're saving into a particular State and we also have a loading state right now so I think now we could just quickly do this bring back our loading States also bring back our loading States and also bring back the state right I basically checks to see if the platelet is zero or it has a l length of zero we're just going to show no platelets found then we're also going to return this right we are also going to return this which is just basically the platelet itself let's make this wider the platet basically is just going to hold a link from it's just going to hold a link with import from you could import from next ch next link okay all right and we have this and this works for us and let's take it to the side again and refresh this page one more time and see what we currently have here and for desktop on mobile right let's bring back all this SP to so what we're just doing here it's very basic right we're just setting some states loading States we just setting some loading States we are showing the data right for each of the right because this SPL right now is just going to hold our data and we are mapping through save and showing the particular plet in the color in the background right then we are splitting these colors just to show it properly and showing the title and so let's just visualize this real quick you come here open up this sidebar it shows no safe platelet let's load the page again and see what we currently have open this there's no safe okay and we can't see this because we we won't be able to see this because should have a class of opacity of zero let just make it an opacity of one for now before we animate M it right and let's reload this fure all over again make this wider voila we have this right we have second saved and we have our colors all showing up here let's do it again open this up have our colors here cool let's close this real quick and refresh our page and just take a look at our code again what we are doing is mapping through the safe platelet which is an array containing all our data right so this safe platelet is structured like this it's an array of it's an AR objects contain the ID our title a description and colors and every values we have here right and which is coming from database so we are mapping through it right and coming over to the platelet which holds the colors right do colors and our colors are just what we splitting into into an array right and this is just returning an array for us where we could use the values to directly set the background colors for each and every of this div where we just have some height and some rounded side left and like based on what you could just see here right cool and if you click on a particular color you could go to the color if you click on this color you be routed to the page I think you should be routed to your 44 page we're going to fix that real quick okay so the link be links the colors should be Colors Let's quickly go back to our hom Page open this up real quick okay so we have start the generator from the beginning again let's just start this and just close up okay okay so we have some colors showing up here right now let's click this our save blet let's say for example want go to this one automatically we routed here right and the page is updated in real time and we click on this and this data all just coming from our database which is super based at this moment okay amazing amazing and one thing I just want to do here is it seems our loading state is not working properly so let's go up here and see inside our function where we are fetching we're setting loading to for to for what point is loading set to True okay so that should be the problem loading is never set to true so we won't be able to see a loading spinner on the screen let's just set this loading to be true first once this function is being called once this particular us effect runs so with this now we just open this up we have a loading spinner and we have our amazing and I think let's quickly save more colors let's say this should be okay no let's generate a new color first remember we already have we press the space bar to generate a new color let me search for a new color looking very good okay I like this let's save this one and say thir color right and let's say I love this one amazing saving saved right and if you go to our side bar we should see our thir colors which is what we just saved right now and if you go here okay you need to check out your colors again and you want to like work on them or you want to get the values you just click on this click on this this we change the color you could do whatever you want to do you could um go to the view and view the values directly and you could save this new color blad because you have a new color here or you could just export this as as an SVG which should just work and yeah this is all working for us and this is really looking good and we just do this one more time try to see what we have here colors second saved saving and and there you have it and and there you have it you just have your application where you could generate color platelet you could edit your color you could drag and drop you could lock your color you could copy you could remove your colors you could also view the colors you could save the colors of your data Bas you could export the color as wherever format you want to export it as you could also always generate new colors and yeah so I think at this point we've actually mapped out all the feature we planned out to do for this particular build and I hope you guys love it and if you got into this part of the video please subscribe share this video and also give a thumbs up because it kind of helps it helps the channel right to grow and because like I said earlier more content will be dropping similar content front end projects on this particular Channel I don't I really wish you don't miss it because it's going to be like bangers and yeah that is it so I think with this The Next Step would just be to push to to GitHub right and also try to host on Vel just try to host on Vel and after hosting on Vel you could Now set up your development build for maybe authentication so you could go to like Dev build yeah I think with that we've come to the end of this particular video thank you for following me along to this part of the video and thank you for your time and thank you for being a loyal subscriber see you in the next video bye
