var d=Object.defineProperty,c=Object.defineProperties;var m=Object.getOwnPropertyDescriptors;var F=Object.getOwnPropertySymbols;var t=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var o=(e,n,s)=>n in e?d(e,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[n]=s,a=(e,n)=>{for(var s in n||(n={}))t.call(n,s)&&o(e,s,n[s]);if(F)for(var s of F(n))l.call(n,s)&&o(e,s,n[s]);return e},r=(e,n)=>c(e,m(n));var i=(e,n)=>{var s={};for(var p in e)t.call(e,p)&&n.indexOf(p)<0&&(s[p]=e[p]);if(e!=null&&F)for(var p of F(e))n.indexOf(p)<0&&l.call(e,p)&&(s[p]=e[p]);return s};const makeShortcode=e=>function(s){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",a({},s))},Callout=makeShortcode("Callout"),layoutProps={},MDXLayout="wrapper";function MDXContent(s){var p=s,{components:e}=p,n=i(p,["components"]);return mdx(MDXLayout,r(a(a({},layoutProps),n),{components:e,mdxType:"MDXLayout"}),mdx("p",null,mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/hub"}),"RapidAPI Hub")," lets you choose from thousands of these public APIs which over 3 million developers are using. You can explore thousands of them on RapidAPI Hub and select the best one for your next project."),mdx("p",null,"Today, we will be building a web application that will allow users to search for food recipes quickly and conveniently. We have APIs that provide recipes from all over the world, so let's build the app using one of them."),mdx("h2",a({},{id:"stack"}),mdx("a",a({parentName:"h2"},{href:"#stack"}),"Stack")),mdx("p",null,"The stack for our app is going to be as follows. I am going to use ",mdx("a",a({parentName:"p"},{href:"https://nextjs.org/"}),"Next.js")," for the client-side of our app and ",mdx("a",a({parentName:"p"},{href:"https://tailwindcss.com/"}),"TailwindCSS")," for styling it."),mdx("p",null,"Even if you don\u2019t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process."),mdx("h2",a({},{id:"choosing-the-api"}),mdx("a",a({parentName:"h2"},{href:"#choosing-the-api"}),"Choosing The API")),mdx("p",null,"Let\u2019s find the API first. Go to ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/hub"}),"RapidAPI Hub")," and ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/auth/sign-up?referral=/hub"}),"create an account"),' if you haven\u2019t already. Then, search for "Food Recipe" in the search section.'),mdx(Callout,{title:"Deep dive",linkText:"Read more",linkHref:"https://rapidapi.com/learn/hub",mdxType:"Callout"},"Learn more about how to use RapidAPI Hub as a developer."),mdx("p",null,"You will see that we have a lot of APIs to choose from. For our app, I will use the ",mdx("a",a({parentName:"p"},{href:"https://rapidapi.com/spoonacular/api/recipe-food-nutrition/"}),"Spoonacular API"),", which is the most popular food API."),mdx("p",null,"To use this API, you need to subscribe to it first. You can do this by clicking on the ",mdx("strong",{parentName:"p"},"Subscribe to Test")," button."),mdx("img",a({},{src:"https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-recipe-app/images/subscribe.png",alt:"Subscribe to Spoonacular API"})),mdx("p",null,"Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. We are going to subscribe to the free plan for this guide."),mdx("p",null,"Once subscribed, you will be back on the ",mdx("strong",{parentName:"p"},"Endpoints")," page. In the central section, you should see a field named ",mdx("inlineCode",{parentName:"p"},"x-rapidapi-key"),". Save its value. We will need it later to call the API."),mdx("h2",a({},{id:"building-the-ui"}),mdx("a",a({parentName:"h2"},{href:"#building-the-ui"}),"Building The UI")),mdx("p",null,"We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your 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"}}),"npx create-next-app -e with-tailwindcss recipe-app"))))),mdx("p",null,"It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name ",mdx("inlineCode",{parentName:"p"},"recipe-app")," has been created. Open this folder in your preferred code editor."),mdx("h3",a({},{id:"project-files"}),mdx("a",a({parentName:"h3"},{href:"#project-files"}),"Project Files")),mdx("p",null,"In our project folder, we will have the following folders and files. I will briefly break them down for you:"),mdx("ul",null,mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"pages")," directory: It has the ",mdx("inlineCode",{parentName:"li"},"index.js")," file, which is the entry point of our app, basically the home page. It also has",mdx("inlineCode",{parentName:"li"},"_app.js")," and another directory named ",mdx("inlineCode",{parentName:"li"},"api"),", where we will store the requests to our API."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"public")," directory: It holds assets. You can place your static files here to load later in the application."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"package.json"),": This file contains the metadata of your project."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"package-lock.json"),": This file is responsible for tracking the exact version of every installed package."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"postcss.config.js"),": This file contains ",mdx("a",a({parentName:"li"},{href:"https://github.com/postcss/postcss"}),"PostCSS")," configurations."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"tailwind.config.js"),": It contains ",mdx("a",a({parentName:"li"},{href:"https://tailwindcss.com/"}),"TailwindCSS")," configurations."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"readme.md"),": It\u2019s a markdown file for documentation.")),mdx("p",null,"I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open ",mdx("a",a({parentName:"p"},{href:"https://github.com/RapidAPI/DevRel-Examples-External/blob/main/recipe-app/tailwind.config.js"}),"this")," file, and copy all of its content, then paste it inside the ",mdx("inlineCode",{parentName:"p"},"tailwind.config.js")," file in your project. These are Tailwind configurations for the colors and fonts I will be using."),mdx("p",null,"Our initial UI should look like this."),mdx("img",a({},{src:"https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-recipe-app/images/preview.png",alt:"Initial UI of our App"})),mdx("p",null,"With all that set, it's time to code the app. Let's jump right into it."),mdx("h3",a({},{id:"-step-1"}),mdx("a",a({parentName:"h3"},{href:"#-step-1"}),"\u2192 STEP #1")),mdx("p",null,"Open the ",mdx("inlineCode",{parentName:"p"},"pages/index.js")," file and remove all the existing code. Let's add the layout."),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 md:px-12 px-0 relative bg-background font-raleway items-center 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"}}),"h1 "),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-6xl font-bold text-active mt-20"),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"}})," Recipe Search")),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"}}),"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"}}),"text-primary text-2xl font-light mt-5"),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"}})," Search recipes from all over the world.")),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,"I added the following to ",mdx("inlineCode",{parentName:"p"},"pages/_app.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"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," Head "),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/head"),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"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"tailwindcss/tailwind.css"),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"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"MyApp"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"Component"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," pageProps"),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"}}),"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("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"}}),"Head"),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"}}),"title"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"RapidAPI - Recipe App"),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"}}),"link "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"rel"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"icon"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),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"}}),"/favicon.ico"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),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"}}),"link")),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://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800"),mdx("span",a({parentName:"div"},{style:{color:"#EC3A37F5"}}),"&"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"display=swap"),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"}}),"rel"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"stylesheet"),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("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"Component "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"..."),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"pageProps"),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:"#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"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," MyApp"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"))))),mdx("h3",a({},{id:"-step-2"}),mdx("a",a({parentName:"h3"},{href:"#-step-2"}),"\u2192 STEP #2")),mdx("p",null,`As you can see in the UI preview, we require an input form to submit the recipe query/keyword such as "cheeseburger". We also need two more input fields for diet type and excluded ingredients. A search button will follow the inputs. Let's add all these.`),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("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 md:px-12 px-0 relative bg-background font-raleway items-center 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"}}),"h1 "),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-6xl font-bold text-active mt-20"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Recipe Search"),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"}}),"text-primary text-2xl font-light mt-5"),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"}})," Search recipes from all over the world.")),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"}}),"form")),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"}}),"sm:mx-auto mt-20 md:max-w-4xl justify-center flex flex-col sm:w-full sm:flex"),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"}}),"onSubmit"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),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"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"preventDefault"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"stopPropagation"),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("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"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),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"),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"}}),"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 w-full rounded-lg px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"),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"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Enter a recipe"),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("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"}}),"mt-5 flex sm:flex-row flex-col justify-start"),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"}}),"sm:w-1/3 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"}}),"label "),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 text-primary text-sm"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Diet"),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"}}),"select")),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"}}),"mt-1 flex w-full rounded-lg px-5 py-3 text-base text-background font-bold focus:outline-none"),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:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"none"),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"}}),"pescetarian"),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"}}),"lacto vegetarian"),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"}}),"ovo vegetarian"),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"}}),"vegan"),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"}}),"vegetarian"),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("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"map"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),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"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"option "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}>{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),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("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"}}),"sm:ml-10 sm:w-1/3 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"}}),"label "),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 text-primary text-sm"),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"}})," Exclude Ingredients")),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"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),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"),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"}}),"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"}}),"mt-1 w-full rounded-lg px-5 py-3 text-base text-background font-bold focus:outline-none"),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"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"cocunut"),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("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"}}),"mt-5 w-full rounded-lg px-5 py-3 bg-active text-base text-primary font-bold hover:text-active hover:bg-primary transition-colors duration-300 sm:px-10"),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"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"submit"),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"}})," Search")),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("p",null,"This code will create the input fields and search button. I have also styled and made them responsive using ",mdx("a",a({parentName:"p"},{href:"(https://tailwindcss.com/)"}),"TailwindCSS"),"."),mdx("p",null,"Now, we need to store the user input in the input field. We can do it using React ",mdx("inlineCode",{parentName:"p"},"useState")," hook. We will use a bunch of states for our app, let's add them. Check the comments to see the purpose of each state."),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("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("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"}}),"keyword"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setKeyword"),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:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Stores the input recipe name")),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"}}),"diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setDiet"),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:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Stores the diet type`")),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"}}),"exclude"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setExclude"),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:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Stores the excluded ingredients")),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"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setResponse"),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:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Stores the response from the API")),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 md:px-12 px-0 relative bg-background font-raleway items-center 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"}}),"h1 "),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-6xl font-bold text-active mt-20"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Recipe Search"),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"}}),"text-primary text-2xl font-light mt-5"),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"}})," Search recipes from all over the world.")),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"}}),"form")),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"}}),"sm:mx-auto mt-20 md:max-w-4xl justify-center flex flex-col sm:w-full sm:flex"),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"}}),"onSubmit"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),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"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"preventDefault"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"stopPropagation"),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("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"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),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"),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"}}),"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 w-full rounded-lg px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"),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"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Enter a recipe"),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"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),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:"#FAD000"}}),"setKeyword"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),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"}}),"setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Removes previous response when user types a new recipe")),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:"#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"}}),"mt-5 flex sm:flex-row flex-col justify-start"),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"}}),"sm:w-1/3 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"}}),"label "),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 text-primary text-sm"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Diet"),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"}}),"select")),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"}}),"mt-1 flex w-full rounded-lg px-5 py-3 text-base text-background font-bold focus:outline-none"),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"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),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:"#FAD000"}}),"setDiet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),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("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"}}),"none"),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"}}),"pescetarian"),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"}}),"lacto vegetarian"),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"}}),"ovo vegetarian"),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"}}),"vegan"),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"}}),"vegetarian"),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("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"map"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),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"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"option "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}>{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),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("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"}}),"sm:ml-10 sm:w-1/3 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"}}),"label "),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 text-primary text-sm"),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"}})," Exclude Ingredients")),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"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),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"),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"}}),"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"}}),"mt-1 w-full rounded-lg px-5 py-3 text-base text-background font-bold focus:outline-none"),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"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"cocunut"),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"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),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:"#FAD000"}}),"setExclude"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),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("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("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"}}),"mt-5 w-full rounded-lg px-5 py-3 bg-active text-base text-primary font-bold hover:text-active hover:bg-primary transition-colors duration-300 sm:px-10"),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"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"submit"),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"}})," Search")),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("p",null,"We use the ",mdx("inlineCode",{parentName:"p"},"onChange")," handlers on the input fields to store their values(",mdx("inlineCode",{parentName:"p"},"e.target.value"),") in our states."),mdx("h3",a({},{id:"-step-3"}),mdx("a",a({parentName:"h3"},{href:"#-step-3"}),"\u2192 STEP #3")),mdx("p",null,"Let\u2019s integrate the API now. For this, first, create a ",mdx("inlineCode",{parentName:"p"},".env.local")," file in the root directory of your project and paste the following into 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,"Remember the ",mdx("inlineCode",{parentName:"p"},"x-rapidapi-key")," I asked you to save earlier? You need to replace ",mdx("inlineCode",{parentName:"p"},"YOUR-RAPIDAPI-KEY")," with its value. You get the key after subscribing to the ",mdx("a",a({parentName:"p"},{href:"https://rapidapi.com/spoonacular/api/recipe-food-nutrition/"}),"Spoonacular API"),"."),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,"And import ",mdx("inlineCode",{parentName:"p"},"axios")," 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"}}),"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("p",null,"The API provides a vast number of usable endpoints which you can use in your app. The endpoints are divided into Compute, Extract, Search, Data, and Chat categories, and there are over 25 endpoints in the Search category alone. You can see these endpoints on the left pane in the image below. We will use the ",mdx("inlineCode",{parentName:"p"},"Search Recipes")," endpoint, which allows us to look up recipes using natural language."),mdx("img",a({},{src:"https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-recipe-app/images/code-snippet.png",alt:"API Endpoints and (JavaScript) Axios Snippet"})),mdx("p",null,"For easy integration, ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/hub"}),"RapidAPI Hub")," automatically generates snippets in multiple languages and options. We are going to copy the ",mdx("inlineCode",{parentName:"p"},"(JavaScript) Axios")," ones, as you can see above."),mdx("p",null,"Let's set up the API call now. In the ",mdx("inlineCode",{parentName:"p"},"pages/api")," directory, create a file named ",mdx("inlineCode",{parentName:"p"},"search.js")," and use the code snippet as follows:"),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:"#B362FF"}}),"// In pages/api/search.js:")),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"}}),"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"}}),"handler"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"("),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:"#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"}})," 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"}})," 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"}})," 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://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/recipes/search"),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"}})," params"),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"}})," query"),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:"#FFEE80"}}),"query"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"keyword"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," diet"),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:"#FFEE80"}}),"query"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," excludeIngredients"),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:"#FFEE80"}}),"query"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"exclude"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," number"),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"}}),"20"),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"}})," offset"),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"}}),"0"),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:"#9EFFFF"}})," 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("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"}}),"spoonacular-recipe-food-nutrition-v1.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"}})," 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"}})," "),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:"#FF9D00"}}),"let"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," response "),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"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"axios"),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"}})," 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("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"}}),"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("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"response"),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,"We have specified the parameters ",mdx("inlineCode",{parentName:"p"},"req.query.keyword"),", ",mdx("inlineCode",{parentName:"p"},"req.query.diet")," and ",mdx("inlineCode",{parentName:"p"},"req.query.exclude"),". ",mdx("inlineCode",{parentName:"p"},"req.query")," is an object in Next.js that holds the input parameters coming from our client-side."),mdx("h3",a({},{id:"-step-4"}),mdx("a",a({parentName:"h3"},{href:"#-step-4"}),"\u2192 STEP #4")),mdx("p",null,"Now we need to create a function ",mdx("inlineCode",{parentName:"p"},"getRecipes")," in the ",mdx("inlineCode",{parentName:"p"},"pages/index.js")," file to send a request to our API at ",mdx("inlineCode",{parentName:"p"},"http://localhost:3000/api/search"),"."),mdx("p",null,"The search button will trigger this function, which will make a GET request to our API. Let's make these changes to the index 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"}})," 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:"#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"}}),"keyword"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setKeyword"),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:"#FF628C"}}),"null"),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"}}),"diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setDiet"),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:"#FF628C"}}),"null"),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"}}),"exclude"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setExclude"),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:"#FF628C"}}),"null"),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"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setResponse"),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:"#FF628C"}}),"null"),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:"#E1EFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Gets the recipes matching the input term")),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"}}),"getRecipes"),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"}})," diet "),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"}}),"none"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),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:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet "),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:"#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:"#FF628C"}}),"null"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Remove diet if 'none' is selected")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setLoading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true"),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"}}),"api/search/"),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"}})," params"),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("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"keyword"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," exclude"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Sending parameters to our API")),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:"#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"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Object destructuring to extract data from our response")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setResponse"),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:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Store results in the response state")),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"}}),"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("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 md:px-12 px-0 relative bg-background font-raleway items-center 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"}}),"h1 "),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-6xl font-bold text-active mt-20"),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"}})," Recipe Search")),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"}}),"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"}}),"text-primary text-2xl font-light mt-5"),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"}})," Search recipes from all over the world.")),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"}}),"form")),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"}}),"sm:mx-auto mt-20 md:max-w-4xl justify-center flex flex-col sm:w-full sm:flex"),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"}}),"onSubmit"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),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:"#FAD000"}}),"getRecipes"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Trigger getRecipes function when search button is clicked")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"preventDefault"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"stopPropagation"),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("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"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),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"),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"}}),"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 w-full rounded-lg px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"),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"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Enter a recipe"),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"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),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:"#FAD000"}}),"setKeyword"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),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"}}),"setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),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("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"}}),"mt-5 flex sm:flex-row flex-col justify-start"),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"}}),"sm:w-1/3 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"}}),"label "),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 text-primary text-sm"),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"}})," Diet")),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"}}),"select")),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"}}),"mt-1 flex w-full rounded-lg px-5 py-3 text-base text-background font-bold focus:outline-none"),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"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setDiet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),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("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"}}),"none"),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"}}),"pescetarian"),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"}}),"lacto vegetarian"),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"}}),"ovo vegetarian"),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"}}),"vegan"),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"}}),"vegetarian"),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("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"map"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet "),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"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"option "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}>{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),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("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"}}),"sm:ml-10 sm:w-1/3 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"}}),"label "),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 text-primary text-sm"),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"}})," Exclude Ingredients")),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"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),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"),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"}}),"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"}}),"mt-1 w-full rounded-lg px-5 py-3 text-base text-background font-bold focus:outline-none"),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"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"cocunut"),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"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setExclude"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),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("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("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"}}),"mt-5 w-full rounded-lg px-5 py-3 bg-active text-base text-primary font-bold hover:text-active hover:bg-primary transition-colors duration-300 sm:px-10"),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"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"submit"),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"}})," Search")),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,"Thanks to the ",mdx("inlineCode",{parentName:"p"},"onSubmit")," handler of the form, ",mdx("inlineCode",{parentName:"p"},"getRecipes")," function will be triggered when the search button is clicked or by pressing the enter key in any input."),mdx("h3",a({},{id:"-final-step"}),mdx("a",a({parentName:"h3"},{href:"#-final-step"}),"\u2192 FINAL STEP")),mdx("p",null,"Finally, it is time to display the recipes returned by the API. You can use the ",mdx("strong",{parentName:"p"},"Test Endpoint")," button to check the response. It 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"}),"json"),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:"#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"}}),"results"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),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:"#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"}}),"id"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"492560"),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"}}),"title"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"Quick and Easy St. Louis-Style Pizza"'),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"}}),"readyInMinutes"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"27"),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"}}),"servings"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"8"),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"}}),"sourceUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"https://www.cinnamonspiceandeverythingnice.com/st-louis-style-pizza/"'),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"}}),"openLicense"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),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:"#FAD000"}}),"image"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"St--Louis-Style-Pizza-492560.jpg"')),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:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"id"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"587203"),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"}}),"title"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"Taco Pizza"'),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"}}),"readyInMinutes"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"20"),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"}}),"servings"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"6"),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"}}),"sourceUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"https://laurenslatest.com/taco-salad-pizza-with-doritos/"'),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"}}),"openLicense"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),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:"#FAD000"}}),"image"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"Taco-Salad-Pizza-with-Doritos-587203.jpg"')),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:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"id"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"481601"),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"}}),"title"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"Neapolitan Pizza and Honey Whole Wheat Dough"'),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"}}),"readyInMinutes"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"102"),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"}}),"servings"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"8"),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"}}),"sourceUrl"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"https://lifemadesimplebakes.com/2014/02/neapolitan-pizza-and-honey-whole-wheat-dough/"'),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"}}),"openLicense"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),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:"#FAD000"}}),"image"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"Neapolitan-Pizza-and-Honey-Whole-Wheat-Dough-481601.jpg"')),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:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"baseUri"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"https://spoonacular.com/recipeImages/"'),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"}}),"offset"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),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:"#FAD000"}}),"number"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"3"),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"}}),"totalResults"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"257")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"We will use a map function to iterate through ",mdx("inlineCode",{parentName:"p"},"results"),", which is an array of objects carrying recipe details. I will be displaying the title, image, servings, time to get ready, and URL of every recipe. For the design, I used a grid to organize the details. Our final code looks like this:"),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"}})," 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:"#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"}}),"keyword"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setKeyword"),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:"#FF628C"}}),"null"),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"}}),"diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setDiet"),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:"#FF628C"}}),"null"),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"}}),"exclude"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setExclude"),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:"#FF628C"}}),"null"),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"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setResponse"),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:"#FF628C"}}),"null"),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"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"getRecipes"),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"}})," diet "),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"}}),"none"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),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:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet "),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:"#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:"#FF628C"}}),"null"),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"}}),"setLoading"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true"),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"}}),"api/search/"),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"}})," params"),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("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"keyword"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," exclude"),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:"#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"}})," res"),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"}}),"setResponse"),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("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"}}),"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("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 md:px-12 px-0 relative bg-background font-raleway items-center 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"}}),"h1 "),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-6xl font-bold text-active mt-20"),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"}})," Recipe Search")),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"}}),"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"}}),"text-primary text-2xl font-light mt-5"),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"}})," Search recipes from all over the world.")),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"}}),"form")),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"}}),"sm:mx-auto mt-20 md:max-w-4xl justify-center flex flex-col sm:w-full sm:flex"),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"}}),"onSubmit"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),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:"#FAD000"}}),"getRecipes"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"preventDefault"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"();")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"stopPropagation"),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("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"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),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"),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"}}),"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 w-full rounded-lg px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"),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"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Enter a recipe"),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"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),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:"#FAD000"}}),"setKeyword"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),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"}}),"setResponse"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"null"),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("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"}}),"mt-5 flex sm:flex-row flex-col justify-start"),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"}}),"sm:w-1/3 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"}}),"label "),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 text-primary text-sm"),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"}})," Diet")),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"}}),"select")),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"}}),"mt-1 flex w-full rounded-lg px-5 py-3 text-base text-background font-bold focus:outline-none"),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"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setDiet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),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("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"}}),"none"),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"}}),"pescetarian"),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"}}),"lacto vegetarian"),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"}}),"ovo vegetarian"),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"}}),"vegan"),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"}}),"vegetarian"),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("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"map"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet "),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"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"option "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}>{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"diet"),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("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"}}),"sm:ml-10 sm:w-1/3 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"}}),"label "),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 text-primary text-sm"),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"}})," Exclude Ingredients")),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"}}),"input")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),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"),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"}}),"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"}}),"mt-1 w-full rounded-lg px-5 py-3 text-base text-background font-bold focus:outline-none"),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"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"cocunut"),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"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setExclude"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),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("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("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"}}),"mt-5 w-full rounded-lg px-5 py-3 bg-active text-base text-primary font-bold hover:text-active hover:bg-primary transition-colors duration-300 sm:px-10"),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"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"submit"),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"}})," Search")),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"}}),"response "),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("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"// Render only if response is not null")),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"}}),"mt-10"),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"}}),"mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"),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"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"map"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"recipe "),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:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"key"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"recipe"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"id"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),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"}}),"pt-6"),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"}}),"flow-root bg-light rounded-lg px-4 pb-8"),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"}}),"-mt-6"),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"}}),"flex items-center justify-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"}})," "),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"}}),"p-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"}}),"img")),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("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#3AD900"}}),"`https://spoonacular.com/recipeImages/`"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"+")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," recipe"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"image")),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"}}),"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"}}),"w-full h-full rounded-lg"),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"}}),"alt"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"recipe"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"id"),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("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"}}),"text-center justify-center items-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"}})," "),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"}}),"mt-4 text-lg font-bold w-full break-words overflow-x-auto text-primary tracking-tight"),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"}}),"recipe"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"title"),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"}}),"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"}}),"mt-2 text-sm text-secondary block"),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"}})," Ready in "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"recipe"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"readyInMinutes"),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"}})," minutes - "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"recipe"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"servings"),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"}})," Servings")),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"}}),"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"}}),"mt-4 text-sm text-active block"),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:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"recipe"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"sourceUrl"),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"}})," Go to Recipe")),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:"#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:"#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:"#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 is what our app looks like in its final form:"),mdx("img",a({},{src:"https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-recipe-app/images/final-app.png",alt:"Recipe App built using Spoonacular API"})),mdx("h2",a({},{id:"wrap-up"}),mdx("a",a({parentName:"h2"},{href:"#wrap-up"}),"Wrap Up")),mdx("p",null,"All done. You can also check the deployed ",mdx("a",a({parentName:"p"},{href:"https://rapidapi-example-recipe-app.vercel.app/"}),"Recipe App")," and find its code in the ",mdx("a",a({parentName:"p"},{href:"https://github.com/RapidAPI/DevRel-Examples-External/tree/main/recipe-app"}),"RapidAPI Examples Repository")," on GitHub."))}MDXContent.isMDXComponent=!0;

axios-post

How to make POST Requests with Axios in JavaScript?

Axios is an HTTP client that lets you make API requests. This guide will demonstrate how to make POST requests with Axios.