Welcome back to the channel, today we will create a dynamic social media dashboard using Next.js, Tlwinds.js, and TypeScript. Make sure to check the video description for repository link, live demo link, and timestamps. So let's get coding. And in this build, we will learn how we can apply a dark mode, how we can create a reusable card component, how we can use react icons, how we can use conditional classes. For example, if you will see there, we are getting a negative value there, how we can change the color of this conditionally. So let's get started. I got this challenge from frontend mentor. I will also give this link in my description. To start this challenge, you need to click on that start button. After that, you need to log in with GitHub account and download the starter file. And if you will see there, they have also given the screenshots of like, what should be the output of this UI. So as you can see that there, and one thing I forgot to tell you, this build is a full responsive. If I will make it mobile responsive, so you can see that we are getting automatically mobile preview. And you can also see there, this neighbor is going into a two rows, but when I will zoom out and come into a computer screen, so you can see that our neighbor is in the single row. So we will learn how we can make our UIs fully responsive. So first of all, I will show you how to set up our next TS project with tailwind CSS and type script. So for that, you need to go to the place where you want to install your next TS project. So in that case, I want to install my next TS project here. After coming on that place, click on that location bar and type CMD. So this will open the CMD for that location. And after that you need to go to the browser and search for NPX create next app. And after that, click on that first link, and then you will get the latest command to install next TS project. And after that copy this command and go to your terminal and paste your command like that and press dot. So we are using a dot here because we have already created a folder and we are inside that folder. So this will automatically install all the packages inside that folder. And after that, press enter. So this is asking me what do you like to install type script? So I will say yes. So this is asking me what do you like to use? Yes, Lynn. So I will say yes. Tailwind CSS. Yes. And this is asking me what do you like to use source directory? So I will say yes. And now this is asking me about the you want to use app router. So in this way, we are going to use a router. So I will say yes. And by default, just press enter enter whatever the default options. So now our next TS project is installing. So now our next TS project is installed. Now let's open our project in VS code. So for that I will write code dot. So this will open the VS code in that folder. Now let's open the tunnel with control J and right command NPM run. So now on the board 3000, my another project is running. So this will open on localhost 3001. So let's copy this and go to your browser and now search for localhost 3001. So currently we are getting the default styling and default pages from next TS. So let's remove the default styling and default pages for this. So we will go to the page file and remove all the code. For now we are just rendering a hello and after that we will go to the global dot CSS file and remove all the default CSS by the next TS. And we will also go to the tailwind config and remove all the default extends from there. Okay, that's it. Now let's come into the main page and style our main page. So for that we will use a class name and we will give this minimum height should be screen and width will be full and MX maximum width will be 7XL and after that padding X will be 4 and padding bottom will be 2 and padding top will be 8 and on MD we want padding X to be 8 and we also want MX auto. So after this when okay, let's give some background color for now so we can see some output. So for now I will just give bg red 400 and let's save now let's see the output. Now make it side by side. Now if I will zoom out so you can see that we are getting a this space because our max width is 7XL and we are also passing a max auto. So first of all we will give this main div and we will wrap up our main div with another div. There was a spelling mistake so that's why we are not getting into the center. Now this is getting into the center. So max width is 7XL so that's why we are getting this width and for now let's remove this background. Now let's see our output what we need to build. Firstly for all the components we will for the light mode and after that we will apply a dark mode. So in that page if you will see there so firstly there is a background of approximately 200 or 300 height we are getting some gray color and after that we have a white background. For apply this first of all we have to go to that file where we have downloaded that our where we have extracted our that file. So on that file we have got all the screenshot that what we need to build and there is all the reference images that we can use like they have given a Facebook, Instagram, Twitter and all the useful images that we will use on that project. But the main file for us that is style guide so we will copy that style guide and go to our project so this is and inside that source folder we will paste our style guide file and now come to our now come to your VS code and open this style guide. So if you will see there they have given all the colors that we are going to use in this project. So what we need to do we need to convert these colors into a form of variables so that we can easily access all over the project. So with the help of tailwind we can configure these colors into a tailwind config file so we will go to the tailwind config like that and now we need to configure our colors. So for that we want to extend our colors so we will write colors there and column and after that curly bracket and for this case we will give lime green and our color so we will copy this color from here and paste it there and when I will save this and go to there and for example I want to make this bg color this lime green so I will just write bg and hyphen so you can see that we got the solution for lime green and when I will save and go to the output for this so you can see that we are now we are getting the background green color with the help of this so what we need to do for all the colors we need to configure this in a tailwind config like that I have configured for red color so here I have configured all the colors as you can see there for lime green, red, facebook, youtube and all of that and whatever they have given exactly I have just converted these into that variable forms so that we can easily access in all over the applications and one thing that you have to notice if you want to create a color variant for gradient colors so you have to use a background image property in that tailwind so like I will go there and write background image and like that so I want to create a background image for this I will give name this like Instagram gradient and after that colon and we will convert this linear gradient to in that form so that this will work like as you can see that we are using a linear hyphen gradient and after that bracket we are defining the direction for that color so in that we are defining that to right so on the left side we will have this yellow color and after that we will have this pink color so like that we will also create a gradient color for this togul so here in that case I have given this name dark theme togul and like that linear hyphen gradient to right and like that I have just copied these colors and pasted in that place so now our color configuration is done so if you are confused with this so you can get the code reference from that I have given the link in my description okay so our color configuration is done now let's come into the main page so we will also open our tailbin config file below there so we can easily guess what color we want if you will see there for the light mode here they have given a background color of very pale blue top bg pattern I think so they are talking about this color so in the final output if you will see there this background color is fixed so we need to make this fixed so for that we will here create another div and give the class name and we will make it fixed left will be zero and top will be zero and after that we need to give minimum height should be a screen and after that width will be full bg white by default and on the dark mode if you will see there first of all we are creating a container for this background bg and this gray color inside that background bg we will create another layer of this gray color like gray bg there and after that all the proportion so suppose this will be 300 pixel and so by default whatever the left this will be the white color automatically white bg automatically so for that we are defining the parent background color inside that after that we will define the colors for this gray bg so like that in that case we have a background color of very bg very dark blue bg so I have configured this color in that tailwind config if you will see there on the dark mode we are getting this color very dark bg blue bg so what I have done I have just copied these colors and converted into that variable form so don't go for the color names so when you will see there currently we are on the dark mode so that's why our this background dark is applied currently my computer is in the dark mode so that's why this dark mode color is applied there so firstly we want to see for light mode so for that I will go to my control panel and search for theme and for now I will convert this into a light mode so after converting so you can see that our background color is white because by default we have given the white and on the dark mode we have given something black color and one thing that we have to also notice we have to make this Z minus 50 so this will be always the bottom layer from all the layers and after that we will create this section so for that we need to create another div so this will be auto close because inside that there is nothing and we just need to define the class names so in that case we will get the height of 250 pixel and rounded bottom will be 2xl and by default bg will be very pale blue bg pattern and on the dark mode background color will be bg dark blue like that and we are getting a background color green because here we have defined the background color green and in that case we have given the Z index 50 minus so that's why this container is above from that layer so that's why currently we are getting the background color green so you can see that we are getting this gray color there and inside that we will create another div will be auto close and height will be full so as you can see that this code is looks messy there so what we will do we will convert this into a component so for that we will create a function and now we will give this function name to a background and this will return all this code so we will just cut this from there and paste it there after that we will copy this name and simply paste it there so now for now our background component is done now let's create a header component so for that we will go to the source folder and create another folder name called components and inside that component we will create a header so we will give this header.tsx and after that here we will write tsrfc format structure for type script components and like that so we will give this tag name to a nav if we will see for the desktop side so you can see that on my left hand side there is a social media like heading type and on my right hand side a dark mode button so firstly i will divide this into two parts like heading and there is a dark mode button and first of all we will create a dark mode button on that time we can easily test for the dark mode and the light mode so let's firstly create the dark mode component so for that we will again go to our components folder and here we will create a component name google theme button and after that i will press enter and again just write tsrfc so this will create a sample format for our google theme button before that we need to install two packages for the conditional classes and for the merge classes first package name is clsx and second package name is tailwindmerge so first one is for conditional classes and second package is for so that we can easily merge tailwind classes without any conflicts so for that we will create another utility function that maybe you have heard previously that is called cn utility function so for that in my source folder i will again create another folder called utils and inside that i will create another file.cn.ts and first of all we will import clsx from clsx and after that we will import tw merge from tailwind merge and with the help of this we can create a cn utility function so for that we want to export that function so first of all we will use export function cn and after that this will end after that this will return a tw merge and this will accept the parameters of clsx and after that we need to copy the input inputs and this is the types of that input so i will copy that from there and paste it there and now we are getting the error so we will import this from clsx like that i have just pressed control space and after that i have just clicked on that and here we need to pass this parameter there so in the end what this cn function is doing so with the help of clsx we can pass the conditional classes and if accidentally we have passed some merge classes for example we have given a padding top firstly and after that we are again defining the padding top something like it so this will automatically resolve that issue whatever the value we will pass in the last that value will apply okay so after that we'll import our cn function there so for that like that we have imported our cn function so for the dark mode we will use next theme package so first of all i will install and after that i will explain you how we can use so for that i will just copy the npm code from there and paste it there and after that what we need to do we need to wrap up our component with their theme provider like that so in that case we are using app router and our main file is that layout file so we need to wrap up our layout with this theme provider so for that we will create another container for this so we will name this like theme container dot tss and after that we'll copy this theme provider from here and import it like that here in our theme container and we will create a component for this like that and we don't need this one and after that we have to create a theme component like that we are just writing their theme provider like there and inside there we are passing a children component and one thing that you have to remember that we must have to pass attribute equals to class there with the help of class whole thing will work and here we are defining the type of that children that is react dot react node and after that we will copy this component and go to our layout page and after that we will wrap up our layout with this theme provider and after that we will import this so currently we are getting an error because we are using something called create context and this create context will only work in use client component now we have to go to our theme container component and make it as a use client component so after that you can see that our error is gone now we have to create this button so that we can easily switch to the dark mode and light mode so for that just come into the toggle theme button and first of all we will import our toggle theme button in headers in header component like that and when i will see my output and one thing i forgot that we have to also import our header component in our main page so i will go to the main page and there will be our header component like that here and after that we will import it like that so now our header component is inside in the main page and inside that header component we have a toggle theme button so if i will save my code so you can see that first of all we are getting a toggle theme button okay so there is a spelling mistake so we need to correct it so if i will go to my main page so you can see that uh first we are importing the header component here and let's remove this header word from there so currently we are just getting a toggle theme button so let's create a toggle theme button so for that just come up into the toggle theme component and here we will convert this into a button tag and inside that when the user will click on that button so we will toggle that button so for that uh we will now we will use our next theme so if you will come on the next theme website so you can easily see here how we can change the dark mode and light mode with these themes so first of all we will import use themes in my toggle button component like that and after that we will uh we need to use something set on so when the user will click on that set theme button so we need to set it to like dark or light mode and in the place of theme we will use a resolved theme because theme will give us three options like dark mode light mode and system mode but here we just need directly a dark mode and light mode so this will give in the resolved form like dark mode and light mode so uh now we will create a conditional function and for that on click so when the user will click on that button so we will create a toggle theme function so when the user will click on that toggle theme button so we need to toggle that theme so for that we will write a condition like like if the resolved theme and now store this resolved theme into a theme variable so this will be easy to understand and after that here we will pass a condition like if the theme equals to equals to dark so we need to set theme to be a light when the theme is dark and the user will click on that button so this will convert into a light mode and like that i will i have just copied that above code and if the theme is light and user will click on that button so we will convert this into a dark mode and if we will see the output here so here we are getting the error because again we are using a create context and create context something and this will not work in server components so we need to define it again use client so if i will come on to the output and click on that dark theme button so as you can see that currently this is not working so for that one thing that we have forgot for the dark mode we must have to go to the tailwind config file and on that we have to add this dark mode and after that class so when i will save my code and again click on that dark mode button so you can see that this is switching to the dark mode and light mode theme now our task is to convert this normal text to make it this good looking button like that so for that let's come into that double theme button and here we will give some styling so here we will pass a class name and inside that class name we will use a cn utility function that we have previously created so with the help of this we can easily pass conditional classes so let's apply our classes by default we have a flex and height will be 5 width will be 10 and this is cursor pointer and items center rounded full and padding will be 1 and inside that we will have another day that is that is for our circle so inside that we have another class name here we will again use the conditional class so for that we will again use a cn function and inside that cn function we need to pass our classes so we will give this circle height to be 4 and width will be 4 and rounded will be full and bt will be white and transition alt and on the dark mode this background color will be very dark blue bg that color i am getting from that i have configured in the tailwind config and that's it so if you will see there so we are getting something but this is not proper style because for this main container we haven't defined the class name so let's come into there again and now we have to define our conditional classes so what is the condition if the theme and on the left hand side there will be our class classes and on the right hand side there is a condition if the theme equals to equals to light so we need to give this background to be light theme toggle and i am getting this light theme toggle color from the tailwind config if you will see there for the toggle button they have also given a background color of light theme toggle now let's again come to our toggle theme button and inside that on the light theme we have this background color and we will again do it for dark mode same so on the dark mode we will have a dark theme toggle color so if you will see there currently our color is changing perfectly but you can see there there is no but you can see there our button is not moving to the right hand side so for that we need to again give another condition there condition like this one so condition will be same so i am just copying this and our css will be changed so for the light mode what we need to do we need to use on the light mode there will be a translate x full and on the dark mode our translate x will be zero so if you will see there now everything is working fine here we are also getting this beautiful animation so we are getting this animation with the help of this transition all class so here now our dark mode button is completed so if you will see on the final output now we can easily create all the ui for the dark mode and light mode so now i'm converting my normal default system theme to the dark mode and come on to that application so everything is fine there okay so okay so let's close this file and now create our header component so in that header component we want extra props for this navbar called class name and this will be a type of string and this will be a conditional not mandatory and we need this class name property there so we can easily extend our classes and again here we will use a cn utility function and here we are passing our class names and and let's also import our cn function there so here we have imported and here first of all we will pass our all the default classes and this is this class is for like on my main page i can easily access this property of class name and pass extra classes from there so let's come to our header component and give the styling for that so in that we have a flex and width is full and by default on the mobile screen we have a flex call and justify between and gap will be three and transition all and on the dark mode text will be white and on the md we have a flex row and inside that we have a left heading so we will now create our left heading so inside that we have h2 and we have a paragraph heading 2 is our social media dashboard after that we have a paragraph of total followers and this total followers of 230004 so if you will see there this is looking something like that so we now we will apply the classes for this so for that in our parent component all this font will be a semi-bolt like that and after that in the heading we will have a heading of 2x cell and text will be a and text will be a very dark blue text and on the dark mode text will be a white and on the md text will be a px cell so i have applied this all of this property in the old day but we just need to give this all the css for this heading so now this will look like this and now we will apply the classes for our paragraph so this will be a text sm and text dark grayish blue text and after that we have a text and on the dark mode we have a text deserted blue text so currently this is on the dark mode so you can see that that's why we are getting this deserted blue color and on the light mode we are cutting this color so this is the final output and this is our that we are creating so for now our left side heading is completed now let's create a right section that is also called that is also called a dark mode section so in that we will create another div and on that div we have a flex and width will be full and items center justify between and gap will be four and on md width will be a auto and after that we have inside that we have a paragraph and what is the paragraph? paragraph is the paragraph is called dark mode so you can see that we got the dark mode text there and inside that we have a class name of pond semi bold text dark grayish blue and on the dark mode text deserted blue so that's it and this toggle button will be inside of that so finally this will look like this so if you will see our final output and this so now this is exactly like this so there is a spelling mistake so let's correct it so now this is exactly look like this and here one thing i will explain you you need to notice there by default i have given there width will be full so that's why we are getting a width like that and here we have given a flex and justify between so with the help of justify between we are getting our item in totally starting end in the last so so what i have done there on the md screen so when i will come on the medium screen so our width will be auto and here i will just introduce another package that is called tailwind screen debug so when you will search and go to that first link i will explain you what is the use of this so first of all let's install this package and so for that we'll just copy and paste our command like that and we need to go after that we need to go to our tailwind config file so i will go to the tailwind i will go to the tailwind config file and add our plugin like that and after that we need to again go to our main file like in that case we need to go to our body tag and conditionally we have to add this class that is called debug screens so let's see how we can conditionally add this debug class so for that we need to go to our layout page and inside that again we will use cn function because this will be our default class and conditionally what we need to render we need to render this class so we will use this curly bracket and what will be our class so our class name will be debug screens so here we will give condition with the help of env so i will show you how we can do that so we will write process.env and after that node environment and here we will check that if that node environment will be equals to our development then this will show otherwise this will not show so with the help of this we will get this in my left hand left bottom side we will get this screen so this will tell us currently on which screens we are on according to our tailwind css like currently we are on md so this is showing us md and like that lg but here we have added this condition so that this will only show us on our local development this will not show on a production so as you can see that this is our live link but this is not showing there so here we have fully completed our header component now we will create this social media section so for that firstly we need to create this card component and before that we should have to know about the data like this is icon and this is username and this is followers and this is today's data like followers up or down so for that we will again go to that file that we have downloaded from frontend vendor and when you will come on that file and open this index.html with the notepad so you will see that they have given all the formatted data like that so to make this process easier so we will copy this data and go to the chat gdp like what i have done there i will show you so i have just copied this data and just give that prompt to convert this into a js array of objects so now chat gdp converted this data into the form of this array form so that we can easily map through all the data but if you will see there we are not getting the icon property so what i have tell there after that in each object add this facebook icon and color property like blue so blue like means we will define that top water color like that so again chat gdp gave me the data like that and this is not the correct data in the final i have changed according to me so i will show you that data so to create our data in our app folder we will create a data.tsx file and inside that we will create our data like this data name will be followers so in that case we will give this name to followers and after that we will create all of our data like that like in the first property this is the social media name like currently this is the facebook and after that icon so this is the icon and username so this is the username and after that followers so this is the followers and after that today's followers, so this is today's followers and after that this is the color so this is the color so for the color here i have again created another object inside that i have I have defined the like facebook color, twitter color and youtube and instagram color like that and from that we are getting these colors like colors after that square bracket and if we want to use facebook colors so we will just simply pass a facebook like that twitter, instagram and youtube. And what about these icons? So for these icons we will use a react icons. So for that firstly we need to install our react icons so for that we will again go to the react icons website and copy this installation code and install our react icons like that. After your installation is done so here I have already searched for that icons. In that case you just simply go to that search option and search for facebook like that and click on that so this will copy the name of that icon and after that paste it like that and make it in the form of component and after that we need to import these icons from react icons. So we will import our react icons like import, put and enter that icon name and then to import it from react icon like that and after that we need to use ai. This is like a variable. This will be same react icons because we are importing from react icons and after that this ai and all of these will be changed to icon from where you are importing. Suppose in that case if you will see that this name is called bs book. So we simply need to put it that icon like that for example I have copied that and after that if you will see that this is writing the error because we are not noting it from right front or right module so we need to put there this like that so now this is created supported but now we don't need this like this. I have already created a separate video about the react icons how to use react icons you can check it out there I will give this video link on my description and let's continue with this so like that I have also imported the icon for icon for Twitter if you will see there but there is a one problem if I will search here Instagram so we will easily get this icon but the problem is that if you will see the final output so in that that Instagram has a gradient color. So I tried a lot to pass a gradient color on that but this is not worked so that's why so on that we have used a custom Instagram icon so what we have done again we need to go to that file where we have downloaded the starter files from there and inside that if you will see there there is a images folder there is a Instagram dot SVG file so this is the image but what we will do we will convert this into a component so again we need to open this in a notepad like that and we need to copy this all code after that we need to go to our code and inside that source folder we will create another folder like icons component and inside that we need to create Instagram icon so we will name this like Instagram dot PSX and again we will create a sample typescript format like that and inside that we will pass our all the SVG's like this and after that we need to make this bigger like this Instagram and we will give this Instagram icon name like that and after that one thing that you have to know about we will use react dot SVG props and after that what we will do we need all the props of SVG there so for example on click or class names like that so that's why we are passing the type of that prop of this SVG props and inside that SVG SVG element like that and after that we will use a spread operator for props like that so where we will use this component so we can easily access all the properties of that SVG props so that's why we have passed props like this react dot SVG props and one thing also you need to know I am removing our default from there and so this will export this will be a simply export function and Instagram icon and after that we will again come to our data and simply import it like that from that folder like that I have simply imported by ctrl space so this is this was giving me suggestions and after that I have just click on that and likewise again we will create it for YouTube icon so we need to again just go to there and create an icon for that YouTube so here I have just again done the same process and like that I have passed all the props there and again we will use there like that for the YouTube and Instagram we are using the their icons we can use all icons from their file but I want to show you how we can use react icons so that's why we have used on first two Facebook and Twitter icon and after that our data is complete now we need to create a type of that data so here I have created a type for this data and we will pass this type here like that and you can see that we are not getting errors and we need to use also export there so we can export this data and on this type I will explain you what is going on there so there is a social media name this will be a string type this is our icon and our icon will be a react dot react node type so this will be a component type so that's why we need to give this type like that after that for the colors we are passing a string and for the usernames we will use a string and for the followers and subscribers maybe we will get in the string form or the number so that's why we have passed this string and number both there with the help of this or operator in the type script this operator is a or operator and after that for the today's followers and subscribers we are passing a number type and you can see that on the last one we are in the place of followers we are passing a subscribers and today's subscribers so now our followers data is done and now we will create a follower component so for that again we need to go to the component folder and here we need to pass a follower card dot dsx because we are going to create a follower card component and after that we will map over the data so this will look like this so again we will use ds RFC so this will create a data like that and one thing that you have to remember like we need to give it props and after that here we need to give the type of the data of that data is user data because on that component we need all these possible props so that's why we are passing the type of that whole component this it means this component have this social media name and this icon and this border color followers and like that and now we will import our data from there like that i have just pressed control space so you can see that when i will hover over that so we are getting all the type here now we will start creating our data so let's do firstly we will use a class name and on that class name we will have a relative plaques and height will be 230 pixel and for the ease so that we can easily hand to hand see the output of that data we can import our follower card component into a page component because after the header we are getting this page section so for that we will create a section there and inside that section we will pass our follower card like that and after that we will import it so for now we are getting errors because we haven't passed the props there so if you will see there we are not getting nothing here let's come to your followers card component and make this and after the height we need to give plaques call justify around overflow hidden rounded bg light days blue card bg and on the dark mode bg dark deserted blue card bg and when i will save so we have got something if you will see there and we have to also pass a width there 260 pixel so now you can see that we are getting our card component something like this so first of all we will create our card component after that we will see what we need to do so first of all come on to the section page and for now let's give a margin top of for example five so this will give the gap from top and we will make our whole container later so now let's again come to our follower card component and compute this so if you will see there inside that we have this icon and username so first of all we will create this section so for that we'll create a section tag and inside that section tag we have a class name of flex width will be full and items center you justify center and gap will be two and inside that we have a div for icon and after that we have a paragraph and inside that we have a props dot icon like that and this icon will come from there like that we have defined there now we have to give a class name of for this so for this firstly we will use a style tag and inside that style tag we will give the color property and color will be props dot color the color we are getting from this data and inside that class name we need to make this text to be 3xl so text 3xl means on the icons we can increase height or width property with the help of text there so that's why we are using our text so if i will map the data on our page section so let's import our data so we need to use followers dot map and after that arrow function and after that we have to map our followers card like that and here firstly we need to pass a key and there we have a data and after that index so on the key we will pass index and for the data so i am pressing a control space so that's why we are getting these suggestions like colors and after that icons and after that social media name and after that username and after that followers and after that subscribers like that and after that we need to pass all these values like that so there will be a data dot color and like that i need to pass all the properties so now we have passed all the properties and data like there and now if we will again come to our followers card component so you can see that we are getting some unknown thing here so let's configure this so i have here passed icon and a username so for the username we are getting the correct and for the icon we are getting a color there so why this is happening so let's see so we will go to our data and this is correct followers and on the data everything is fine now let's check for the page and if you will see on the page we are passing the we are passing the colors there so on the place of colors we need to pass a icon there and boom you can see there now we are getting our icon properly there now let's give some space from our header section so for that we will use our class name there and here we will give this margin bottom 10 so after that we will style our set tag so this will look like a card and proper styling so for that we will give this margin bottom 12 flex flex prep justify center gap will be 4 transition all and on the asan justify between and on the md we need a gap y of 10 so we will give this 10 now you can see that our card component is now fully responsive and looking good there when i will come onto the mobile screen so you can see that this is aligning in a single column and looking good now let's again come to our card component and style so in our card component i have gave the flex spelling wrong so let's correct it so now you can see that with the help of flex we are getting these classes and this element is coming into the center now let's create this top bar so for that we will comment here top bar and we will use div that will be auto close and here we will give the class name and inside that this will be a absolute left zero top zero and height will be one and width will be full and one thing that we need to define their color so for the colors we will use a style tag and on the style tag we will pass a background and on the background we pass props dot color so we are passing our color background colors like that because tailwind does not accept our merged classes we got the top bar and this is working because with the help of this relative class because in our parent component this is our parent component and here we have defined a relative and this top bar is absolute and after that we are defining this position like left zero and top zero so with the help of this we are getting on the top and left hand side now let's create this followers section so let's minimize and here we had icon and user name and so we will put this outside of that section so this will also work so we have a put it outside because this is a separate section and when i will see there so you can see that this is also perfectly working fine and now we will create this out this section so we will put this comment outside of that and in that we will comment we need a followers and here we will create another section inside that class name and this will be your flags, flags call, items center and inside that we have a paragraph tag and this will be a class name of text 6xl and font will be a bold and text very dark blue vg and on the dark mode we have a text white and on the dark mode we have a text white and after that we have a followers so for now i'm just writing followers like that so here when you will see the output so this is our output but we will configure our followers here so i will explain you what we will do so for that here we will create another variable called followers and we don't need this data and inside that we will pass a condition like props.followers or props.subscribers so this will store one data at a time either followers or either subscribers so that's why i have created another variable so we can just simply copy this and paste it there also this will also work fine but this will make our code messy so that's why i have done like that and now we don't need this sample data so you can see that now we got all our followers and now we need to create this section so for this section they will create another paragraph tag and inside that text will be extra small and we need a tracking and we need to give a custom tracking so tracking means this will give a space wordy spaces so here we need to give a custom tracking like five pixel and text will be a dark text grayish blue and after that on the dark mode text will be deserted blue text and after that if you will see on the final output here we are getting a followers followers followers but here we are getting a subscribers so what we need to do we need to render this conditionally like if the subscribers are true so we need to show our subscribers and if subscribers are not true so we will show our followers so for that we will use props.subscribers and question mark so if this will true so we will pass subscribers otherwise we will pass our followers like that and when i will save my code and see the final output you can see there we are getting subscribers there and on the above three we are getting followers and now we need to create this section so for that we will create another section called it today data and inside that here we are getting a text green and on the minus here we are getting a text red so that's why we need a cm utility function there and on that firstly we will pass a default classes so for that firstly we need to pass a flex and text will be a sm items center justify center gap will be one and font semi bold and inside that we have this icon so we will get this icon from react icons so we will simply search here for down so easily we will get this icon so i have just copied this icon name there and after that we will just simply paste it like there and after that we will import it icon from react icons like import this icon from react icons after that slash ai so we got our icon there as you can see there and after that we'll use a span tag and on that span tag firstly we will have a value of followers so for now i am just passing like 30 and after that we will use again span tag and on that span tag we will pass today so if you will see the final output so we are getting like this and we will compare it to this so there is a today and after that firstly we will have this icon and after that number and today so like that we have created but we need to give that green color and for the minus values we need to give a red color so for that we will configure our today's followers like that we have done for followers so here we will name this today followers and inside that we will pass condition like this if the props.socialmedia name equals to equals to youtube then store the today's subscribers on that variable and if this will be a false then store today's followers and if the both values are not true so store zero and after that we will pass this today's followers there like that so here if you will see there we are getting this value in minus so for that we will use another method that is called math.apps and inside that we will pass this today's followers so this will give the exact value not in the form of minus so when i will save so you can see that our minus is gone from there but for this red color we will pass this conditionally uh like we will pass the condition if the today's followers is greater than or equals to zero so we will pass this text line green and otherwise uh we will pass text right red so now if you will see there we are getting the green for positive values and for the negative we are getting a red color but here one thing is missing if you will see there this should be up and this should be down i am talking about this arrow so here we will use a conditional class again so for that we will pass our class name here we will again use a cn utility function there and inside that by default we have a transition all class name and after that conditionally here first of all we need to pass a class name and on my right hand side we need to pass a condition so for that you will use if the greater than or equals to zero so we will rotate and here is a spelling mistake of class name so let's correct it and here you can see that we have used a rotate 180 so this will rotate our icon 180 degree and by default for the minus we are getting this down and if the value is positive so we are rotating this so now you can see that our followers section is done and when i will open this in computer mode so you can see that this is fully responsive and when i will open this on a dark mode so this will look like this now let's create this overview today's section so this section is much easier as compared to this followers section so we will most of the styles we will copy from there so let's see how we can do that so now let's come to the main page and for this we will create another section so in that section so firstly we have a heading we will use a h2 tag and inside that we will pass a class name margin bottom text will be a center and text to excel and font semi bold and text dark grayish blue text and on the dark mode text white and this will be a on sm screens text will be a start start means as you can see that currently our text is in the center and when i will move into the desktop or sm screens so we are getting our text in the left hand side so this is in the start and now we will pass our heading that is overview today and here you can see that we got our heading there and now we will create a container for this overview section so we need a same container for that so what we will do we will convert this into a component called container so for that we will go to our component folder and here we will create a container dot t s x and again we will use tsrfc and on that container firstly we need a children and children will be react dot pfload type and after that we have a class name and this will be a string type and class name will be a optional prop so here we will pass simply props there and we will pass here props dot children and after that we will copy all the classes from there like that and paste it there and here we will again use a cn utility function and like that paste our default classes and after that here we will pass a props dot class name so that if we want to pass extra classes so we can easily pass from that component and we will export this component normally i have also created a separate video and what is the export function and what is the default export function i will give that video link in my description so you can watch it later and after that we will copy that container name and come to our main page and replace our section with this container like that and now we need to import like that and when you will see the output so everything is fine there so for our overview today's section we need this container so we will just copy that container and paste it like that and for now there is nothing so we will just pass like that now we need to create a component of overview card so again for the overview for that overview section so again we will go to that file and we need to again open that index dot html with dot pad and if you will see there so if you will see there so they have given all the data for the overview data so what i have done i have just again copied that data and paste into the zgdp and create a sample data so for now i have just copied my overview data from my previous project and you just have to do it same for like what you have done for followers you need to just go to the zgdp and paste that sample data from that file and tell that prompt to convert this into an array of objects and here i have replaced my icons like that like i have passed previously here for the followers data so if you will see there i am passing the icons for the facebook instagram and twitter and youtube like that and i am just simply passing the values like so this type will be a like count and this is the percentage and after that we have icons there so now again here we have also created a type for our data like that so this type will be a string type and count will be a sometimes this will be a number like this is the number and this is the string in our data so if you will see there so we are getting our count in the string form and our icon is as usual react dot react node type now let's create a overview card component so for that we will again go to our card component and here we will give this name to our view card dot esx and after that we will again use our format code and here we will create our overview card component so this is the a card and we need to also and we also need to rename our file like that and let's create a component so if you will see this overview card component so this is exactly like our follower card component so we will copy the css from there and update some styling from our site like that if i will save my code and see the output okay so first of all we need to import our card component in our main page so we will import our card component like that now you can see that we are getting our card component here and if you will see the final output width is same exactly like above but we need to change the height so again we will come there and change this height to 138 pixel and now we will remove this overview card from there and let's create another section so if you will see there we need to create two sections first one will contain this paragraph first one will contain this title and image after that we need to create another section and on that section we have a count and percentage so let's create a section tag and inside that section tag we have a paragraph here we have another div this will contain icon so for that we will give the icon size to 3xl and now again we have to pass this type to be so we need to pass props here and the type for this prop will be this overview data type so we just need to copy the type from there and come to there and pass the type here and after that import that type like that and now we don't need this and now we have to also map our data so we will again import our overview data here and we will pass map and after that arrow function and inside that we will use data and index and firstly let's pass a key so key will be i and after that we need to pass our data so this is the overview card firstly let's change the name of this component let's copy this name and also rename the file from there and if you will see there this overview card have all the props of this overview type so in the overview type we have a type count percentage and icon so we will go to our page and here i will show you the another trick so that we can't have to pass all the props like that and here we have done something wrong so let's check our data and on our data this is our overview data and let's import it again so yeah so now we have imported our data from our data now let's also change this name this is the card now so now if you will see there we are not getting any errors there and here i have used our spread operators so with the help of this spread operator we are spreading all the props here easily and like that we can also do this with this but we just need a key so we will for now just comment it out and here we will use again this so if you will see the final output so we are getting some error okay our data file was not saved so that's why we are getting that error so now you can see that everything is fine here i have just passed my data like that like key and after that i'm just using a spread operator so here on the overview card i have just used the same so now you can see that our overview card is mapping there but there is no data so let's come into the overview card and create it all so now here we are creating our this first section so on that first section firstly here we have a props.type so we got the type and after that we have a props.icon so we also got the icon so let's style this so for that we will use flex justify between gap will be two so this will look like this and here one thing we have to also use that is called padding gate so now this will look like this and now our first section is done now let's create a second section like and so on that section firstly we have this paragraph and after that we have an icon and percentage so let's come into the code and firstly let's create for this count so here we will pass props.count and let's style this so this will be exactly like this so here we will pass this styling and after that we need to give the style for this count so we will use text will be a 3xl font will be a bold and text will be a very dark blue bg and after that on the dark mode we have a text of white so this is done and after that we will create another paragraph tag and inside that paragraph we have a we have icon and this percentage so if you will see that for our card so on that we are using a same logic so we will just copy the same code from that our card component so here we will come and just copy this section and now we will go to our card and paste it like that and let's remove also the paragraph from there and import our icon from react icons also import our utility function and in the place of followers we have a percentage so we will just again come to our card and here we will use props.percentage so now our error is gone and like that we will also use this here and there and we don't need this paragraph so now we are getting the error so let's see why we are getting the error okay i think this section is two times okay now our error is gone so if you will see there now we are getting our this drop down icon and percentage like that so on the place of today we just need to add a percentage like that so this is our final output and this is on the on pair we are working and now we have to update our overview card container style like that so firstly we need to pass a padding code and after that gap will be 2 and in the place of justify around we will use a justify between so now our project is fully completed so if we will see there so you can see that we are getting our beautiful dashboard and there you have it your own very social media dashboard build with next year's typescript and tailwind CSS i hope you found this tutorial helpful if you enjoyed that video don't forget to like share and subscribe for more exciting tutorials the project repository and live demo link are in the description thanks for watching and happy coding
