")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"

")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Random "),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"User"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Generator")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," App")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"

")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"

")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Instantly generate a random user data")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"

")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"

")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"It will create two headings for you with the text \u201CRandom User Generator App\u201D and \u201CInstantly generate a random user data\u201D. You can change it to anything you prefer."),mdx("h3",a({},{id:"-step-2"}),mdx("a",a({parentName:"h3"},{href:"#-step-2"}),"\u2192 STEP #2")),mdx("p",null,"Now let\u2019s create a generate button. The user will be able to use the search button to get the fake user data."),mdx("p",null,"For this, copy the following code and paste it in ",mdx("inlineCode",{parentName:"p"},"pages/index.js"),":"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col items-center relative min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"font-raleway font-bold text-center text-6xl text-primary pt-20 pb-6 md:text-3xl"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Random "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-secondary"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"User"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Generator")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," App")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h3 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Instantly generate a random user data")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex justify-center items-center w-full"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"outline-none border border-danger text-primary font-bold font-raleway ml-4 w-52 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Generate")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"This code is going to create an input field and button. I have also styled them a little bit using ",mdx("a",a({parentName:"p"},{href:"https://tailwindcss.com/"}),"TailwindCSS"),"."),mdx("h3",a({},{id:"-step-3"}),mdx("a",a({parentName:"h3"},{href:"#-step-3"}),"\u2192 STEP #3")),mdx("p",null,"Let\u2019s create some states to store the fake user information we will receive from the API. For this, copy-paste the following code in ",mdx("inlineCode",{parentName:"p"},"pages/index.js"),"."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setUserData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"results"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"0"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]);")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col items-center relative min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"font-raleway font-bold text-center text-6xl text-primary pt-20 pb-6 md:text-3xl"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Random "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-secondary"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"User"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Generator")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," App")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h3 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Instantly generate a random user data")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex justify-center items-center w-full"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"outline-none border border-danger text-primary font-bold font-raleway ml-4 w-52 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Generate")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("h3",a({},{id:"-step-4"}),mdx("a",a({parentName:"h3"},{href:"#-step-4"}),"\u2192 STEP #4")),mdx("p",null,"Let\u2019s integrate the API now. For this, first, create a ",mdx("inlineCode",{parentName:"p"},".env.local")," file and paste the following in it:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY"))))),mdx("p",null,"You need to replace ",mdx("inlineCode",{parentName:"p"},"YOUR-RAPIDAPI-KEY")," here with the API key you got when you subscribed to the ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/Alejandro99aru/api/random-user"}),"Random User API"),". It is the value of ",mdx("inlineCode",{parentName:"p"},"x-rapidapi-key")," that you saved earlier."),mdx("p",null,"Now download and add ",mdx("inlineCode",{parentName:"p"},"axios")," to your project. For this, run the following command in the terminal:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"npm install axios"))))),mdx("p",null,"Now import ",mdx("inlineCode",{parentName:"p"},"axios")," at the top of the ",mdx("inlineCode",{parentName:"p"},"pages/index.js"),"."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"js"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"))))),mdx("h3",a({},{id:"-step-5"}),mdx("a",a({parentName:"h3"},{href:"#-step-5"}),"\u2192 STEP #5")),mdx("p",null,"RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the ",mdx("inlineCode",{parentName:"p"},"(JavaScript) Axios")," one."),mdx("img",a({},{src:"https://devrelstack.kinsta.cloud/wp-content/uploads/2022/05/code-snippet-24.png",alt:"Fetching data using (JavaScript) Axios"})),mdx("p",null,"Now create a file with the name ",mdx("inlineCode",{parentName:"p"},"user.js")," inside the ",mdx("inlineCode",{parentName:"p"},"pages/api")," directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"http://localhost:3000/api/user"))))),mdx("p",null,"Now copy the following code in this file:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"js"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FB94FF"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"handler"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"req"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"if"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"req"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"method"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"==="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"GET"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," options "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"method"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"GET"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"https://random-user.p.rapidapi.com/getuser"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"headers"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"x-rapidapi-host"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"random-user.p.rapidapi.com"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"x-rapidapi-key"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," process"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"env"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"NEXT_PUBLIC_RAPIDAPI_KEY")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"request"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"options"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"then"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FB94FF"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"status"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"200"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"json"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"})")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"catch"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FB94FF"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"status"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"404"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"json"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," console"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"});")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"else"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"status"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"400"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"This code makes an API call to the ",mdx("a",a({parentName:"p"},{href:"https://rapidapi.com/Alejandro99aru/api/random-user"}),"Random User API")," on the server and returns the results to the user. It executes when the user makes an API call to the ",mdx("inlineCode",{parentName:"p"},"user")," endpoint I mentioned above."),mdx("p",null,"Once you are done, copy the following code in the ",mdx("inlineCode",{parentName:"p"},"pages/index.js")," file:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"react"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," Image "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"next/image"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setUserData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"results"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"0"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]);")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"btnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setBtnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Generate"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"/**")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}})," *")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}})," *")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}})," * Generate more user data")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}})," */")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"generateData"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"async"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"try"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setBtnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Generating..."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"await"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"get"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"/api/user"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setUserData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"results"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"0"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]);")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"catch"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," console"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"log"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setBtnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Generate"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col items-center relative min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"font-raleway font-bold text-center text-6xl text-primary pt-20 pb-6 md:text-3xl"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Random "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-secondary"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"User"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Generator")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," App")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h3 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Instantly generate a random user data")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex justify-center items-center w-full"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"outline-none border border-danger text-primary font-bold font-raleway ml-4 w-52 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onClick"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"generateData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"btnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex justify-center mt-12 w-3/6 h-4/5 md:w-4/6 md:h-full md:mb-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-2 border-primary"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"Image")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"src"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"picture"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"large"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"width"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"256"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"height"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"256"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col text-primary text-sm text-raleway mt-12 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"table "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"bg-white w-full text-primary mb-8 md:text-sm md:mx-2"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tbody "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-primary font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Name")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"name"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"first"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"name"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"last"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Gender")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"gender"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Date of Birth")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"dob"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"date"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Age")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"dob"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"age"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Street")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#3AD900"}}),"`"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"${"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"location"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"street"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"number"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#3AD900"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"${"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"location"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"street"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"name"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#3AD900"}}),"`"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," City")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"location"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"city"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," State")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"location"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"state"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Country")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"location"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"country"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Nationality")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"nat"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Post code")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"location"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"postcode"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Email")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"email"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Phone")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"phone"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Cell")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"cell"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Username")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"login"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"username"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Password")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"login"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"password"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"tr"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Image URL")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"th "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary text-left px-4 py-4 font-normal"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"a "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"href"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"picture"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"large"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"userData"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"picture"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"large"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col mt-10 justify-end h-36"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"p "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"block mb-10 text-center text-secondary text-xs"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Made by RapidAPI DevRel Team -"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"a")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"hover:text-lightGrey"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"href"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"https://github.com/RapidAPI/DevRel-Examples-External"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," See more examples like this")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"async"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"getServerSideProps"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"await"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"get"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"http://localhost:3000/api/user"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"if"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"!"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," notFound"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," props"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," value")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"I am using the Next.js ",mdx("inlineCode",{parentName:"p"},"getServerSideProps")," function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use getStaticProps instead of getServerSideProps, and the application will then fetch the data at build time."),mdx("p",null,"After that, I created a table to render the fake user data on the screen. I am also using the Next.js ",mdx("a",a({parentName:"p"},{href:"https://nextjs.org/docs/api-reference/next/image"}),"Image")," component to render the user image."),mdx("h2",a({},{id:"wrap-up"}),mdx("a",a({parentName:"h2"},{href:"#wrap-up"}),"Wrap Up")),mdx("p",null,"That\u2019s it. We have successfully built a ",mdx("a",a({parentName:"p"},{href:"https://rapidapi-example-random-user-generator-app.vercel.app/"}),"Random User Generator App")," using ",mdx("a",a({parentName:"p"},{href:"https://rapidapi.com/Alejandro99aru/api/random-user"}),"Random User API"),". You can find the source code ",mdx("a",a({parentName:"p"},{href:"https://github.com/RapidAPI/DevRel-Examples-External/tree/main/random-user-generator-app"}),"here")," of this web app."),mdx("p",null,"In the end, it will look something like this:"),mdx("img",a({},{src:"https://devrelstack.kinsta.cloud/wp-content/uploads/2022/05/cover-24.png",alt:"Random User Generator App built with Next.js and Random User API"})))}MDXContent.isMDXComponent=!0;

types

What are the Different Types of APIs?

APIs are the backbone of software applications today. They connect applications of diverse architectures and help them communicate in order to perform CRUD operations. Let's take a look at the different types of APIs.