So far we've been writing React without JSX, something that I don't know anyone that actually does with their apps. Everyone uses JSX. I've shown you the createElement way so you'll understand what JSX is actually doing. It doesn't do hardly anything. It just makes your code a bit more readable.
\nMake a new file called Pizza.jsx.
\nI don't know about you, but I find this far more readable. And if it feels uncomfortable to you to introduce HTML into your JavaScript, I invite you to give it a shot until the end of the workshop. By then it should feel a bit more comfortable. And you can always go back to the old way.
\nLet's fix our ESLint as JSX adds new twists and turns we need help with. Please install
\nWe have to add two configs, one to allow ESLint to understand React and add some basic React rules, and one to modernize it as React 17 changed a bit how ESLint interacts with React.
\nWe're also turning off two rules that I don't find particularly useful: unescaped entities (which make you change things like ' into &apos) and prop types which no one has used in a decade at this point. Otherwise we should be good to go.
\nSo now JSX is demystified a bit, let's go convert App.js.
\nNotice we have Pizza as a component. Notice that the P in Pizza is capitalized. It must be. If you make it lowercase, it will try to have pizza as a web component and not a React component.
\nWe now pass props down as we add attributes to an HTML tag. Pretty cool.
\nFor this course we will use a little Fastify server I built for you. It's in the api directory. We are going to use Vite.js to proxy to this API server. This is a useful trick to do for local development if you have a separate frontend in a backend. Normally you'd have something like NGINX routing traffic to separate frontend and backend servers. For now we'll just use Vite.
\nNow let's add images to our Pizza.
\n`. If you take away the `{}` it will literally output `props.name` to the DOM.\n\n> Notice we don't have to do `import React from 'react'` here like we used to. The latest version of JSX handles that for you so you only need to explicitly import the React package when you need to use something from it; otherwise feel free to do JSX without having to import React!\n\n## ESLint\n\nLet's fix our ESLint as JSX adds new twists and turns we need help with. Please install\n\n```bash\nnpm i -D eslint-plugin-react@7.37.1\n```\n\nThen in your eslint.config.mjs\n\n```javascript\n// at top, import the ESLint reactPlugin\nimport reactPlugin from \"eslint-plugin-react\";\n\n// under js.configs.recommended line\n{\n ...reactPlugin.configs.flat.recommended,\n settings: {\n react: {\n version: \"detect\",\n },\n },\n},\nreactPlugin.configs.flat[\"jsx-runtime\"],\n\n// add to files\nfiles: [\"**/*.js\", \"**/*.jsx\"], // add JSX\n\n//after the languageOptions object:\nrules: {\n \"react/no-unescaped-entities\": \"off\",\n \"react/prop-types\": \"off\",\n},\n```\n\nYou can also copy fill config from [the repo][eslint].\n\nWe have to add two configs, one to allow ESLint to understand React and add some basic React rules, and one to modernize it as React 17 changed a bit how ESLint interacts with React.\n\nWe're also turning off two rules that I don't find particularly useful: unescaped entities (which make you change things like `'` into `&apos`) and prop types which no one has used in a decade at this point. Otherwise we should be good to go.\n\n## Back to JSX\n\nSo now JSX is demystified a bit, let's go convert App.js.\n\n```javascript\n// rename the file App.jsx\n// delete the React import\nimport { createRoot } from \"react-dom/client\";\nimport Pizza from \"./Pizza\";\n\n// delete the Pizza component\n\nconst App = () => {\n return (\n \n
Padre Gino's Pizza – Order Now \n
\n
\n
\n
\n
Tanstack Query \nLet's make make a past orders page. Create a new file, past.lazy.jsx. If your Vite server is already running, it will automatically stub it out for you! Pretty cool developer experience from TanStack.
\nNow let's install our next tool, TanStack (React) Query .
\nnpm i @tanstack/react-query@5.59.13\nnpm i -D @tanstack/react-query-devtools@5.59.13 @tanstack/eslint-plugin-query@5.59.7\nReact Query makes doing async API calls so much easier. So much easier / better, that I almost never use useEffect anymore like we did for the pizzas list or for the pizza of the day. The code is cleaner, easier to read, better cached, and less bug prone. In short, it's just better. It's good for you to know how to use effects, but as you go forward just use TanStack Query for API calls.
\nLet's get started. Let's start by adding their ESLint config to ours. They have some useful rules in there. In eslint.config.mjs
\n\nimport pluginQuery from "@tanstack/eslint-plugin-query" ;\n\n\n...pluginQuery.configs ["flat/recommended" ],\nThis will add a few rules to your ESLint that are specific to React Query. I have found these helpful, and more importantly, not annoying, so I tend to add them every time.
\nLet's also add the dev tools, like we did for the router. In src/routes/__root.jsx:
\n\nimport { ReactQueryDevtools } from "@tanstack/react-query-devtools" ;\n\n\n<ReactQueryDevtools /> Finally, we need to add the QueryClient. In App.jsx, add:
\n\nimport { QueryClient , QueryClientProvider } from "@tanstack/react-query" ;\n\n\nconst queryClient = new QueryClient ()\n\n\n<QueryClientProvider client={queryClient}>\n <RouterProvider router ={router} /> QueryClientProvider >\nNow in the bottom right of your window you'll see a 🏝️. Click on that and we'll open the dev tools. We haven't used the dev tools yet so it'll be empty.
\nSo react-query makes interacting with APIs very simple and makes it easy to read. You just read a hook and it'll either give you a isLoading status or the data. Once the data comes back, it'll refresh the component with the data. So let's start by writing our very simple fetch call. Create a folder called api inside of src and create getPastOrders.js and put
\nexport default async function getPastOrders (page ) {\n const response = await fetch (`/api/past-orders?page=${page} ` );\n const data = await response.json ();\n return data;\n}\nVery simple request to an API that returns data. That's it!
\nLet's now go make past.lazy.jsx.
\nimport { useState } from "react" ;\nimport { useQuery } from "@tanstack/react-query" ;\nimport { createLazyFileRoute } from "@tanstack/react-router" ;\nimport getPastOrders from "../api/getPastOrders" ;\n\nexport const Route = createLazyFileRoute ("/past" )({\n component : PastOrdersRoute ,\n});\n\nfunction PastOrdersRoute (const [page, setPage] = useState (1 );\n const { isLoading, data } = useQuery ({\n queryKey : ["past-orders" , page],\n queryFn : () => getPastOrders (page),\n staleTime : 30000 ,\n });\n if (isLoading) {\n return (\n <div className ="past-orders" > \n <h2 > LOADING …</h2 > \n </div > return (\n <div className ="past-orders" > \n <table > \n <thead > \n <tr > \n <td > ID</td > \n <td > Date</td > \n <td > Time</td > \n </tr > \n </thead > \n <tbody > \n {data.map((order) => (\n <tr key ={order.order_id} > \n <td > {order.order_id}</td > \n <td > {order.date}</td > \n <td > {order.time}</td > \n </tr > \n ))}\n </tbody > \n </table > \n <div className ="pages" > \n <button disabled ={page <= 1} onClick ={() => setPage(page - 1)}>\n Previous\n </button > \n <div > {page}</div > \n <button disabled ={data.length < 10 } onClick ={() => setPage(page + 1)}>\n Next\n </button > \n </div > \n </div > \nWe're using hooks to track the page we're on. \nWe're using the useQuery hook to make API calls and we provide it the queryFn of how to go fetch that data. \nWe're giving it keys which act as cache keys. We're giving past-orders as the key but it could be any unique key to this page. Then we give it the page. What's cool about this is that while we will request the page 1 the first time we request it, the second time we request page 1 it'll see it'll see that we already have this in cache and not request it. How cool is is that? That used to require so much logic to handle it and now React Query just does it for you. \nNow open the dev tools. You can see all the pages being loaded in. Pretty cool, right? \nTry taking out page from the query key. It'll yell at you. This is the ESLint config we pulled in from Tanstack Query. Because we're using that page in the request, we need to use it as a caching key. If you depend on a variable to make a request, it should be apart of the caching key. \nWe're giving it a staleTime of 30 seconds (30,000 milliseconds). This allows someone using the page to browse around a bit and not bombard the API too much but the page won't ever be too stale. If you omit staleTime, it will refetch every time. \n \nThat's it! React Query is both simple to use and super flexible to handle a tough problem. It's one of my favorite libraries for React.
\n\n🏁 Click here to see the state of the project up until now: 10-query
\n \n","markdown":"\n## Tanstack Query\n\nLet's make make a past orders page. Create a new file, `past.lazy.jsx`. If your Vite server is already running, it will automatically stub it out for you! Pretty cool developer experience from TanStack.\n\nNow let's install our next tool, [TanStack (React) Query][tsq].\n\n```bash\nnpm i @tanstack/react-query@5.59.13\nnpm i -D @tanstack/react-query-devtools@5.59.13 @tanstack/eslint-plugin-query@5.59.7\n```\n\nReact Query makes doing async API calls so much easier. So much easier / better, that I almost never use `useEffect` anymore like we did for the pizzas list or for the pizza of the day. The code is cleaner, easier to read, better cached, and less bug prone. In short, it's just better. It's good for you to know how to use effects, but as you go forward just use TanStack Query for API calls.\n\nLet's get started. Let's start by adding their ESLint config to ours. They have some useful rules in there. In eslint.config.mjs\n\n```javascript\n// at top\nimport pluginQuery from \"@tanstack/eslint-plugin-query\";\n\n// under reactPlugin.configs.flat[\"jsx-runtime\"]\n...pluginQuery.configs[\"flat/recommended\"],\n```\n\nThis will add a few rules to your ESLint that are specific to React Query. I have found these helpful, and more importantly, not annoying, so I tend to add them every time.\n\nLet's also add the dev tools, like we did for the router. In `src/routes/__root.jsx`:\n\n```javascript\n// at top\nimport { ReactQueryDevtools } from \"@tanstack/react-query-devtools\";\n\n// under router dev tools\n\n \n```\n\nNow in the bottom right of your window you'll see a 🏝️. Click on that and we'll open the dev tools. We haven't used the dev tools yet so it'll be empty.\n\nSo react-query makes interacting with APIs very simple and makes it easy to read. You just read a hook and it'll either give you a `isLoading` status or the data. Once the data comes back, it'll refresh the component with the data. So let's start by writing our very simple fetch call. Create a folder called `api` inside of `src` and create getPastOrders.js and put\n\n```javascript\nexport default async function getPastOrders(page) {\n const response = await fetch(`/api/past-orders?page=${page}`);\n const data = await response.json();\n return data;\n}\n```\n\nVery simple request to an API that returns data. That's it!\n\nLet's now go make past.lazy.jsx.\n\n```javascript\nimport { useState } from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { createLazyFileRoute } from \"@tanstack/react-router\";\nimport getPastOrders from \"../api/getPastOrders\";\n\nexport const Route = createLazyFileRoute(\"/past\")({\n component: PastOrdersRoute,\n});\n\nfunction PastOrdersRoute() {\n const [page, setPage] = useState(1);\n const { isLoading, data } = useQuery({\n queryKey: [\"past-orders\", page],\n queryFn: () => getPastOrders(page),\n staleTime: 30000,\n });\n if (isLoading) {\n return (\n \n
LOADING … \n \n );\n }\n return (\n \n
\n \n \n ID \n Date \n Time \n \n \n \n {data.map((order) => (\n \n {order.order_id} \n {order.date} \n {order.time} \n \n ))}\n \n
\n
\n
setPage(page - 1)}>\n Previous\n \n
{page}
\n
setPage(page + 1)}>\n Next\n \n
\n
Tanstack Router \nSo now we have arrived to the point where we want multiple pages in our app. We need some sort of router tool to accomplish that. We could just work with the browser's history API to do it but there so many ways to get it wrong, plus we are spoiled for choice when it comes to great React routing libraries.
\nHistorically I have taught react-router as part of this course. It has been around for a long time and is well tested. Nearly every version of this course uses it (there was a brief while where it was Reach Router, but that has since been merged back into React Router.) It is a great tool and it underpins Remix, a great full-stack React framework. Remix and React Router are actually merging and will eventually be the same thing. v8 of this course use React Router if you want to learn more about it from me.
\nTanStack Router \nToday we are going to be using TanStack Router , another amazing router. Why the switch? Two reasons:
\n\nThis is a client-side focused course, and TanStack Router is made for client-side use cases. React Router and Remix have shifted a lot of focus to a more full-stack experience (though they do still work client-side only). \nIn Intermediate React we will be covering more full-stack use cases, in which I will using Next.js to show off those features. \n \nSo, suffice to say, you have a lot of good choices. I'm a fan of TanStack Router and I think it's a great tool for you to get started with. Let's dive in.
\nLet's start by installing it.
\nnpm install @tanstack/react-router@1.65.0\nnpm install -D @tanstack/router-plugin@1.65.0 @tanstack/router-devtools@1.65.0\nWe need to install the router and then we'll be using its code generation tool as well as its dev tools (which are dev-only, hence the -D). Let's add it first to our vite.config.js.
\n\nimport { TanStackRouterVite } from "@tanstack/router-plugin/vite" ;\n\n\nplugins : [TanStackRouterVite (), react ()],\nTanStack Router works by file-based conventions. You create routes in a specific way and TanStack Router will automatically glue it together for you. It does this by creating a file called routeTree.gen.ts. Even though this isn't a TypeScript project, the fact that this is TypeScript means that VS Code can read the types from your routes and help you with suggestions and intelligent errors. I would suggest adding this file to your .gitignore as well since it will get autogenerated with every build. Okay, so let's go make the files we need.
\nCreate a routes directory in your src directory. Let's make a __root.jsx file in there. This file will be the base template used for every route. Most of this will come from App.jsx
\nimport { useState } from "react" ;\nimport { createRootRoute, Outlet } from "@tanstack/react-router" ;\nimport { TanStackRouterDevtools } from "@tanstack/router-devtools" ;\nimport PizzaOfTheDay from "../PizzaOfTheDay" ;\nimport Header from "../Header" ;\nimport { CartContext } from "../contexts" ;\n\nexport const Route = createRootRoute ({\n component : () => {\n const cartHook = useState ([]);\n return (\n <> \n <CartContext.Provider value ={cartHook} > \n <div > \n <Header /> \n <Outlet /> \n <PizzaOfTheDay /> \n </div > \n </CartContext.Provider > \n <TanStackRouterDevtools /> \n </> \nWe added an <Outlet/> instead of our Order component. Now we can swap in new routes there! Notice that the Header will always be there as will the PizzaOfTheDay. \nWe added TanStack's excellent dev tools. We'll take a look at them in a bit, but they're in the bottom left, you can click on them once your app loads. \n<> and </> are for when you want to render two sibling components (our context and our dev tools) but don't want to add a random div there. React requires you only return one top level component and we can do that with <> and </> \nGreat, let's go modify App.jsx now
\n\n\nimport { RouterProvider , createRouter } from "@tanstack/react-router" ;\nimport { routeTree } from "./routeTree.gen" ;\n\nconst router = createRouter ({ routeTree });\n\n\nconst App = (return (\n <StrictMode > \n <RouterProvider router ={router} /> \n </StrictMode > This just imports the generated routeTree and then makes use of it in the project. This file really only should be used for rendering the file. Everything else should likely live in __root.jsx.
\nOkay, move Order.jsx from the base directory and into routes. If it asks, say yes to update paths. Rename it to order.lazy.jsx Let's modify it now to make it a route.
\n\nimport { createLazyFileRoute } from "@tanstack/react-router" ;\n\n\nimport { CartContext } from "../contexts" ;\nimport Cart from "../Cart" ;\nimport Pizza from "../Pizza" ;\n\nexport const Route = createLazyFileRoute ("/order" )({\n component : Order ,\n});\n\nfunction Order (\nHere we're making a new route. We define what URL it's at, /order, and what component to render, Order. \nWe're making it lazy. It will now code split this for us and lazy-load our route for us. This really helps in large apps. In this tiny app it probably actually slows us down because adding 1KB to an app doesn't slow it down, but an extra round trip does. When you do lazy loading, please measure if it's helping. In any case, this is how you do it. \n \nThat's it! This used to be so hard to code split. In some of my old classes we had to go through some serious work to get it work but now this is all it takes! Pretty cool.
\nLet's add a home page! Make a file called index.lazy.jsx in the routes folder.
\nimport { createLazyFileRoute, Link } from "@tanstack/react-router" ;\n\nexport const Route = createLazyFileRoute ("/" )({\n component : Index ,\n});\n\nfunction Index (return (\n <div className ="index" > \n <div className ="index-brand" > \n <h1 > Padre Gino's</h1 > \n <p > Pizza & Art at a location near you</p > \n </div > \n <ul > \n <li > \n <Link to ="/order" > Order</Link > \n </li > \n <li > \n <Link to ="/past" > Past Orders</Link > \n </li > \n </ul > \n </div > \nNothing new here except maybe the links. These link components make it easy for TanStack Router to control the browser history so definitely use them. \n \nLastly let's modify Header to be able to link back to the home page.
\n\nimport { Link } from "@tanstack/react-router" ;\n\n\n<Link to ={ "/"}> \n <h1 className ="logo" > Padre Gino's Pizza</h1 > \n</Link > This should all work now. Open your app and see if it loads.
\n\nNotice you get a little flash before it loads. It's lazy-loading your route. If this was a real app, we'd make a more pleasant loading experience. I'll leave that as an exercise for you to do. \nSo, let's talk about the cart. Go to the order page, add a bunch of stuff to cart, and head back to the home page. Notice there's still stuff in our cart! Head back to the order page and see it's still there. That's because __root.jsx (where our cart state lives) never gets un-rendered. If this just lived in Cart.jsx or order.lazy.jsx, it'd be blown away whenever you navigate away. Why? Because when the component gets un-rendered, it loses all of its state. This is one of the reasons Context can be super powerful. \nTake a gander at the dev tools being rendered in the bottom left (don't worry, it gets stripped out automatically in production.) Click into and peruse around. Lots of cool stuff here for free. \n \nYou did it! That's how easy routing has become. It's come so far from the early days of React.
\n\n🏁 Click here to see the state of the project up until now: 09-routing
\n \n","markdown":"\n## Tanstack Router\n\nSo now we have arrived to the point where we want multiple pages in our app. We need some sort of router tool to accomplish that. We _could_ just work with the browser's history API to do it but there so many ways to get it wrong, plus we are spoiled for choice when it comes to great React routing libraries.\n\nHistorically I have taught [react-router][rr] as part of this course. It has been around for a long time and is well tested. Nearly every version of this course uses it (there was a brief while where it was Reach Router, but that has since been merged back into React Router.) It is a great tool and it underpins Remix, a great full-stack React framework. Remix and React Router are actually merging and will eventually be the same thing. [v8 of this course][v8] use React Router if you want to learn more about it from me.\n\n## TanStack Router\n\nToday we are going to be using [TanStack Router][tsr], another amazing router. Why the switch? Two reasons:\n\n- This is a client-side focused course, and TanStack Router is made for client-side use cases. React Router and Remix have shifted a lot of focus to a more full-stack experience (though they do still work client-side only).\n- In Intermediate React we will be covering more full-stack use cases, in which I will using Next.js to show off those features.\n\nSo, suffice to say, you have a lot of good choices. I'm a fan of TanStack Router and I think it's a great tool for you to get started with. Let's dive in.\n\nLet's start by installing it.\n\n```bash\nnpm install @tanstack/react-router@1.65.0\nnpm install -D @tanstack/router-plugin@1.65.0 @tanstack/router-devtools@1.65.0\n```\n\nWe need to install the router and then we'll be using its code generation tool as well as its dev tools (which are dev-only, hence the -D). Let's add it first to our vite.config.js.\n\n```javascript\n// at top\nimport { TanStackRouterVite } from \"@tanstack/router-plugin/vite\";\n\n// add before react() in plugins\nplugins: [TanStackRouterVite(), react()],\n```\n\nTanStack Router works by file-based conventions. You create routes in a specific way and TanStack Router will automatically glue it together for you. It does this by creating a file called `routeTree.gen.ts`. Even though this isn't a TypeScript project, the fact that this is TypeScript means that VS Code can read the types from your routes and help you with suggestions and intelligent errors. I would suggest adding this file to your `.gitignore` as well since it will get autogenerated with every build. Okay, so let's go make the files we need.\n\nCreate a `routes` directory in your `src` directory. Let's make a `__root.jsx` file in there. This file will be the base template used for every route. Most of this will come from App.jsx\n\n```javascript\nimport { useState } from \"react\";\nimport { createRootRoute, Outlet } from \"@tanstack/react-router\";\nimport { TanStackRouterDevtools } from \"@tanstack/router-devtools\";\nimport PizzaOfTheDay from \"../PizzaOfTheDay\";\nimport Header from \"../Header\";\nimport { CartContext } from \"../contexts\";\n\nexport const Route = createRootRoute({\n component: () => {\n const cartHook = useState([]);\n return (\n <>\n \n \n \n \n \n );\n};\n```\n\nThis just imports the generated routeTree and then makes use of it in the project. This file really only should be used for rendering the file. Everything else should likely live in \\_\\_root.jsx.\n\nOkay, move Order.jsx from the base directory and into `routes`. If it asks, say yes to update paths. Rename it to `order.lazy.jsx` Let's modify it now to make it a route.\n\n```javascript\n// at top\nimport { createLazyFileRoute } from \"@tanstack/react-router\";\n\n// make sure you modified the relative paths here – VS Code may have done this for you already\nimport { CartContext } from \"../contexts\";\nimport Cart from \"../Cart\";\nimport Pizza from \"../Pizza\";\n\nexport const Route = createLazyFileRoute(\"/order\")({\n component: Order,\n});\n\nfunction Order() {\n // Order component code …\n}\n```\n\n- Here we're making a new route. We define what URL it's at, `/order`, and what component to render, `Order`.\n- We're making it lazy. It will now code split this for us and lazy-load our route for us. This really helps in large apps. In this tiny app it probably actually slows us down because adding 1KB to an app doesn't slow it down, but an extra round trip does. When you do lazy loading, please measure if it's helping. In any case, this is how you do it.\n\nThat's it! This used to be so hard to code split. In some of my old classes we had to go through some serious work to get it work but now this is all it takes! Pretty cool.\n\nLet's add a home page! Make a file called `index.lazy.jsx` in the routes folder.\n\n```javascript\nimport { createLazyFileRoute, Link } from \"@tanstack/react-router\";\n\nexport const Route = createLazyFileRoute(\"/\")({\n component: Index,\n});\n\nfunction Index() {\n return (\n \n
\n
Padre Gino's \n
Pizza & Art at a location near you
\n
\n
\n \n \n \n \n \n
Padre Gino's Pizza \n\n```\n\nThis should all work now. Open your app and see if it loads.\n\n- Notice you get a little flash before it loads. It's lazy-loading your route. If this was a real app, we'd make a more pleasant loading experience. I'll leave that as an exercise for you to do.\n- So, let's talk about the cart. Go to the order page, add a bunch of stuff to cart, and head back to the home page. Notice there's still stuff in our cart! Head back to the order page and see it's still there. That's because \\_\\_root.jsx (where our cart state lives) never gets un-rendered. If this just lived in Cart.jsx or order.lazy.jsx, it'd be blown away whenever you navigate away. Why? Because when the component gets un-rendered, it loses all of its state. This is one of the reasons Context can be super powerful.\n- Take a gander at the dev tools being rendered in the bottom left (don't worry, it gets stripped out automatically in production.) Click into and peruse around. Lots of cool stuff here for free.\n\nYou did it! That's how easy routing has become. It's come so far from the early days of React.\n\n> 🏁 [Click here to see the state of the project up until now: 09-routing][step]\n\n[step]: https://github.com/btholt/citr-v9-project/tree/master/09-routing\n[rr]: https://reactrouter.com/\n[v8]: https://react-v8.holt.courses/lessons/react-capabilities/react-router\n[tsr]: https://tanstack.com/router/latest\n","slug":"tanstack-router","title":"TanStack Router","section":"Ecosystem","icon":"seedling","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/05-ecosystem/A-tanstack-router.md","nextSlug":"/lessons/ecosystem/tanstack-query","prevSlug":"/lessons/core-react-concepts/context"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/no-frills-react/components.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/no-frills-react/components.json
new file mode 100644
index 0000000..105e2c2
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/no-frills-react/components.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Learn how to separate React components into distinct files and make reusable, flexible components that accept props, transforming a static app into a dynamic one. This guide provides code examples in creating a React app featuring customizable Pizza components, enhancing React development skills. Discover these strategies in Brian Holt's Complete Intro to React, ideal for budding web developers.","keywords":["React components","JavaScript","web development","reusable components","dynamic apps"]},"html":"Now that we've done that, let's separate this out from a script tag on the DOM to its own script file (best practice.)
\nModify your code in App.js so it looks like:
\nconst Pizza = (return React .createElement ("div" , {}, [\n React .createElement ("h1" , {}, "The Pepperoni Pizza" ),\n React .createElement ("p" , {}, "Mozzarella Cheese, Pepperoni" ),\n ]);\n};\n\nconst App = (return React .createElement ("div" , {}, [\n React .createElement ("h1" , {}, "Pixel Perfect Pizzas" ),\n React .createElement (Pizza ),\n React .createElement (Pizza ),\n React .createElement (Pizza ),\n ]);\n};\n\nconst container = document .getElementById ("root" );\nconst root = ReactDOM .createRoot (container);\nroot.render (React .createElement (App ));\n\n🚨 You will be seeing a console warning Warning: Each child in a list should have a unique "key" prop. in your browser console. React's dev warnings are trying to help your code run faster. Basically, React tries to keep track of components that are swapped in order. In a list, it does that by you giving it a unique key it can track. If it sees two things have swapped, it'll just move the components instead of re-rendering.
\n \n\nTo make an element have multiple children, just pass it an array of elements. \nWe created a second new component, the Pizza component. This component represents one pizza. When you have distinct ideas represented as markup, that's a good idea to separate that it into a component like we did here. \nSince we have a new Pizza component, we can use it multiple times! We just use multiple calls to React.createElement. \nIn createElement, the last two parameters are optional. Since Pizza has no props or children (it could, we just didn't make it use them yet) we can just leave them off. \n \nOkay so we can have multiple pizzas but it's not a useful component yet since not all pizza will be a pepperoni pizza. Let's make it a bit more complicated.
\nconst Pizza = (props ) => {\n return React .createElement ("div" , {}, [\n React .createElement ("h1" , {}, props.name ),\n React .createElement ("p" , {}, props.description ),\n ]);\n};\n\nconst App = (return React .createElement ("div" , {}, [\n React .createElement ("h1" , {}, "Pixel Perfect Pizzas" ),\n React .createElement (Pizza , {\n name : "The Pepperoni Pizza" ,\n description : "Mozzarella Cheese, Pepperoni" ,\n }),\n React .createElement (Pizza , {\n name : "The Hawaiian Pizza" ,\n description : "Sliced Ham, Pineapple, Mozzarella Cheese" ,\n }),\n React .createElement (Pizza , {\n name : "The Big Meat Pizza" ,\n description : "Bacon, Pepperoni, Italian Sausage, Chorizo Sausage" ,\n }),\n ]);\n};\n\nconst container = document .getElementById ("root" );\nconst root = ReactDOM .createRoot (container);\nroot.render (React .createElement (App ));\nNow we have a more flexible component that accepts props from its parent. Props are variables that a parent (App) passes to its children (the instances of Pizza.) Now each one can be different! Now that is far more useful than it was since this Pizza component can represent not just a pepperoni, but any Pizza. This is the power of React! We can make multiple, re-usable components. We can then use these components to build larger components, which in turn make up yet-larger components. This is how React apps are made!
\n\n🏁 Click here to see the state of the project up until now: 01-no-frills-react
\n \n","markdown":"\nNow that we've done that, let's separate this out from a script tag on the DOM to its own script file (best practice.)\n\nModify your code in `App.js` so it looks like:\n\n```javascript\nconst Pizza = () => {\n return React.createElement(\"div\", {}, [\n React.createElement(\"h1\", {}, \"The Pepperoni Pizza\"),\n React.createElement(\"p\", {}, \"Mozzarella Cheese, Pepperoni\"),\n ]);\n};\n\nconst App = () => {\n return React.createElement(\"div\", {}, [\n React.createElement(\"h1\", {}, \"Pixel Perfect Pizzas\"),\n React.createElement(Pizza),\n React.createElement(Pizza),\n React.createElement(Pizza),\n ]);\n};\n\nconst container = document.getElementById(\"root\");\nconst root = ReactDOM.createRoot(container);\nroot.render(React.createElement(App));\n```\n\n> 🚨 You will be seeing a console warning `Warning: Each child in a list should have a unique \"key\" prop.` in your browser console. React's dev warnings are trying to help your code run faster. Basically, React tries to keep track of components that are swapped in order. In a list, it does that by you giving it a unique key it can track. If it sees two things have swapped, it'll just move the components instead of re-rendering.\n\n- To make an element have multiple children, just pass it an array of elements.\n- We created a second new component, the `Pizza` component. This component represents one pizza. When you have distinct ideas represented as markup, that's a good idea to separate that it into a component like we did here.\n- Since we have a new `Pizza` component, we can use it multiple times! We just use multiple calls to `React.createElement`.\n- In `createElement`, the last two parameters are optional. Since Pizza has no props or children (it could, we just didn't make it use them yet) we can just leave them off.\n\nOkay so we can have multiple pizzas but it's not a useful component yet since not all pizza will be a pepperoni pizza. Let's make it a bit more complicated.\n\n```javascript\nconst Pizza = (props) => {\n return React.createElement(\"div\", {}, [\n React.createElement(\"h1\", {}, props.name),\n React.createElement(\"p\", {}, props.description),\n ]);\n};\n\nconst App = () => {\n return React.createElement(\"div\", {}, [\n React.createElement(\"h1\", {}, \"Pixel Perfect Pizzas\"),\n React.createElement(Pizza, {\n name: \"The Pepperoni Pizza\",\n description: \"Mozzarella Cheese, Pepperoni\",\n }),\n React.createElement(Pizza, {\n name: \"The Hawaiian Pizza\",\n description: \"Sliced Ham, Pineapple, Mozzarella Cheese\",\n }),\n React.createElement(Pizza, {\n name: \"The Big Meat Pizza\",\n description: \"Bacon, Pepperoni, Italian Sausage, Chorizo Sausage\",\n }),\n ]);\n};\n\nconst container = document.getElementById(\"root\");\nconst root = ReactDOM.createRoot(container);\nroot.render(React.createElement(App));\n```\n\nNow we have a more flexible component that accepts props from its parent. Props are variables that a parent (App) passes to its children (the instances of Pizza.) Now each one can be different! Now that is far more useful than it was since this Pizza component can represent not just a pepperoni, but any Pizza. This is the power of React! We can make multiple, re-usable components. We can then use these components to build larger components, which in turn make up yet-larger components. This is how React apps are made!\n\n> 🏁 [Click here to see the state of the project up until now: 01-no-frills-react][step]\n\n[step]: https://github.com/btholt/citr-v9-project/tree/master/01-no-frills-react\n","slug":"components","title":"Components","section":"No Frills React","icon":"eye","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/02-no-frills-react/B-components.md","nextSlug":"/lessons/tools/npm","prevSlug":"/lessons/no-frills-react/react-without-a-build-step"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/no-frills-react/react-without-a-build-step.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/no-frills-react/react-without-a-build-step.json
new file mode 100644
index 0000000..aa6b58b
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/no-frills-react/react-without-a-build-step.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Learn the basics of creating a simple React app without using tools like Babel or Webpack. This tutorial guides you through setting up a project directory, writing pure JavaScript with React, and creating components to build a pizza ordering system. Ideal for beginners, this step-by-step guide by Brian Holt from the Complete Intro to React v9 course helps you understand fundamental React concepts using only essential tools.","keywords":["React","JavaScript","tutorial","beginner","Brian Holt","web development"]},"html":"Let's start by writing pure React. No compile step. No JSX. No Babel. No Webpack or Vite. Just some JavaScript on a page.
\nLet's start your project. Create your project directory inside the repo. I'm going to call mine padre-ginos since we're going to be building a pizza ordering system throughout this course. Open that directory in VS Code or your editor of choice. Create an index.html and add this markup:
\n<!DOCTYPE html > \n<html lang ="en" > \n <head > \n <meta charset ="UTF-8" /> \n <meta name ="viewport" content ="width=device-width, initial-scale=1.0" /> \n <title > Padre Gino's</title > \n </head > \n\n <body > \n <div id ="root" > not rendered</div > \n <script src ="https://unpkg.com/react@18.3.1/umd/react.development.js" > </script > \n <script src ="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" > </script > \n <script src ="./src/App.js" > </script > \n </body > \n</html > \nLet's run this. We could open it directly in our browser but I like using serve . Run npx serve and open http://localhost:3000/ in your browser.
\n\nPretty standard HTML5 document. If this is confusing, I teach another course called Intro to Web Dev that can help you out. \nWe're adding a root div. We'll render our React app here in a sec. It doesn't have to be called root, just a common practice. \nWe have two script tags.\nThe first is the React library. This library is the interface of how to interact with React; all the methods (except one) will be via this library. It contains no way of rendering itself though; it's just the API. \nThe second library is the rendering layer. Since we're rendering to the browser, we're using React DOM. There are other React libraries like React Native, React Unity, React Babylon.js, React Email, React Figma, React Blessed, and others. You need both script tags. The order is not important. \n \n \nThe last script tag is where we're going to put our code. You don't typically do this but I wanted to start as simple as possible. This script tag must come after the other two. \n \n\nIf you want to add some CSS right now, click here to get the stylesheet for this course. Make a file called styles.css and paste the previous file there. Then add a link tag to your html file <link rel="stylesheet" href="./style.css" />. We'll be linking to a CSS file located at /api/pubic/styles.css a little later in the course, but before we do that, we need to do some configuration (during the Vite lesson).
\n \nMake a new directory called src and a new file called App.js in that directory and put this in there.
\nconst App = (return React .createElement (\n "div" ,\n {},\n React .createElement ("h1" , {}, "Pixel Perfect Pizzas" )\n );\n};\n\nconst container = document .getElementById ("root" );\nconst root = ReactDOM .createRoot (container);\nroot.render (React .createElement (App ));\nThis is about the simplest React app you can build.
\n\nThe first thing we do is make our own component, App. React is all about making components. And then taking those components and making more components out of those. \nThere are two types of components, function components and class components. This is a function component. We'll see class components shortly. \nA function component must return markup (which is what React.createElement generates.) \nThese component render functions have to be fast. This function is going to be called a lot. It's a hot code path. \nInside of the render function, you cannot modify any sort of state. Put in functional terms, this function must be pure. You don't know how or when the function will be called so it can't modify any ambient state. \nReact.createElement creates one instance of some component. If you pass it a string , it will create a DOM tag with that as the string. We used h1 and div, those tags are output to the DOM. If we put x-custom-date-picker, it'll output that (so web components are possible too.)The second empty object (you can put null too) is attributes we're passing to the tag or component. Whatever we put in this will be output to the element (like id or style.) \nFirst we're using document.getElementById to grab an existing div out of the HTML document. Then we take that element (which we called container) and pass that into ReactDOM.createRoot. This is how we signal to React where we want it to render our app. Note later we can root.render again to change what the root of our React app looks like (I rarely need to do that.) \nNotice we're using React.createElement with App as a parameter to root.render. We need an instance of App to render out. App is a class of components and we need to render one instance of a class. That's what React.createElement does: it makes an instance of a class. An analogy is that App as a class of components is like Honda has a line of cars called Civics. It's a whole line of cars with various different options and parameters. An instance of a Civic would be one individual car. It's a concrete instance of the Civic car line. \n \n\nReactDOM.createRoot is a new API as of React v18. The old ReactDOM.render is still available (and deprecated) but it'll render your app in "legacy" mode which won't use all the fun new features packed into React v18.
\n \n","markdown":"\nLet's start by writing pure React. No compile step. No JSX. No Babel. No Webpack or Vite. Just some JavaScript on a page.\n\nLet's start your project. Create your project directory inside the repo. I'm going to call mine `padre-ginos` since we're going to be building a pizza ordering system throughout this course. Open that directory in VS Code or your editor of choice. Create an index.html and add this markup:\n\n```html\n\n\n \n Padre Gino's \n \n\n \n not rendered
\n \n \n \n \n\n```\n\nLet's run this. We could open it directly in our browser but I like using [serve][serve]. Run `npx serve` and open [http://localhost:3000/]() in your browser.\n\n- Pretty standard HTML5 document. If this is confusing, I teach another course called [Intro to Web Dev][webdev] that can help you out.\n- We're adding a root div. We'll render our React app here in a sec. It doesn't _have_ to be called root, just a common practice.\n- We have two script tags.\n - The first is the React library. This library is the interface of how to interact with React; all the methods (except one) will be via this library. It contains no way of rendering itself though; it's just the API.\n - The second library is the rendering layer. Since we're rendering to the browser, we're using React DOM. There are other React libraries like React Native, React Unity, React Babylon.js, React Email, React Figma, React Blessed, and others. You need both script tags. The order is not important.\n- The last script tag is where we're going to put our code. You don't typically do this but I wanted to start as simple as possible. This script tag must come _after_ the other two.\n\n> If you want to add some CSS right now, [click here][style] to get the stylesheet for this course. Make a file called styles.css and paste the previous file there. Then add a link tag to your html file `Let's write our first test for Pizza.jsx. In general, here's my methodology for testing React:
\n\nTry to test functionality, not implementation. Make your tests interact with components as a user would, not as a developer would. This means you're trying to do more to think of things like "what would a user see" or "if a user clicks a button a modal comes up" rather than "make sure this state is correct" or "ensure this library is called". This isn't a rule; sometimes you need to test those things too for assurance the app is working correctly. Use your best judgment. \nEvery UI I've ever worked on changes a lot. Try to not unnecessarily spin your wheels on things that aren't important and are likely to change. \nIn general when I encounter a bug that is important for me to go back and fix, I'll write a test that would have caught that bug. Actually what I'll do is before I fix it, I'll write the test that fails. That way I fix it I'll know I won't regress back there. \nAsk yourself what's important about your app and spend your time testing that. Ask yourself "if a user couldn't do X then the app is worthless" sort of questions and test those more thoroughly. If a user can't change themes then it's probably not the end of the world (a11y is important) so you can spend less time testing that but if a user can't log in then the app is worthless. Test that. \nDelete tests on a regular basis. Tests have a shelf life. \nFix or delete flaky tests. Bad tests are worse than no tests. \n \nOkay, create a new file called Pizza.test.jsx. This naming convention is just habit. Pizza.spec.jsx is common too. But as long as it's in the __tests__ directory it doesn't much matter what you call it.
\nimport { render } from "@testing-library/react" ;\nimport { expect, test } from "vitest" ;\nimport Pizza from "../Pizza" ;\n\ntest ("alt text renders on image" , async () => {\n const name = "My Favorite Pizza" ;\n const src = "https://picsum.photos/200" ;\n const screen = render (\n <Pizza name ={name} description ="super cool pizza" image ={src} /> const img = screen.getByRole ("img" );\n expect (img.src ).toBe (src);\n expect (img.alt ).toBe (name);\n});\nThis is your most basic test. It renders a React component, and then starts running assertions on it. Here we're asserting that our pizza image ends up with the correct alt text on it. Not the most useful test but a good start for us seeing how to assert something. I could see this being useful if we had bugs that occasionally alt text wasn't showing up.
\nWe're using getByRole here to grab the image on the page. In general React Testing Library wants you to adopt a user-centric mindset of how you're asserting things on the page. In this case we're trying to find an image which is something a user would see. Contrast that with using a CSS selector to select the image (which you can do, it's just frowned upon) which is very implementation-centric (a user doesn't know nor care about CSS classes.)
\nLet's add another test to make sure that we have a default image if pizza isn't passed an image.
\n\n🚨 This doesn't work yet. That's intentional.
\n \ntest ("to have default image if none is provided" , async () => {\n const screen = render (\n <Pizza name ={ "Cool Pizza "} description ="super cool pizza" /> const img = screen.getByRole ("img" );\n expect (img.src ).not .toBe ("" );\n});\nWell, first thing it is going to complain about is that we don't clean up after ourselves after each test. React Testing Library requires us to.
\n\nimport { render, cleanup } from "@testing-library/react" ; \nimport { afterEach, expect, test } from "vitest" ; \nafterEach (cleanup);\nThe test still doesn't pass? Oh, that's because it caught a bug! If you don't give it a image, it just breaks. That's not a good user experience. Let's go fix it in Pizza.jsx.
\n\nsrc={props.image ? props.image : "https://picsum.photos/200" }\nNow it works!
\nBam! Some easy React testing there for you.
\n","markdown":"\nLet's write our first test for Pizza.jsx. In general, here's my methodology for testing React:\n\n- Try to test functionality, not implementation. Make your tests interact with components as a user would, not as a developer would. This means you're trying to do more to think of things like \"what would a user see\" or \"if a user clicks a button a modal comes up\" rather than \"make sure this state is correct\" or \"ensure this library is called\". This isn't a rule; sometimes you need to test those things too for assurance the app is working correctly. Use your best judgment.\n- Every UI I've ever worked on changes a lot. Try to not unnecessarily spin your wheels on things that aren't important and are likely to change.\n- In general when I encounter a bug that is important for me to go back and fix, I'll write a test that would have caught that bug. Actually what I'll do is _before_ I fix it, I'll write the test that fails. That way I fix it I'll know I won't regress back there.\n- Ask yourself what's important about your app and spend your time testing that. Ask yourself \"if a user couldn't do X then the app is worthless\" sort of questions and test those more thoroughly. If a user can't change themes then it's probably not the end of the world (a11y is important) so you can spend less time testing that but if a user can't log in then the app is worthless. Test that.\n- Delete tests on a regular basis. Tests have a shelf life.\n- Fix or delete flaky tests. Bad tests are worse than no tests.\n\nOkay, create a new file called `Pizza.test.jsx`. This naming convention is just habit. `Pizza.spec.jsx` is common too. But as long as it's in the `__tests__` directory it doesn't much matter what you call it.\n\n```javascript\nimport { render } from \"@testing-library/react\";\nimport { expect, test } from \"vitest\";\nimport Pizza from \"../Pizza\";\n\ntest(\"alt text renders on image\", async () => {\n const name = \"My Favorite Pizza\";\n const src = \"https://picsum.photos/200\";\n const screen = render(\n \n🚨 This is experimental and very likely to change in the future. Consider this a sneak peak into what is coming, not what to do today.
\n \nVitest is beginning to support more deeply browser-based testing. To those of us that have been around long enough to remember Selenium, this may strike fear deep int your heart. But fear not! Browser-based testing tools have come so far along since then that it's both fast and reliable, in particular thanks to the Microsoft project Playwright .
\nHowever this is still early days. I'm going to show you how to set it up but be warned that this prone to change as they're still actively working on it!
\nSo first let's install the libraries we need.
\nnpm i -D @vitest/browser@2.1.3 playwright@1.48.0 vitest-browser-react@0.0.1\nYou can see that the vitest-browser-react library is still 0.0.1 as of writing so be extra aware it's likely to have changed by the time you read this.
\nOkay, so now we want to write browser based tests. But we have also have a bunch of existing Node.js-based tests. Some our already-existing Node.js based tests won't work in the browser. But no worries, Vitest/Vite has a tool just for this, workspaces. It's actually made to handle monorepos, but it will work here just as well. Make a file called vitest.workspace.js (you don't normally need this as your Vite config is normally enough.)
\nimport { defineWorkspace } from "vitest/config" ;\n\nexport default defineWorkspace ([\n {\n extends : "./vite.config.js" ,\n test : {\n include : ["**/*.node.test.{js,jsx}" ],\n name : "happy-dom" ,\n environment : "happy-dom" ,\n },\n },\n {\n extends : "./vite.config.js" ,\n test : {\n setupFiles : ["vitest-browser-react" ],\n include : ["**/*.browser.test.{js,jsx}" ],\n name : "browser" ,\n browser : {\n provider : "playwright" ,\n enabled : true ,\n name : "firefox" , \n },\n },\n },\n]);\nNow delete the test items from your vite.config.js file.
\nThis is a test-only config for Vite (and therefore Vitest.) Now if a test ends in .node.test.jsx it will run through the happy-dom based environment and if it ends in .browser.test.jsx it will run in our new browser-based environment with Playwright. Let's go rename our tests to reflect that.
\n\nCart.browser.test.jsx \ncontact.lazy.node.test.jsx \nPizza.node.test.jsx \nusePizzaOfTheDay.node.test.jsx \n \nSnapshotting works in the browser so that one works okay. Anything using vitest-fetch-mock is Node.js only so for those we need to mark them as node. We're going to make a new Pizza file so let's leave that one. And our custom hook test mocks fetch so that one is Node only.
\nOkay, now create a Pizza.browser.test.jsx
\nimport { render } from "vitest-browser-react" ;\nimport { expect, test } from "vitest" ;\nimport Pizza from "../Pizza" ;\n\ntest ("alt text renders on image" , async () => {\n const name = "My Favorite Pizza" ;\n const src = "https://picsum.photos/200" ;\n const screen = render (\n <Pizza name ={name} description ="super cool pizza" image ={src} /> const img = await screen.getByRole ("img" );\n\n await expect.element (img).toBeInTheDocument ();\n await expect.element (img).toHaveAttribute ("src" , src);\n await expect.element (img).toHaveAttribute ("alt" , name);\n});\n\nrender will take a React component and render it in a vacuum. You can then poke and prod it as you need to test it.A big part of what Playwright and vitest-browser-react want you to do is not test implementation details but to test actual user experiences. Don't test the internal state of a React component but do test what users will see and experience. As such, a lot of we'll be testing will be around roles, attributes, etc. \n@testing-library has a good doc on why they choose to test this way.In general, vitest-browser-react aims to be a drop in replacement for @testing-library/react. \n \nLooks really similar, right? Alright, let's run it. npm run test. You should see the same Vitest UI but now some of the tests are actually running in the browser.
\n\nIt will likely prompt you to run a command like npx playwright install. You'll install local copies of browsers to able to run them super fast.
\n \nCool, right? And really fast! Let's do one more. Let's make a Header.jsx test. We're going to test that the cart number is correct. Remember when Facebook notification numbers were always wrong? We're going to make sure that doesn't happen with our cart indicator. In your Header.jsx file:
\ndata-testid="cart-number" \nNow make a Header.browser.test.jsx
\nimport { render } from "vitest-browser-react" ;\nimport { expect, test } from "vitest" ;\nimport Header from "../Header" ;\nimport {\n RouterProvider ,\n createRouter,\n createRootRoute,\n} from "@tanstack/react-router" ;\nimport { CartContext } from "../contexts" ;\n\ntest ("correctly renders a header with a zero cart count" , async () => {\n const rootRoute = createRootRoute ({\n component : () => (\n <CartContext.Provider value ={[[]]} > \n <Header /> \n </CartContext.Provider > const router = createRouter ({ routeTree : rootRoute });\n const screen = render (<RouterProvider router ={router} > </RouterProvider > const itemsInCart = await screen.getByTestId ("cart-number" );\n\n await expect.element (itemsInCart).toBeInTheDocument ();\n await expect.element (itemsInCart).toHaveTextContent ("0" );\n});\n\ntest ("correctly renders a header with a three cart count" , async () => {\n const rootRoute = createRootRoute ({\n component : () => (\n <CartContext.Provider \n value ={[[{ pizza: 1 }, { pizza: 2 }, { pizza: 3 }]]}\n > \n <Header /> \n </CartContext.Provider > const router = createRouter ({ routeTree : rootRoute });\n const screen = render (<RouterProvider router ={router} > </RouterProvider > const itemsInCart = await screen.getByTestId ("cart-number" );\n\n await expect.element (itemsInCart).toBeInTheDocument ();\n await expect.element (itemsInCart).toHaveTextContent ("3" );\n});\nWe do have to bend over a bit backwards to make sure TanStack Router is happy, hence all the making of root routes. Remember also that our cart gets its cart from context so we have to pass it in that way. Beyond that, it works very similar!
\nAgain, these are early days for browser-based testing with Vite so proceed in your professional settings with caution. However the future is bright with Playwright!
\n\n🏁 Click here to see the state of the project up until now: 14-testing
\n \n","markdown":"\n> 🚨 This is experimental and very likely to change in the future. Consider this a sneak peak into what is coming, not what to do today.\n\nVitest is beginning to support more deeply browser-based testing. To those of us that have been around long enough to remember Selenium, this may strike fear deep int your heart. But fear not! Browser-based testing tools have come so far along since then that it's both fast and reliable, in particular thanks to the Microsoft project [Playwright][playwright].\n\nHowever this is still early days. I'm going to show you how to set it up but be warned that this prone to change as they're still actively working on it!\n\nSo first let's install the libraries we need.\n\n```bash\nnpm i -D @vitest/browser@2.1.3 playwright@1.48.0 vitest-browser-react@0.0.1\n```\n\nYou can see that the vitest-browser-react library is still 0.0.1 as of writing so be extra aware it's likely to have changed by the time you read this.\n\nOkay, so now we want to write browser based tests. But we have also have a bunch of existing Node.js-based tests. Some our already-existing Node.js based tests won't work in the browser. But no worries, Vitest/Vite has a tool just for this, workspaces. It's actually made to handle monorepos, but it will work here just as well. Make a file called `vitest.workspace.js` (you don't normally need this as your Vite config is normally enough.)\n\n```javascript\nimport { defineWorkspace } from \"vitest/config\";\n\nexport default defineWorkspace([\n {\n extends: \"./vite.config.js\",\n test: {\n include: [\"**/*.node.test.{js,jsx}\"],\n name: \"happy-dom\",\n environment: \"happy-dom\",\n },\n },\n {\n extends: \"./vite.config.js\",\n test: {\n setupFiles: [\"vitest-browser-react\"],\n include: [\"**/*.browser.test.{js,jsx}\"],\n name: \"browser\",\n browser: {\n provider: \"playwright\",\n enabled: true,\n name: \"firefox\", // you can use chromium or webkit here too\n },\n },\n },\n]);\n```\n\nNow delete the `test` items from your vite.config.js file.\n\nThis is a test-only config for Vite (and therefore Vitest.) Now if a test ends in `.node.test.jsx` it will run through the happy-dom based environment and if it ends in `.browser.test.jsx` it will run in our new browser-based environment with Playwright. Let's go rename our tests to reflect that.\n\n- Cart.browser.test.jsx\n- contact.lazy.node.test.jsx\n- Pizza.node.test.jsx\n- usePizzaOfTheDay.node.test.jsx\n\nSnapshotting works in the browser so that one works okay. Anything using vitest-fetch-mock is Node.js only so for those we need to mark them as node. We're going to make a new Pizza file so let's leave that one. And our custom hook test mocks fetch so that one is Node only.\n\nOkay, now create a Pizza.browser.test.jsx\n\n```javascript\nimport { render } from \"vitest-browser-react\";\nimport { expect, test } from \"vitest\";\nimport Pizza from \"../Pizza\";\n\ntest(\"alt text renders on image\", async () => {\n const name = \"My Favorite Pizza\";\n const src = \"https://picsum.photos/200\";\n const screen = render(\n \n \n \n ),\n });\n\n const router = createRouter({ routeTree: rootRoute });\n const screen = render(\n \n \n ),\n });\n\n const router = createRouter({ routeTree: rootRoute });\n const screen = render(One last very cool trick that Vitest has built into it: v8 . v8 uses Chrome's builtin test coverage tool which tells you how much of your code that you're covering with tests. Via an interactive viewer you can see what lines are and aren't covered. This used to be annoying to set up by Vitest just does it for you.
\nRun the following
\nnpm i -D @vitest/coverage-v8\n\nYou can also use Istanbul if you want to. npm i -D @vitest/coverage-istanbul will get you the package. But I'd say v8 is the superior tool.
\n \nNow add this to your vite.config.js
\ncoverage : {\n reporter : ["text" , "json" , "html" ],\n},\nAdd the following command to your npm scripts: "coverage": "vitest --coverage" and go ahead run npm run coverage and open the following file in your browser: open coverage/index.html.
\nHere you can see the files we've written tests for. One file, postContact is missing two lines of coverage (click on the file name to see that): it's the line of reading back from the cache. It's a file we didn't write a test for but it got covered via our test for the contact page. It's missing a test to cover error cases which could be important. What if our contact API is down? This tool helps you look through your code and see what your tests aren't covering. Some of those could be fine and not worth the effort writing a test for. Others you'll look at and say "oh my god we need to cover that with tests yesterday."
\nLastly, add coverage/ to your .gitignore since this shouldn't be checked in.
\nIstanbul \nv8 use Chrome's built-in code coverage capabilities to run your tests which makes it significantly faster and outputs it in a way that all of Istanbul tools work with it. You can tell Vitest to use Istanbul but unless you have a very specific reason to, just use v8.
\n","markdown":"\nOne last very cool trick that Vitest has built into it: [v8][v8]. v8 uses Chrome's builtin test coverage tool which tells you _how much_ of your code that you're covering with tests. Via an interactive viewer you can see what lines are and aren't covered. This used to be annoying to set up by Vitest just does it for you.\n\nRun the following\n\n```bash\nnpm i -D @vitest/coverage-v8\n```\n\n> You can also use [Istanbul][istanbul] if you want to. `npm i -D @vitest/coverage-istanbul` will get you the package. But I'd say v8 is the superior tool.\n\nNow add this to your vite.config.js\n\n```javascript\ncoverage: {\n reporter: [\"text\", \"json\", \"html\"],\n},\n```\n\nAdd the following command to your npm scripts: `\"coverage\": \"vitest --coverage\"` and go ahead run `npm run coverage` and open the following file in your browser: `open coverage/index.html`.\n\nHere you can see the files we've written tests for. One file, `postContact` is missing two lines of coverage (click on the file name to see that): it's the line of reading back from the cache. It's a file we didn't write a test for but it got covered via our test for the contact page. It's missing a test to cover error cases which could be important. What if our contact API is down? This tool helps you look through your code and see what your tests aren't covering. Some of those could be fine and not worth the effort writing a test for. Others you'll look at and say \"oh my god we need to cover that with tests yesterday.\"\n\nLastly, add `coverage/` to your `.gitignore` since this shouldn't be checked in.\n\n## Istanbul\n\nv8 use Chrome's built-in code coverage capabilities to run your tests which makes it significantly faster and outputs it in a way that all of [Istanbul][istanbul] tools work with it. You can tell Vitest to use Istanbul but unless you have a very specific reason to, just use v8.\n\n[istanbul]: https://istanbul.js.org/\n[c8]: https://github.com/bcoe/c8\n[v8]: https://vitest.dev/guide/coverage.html\n","slug":"coverage","title":"v8","section":"Testing","icon":"vial","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/07-testing/F-coverage.md","nextSlug":"/lessons/testing/vitest-ui","prevSlug":"/lessons/testing/snapshot-testing"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/testing/snapshot-testing.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/testing/snapshot-testing.json
new file mode 100644
index 0000000..1ec22a2
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/testing/snapshot-testing.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Discover snapshot testing in React with Brian Holt's Complete Intro to React, a course offering insights into efficient testing techniques for components like Cart.jsx. Learn about the benefits and limitations of snapshot tests, how to implement them using tools like Vitest, and explore their practical applications in UI and API development. Ideal for developers looking to enhance their testing strategies in web development.","keywords":["React","Snapshot Testing","Brian Holt","Vitest","UI Testing"]},"html":"I'm not a fan of seeking 100% test coverage. I think it's a fool's errand and a waste of time. I'd rather you write five tests that cover the most important five lines of your code than see you write one test for five less-important pieces of UI code.
\nBut let's show you an easy way to cheat and get there! Let's talk about snapshot testing.
\nSnapshot tests are low confidence, low cost ways of writing tests. With more-or-less a single line of code you can assert: this code doesn't break, and it isn't changing over time.
\nLet's test Cart.jsx. It's a pretty stable component that doesn't do a lot and we don't expect it to change a lot if at all. A low cost, low confidence test could fit here. Make a file called Cart.test.jsx
\nimport { expect, test } from "vitest" ;\nimport { render } from "@testing-library/react" ;\nimport Cart from "../Cart" ;\n\ntest ("snapshot with nothing in cart" , () => {\n const { asFragment } = render (<Cart cart ={[]} /> expect (asFragment ()).toMatchSnapshot ();\n});\nRun this to see Vitest say it created a snapshot. Go look now at Cart.test.jsx.snap in the src/__tests__/__snapshots__ to see what it created. You can see it's just rendering out what it would look like. Now if you modify Cart.jsx it will fail the test. As you can see, it's a quick gut check to make sure your changes don't have cascading problems. If I modify App.jsx and it causes this to fail it means I can catch it and validate quickly. Some people don't find it useful. I'm not entirely sold on it to be honest; at most these should be used very sparingly. This could be useful if you have a component that you expect to never change and it would be a problem if it did. Maybe a footer? I don't know. I never write these.
\nLet's add some pizzas and see how it does.
\ntest ("snapshot with some stuff in cart" , () => {\n const { asFragment } = render (\n <Cart \n cart ={[ \n {\n pizza: {\n id: "pepperoni ",\n name: "The Pepperoni Pizza ",\n category: "Classic ",\n description: "Mozzarella Cheese , Pepperoni ",\n image: "/public /pizzas /pepperoni.webp ",\n sizes: {\n S: 9.75 ,\n M: 12.5 ,\n L: 15.25 ,\n },\n },\n size: "M ",\n price: "$12.50 ",\n },\n {\n pizza: {\n id: "ckn_pesto ",\n name: "The Chicken Pesto Pizza ",\n category: "Chicken ",\n description: \n "Chicken , Tomatoes , Red Peppers , Spinach , Garlic , Pesto Sauce ",\n image: "/public /pizzas /ckn_pesto.webp ",\n sizes: {\n S: 12.75 ,\n M: 16.75 ,\n L: 20.75 ,\n },\n },\n size: "L ",\n price: "$20.75 ",\n },\n {\n pizza: {\n id: "bbq_ckn ",\n name: "The Barbecue Chicken Pizza ",\n category: "Chicken ",\n description: \n "Barbecued Chicken , Red Peppers , Green Peppers , Tomatoes , Red Onions , Barbecue Sauce ",\n image: "/public /pizzas /bbq_ckn.webp ",\n sizes: {\n S: 12.75 ,\n M: 16.75 ,\n L: 20.75 ,\n },\n },\n size: "S ",\n price: "$12.75 ",\n },\n ]}\n /> expect (asFragment ()).toMatchSnapshot ();\n});\nThis works, and now you can stick with this, but here's a problem. If you look at your snapshot, it's rendering Pizza components as well. Now if you modify Pizza.jsx (that has its own tests already) your Cart.jsx test is going to fail. This is misleading, nothing is wrong or different with Cart.jsx. In a previous version of this class I show you how to accomplish this with react-test-renderer. However the folks at @testing-lib think shallow rendering is more harmful than helpful (I like, 75% agree) so we'll leave it out. Click here to see me teach this previously. It's 95% the same, just uses Jest instead of Vitest.
\nUpdate your snapshots by either running npm run test -- -u or you can use the watcher to do it with either u to update all at once or do i one-by-one.
\nYou should commit snapshot files to git.
\nI'll leave it up to you how much you value these tests. I think they have a very limited place in UI testing but it's pretty low level of help. Frequently they become more noise than help. In any case, keep them in your toolbox, some times they can be helpful.
\n\nAs a side note, one place I saw some use for snapshot tests (as they can track any object shape over time, not just React components) was in the backend in API response shapes. We'd write a snapshot test that this API response is always going to look like this and it should fail the test if it breaks. This makes it very intentional every time you modify the API response (since your API clients are likely relying on it being a certain shape.) Furthermore, it means the frontend devs can use these snapshot files to see what the API response is going to look like. Niche, but it was helpful on the one project I worked on that had it.
\n \n","markdown":"\nI'm not a fan of seeking 100% test coverage. I think it's a fool's errand and a waste of time. I'd rather you write five tests that cover the most important five lines of your code than see you write one test for five less-important pieces of UI code.\n\nBut let's show you an easy way to cheat and get there! Let's talk about snapshot testing.\n\nSnapshot tests are low confidence, low cost ways of writing tests. With more-or-less a single line of code you can assert: this code doesn't break, and it isn't changing over time.\n\nLet's test Cart.jsx. It's a pretty stable component that doesn't do a lot and we don't expect it to change a lot if at all. A low cost, low confidence test could fit here. Make a file called Cart.test.jsx\n\n```javascript\nimport { expect, test } from \"vitest\";\nimport { render } from \"@testing-library/react\";\nimport Cart from \"../Cart\";\n\ntest(\"snapshot with nothing in cart\", () => {\n const { asFragment } = render(Let's say we needs tests for our custom hook, usePizzaOfTheDay. Testing custom hooks is a bit of a trick because they are inherently tied to the internal workings of React: they can't be called outside of a component. So how we do we get around that? We fake a component! Make a file called usePizzaOfTheDay.test.jsx in our __tests__ directory.
\nimport { expect, test, vi } from "vitest" ;\nimport { render } from "@testing-library/react" ;\nimport createFetchMock from "vitest-fetch-mock" ;\nimport { usePizzaOfTheDay } from "../usePizzaOfTheDay" ;\n\nconst fetchMocker = createFetchMock (vi);\nfetchMocker.enableMocks ();\n\nconst testPizza = {\n id : "calabrese" ,\n name : "The Calabrese Pizza" ,\n category : "Supreme" ,\n description :\n "Salami, Pancetta, Tomatoes, Red Onions, Friggitello Peppers, Garlic" ,\n image : "/public/pizzas/calabrese.webp" ,\n sizes : { S : 12.25 , M : 16.25 , L : 20.25 },\n};\n\nfunction getPizzaOfTheDay (let pizza;\n\n function TestComponent (usePizzaOfTheDay ();\n return null ;\n }\n\n render (<TestComponent /> return pizza;\n}\n\ntest ("gives null when first called" , async () => {\n fetch.mockResponseOnce (JSON .stringify (testPizza));\n const pizza = getPizzaOfTheDay ();\n expect (pizza).toBeNull ();\n});\nIt's a little weird to implement a fake component to test something (we're dangerously close to the line of testing implementation details) but this is essentially library code and we want to assure ourselves this code works if we use it frequently in our code base.
\nWe can make this better though. Let's rewrite our test to look like this:
\nimport { renderHook } from "@testing-library/react" ; \n\ntest ("to be null on initial load" , async () => {\n fetch.mockResponseOnce (JSON .stringify (testPizza));\n const { result } = renderHook (() => usePizzaOfTheDay ("" ));\n expect (result.current ).toBeNull ();\n});\nHere the helper renderHook abstracts away that oddity we had to do to get that hook tested. But rest assured it's doing essentially the same thing: creating a component under the hood that's running the hook lifecycle methods appropriately for you.
\nLet's add a test to make sure it does the right thing with the API response and calls the right API
\nimport { renderHook, waitFor } from "@testing-library/react" ; \n\ntest ("to call the API and give back the pizza of the day" , async () => {\n fetch.mockResponseOnce (JSON .stringify (testPizza));\n const { result } = renderHook (() => usePizzaOfTheDay ("" ));\n await waitFor (() => {\n expect (result.current ).toEqual (testPizza);\n });\n expect (fetchMocker).toBeCalledWith ("/api/pizza-of-the-day" );\n});\n\nwaitFor is a handy trick where you need to wait for React to settle. You give it a body that throws errors until it's true. expect when it doesn't work throws an error so that's how this works. \nOnce it resolves to true, it passes the test and moves on. If it fails like 20 times (that's configurable) it will then fail the test. \nSome people this is too into the implementation details and I half agree. However it is useful from the perspective that this hook needs to work in a certain way and it has an expectation of an API to call which does affect user behavior so it could be useful. If this was truly our codebase, I'd just test the PizzaOfTheDay component and call it good. But if we used this hook in lots of places, I'd probably a test just for it. \n \n","markdown":"\nLet's say we needs tests for our custom hook, usePizzaOfTheDay. Testing custom hooks is a bit of a trick because they are inherently tied to the internal workings of React: they can't be called outside of a component. So how we do we get around that? We fake a component! Make a file called usePizzaOfTheDay.test.jsx in our `__tests__` directory.\n\n```javascript\nimport { expect, test, vi } from \"vitest\";\nimport { render } from \"@testing-library/react\";\nimport createFetchMock from \"vitest-fetch-mock\";\nimport { usePizzaOfTheDay } from \"../usePizzaOfTheDay\";\n\nconst fetchMocker = createFetchMock(vi);\nfetchMocker.enableMocks();\n\nconst testPizza = {\n id: \"calabrese\",\n name: \"The Calabrese Pizza\",\n category: \"Supreme\",\n description:\n \"Salami, Pancetta, Tomatoes, Red Onions, Friggitello Peppers, Garlic\",\n image: \"/public/pizzas/calabrese.webp\",\n sizes: { S: 12.25, M: 16.25, L: 20.25 },\n};\n\nfunction getPizzaOfTheDay() {\n let pizza;\n\n function TestComponent() {\n pizza = usePizzaOfTheDay();\n return null;\n }\n\n render(Let's test the Contact page. It has a nice, simple user interaction. User puts their information in, we submit to the API, and we show them a submitted header. Let's test all of that.
\nFirst we need a helper function, vitest-fetch-mock. We don't need it because Vitest can do it, but I think it just makes things easier.
\nnpm i -D vitest-fetch-mock@0.3.0\nAnd now let's write the code
\nimport { render } from "@testing-library/react" ;\nimport { expect, test, vi } from "vitest" ;\nimport createFetchMock from "vitest-fetch-mock" ;\nimport { QueryClientProvider , QueryClient } from "@tanstack/react-query" ;\nimport { Route } from "../routes/contact.lazy" ;\n\nconst queryClient = new QueryClient ();\n\nconst fetchMocker = createFetchMock (vi);\nfetchMocker.enableMocks ();\n\ntest ("can submit contact form" , async () => {\n fetchMocker.mockResponse (JSON .stringify ({ status : "ok" }));\n const screen = render (\n <QueryClientProvider client ={queryClient} > \n <Route.options.component /> \n </QueryClientProvider > const nameInput = screen.getByPlaceholderText ("Name" );\n const emailInput = screen.getByPlaceholderText ("Email" );\n const msgTextArea = screen.getByPlaceholderText ("Message" );\n\n const testData = {\n name : "Brian" ,\n email : "test@example.com" ,\n message : "This is a test message" ,\n };\n\n nameInput.value = testData.name ;\n emailInput.value = testData.email ;\n msgTextArea.value = testData.message ;\n\n const btn = screen.getByRole ("button" );\n\n btn.click ();\n\n const h3 = await screen.findByRole ("heading" , { level : 3 });\n\n expect (h3.innerText ).toContain ("Submitted" );\n\n const requests = fetchMocker.requests ();\n expect (requests.length ).toBe (1 );\n expect (requests[0 ].url ).toBe ("/api/contact" );\n expect (fetchMocker).toHaveBeenCalledWith ("/api/contact" , {\n body : JSON .stringify (testData),\n headers : {\n "Content-Type" : "application/json" ,\n },\n method : "POST" ,\n });\n});\n\nWe need to wrap React Query with a query provider always or it doesn't work. In this case we can just make that part of the initial render. \nYou can pre-populate React Query with a valid cache and then test if your app uses that correctly. Totally valid way to test. In this case we want to make sure our endpoint is being posted to correctly (to make sure we record a contact)so we aren't doing that. \nvi is Vitest's spy library, similar to sinon.vitest-fetch-mock is just a nice layer on top of vi. We could just use vi directly. \nNotice we can just call click and it does all the things we'd expect. Cool, right? \nWe then make some assertions that our h3 shows up correctly, that our API was called once, and that it was submitted to our API the way we expect it to. This may seem a bit implementation-oriented, and it is, but typically in a larger app we'd have a library for calling our API and we'd test that individually but we don't here so we're wrapping it all together. \n \n","markdown":"Let's test the Contact page. It has a nice, simple user interaction. User puts their information in, we submit to the API, and we show them a submitted header. Let's test all of that.\n\nFirst we need a helper function, vitest-fetch-mock. We don't _need_ it because Vitest can do it, but I think it just makes things easier.\n\n```bash\nnpm i -D vitest-fetch-mock@0.3.0\n```\n\nAnd now let's write the code\n\n```javascript\nimport { render } from \"@testing-library/react\";\nimport { expect, test, vi } from \"vitest\";\nimport createFetchMock from \"vitest-fetch-mock\";\nimport { QueryClientProvider, QueryClient } from \"@tanstack/react-query\";\nimport { Route } from \"../routes/contact.lazy\";\n\nconst queryClient = new QueryClient();\n\nconst fetchMocker = createFetchMock(vi);\nfetchMocker.enableMocks();\n\ntest(\"can submit contact form\", async () => {\n fetchMocker.mockResponse(JSON.stringify({ status: \"ok\" }));\n const screen = render(\n \n \n );\n\n const nameInput = screen.getByPlaceholderText(\"Name\");\n const emailInput = screen.getByPlaceholderText(\"Email\");\n const msgTextArea = screen.getByPlaceholderText(\"Message\");\n\n const testData = {\n name: \"Brian\",\n email: \"test@example.com\",\n message: \"This is a test message\",\n };\n\n nameInput.value = testData.name;\n emailInput.value = testData.email;\n msgTextArea.value = testData.message;\n\n const btn = screen.getByRole(\"button\");\n\n btn.click();\n\n const h3 = await screen.findByRole(\"heading\", { level: 3 });\n\n expect(h3.innerText).toContain(\"Submitted\");\n\n const requests = fetchMocker.requests();\n expect(requests.length).toBe(1);\n expect(requests[0].url).toBe(\"/api/contact\");\n expect(fetchMocker).toHaveBeenCalledWith(\"/api/contact\", {\n body: JSON.stringify(testData),\n headers: {\n \"Content-Type\": \"application/json\",\n },\n method: \"POST\",\n });\n});\n```\n\n- We need to wrap React Query with a query provider always or it doesn't work. In this case we can just make that part of the initial render.\n- You can pre-populate React Query with a valid cache and then test if your app uses that correctly. Totally valid way to test. In this case we want to make sure our endpoint is being posted to correctly (to make sure we record a contact)so we aren't doing that.\n- `vi` is Vitest's spy library, similar to sinon.\n- vitest-fetch-mock is just a nice layer on top of vi. We could just use vi directly.\n- Notice we can just call `click` and it does all the things we'd expect. Cool, right?\n- We then make some assertions that our h3 shows up correctly, that our API was called once, and that it was submitted to our API the way we expect it to. This may seem a bit implementation-oriented, and it is, but typically in a larger app we'd have a library for calling our API and we'd test that individually but we don't here so we're wrapping it all together.\n","slug":"testing-user-interaction","title":"Testing User Interaction","section":"Testing","icon":"vial","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/07-testing/C-testing-user-interaction.md","nextSlug":"/lessons/testing/testing-custom-hooks","prevSlug":"/lessons/testing/basic-react-tests"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/testing/vitest-ui.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/testing/vitest-ui.json
new file mode 100644
index 0000000..20e118d
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/testing/vitest-ui.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"title":"Vitest UI","description":"Learn how to use Vitest UI, an efficient tool for managing tests in your browser, by adding it to your project with simple npm commands. Enhance your React development skills by integrating browser-based testing with Vitest for convenient module graph visualization and individual test management. Ideal for developers seeking practical tools within the Complete Intro to React course by Brian Holt.","keywords":["Vitest UI","React testing","Brian Holt","npm","module graph","React development"]},"html":"Another fun little tool let's you use is Vitest UI . It allows you to see and manage all your tests from the web browser. Let's add it.
\nnpm i -D @vitest/ui@2.1.3\nAnd in your package.json
\n\n"test:ui" : "vitest --ui" \nNow from the command line run npm run test:ui and it should pop up your browser with the Vitest UI open. Super convenient, particularly in places you need to run individual tests repeatedly and you don't have the VS Code extension. The module graph is a cool visualization as well.
\n","markdown":"\nAnother fun little tool let's you use is [Vitest UI][ui]. It allows you to see and manage all your tests from the web browser. Let's add it.\n\n```bash\nnpm i -D @vitest/ui@2.1.3\n```\n\nAnd in your package.json\n\n```json\n// in scripts\n\"test:ui\": \"vitest --ui\"\n```\n\nNow from the command line run `npm run test:ui` and it should pop up your browser with the Vitest UI open. Super convenient, particularly in places you need to run individual tests repeatedly and you don't have the VS Code extension. The module graph is a cool visualization as well.\n\n[ui]: https://vitest.dev/guide/ui.html\n","slug":"vitest-ui","title":"Vitest UI","section":"Testing","icon":"vial","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/07-testing/G-vitest-ui.md","nextSlug":"/lessons/testing/browser-tests","prevSlug":"/lessons/testing/coverage"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/testing/vitest.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/testing/vitest.json
new file mode 100644
index 0000000..d262420
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/testing/vitest.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Learn how to set up and perform testing on React applications using Vitest, a test runner compatible with Vite's build pipeline, from Brian Holt's Complete Intro to React course. This guide provides step-by-step instructions for integrating Vitest with @testing-library/react for efficient React testing, drawing on similarities with Jasmine and Jest APIs to deliver seamless testing experiences. Ideal for React developers seeking efficient test integration, this tutorial emphasizes real-time feedback and browser-like test environments with happy-dom.","keywords":["React testing","Vitest","Jest","React development","Brian Holt"]},"html":"This is meant to be a very brief treatise on how to do testing on React applications. This will be a brief intro on how to set up Vitest tests for the application we just created. For more information about Vite, Vitest, and testing in general, check out the Build Tools & Testing Learning Path .
\nTesting with Vitest \nVitest is a test runner made by the fine folks who make Vite (as well as Vue.) The idea behind Vitest is that you already have a complete build pipeline for making an app, why should that pipeline be any different for test? It shouldn't; you want your testing environment to look as much like your app environment as possible.
\nThey designed it to be a drop-in replacement for Jest which is what I have taught for this course since the beginning. Jest is great and still a very viable tool to use for testing, even with Vite. We're just going to use Vitest because 1. we don't have to do any more configuration and 2. 100% of what you will learn in here is going to be useful if you use Jest. Win-win. If you want to learn Jest specifically, take a look at Intermediate React v4's testing section.
\n\nFun side note: Jest is now an OpenJS project and no longer directly under Facebook .
\n \nWhile Vitest is not using Jasmine directly, its APIs mimic Jasmine APIs (just like Jest.)
\nLet's get going. Run npm install -D vitest@2.1.3 @testing-library/react@16.0.1 happy-dom@15.7.4.
\n@testing-library/react, formerly called react-testing-library, is a tool that has a bunch of convenience features that make testing React significantly easier and is now the recommended way of testing React, supplanting Enzyme . Previous versions of this course teach Enzyme if you'd like to see that (though I wouldn't recommend it unless you have to.)
\nWe need to tell Vitest that we need a browser-like environment which it will fulfill via the happy-dom package. happy-dom is a lot like jsdom but smaller, doesn't do 100% of what the browser does, and is much, much faster.
\nNext go into your src directory and create a folder called __tests__. Notice that's double underscores on both sides. Why double? They borrowed it from Python where double underscores ("dunders" as I've heard them called) mean something magic happens (in essence it means the name itself has significance and something is looking for that path name exactly.) In this case, Vitest assumes all JS files in here are tests.
\nLet's go add an npm script. In your package.json.
\n"test" : "vitest" \n\nFun trick: if you call it test, npm lets you run that command as just npm t.
\n \nThis command lets you run Jest in an interactive mode where it will re-run tests selectively as you save them. This lets you get instant feedback if your test is working or not. This is probably my favorite feature of Vitest.
\nOkay, one little configuration to add to your vite.config.js.
\n\ntest : {\n environment : "happy-dom" ,\n},\nNow that we've got that going, let's go write a test.
\n","markdown":"\nThis is meant to be a very brief treatise on how to do testing on React applications. This will be a brief intro on how to set up Vitest tests for the application we just created. For more information about Vite, Vitest, and testing in general, check out the [Build Tools & Testing Learning Path][lp].\n\n## Testing with Vitest\n\n[Vitest][vitest] is a test runner made by the fine folks who make Vite (as well as Vue.) The idea behind Vitest is that you already have a complete build pipeline for making an app, why should that pipeline be any different for test? It shouldn't; you want your testing environment to look as much like your app environment as possible.\n\nThey designed it to be a drop-in replacement for [Jest][jest] which is what I have taught for this course since the beginning. Jest is great and still a very viable tool to use for testing, even with Vite. We're just going to use Vitest because 1. we don't have to do any more configuration and 2. 100% of what you will learn in here is going to be useful if you use Jest. Win-win. If you want to learn Jest specifically, [take a look at Intermediate React v4's testing section.][v4]\n\n> Fun side note: [Jest is now an OpenJS project and no longer directly under Facebook][fb].\n\nWhile Vitest is not using Jasmine directly, its APIs mimic Jasmine APIs (just like Jest.)\n\nLet's get going. Run `npm install -D vitest@2.1.3 @testing-library/react@16.0.1 happy-dom@15.7.4`.\n\n`@testing-library/react`, formerly called `react-testing-library`, is a tool that has a bunch of convenience features that make testing React significantly easier and is now the recommended way of testing React, supplanting [Enzyme][enzyme]. Previous versions of this course teach Enzyme if you'd like to see that (though I wouldn't recommend it unless you have to.)\n\nWe need to tell Vitest that we need a browser-like environment which it will fulfill via the [happy-dom][hd] package. happy-dom is a lot like jsdom but smaller, doesn't do 100% of what the browser does, and is much, much faster.\n\nNext go into your src directory and create a folder called `__tests__`. Notice that's double underscores on both sides. Why double? They borrowed it from Python where double underscores (\"dunders\" as I've heard them called) mean something magic happens (in essence it means the name itself has significance and something is looking for that path name exactly.) In this case, Vitest assumes all JS files in here are tests.\n\nLet's go add an npm script. In your package.json.\n\n```json\n\"test\": \"vitest\"\n```\n\n> Fun trick: if you call it test, npm lets you run that command as just `npm t`.\n\nThis command lets you run Jest in an interactive mode where it will re-run tests selectively as you save them. This lets you get instant feedback if your test is working or not. This is probably my favorite feature of Vitest.\n\nOkay, one little configuration to add to your vite.config.js.\n\n```javascript\n// add this to the config object\ntest: {\n environment: \"happy-dom\",\n},\n```\n\nNow that we've got that going, let's go write a test.\n\n[jest]: https://jestjs.io\n[jasmine]: https://jasmine.github.io/\n[enzyme]: http://airbnb.io/enzyme/\n[istanbul]: https://istanbul.js.org\n[res]: https://raw.githubusercontent.com/btholt/complete-intro-to-react-v5/testing/__mocks__/@frontendmasters/res.json\n[app]: https://github.com/btholt/citr-v8-project/tree/master/14-context\n[fb]: https://twitter.com/cpojer/status/1524419433938046977\n[hd]: https://github.com/capricorn86/happy-dom\n[vitest]: https://vitest.dev/\n[v4]: https://frontendmasters.com/courses/intermediate-react-v4/setup-jest-testing-library/\n[lp]: https://frontendmasters.com/learn/build-tools/","slug":"vitest","title":"Vitest","section":"Testing","icon":"vial","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/07-testing/A-vitest.md","nextSlug":"/lessons/testing/basic-react-tests","prevSlug":"/lessons/advanced-react/uncontrolled-forms"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/code-formatting.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/code-formatting.json
new file mode 100644
index 0000000..38dcb04
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/code-formatting.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Learn how to maintain high code quality with Prettier by James Long, a powerful tool for consistent code formatting. Discover easy integration methods and how to use Prettier with Visual Studio Code to streamline your development process, as well as setup instructions for npm scripts in this guide from Brian Holt's Complete Intro to React course.","keywords":["Prettier","code quality","ESLint","Brian Holt","React development","Visual Studio Code","npm scripts"]},"html":"Prettier \nIt's important to keep quality high when writing code. Or at least that's how I sell ESLint and Prettier to my co-workers. In reality I'm super lazy and want the machine to do as much work as possible so I can focus more on architecture and problem-solving and less on syntax and style. While there are many tools that can help you keep code quality high, these two I consider core to my workflow.
\nPrettier is an amazing tool from the brain of James Long . James, like many of us, was sick of having to constantly worry about the style of his code: where to stick indents, how many, when to break lines, etc etc. Coming from languages like Go, Reason, or Elm where all that is just taken care of by the tooling for the language, this quickly wears. James did something about it and made a tool to take care of it: Prettier.
\nPrettier is a really fancy pretty printer. It takes the code you write, breaks it down in to an abstract syntax tree (AST) which is just a representation of your code. It then takes that AST, throws away all of your code style you made and prints it back out using a predefined style. While this sounds a little scary, it's actually really cool. Since you no longer have control of the style of your code, you no longer have to think about it at all. Your code is always consistent, as is the code from the rest of your team. No more bikeshedding!! As I like to put it: if your brain is a processor, you get to free up the thread of your brain that worries about code styles and readability: it just happens for you. Don't like semicolons? Don't write them! It puts them in for you. I love Prettier.
\nNeed to tool around a bit with it before you trust it? Go here . You can see how it works.
\nLet's go integrate this into our project. It's pretty easy (since I'm a dad now, I'm legally obligated to make this joke.)
\nEither install Prettier globally npm install --global prettier or replace when I run prettier with (from the root of your project) npx prettier. From there, run prettier src/App.js. This will output the formatted version of your file. If you want to actually write the file, run prettier --write src/App.js. Go check src/App.js and see it has been reformatted a bit. I will say for non-JSX React, prettier makes your code less readable. Luckily Prettier supports JSX! We'll get to that shortly.
\nPrettier has a few configurations but it's mostly meant to be a tool everyone uses and doesn't argue/bikeshed about the various code style rules. Here they are . I just use it as is since I'm lazy. Prettier can also understand flow and TypeScript .
\nPrettier is great to use with Visual Studio Code . Just download this extension . Pro tip: set it to only run Prettier when it detects a Prettier config file. Makes it so you never have to turn it off. In order to do that, set prettier.requireConfig to true and editor.formatOnSave to true.
\nSo that our tool can know this is a Prettier project, we're going to create a file called .prettierrc and put {} in it. This lets everyone know this is a Prettier project that uses the default configuration. You can put other configs here if you hold strong formatting opinions.
\nnpm scripts \nSo it can be painful to try to remember the various CLI commands to run on your project. You can put CLI commands into it and then run the name of the tag and it'll run that script. Let's go see how that works. Put the following into your package.json.
\nFirst run npm install -D prettier@3.3.3 -D means it's for development only.
\n"scripts" : { \n "format" : "prettier --write \\"src/**/*.{js,jsx}\\"" \n} , \nNow you can run npm run format and it will run that command. This means we don't have to remember that mess of a command and just have to remember format. Nice, right? We'll be leaning on this a lot during this course.
\n\nNote the @3.3.3 portion. For the purposes of making this course not break in the future, I have you install the exact version of packages I used when I made this course. As is natural, packages change and progress over time and I can't anticipate how that will happen. So I'd suggest you use the same packages I do as you do this course (even if npm yells at you for security vulnerabilites). As soon as you're done with the course, feel free to go update the versions to the latest and see if anything breaks.
\n \n","markdown":"\n## Prettier\n\nIt's important to keep quality high when writing code. Or at least that's how I sell ESLint and Prettier to my co-workers. In reality I'm super lazy and want the machine to do as much work as possible so I can focus more on architecture and problem-solving and less on syntax and style. While there are many tools that can help you keep code quality high, these two I consider core to my workflow.\n\n[Prettier][prettier] is an amazing tool from the brain of [James Long][jlongster]. James, like many of us, was sick of having to constantly worry about the style of his code: where to stick indents, how many, when to break lines, etc etc. Coming from languages like Go, Reason, or Elm where all that is just taken care of by the tooling for the language, this quickly wears. James did something about it and made a tool to take care of it: Prettier.\n\nPrettier is a really fancy pretty printer. It takes the code you write, breaks it down in to an abstract syntax tree (AST) which is just a representation of your code. It then takes that AST, throws away all of your code style you made and prints it back out using a predefined style. While this sounds a little scary, it's actually really cool. Since you no longer have control of the style of your code, you no longer have to think about it at all. Your code is always consistent, as is the code from the rest of your team. No more bikeshedding!! As I like to put it: if your brain is a processor, you get to free up the thread of your brain that worries about code styles and readability: it just happens for you. Don't like semicolons? Don't write them! It puts them in for you. I _love_ Prettier.\n\nNeed to tool around a bit with it before you trust it? [Go here][prettier-playground]. You can see how it works.\n\nLet's go integrate this into our project. It's _pretty_ easy (since I'm a dad now, I'm legally obligated to make this joke.)\n\nEither install Prettier globally `npm install --global prettier` or replace when I run `prettier` with (from the root of your project) `npx prettier`. From there, run `prettier src/App.js`. This will output the formatted version of your file. If you want to actually write the file, run `prettier --write src/App.js`. Go check src/App.js and see it has been reformatted a bit. I will say for non-JSX React, prettier makes your code less readable. Luckily Prettier supports JSX! We'll get to that shortly.\n\nPrettier has a few configurations but it's mostly meant to be a tool everyone uses and doesn't argue/bikeshed about the various code style rules. [Here they are][prettier-options]. I just use it as is since I'm lazy. Prettier can also understand [flow][flow] and [TypeScript][ts].\n\nPrettier is great to use with [Visual Studio Code][vscode]. Just download [this extension][vscode-prettier]. Pro tip: set it to only run Prettier when it detects a Prettier config file. Makes it so you never have to turn it off. In order to do that, set `prettier.requireConfig` to `true` and `editor.formatOnSave` to true.\n\nSo that our tool can know this is a Prettier project, we're going to create a file called `.prettierrc` and put `{}` in it. This lets everyone know this is a Prettier project that uses the default configuration. You can put other configs here if you hold strong formatting opinions.\n\n## npm scripts\n\nSo it can be painful to try to remember the various CLI commands to run on your project. You can put CLI commands into it and then run the name of the tag and it'll run that script. Let's go see how that works. Put the following into your package.json.\n\nFirst run `npm install -D prettier@3.3.3` `-D` means it's for development only.\n\n```json\n\"scripts\": {\n\t\"format\": \"prettier --write \\\"src/**/*.{js,jsx}\\\"\"\n},\n```\n\nNow you can run `npm run format` and it will run that command. This means we don't have to remember that mess of a command and just have to remember format. Nice, right? We'll be leaning on this a lot during this course.\n\n> Note the `@3.3.3` portion. For the purposes of making this course not break in the future, I have you install the _exact_ version of packages I used when I made this course. As is natural, packages change and progress over time and I can't anticipate how that will happen. So I'd suggest you use the same packages I do as you do this course (even if npm yells at you for security vulnerabilites). As soon as you're done with the course, feel free to go update the versions to the latest and see if anything breaks.\n\n[jlongster]: https://twitter.com/jlongster\n[prettier]: https://github.com/prettier/prettier\n[prettier-playground]: https://prettier.io/playground/\n[prettier-options]: https://prettier.io/docs/en/options.html\n[flow]: https://flow.org/\n[prettier-ide]: https://prettier.io/docs/en/editors\n[ts]: https://www.typescriptlang.org/\n[vscode]: https://code.visualstudio.com/?WT.mc_id=reactintro-github-brholt\n[vscode-prettier]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&WT.mc_id=reactintro-github-brholt\n","slug":"code-formatting","title":"Code Formatting","section":"Tools","icon":"screwdriver-wrench","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/03-tools/B-code-formatting.md","nextSlug":"/lessons/tools/linting","prevSlug":"/lessons/tools/npm"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/git.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/git.json
new file mode 100644
index 0000000..cb104b8
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/git.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Learn how to efficiently set up a Git repository, create a .gitignore file, and manage untracked files in your project as part of the Complete Intro to React v9 course by Brian Holt. Enhance your Git skills with practical tips, ensuring a clean and professional project environment. For more detailed instruction, explore ThePrimeagen's Git course on Frontend Masters.","keywords":["Git setup","Git repository",".gitignore","Front End Masters","frontend development"]},"html":"Git \nGit is a critical part of any project and probably something many of you are already familiar with. Install Git if you don't already have it installed. Then initialize your project as a git repo with git init in the root of your project (VSCode and any other number of tools can do this as well.)
\nIf you haven't already, create a .gitignore at the root of your project to ignore the stuff we don't want to commit. Go ahead and put this in there:
\nnode_modules\ndist/\n.env\n.DS_Store\ncoverage/\n.vscode/\nThis will make it so these things won't get added to our repo. If you want more Git instruction, please check out the courses from ThePrimeagen and Nina Zakharenko on Frontend Masters.
\n","markdown":"\n## Git\n\nGit is a critical part of any project and probably something many of you are already familiar with. [Install Git][git] if you don't already have it installed. Then initialize your project as a git repo with `git init` in the root of your project (VSCode and any other number of tools can do this as well.)\n\nIf you haven't already, create a .gitignore at the root of your project to ignore the stuff we don't want to commit. Go ahead and put this in there:\n\n```\nnode_modules\ndist/\n.env\n.DS_Store\ncoverage/\n.vscode/\n```\n\nThis will make it so these things won't get added to our repo. If you want more Git instruction, please check out the courses from [ThePrimeagen][prime] and [Nina Zakharenko][nina] on Frontend Masters.\n\n[prime]: https://frontendmasters.com/courses/everything-git/\n[git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git\n[nina]: https://frontendmasters.com/courses/git-in-depth/","slug":"git","title":"Git","section":"Tools","icon":"screwdriver-wrench","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/03-tools/D-git.md","nextSlug":"/lessons/tools/vite","prevSlug":"/lessons/tools/linting"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/linting.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/linting.json
new file mode 100644
index 0000000..7740f01
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/linting.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"title":"ESLint","description":"Learn how to set up and configure ESLint with Prettier for effective JavaScript code linting in your React projects, featuring tools like ESLint's JS config and globals package, under the guidance of seasoned developer Brian Holt.","keywords":["ESLint","Prettier","JavaScript","react","Brian Holt"]},"html":"ESLint \nOn top of Prettier which takes of all the formatting, you may want to enforce some code styles which pertain more to usage: for example you may want to force people to never use with which is valid JS but ill advised to use. ESLint comes into play here. It will lint for these problems.
\nFirst of all, run npm install -D eslint@9.9.1 eslint-config-prettier@9.1.0 globals@15.9.0 to install ESLint in your project development dependencies. Then you may configure it.
\nThere are dozens of preset configs for ESLint and you're welcome to use any one of them. The Airbnb config is very popular, as is the standard config (both of which I taught in previous versions of this class). I'm going to use a looser one for this class: the recommended JS config from ESLint. Let's create an eslint.config.mjs file to start linting our project.
\n\nWe're using .mjs (module JS) because we want to use import/export for modules instead of require.
\n \nAdd this to the eslint.config.mjs file:
\nimport js from "@eslint/js" ;\nimport globals from "globals" ;\nimport prettier from "eslint-config-prettier" ;\n\n\nexport default [\n js.configs .recommended ,\n {\n files : ["**/*.js" ],\n languageOptions : {\n globals : { ...globals.browser , ...globals.node },\n parserOptions : {\n ecmaFeatures : {\n jsx : true ,\n },\n },\n },\n },\n prettier,\n];\n\nESLint changed a lot with version 9. In previous versions of this course we used the JSON version of configuration which is no longer supported. You have to do their newer "flat" version of config (honestly it is better.) \nThe /** @type {import('eslint').Linter.Config[]} */ is a VS Code / TypeScript trick to be able to do auto-completions on the config object. Super helpful to have the types available right in VS Code. It's not required. \nglobals is a package that is just a big JSON file of what's available in each environment. We're going to be in Node.js and Browser environments so we grabbed those two. If I was being a bit more discerning I'd carefully only apply browser configs to browser files and Node configs to Node.js files.The config objects are applied in order. We did ESLint's JS config first, and then our custom one so we can overwrite it where we want to, and then the Prettier one should always come last as all it does is turn off rules that Prettier itself does; it doesn't add anything. \n \nThis is a combination of the recommended configs of ESLint and Prettier. This will lint for both normal JS stuff as well as JSX stuff. Let's add ESLint to our scripts:
\n"lint" : "eslint" , \nRun npm run eslint now and you should see we have a few errors.
\n\n🚨 ESLint will have a bunch of errors right now. Ignore them; we'll fix them in a sec.
\n \nWorth adding three things here:
\n\nWith npm scripts, you can pass additional parameters to the command if you want. Just add a -- and then put whatever else you want to tack on after that. For example, if I wanted to get the debug output from ESLint, I could run npm run lint -- --debug which would translate to eslint --debug. \nWe can use our fix trick this way: npm run lint -- --fix. \nWe're going to use both JS and JSX. \n \nESLint is a cinch to get working with Visual Studio Code . Just download the extension .
\noxlint and Biome \nTwo projects to watch going forward here: Biome (formerly called Rome) and oxlint . Both are written in Rust and designed to be faster than ESLint (which is written in JavaScript). ESLint at huge scale can be a bit slow and these two projects aim to fix that bottleneck. I'd still say it's early days on these projects and 99% of the time ESLint is fast enough. Still, good to keep an eye on both of the projects. Eventually both projects aim to replace Prettier as well.
\n","markdown":"\n## ESLint\n\nOn top of Prettier which takes of all the formatting, you may want to enforce some code styles which pertain more to usage: for example you may want to force people to never use `with` which is valid JS but ill advised to use. [ESLint][eslint] comes into play here. It will lint for these problems.\n\nFirst of all, run `npm install -D eslint@9.9.1 eslint-config-prettier@9.1.0 globals@15.9.0` to install ESLint in your project development dependencies. Then you may configure it.\n\nThere are dozens of preset configs for ESLint and you're welcome to use any one of them. The [Airbnb config][airbnb] is very popular, as is the standard config (both of which I taught in previous versions of this class). I'm going to use a looser one for this class: the recommended JS config from ESLint. Let's create an `eslint.config.mjs` file to start linting our project.\n\n> We're using .mjs (module JS) because we want to use import/export for modules instead of require.\n\nAdd this to the `eslint.config.mjs` file:\n\n```js\nimport js from \"@eslint/js\";\nimport globals from \"globals\";\nimport prettier from \"eslint-config-prettier\";\n\n/** @type {import('eslint').Linter.Config[]} */\nexport default [\n js.configs.recommended,\n {\n files: [\"**/*.js\"],\n languageOptions: {\n globals: { ...globals.browser, ...globals.node },\n parserOptions: {\n ecmaFeatures: {\n jsx: true,\n },\n },\n },\n },\n prettier,\n];\n```\n\n- ESLint changed a lot with version 9. In previous versions of this course we used the JSON version of configuration which is no longer supported. You _have_ to do their newer \"flat\" version of config (honestly it is better.)\n- The `/** @type {import('eslint').Linter.Config[]} */` is a VS Code / TypeScript trick to be able to do auto-completions on the config object. Super helpful to have the types available right in VS Code. It's not required.\n- [globals][globals] is a package that is just a big JSON file of what's available in each environment. We're going to be in Node.js and Browser environments so we grabbed those two. If I was being a bit more discerning I'd carefully only apply browser configs to browser files and Node configs to Node.js files.\n- The config objects are applied in order. We did ESLint's JS config first, and then our custom one so we can overwrite it where we want to, and then the Prettier one should always come last as all it does is turn off rules that Prettier itself does; it doesn't add anything.\n\nThis is a combination of the recommended configs of ESLint and Prettier. This will lint for both normal JS stuff as well as JSX stuff. Let's add ESLint to our scripts:\n\n```json\n\"lint\": \"eslint\",\n```\n\nRun `npm run eslint` now and you should see we have a few errors.\n\n> 🚨 ESLint will have a bunch of errors right now. Ignore them; we'll fix them in a sec.\n\nWorth adding three things here:\n\n- With npm scripts, you can pass additional parameters to the command if you want. Just add a `--` and then put whatever else you want to tack on after that. For example, if I wanted to get the debug output from ESLint, I could run `npm run lint -- --debug` which would translate to `eslint --debug`.\n- We can use our fix trick this way: `npm run lint -- --fix`.\n- We're going to use both JS and JSX.\n\nESLint is a cinch to get working with [Visual Studio Code][vscode]. Just download [the extension][vscode-eslint].\n\n## oxlint and Biome\n\nTwo projects to watch going forward here: [Biome][biome] (formerly called Rome) and [oxlint][oxlint]. Both are written in Rust and designed to be faster than ESLint (which is written in JavaScript). ESLint at huge scale can be a bit slow and these two projects aim to fix that bottleneck. I'd still say it's early days on these projects and 99% of the time ESLint is fast enough. Still, good to keep an eye on both of the projects. Eventually both projects aim to replace Prettier as well.\n\n[eslint]: https://eslint.org\n[vscode-eslint]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint\n[airbnb]: https://github.com/airbnb/javascript\n[vscode]: https://code.visualstudio.com/\n[biome]: https://biomejs.dev/\n[oxlint]: https://oxc.rs/docs/guide/usage/linter.html\n[globals]: https://www.npmjs.com/package/globals\n","slug":"linting","title":"ESLint","section":"Tools","icon":"screwdriver-wrench","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/03-tools/C-linting.md","nextSlug":"/lessons/tools/git","prevSlug":"/lessons/tools/code-formatting"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/npm.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/npm.json
new file mode 100644
index 0000000..38a13bc
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/npm.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"title":"npm","description":"Learn about npm and pnpm, two essential package managers for Node.js, as you embark on your React development journey with Brian Holt's Complete Intro to React, v9. This section guides you through setting up npm projects and understanding the differences between npm and pnpm, enhancing your knowledge of JavaScript development tools.","keywords":["npm","pnpm","Node.js","React development","JavaScript tools"]},"html":"npm \nnpm does not stand for Node.js Package Manager. It is, however, the package manager for Node.js (they don't say what it stands for). It also has all the packages in the front end scene. npm makes a command line tool, called npm as well. npm allows you to bring in code from the npm registry which is a bunch of open source modules that people have written so you can use them in your project. Whenever you run npm install react (don't do this yet), it will install the latest version of React from the registry.
\nIn order to start an npm project, run npm init -y at the root of your project. If you don't have Node.js installed, please go install that too . When you run npm init it'll ask you a bunch of questions. If you don't know the answer or don't care, just hit enter. You can always modify package.json later. This will allow us to get started installing and saving packages.
\npnpm \nAnother option here is to use pnpm . pnpm is a newer package manager that makes different tradeoffs than npm, notably how it chooses to organize the node_modules directory. npm maintains a flat file structure and installs everything flat whereas pnpm does more symlinking. Both are fine, feel free to choose what works for you. I'll be using npm because it's easier for students to use.
\n","markdown":"\n## npm\n\nnpm does not stand for Node.js Package Manager. It is, however, the package manager for Node.js (they don't say what it stands for). It also has all the packages in the front end scene. npm makes a command line tool, called `npm` as well. `npm` allows you to bring in code from the npm registry which is a bunch of open source modules that people have written so you can use them in your project. Whenever you run `npm install react` (don't do this yet), it will install the latest version of React from the registry.\n\nIn order to start an npm project, run `npm init -y` at the root of your project. If you don't have Node.js installed, [please go install that too][node]. When you run `npm init` it'll ask you a bunch of questions. If you don't know the answer or don't care, just hit enter. You can always modify package.json later. This will allow us to get started installing and saving packages.\n\n## pnpm\n\nAnother option here is to use [pnpm][pnpm]. pnpm is a newer package manager that makes different tradeoffs than npm, notably how it chooses to organize the node_modules directory. npm maintains a flat file structure and installs everything flat whereas pnpm does more symlinking. Both are fine, feel free to choose what works for you. I'll be using npm because it's easier for students to use.\n\n[pnpm]: https://pnpm.io/motivation\n[node]: https://nodejs.org/en\n","slug":"npm","title":"npm","section":"Tools","icon":"screwdriver-wrench","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/03-tools/A-npm.md","nextSlug":"/lessons/tools/code-formatting","prevSlug":"/lessons/no-frills-react/components"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/vite.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/vite.json
new file mode 100644
index 0000000..5781aff
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/tools/vite.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Learn to set up your React project using Vite, a fast build tool preferred by the React community, with step-by-step guidance from Brian Holt. This tutorial covers the installation and configuration of Vite, React, and essential plugins to optimize your development environment.","keywords":["React","Vite","Brian Holt","JavaScript","frontend development"]},"html":"Vite \nThe build tool we are going to be using today is called Vite . Vite (pronounced "veet", meaning quick in French) is a tool put out by the Vue team that ultimately ends up wrapping Rollup which does the actual bundling. The end result is a tool that is both easy to use and produces a great end result.
\n\nFun fact: there's a new project being developed called Rolldown which is written in Rust and aims to replace Rollup.
\n \nOur end result that we want from a build tool is that
\n\nWe can separate files out for code organization and have a tool stitch them together for us \nWe can include external, third-party libraries from npm (like React!) \nThe tool will optimize the code for us by minifying and other optimizing techniques \n \nPrevious versions of this course used Parcel , another tool near-and-dear to my heart. It is still an amazing tool and one I recommend you check out. We ended up moving to Vite because the React community has selected it as the tool-of-choice for the moment and this course aims to give you the community norms of React. Even older versions of this course previously taught Webpack .
\nFirst, let's install the things we need for Vite.
\nnpm install -D vite@5.4.2 @vitejs/plugin-react@4.3.1\nThe former is the tool itself and the latter is all the React specific features we will need. Now that we have those installed, we need to modify our index.html just a little bit.
\n\n<script type ="module" src ="./src/App.js" > </script > \nWe need to add module to the script tag so that the browser knows it's working with modern browser technology that allows you in development mode to use modules directly. Instead of having to reload the whole bundle every time, your browser can just reload the JS that has changed. It allows the browser to crawl the dependency graph itself which means Vite can run lightning fast in dev mode. It will still package it up for production so we can support a range of browsers.
\nNext, let's make our config file. Make a file in the root of your project called vite.config.js and stick this in there:
\nimport { defineConfig } from "vite" ;\nimport react from "@vitejs/plugin-react" ;\n\nexport default defineConfig ({\n plugins : [react ()],\n});\nBy default, Vite will look for the index.html file in the root directory and treat it as the head of a source graph. It'll crawl all your HTML, CSS, and JavaScript you link to from there and create your project for you. We don't have to do any more configuration than that. Vite will take care of the rest.
\nOkay, let's actually install React to our project.
\nnpm install react@18.3.1 react-dom@18.3.1\n\nWe did not include the -D because React is not a development tool, it's a production dependency \nReact and ReactDOM are versioned together so you can assume those versions will always be the same \n \nFinally, head to App.js and modify the following
\n\nimport React from "react" ;\nimport { createRoot } from "react-dom/client" ;\n\n\nconst root = createRoot (container);\nNow let's set up our scripts to start Vite. In package.json, put:
\n\n"dev" : "vite" , \n"build" : "vite build" , \n"preview" : "vite preview" \nBe sure to also add "type: module" to your package.json. Vite has deprecated support for Common.js and now requires you to use ESM style modules.
\n\nNote: you will get a warning from Vite like Files in the public directory are served at the root path. Instead of /public/style.css, use /style.css. – ignore this, we'll fix it in a bit.
\n \ndev will start the development server, typically on http://localhost:5173/ . build will prepare static files to be deployed (to somewhere like GitHub Pages, Vercel, Netlify, AWS S3, etc.) preview lets you preview your production build locally.
\n\nNote that we've changed domains here. By default Vite uses localhost:5173. Fun fact, 5173 sort of spells VITE if you make the 5 its Roman Numeral version, V.
\n \nAlternatives \nThere are a myriad of fantastic developer tools out there available. We chose Vite because the industry has been using it for a while but I have zero problem with you selecting other tools. Just trying to expose everyone to great tools.
\nIn particular, esbuild is a wonderful tool to take a look at as well.
\n\n🏁 Click here to see the state of the project up until now: 02-tools .
\n \n","markdown":"\n## Vite\n\nThe build tool we are going to be using today is called [Vite][vite]. Vite (pronounced \"veet\", meaning quick in French) is a tool put out by the Vue team that ultimately ends up wrapping [Rollup][rollup] which does the actual bundling. The end result is a tool that is both easy to use and produces a great end result.\n\n> Fun fact: there's a new project being developed called [Rolldown][rolldown] which is written in Rust and aims to replace Rollup.\n\nOur end result that we want from a build tool is that\n\n- We can separate files out for code organization and have a tool stitch them together for us\n- We can include external, third-party libraries from npm (like React!)\n- The tool will optimize the code for us by minifying and other optimizing techniques\n\nPrevious versions of this course used [Parcel][parcel], another tool near-and-dear to my heart. It is still an amazing tool and one I recommend you check out. We ended up moving to Vite because the React community has selected it as the tool-of-choice for the moment and this course aims to give you the community norms of React. Even older versions of this course previously taught [Webpack][webpack].\n\nFirst, let's install the things we need for Vite.\n\n```bash\nnpm install -D vite@5.4.2 @vitejs/plugin-react@4.3.1\n```\n\nThe former is the tool itself and the latter is all the React specific features we will need. Now that we have those installed, we need to modify our index.html just a little bit.\n\n```html\n\n\n```\n\nWe need to add module to the script tag so that the browser knows it's working with modern browser technology that allows you in development mode to use modules directly. Instead of having to reload the whole bundle every time, your browser can just reload the JS that has changed. It allows the browser to crawl the dependency graph itself which means Vite can run lightning fast in dev mode. It will still package it up for production so we can support a range of browsers.\n\nNext, let's make our config file. Make a file in the root of your project called `vite.config.js` and stick this in there:\n\n```javascript\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n plugins: [react()],\n});\n```\n\nBy default, Vite will look for the index.html file in the root directory and treat it as the head of a source graph. It'll crawl all your HTML, CSS, and JavaScript you link to from there and create your project for you. We don't have to do any more configuration than that. Vite will take care of the rest.\n\nOkay, let's _actually_ install React to our project.\n\n```bash\nnpm install react@18.3.1 react-dom@18.3.1\n```\n\n- We did not include the `-D` because React is not a development tool, it's a production dependency\n- React and ReactDOM are versioned together so you can assume those versions will always be the same\n\nFinally, head to App.js and modify the following\n\n```javascript\n// add to the top\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\n// modify the createRoot call, delete \"ReactDOM\"\nconst root = createRoot(container);\n```\n\nNow let's set up our scripts to start Vite. In package.json, put:\n\n```json\n// inside scripts\n\"dev\": \"vite\",\n\"build\": \"vite build\",\n\"preview\": \"vite preview\"\n```\n\nBe sure to also add `\"type: module\"` to your package.json. Vite has deprecated support for Common.js and now requires you to use ESM style modules.\n\n> Note: you will get a warning from Vite like `Files in the public directory are served at the root path.\nInstead of /public/style.css, use /style.css.` – ignore this, we'll fix it in a bit.\n\n`dev` will start the development server, typically on [http://localhost:5173/](). `build` will prepare static files to be deployed (to somewhere like GitHub Pages, Vercel, Netlify, AWS S3, etc.) `preview` lets you preview your production build locally.\n\n> Note that we've changed domains here. By default Vite uses localhost:5173. Fun fact, 5173 sort of spells VITE if you make the 5 its Roman Numeral version, V.\n\n## Alternatives\n\nThere are a myriad of fantastic developer tools out there available. We chose Vite because the industry has been using it for a while but I have zero problem with you selecting other tools. Just trying to expose everyone to great tools.\n\nIn particular, [esbuild][esbuild] is a wonderful tool to take a look at as well.\n\n> 🏁 [Click here to see the state of the project up until now: 02-tools][step].\n\n[step]: https://github.com/btholt/citr-v9-project/tree/master/02-tools\n[webpack]: https://webpack.js.org/\n[parcel]: https://parceljs.org/\n[rollup]: https://www.rollupjs.org/\n[vite]: https://vitejs.dev/\n[rolldown]: https://rolldown.rs/\n[esbuild]: https://esbuild.github.io/\n","slug":"vite","title":"Vite","section":"Tools","icon":"screwdriver-wrench","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/03-tools/E-vite.md","nextSlug":"/lessons/core-react-concepts/jsx","prevSlug":"/lessons/tools/git"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/welcome/intro.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/welcome/intro.json
new file mode 100644
index 0000000..cc100a8
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/welcome/intro.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Join Brian Holt in \"Complete Intro to React, v9,\" a beginner-friendly course that equips you with essential React skills using a first-principles approach, incorporating tools like Vite and JSX, making you job-ready in the React ecosystem.","keywords":["Brian Holt","React","web development","javascript","frontend","Vite","JSX"]},"html":"\n🚨 You do not need to watch/read previous versions of this course. This is just the ninth revision of the course.
\n \nHello! And welcome to the Complete Intro to React, version 9. In this course you will go from not knowing anything about React to being job ready. This course teaches all the core concepts of React aiming to be the most useful. You will learn React from a first-principles methodology – we will start with no build tools or anything like that, just vanilla JavaScript and React. Over time we add tools like Vite, JSX, ESLint, Prettier, etc. so you can learn how to construct your own stack from scratch. I will teach a few ecosystem tools as well, testing, and what's coming soon for React.
\nWho is this course for? \nYou! This course is for anyone looking to get started in React or deepen their expertise in it. No experience is necessary. However, I guarantee anyone who is interested in React will learn something in here. This probably shouldn't be your first programming or JavaScript course, but beyond that, it should be comfortable for anyone. We do use some Node.js to run our little API and for the build tools but no real Node.js experience is necessary, I'll give you the commands necessary to run it.
\nWho am I? \n
\nMy name is Brian Holt and I've been writing React for a long time. I shipped Reddit's first React code in 2014.
\n \n\nI went on to write React at a variety of large companies and it's been my goto tool for over a decade at this point. It's safe to say it's been a defining feature in my career.
\nI currently work as a staff product manager at Neon working on developer tools and developer experience. I loved working on dev tools and dev experiences so much that I ended up working in tools and strategy. Previous to Neon, I've worked at Snowflake, Microsoft, LinkedIn, Netflix, Reddit, and some other startups. I've done everything from VP of product to dev rel to staff engineering tech lead.
\nWhen I'm not working or teaching, you'll find me hanging out with my wife, son, and my soon-to-arrive daughter! I've lived the past six years in Seattle but I'm currently moving to Sacramento to get a bit more sun and to live close to amazing snowboarding in Tahoe! 🏂 I also enjoy hazy IPAs, Islay Scotches, road cycling, and playing Dota 2 poorly.
\nPlease catch up with me on social media! Be aware that I'm awful at responding to DMs!!
\n\nWhere to File Issues \nI write these courses and take care to not make mistakes. However when teaching over ten hours of material, mistakes are inevitable, both here in the grammar and in the course with the material. However I (and the wonderful team at Frontend Masters) are constantly correcting the mistakes so that those of you that come later get the best product possible. If you find a mistake we'd love to fix it. The best way to do this is to open a pull request or file an issue on the GitHub repo . While I'm always happy to chat and give advice on social media, I can't be tech support for everyone. And if you file it on GitHub, those who come later can Google the same answer you got.
\nHow the repo works \nThere are two repos for this class: the website you're currently on and the example projects . To get set up, clone or download the projects repo:
\ngit clone https://github.com/btholt/citr-v9-project.git\nEvery step of this project will have a folder that will be a snapshot of where the project is at that step. If you get stuck, want to copy/paste some long bit of code you don't feel like writing, or just want to walk through the code at that point, please do! The primary goal of this is for you to learn so as long as you're learning there's no cheating!
\nThe naming format will be XX-<name of the lesson> so you can get a rough idea of order and which lesson the step is coming from. In each snapshot you'll have to run npm install again since they are another whole copy of the project.
\nWe're going to be starting from scratch, but you'll need the repo downloaded because there's an api directory that will be used later in the course.
\n\nAnd one last request! Please star this repo . It helps the course be more discoverable and with my fragile ego.
\n \n","markdown":"\n> 🚨 You do not need to watch/read previous versions of this course. This is just the ninth revision of the course.\n\nHello! And welcome to the Complete Intro to React, version 9. In this course you will go from not knowing anything about React to being job ready. This course teaches all the core concepts of React aiming to be the most useful. You will learn React from a first-principles methodology – we will start with no build tools or anything like that, just vanilla JavaScript and React. Over time we add tools like Vite, JSX, ESLint, Prettier, etc. so you can learn how to construct your own stack from scratch. I will teach a few ecosystem tools as well, testing, and what's coming soon for React.\n\n## Who is this course for?\n\nYou! This course is for anyone looking to get started in React or deepen their expertise in it. No experience is necessary. However, I guarantee anyone who is interested in React will learn something in here. This probably shouldn't be your first programming or JavaScript course, but beyond that, it should be comfortable for anyone. We do use some Node.js to run our little API and for the build tools but no real Node.js experience is necessary, I'll give you the commands necessary to run it.\n\n## Who am I?\n\n\n\nMy name is Brian Holt and I've been writing React for a long time. I shipped Reddit's first React code in 2014.\n\n \n\nI went on to write React at a variety of large companies and it's been my goto tool for over a decade at this point. It's safe to say it's been a defining feature in my career.\n\nI currently work as a staff product manager at [Neon][neon] working on developer tools and developer experience. I loved working on dev tools and dev experiences so much that I ended up working in tools and strategy. Previous to Neon, I've worked at Snowflake, Microsoft, LinkedIn, Netflix, Reddit, and some other startups. I've done everything from VP of product to dev rel to staff engineering tech lead.\n\nWhen I'm not working or teaching, you'll find me hanging out with my wife, son, and my soon-to-arrive daughter! I've lived the past six years in Seattle but I'm currently moving to Sacramento to get a bit more sun and to live close to amazing snowboarding in Tahoe! 🏂 I also enjoy hazy IPAs, Islay Scotches, road cycling, and playing Dota 2 poorly.\n\nPlease catch up with me on social media! Be aware that I'm awful at responding to DMs!!\n\n- [Twitter][x]\n- [Bluesky][bs]\n- [LinkedIn][li]\n- [GitHub][gh]\n\n## Where to File Issues\n\nI write these courses and take care to not make mistakes. However when teaching over ten hours of material, mistakes are inevitable, both here in the grammar and in the course with the material. However I (and the wonderful team at Frontend Masters) are constantly correcting the mistakes so that those of you that come later get the best product possible. If you find a mistake we'd love to fix it. The best way to do this is to [open a pull request or file an issue on the GitHub repo][issues]. While I'm always happy to chat and give advice on social media, I can't be tech support for everyone. And if you file it on GitHub, those who come later can Google the same answer you got.\n\n## How the repo works\n\nThere are two repos for this class: [the website you're currently on][site] and [the example projects][projects]. To get set up, clone or [download][zip] the projects repo:\n\n```bash\ngit clone https://github.com/btholt/citr-v9-project.git\n```\n\nEvery step of this project will have a folder that will be a snapshot of where the project is at that step. If you get stuck, want to copy/paste some long bit of code you don't feel like writing, or just want to walk through the code at that point, please do! The primary goal of this is for you to learn so as long as you're learning there's no cheating!\n\nThe naming format will be `XX-` so you can get a rough idea of order and which lesson the step is coming from. In each snapshot you'll have to run `npm install` again since they are another whole copy of the project.\n\nWe're going to be starting from scratch, but you'll need the repo downloaded because there's an `api` directory that will be used later in the course.\n\n> And one last request! [Please star this repo][site]. It helps the course be more discoverable and with my fragile ego.\n\n[x]: https://twitter.com/holtbt\n[bs]: https://bsky.app/profile/brianholt.me\n[li]: https://www.linkedin.com/in/btholt/\n[gh]: https://github.com/btholt\n[site]: https://github.com/btholt/complete-intro-to-react-v9\n[projects]: https://github.com/btholt/citr-v9-project\n[issues]: https://github.com/btholt/complete-intro-to-react-v9/issues\n[neon]: https://neon.tech/\n[zip]: https://github.com/btholt/citr-v9-project/archive/refs/heads/main.zip","slug":"intro","title":"Intro","section":"Welcome","icon":"info-circle","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/01-welcome/A-intro.md","nextSlug":"/lessons/welcome/my-setup","prevSlug":null}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/welcome/my-setup.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/welcome/my-setup.json
new file mode 100644
index 0000000..73305ec
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/welcome/my-setup.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Explore essential tools and configurations for the \"Complete Intro to React v9\" course by Brian Holt, including recommended Node.js version, Visual Studio Code setup with extensions, and terminal preferences for optimal React development experience. Learn about the use of tools like fnm for Node.js, Starship Prompt, MonoLisa font, and more within this comprehensive React course.","keywords":["Brian Holt","React","Node.js","Visual Studio Code","Starship Prompt"]},"html":"Node.js \nYou'll need to have a Node.js version installed, and preferably something after v20.16. I wrote this course with 20.16 but it should be fairly future-proof.
\nI use fnm to manage my Node.js versions (similar to nvm).
\nI think this course would work with recent versions of bun or deno but it's untested. Beware if you decide go down this path.
\nTools FAQ \nWhat tools are your using? \n\nVisual Studio Code – I used to work at Microsoft on VS Code so it's no surprise that I'll be using it in this course. We'll also be using a few extensions that I'll call out as we get there. \nFirefox – I want more than Chromium to exist so I support Firefox where I can. Feel free to use any browser; it won't matter in this course. \nTerminal.app – I used to use iTerm2 and Hyper but in the end I appreciate how fast the default terminal is. \n \nWhat <font/theme/extension> are you using? \n\nVisual Studio Code\nDark+ Theme – It comes installed by default but it's not the default theme anymore. I'm so used to it that I can't switch. \nMonoLisa font – I like fonts and I look at it all day so I was okay paying for it. I have ligatures enabled which is why you might see strange glyphs. If you want ligatures but don't want to pay, the linked ligature article has a few. I like Cascadia Code from Microsoft.vscode-icons – Lots of neat icons for VS Code and it's free. \n \nTerminal\nzsh – It comes with macOS now and I'm way too lazy to switch back to bash. \nDracula theme – I like the pastels. I would use it in VS Code too if Dark+ wasn't ingrained in my blood.Starship Prompt – Very cool prompt that's just pretty. Also shows you what sort of project you're in which is occasionally usefulCaskaydiaCove Nerd Font – This works with Starship prompt to give you the JS logos and all those extra glyphs. It's based on Cascadia Code. \n \n \n","markdown":"\n## Node.js\n\nYou'll need to have a Node.js version installed, and preferably something after v20.16. I wrote this course with 20.16 but it should be fairly future-proof.\n\nI use [fnm][fnm] to manage my Node.js versions (similar to nvm).\n\nI _think_ this course would work with recent versions of [bun][bun] or [deno][deno] but it's untested. Beware if you decide go down this path.\n\n## Tools FAQ\n\n### What tools are your using?\n\n- Visual Studio Code – I used to work at Microsoft on VS Code so it's no surprise that I'll be using it in this course. We'll also be using a few extensions that I'll call out as we get there.\n- Firefox – I want more than Chromium to exist so I support Firefox where I can. Feel free to use any browser; it won't matter in this course.\n- Terminal.app – I used to use iTerm2 and Hyper but in the end I appreciate how fast the default terminal is.\n\n### What are you using?\n\n- Visual Studio Code\n - Dark+ Theme – It comes installed by default but it's not the default theme anymore. I'm so used to it that I can't switch.\n - [MonoLisa][monolisa] font – I like fonts and I look at it all day so I was okay paying for it. I have [ligatures][ligatures] enabled which is why you might see strange glyphs. If you want ligatures but don't want to pay, the linked ligature article has a few. I like Cascadia Code from Microsoft.\n - [vscode-icons][vscode-icons] – Lots of neat icons for VS Code and it's free.\n- Terminal\n - zsh – It comes with macOS now and I'm _way_ too lazy to switch back to bash.\n - [Dracula theme][dracula] – I like the pastels. I would use it in VS Code too if Dark+ wasn't ingrained in my blood.\n - [Starship Prompt][starship] – Very cool prompt that's just pretty. Also shows you what sort of project you're in which is occasionally useful\n - [CaskaydiaCove Nerd Font][nerd] – This works with Starship prompt to give you the JS logos and all those extra glyphs. It's based on Cascadia Code.\n\n[ligatures]: https://worldofzero.com/posts/enable-font-ligatures-vscode/\n[monolisa]: https://www.monolisa.dev/\n[vscode-icons]: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons\n[dracula]: https://draculatheme.com/terminal\n[starship]: https://starship.rs/\n[nerd]: https://www.nerdfonts.com/font-downloads\n[fnm]: https://github.com/Schniz/fnm\n[bun]: https://bun.sh/\n[deno]: https://deno.com/\n","slug":"my-setup","title":"My Setup","section":"Welcome","icon":"info-circle","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/01-welcome/B-my-setup.md","nextSlug":"/lessons/no-frills-react/react-without-a-build-step","prevSlug":"/lessons/welcome/intro"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/whats-next/form-actions.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/whats-next/form-actions.json
new file mode 100644
index 0000000..3534f6b
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/whats-next/form-actions.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Learn how to upgrade your application to React 19 and simplify form handling in this segment of Brian Holt’s Complete Intro to React, version 9. Discover new React form actions, \"use server\" directives for server-side logic, and useFormData hooks to manage input states effectively. Ideal for React developers seeking practical techniques to streamline their web applications.","keywords":["React 19","form actions","useFormData","Brian Holt","React upgrade"]},"html":"Form Actions \nOkay, so let's actually upgrade our app to be React 19.
\n\n🚨 Pay attention here, as you need to figure out which version of React to install.
\n \nGo here and look at the versions of React published on npm. If you see that React 19 is still in canary/rc/next (which are all the same) then you can run npm i react@rc react-dom@rc. You'll get a lot of warnings about things not matching versions in your command-line, that's totally okay.
\nIf React 19 is latest, then run npm install react@19 react-dom@19 and then follow these instructions. Be extra cautious because things may have changed!!
\nOkay, let's talk form actions. A lot of web interfaces is just handling form inputs, and so the React team decided to make it easier to do that. It's actually really similar to what we've done already, just a little less boilerplate. Open your contact.lazy.jsx and let's modify this page to use a form action.
\nmutationFn : function (formData ) { \n \n \n return postContact (\n formData.get ("name" ),\n formData.get ("email" ),\n formData.get ("message" ),\n );\n},\n\n\n<form action ={mutation.mutate} > That's it! It really is just a convenience function to make handling for submits even easier to do. There's nothing wrong with what we had either, and that will continue to work as-is too.
\nLet's go convert order.lazy.jsx too
\n\nfunction addToCart (setCart ([...cart, { pizza : selectedPizza, size : pizzaSize, price }]);\n}\n\n<form action={addToCart}>[…]</form>;\nSame as above. But here's what cool if you're using something like Next.js or Remix: we can use the 'use server' directive here and make this a server action. Something like
\nfunction addToCart (formData ) {\n "use server" ;\n sql (`INSERT INTO cart (user_id, pizza_type, size) VALUES ($1, $2)` , [\n formData.pizza_type ,\n formData.size ,\n ]);\n}\nSince it's on the server, we can now safely insert into our database, directly from inside our React component. React/Next.js will handle all the details of handling the execution of that on server. Pretty cool, right? We'll talk more about this in Intermediate React v6.
\nLet's do one more cool trick here. There's a new hook called useFormData that lets children components see if they're inside of a form being submitted without having to pass lots of data around.
\nIn contact.lazy.jsx
\n\nimport { useFormStatus } from "react-dom" ; \n\n\n<ContactInput name ="name" type ="text" placeholder ="Name" /> <ContactInput name ="email" type ="email" placeholder ="Email" /> function ContactInput (props ) {\n const { pending } = useFormStatus ();\n return (\n <input \n disabled ={pending} \n name ={props.name} \n type ={props.type} \n placeholder ={props.placeholder} \n /> \nThis is a silly example, but imagine you had really complicated inputs that had a design system, tool tips, and all sorts of other UIs. This is common in large React codebases. This could be really useful for that. \nAs a side note, if I have really small components like ContactInput, I'll just stick in the same file like we did here. It can be a useful pattern. Some people are purists and demand one file, one component. I am not a purist. \nWe didn't do the button or the text area just for brevity's sake but you could. \nSince we're local, this pending state will be super short. But you will notice the background flash gray. That's the disabled state. \n \nAnd that's form actions!
\n\n🏁 Click here to see the state of the project up until now: 15-form-actions
\n \n","markdown":"\n## Form Actions\n\nOkay, so let's actually upgrade our app to be React 19.\n\n> 🚨 Pay attention here, as you need to figure out which version of React to install.\n\n[Go here][npm] and look at the versions of React published on npm. If you see that React 19 is still in canary/rc/next (which are all the same) then you can run `npm i react@rc react-dom@rc`. You'll get a lot of warnings about things not matching versions in your command-line, that's totally okay.\n\nIf React 19 is latest, then run `npm install react@19 react-dom@19` and then follow these instructions. Be extra cautious because things may have changed!!\n\nOkay, let's talk form actions. A lot of web interfaces is just handling form inputs, and so the React team decided to make it easier to do that. It's actually really similar to what we've done already, just a little less boilerplate. Open your contact.lazy.jsx and let's modify this page to use a form action.\n\n```javascript\nmutationFn: function (formData) { // change to formData\n // remove e.preventDefault\n // remove formData constructor\n return postContact(\n formData.get(\"name\"),\n formData.get(\"email\"),\n formData.get(\"message\"),\n );\n},\n\n// change onSubmit to action\n;\n```\n\nSame as above. But here's what cool if you're using something like Next.js or Remix: we can use the `'use server'` directive here and make this a _server_ action. Something like\n\n```javascript\nfunction addToCart(formData) {\n \"use server\";\n sql(`INSERT INTO cart (user_id, pizza_type, size) VALUES ($1, $2)`, [\n formData.pizza_type,\n formData.size,\n ]);\n}\n```\n\nSince it's on the server, we can now safely insert into our database, directly from inside our React component. React/Next.js will handle all the details of handling the execution of that on server. Pretty cool, right? We'll talk more about this in Intermediate React v6.\n\nLet's do one more cool trick here. There's a new hook called `useFormData` that lets children components see if they're inside of a form being submitted without having to pass lots of data around.\n\nIn contact.lazy.jsx\n\n```javascript\n// at top\nimport { useFormStatus } from \"react-dom\"; // note react-dom, not react\n\n// replace the two inputs\nReact 19 \nThis course has been centered on version 18.3. The nice thing about React is that while they do make breaking changes, they are usually fairly intentional about it and do so sparingly. In other words, what you learned today will still be useful five years from now. You could take the version of the course I taught five years ago and still be pretty up to date on how to write React. In other words, despite the fact that React 19 is imminent (or perhaps even out by the time you read this), there's no need to panic. All the stuff they are adding will just complement what you have learned and not change it.
\nDo keep an eye out for version 6 of my Intermediate React course. We will cover a lot of the React 19 features in that course.
\nSo, given React 19 is about out, and we know 95% of what is going to be in it, we are going to cover a few features so that you can be prepared for it. Do remember, we are going to use the React 19 release candidate, which means while conceptually that are very unlikely to change big concepts, they may tweak the precise API of how it works. Just be aware that it may change a bit.
\nFirst thing, let's discuss a few features that are cool but not worth us spending a lot of time writing code for. Then we'll cover a few that we'll actually add code to our app for.
\n'use client' and 'use server' \nLet's start with one of the bigger shifts in React. We will cover this extensively in Intermediate React so if you are curious, check that course out when it comes out. Essentially we can indicate to React "hey, only run this component on the server" or likewise, "hey, only render this client side". Why would you do that?
\nFor server components, we can do things like reference server-side secrets, query databases, call private APIs, or other things that we want data for our client side app but we can't query client-side without risking leaking secrets or DDOS. All of the logic will be executed server-side and then the finished component will be sent down to the client. Pretty cool, right?
\nThey're even taking it step further with taintUniqueValue and taintObjectReference. These allow a developer to say "hey, this is super sensitive information, make sure this never is sent to the client". You would use this with like an API key, a database connection string, or some other secret that you wouldn't want to accidentally leak. I love this because what if a developer changes a 'use server' directive to a 'use client' directive? They may not notice and send it to production accidentally, causing a data breach. With the concept of taint, you can make sure that never happens.
\n'use client' is the opposite – something that would never make sense to render server-side. Think like a highly interactive component like a text editor or a maps widget or something like that – it's meant to be a client-side experience so you better off just passing all the down to the client immediately and let them do the rendering. Keep in mind that you don't need to use this directive unless you are doing server-side rendering. By default it will still do client-side rendering.
\nPutting stuff in the head \nImagine you want your React component to add <link>, <meta>, <title> or other HTML pages in the doc. Right now you either need to use a portal or you need something like react-helmet to do that. With React 19, you just need to render the tag and it will automatically stick it in the header.
\nconst MyPizza = (<div > \n <h1 > I love pizza</h1 > \n <title > 🍕 Brian Loves Pizza 🍕</title > \n </div > Now whenever MyPizza gets rendered it will change the title of the doc (which what shows up in browser tab).
\npreload and preconnect \nTwo pretty helpful functions to help give hints to the browser of what it may want to start loading in the background. If you are not familiar with the concepts, head here to read more, but long story short it's for things like images, fonts, scripts, stylesheets, etc. You can let the browser know "hey, we're likely to going to need load these soon, can you either preconnect to this URL to get ready to download it or just go ahead and preload it?" This will allow your user to have more instantaneous experiences since they won't need to wait for these things to load when required. Keep in mind these are hints though and the browser can ignore them. A good of example of this could be that your phone is in low-power mode, it may ignore those hints as it wants to save battery.
\nconst EnterConfirmation = (preload ("https://example.com/text-editor.js" , { as : "script" });\n return (\n <div > \n <a href ="/text-editor" > Click here to open the text editor</a > \n </div > Custom components (aka web components) \nIt's always been possible, in theory, to use web components with React, but it's been a huge pain in the butt, involving refs and other careful planning to make sure you don't accidentally un-render and re-render it. Suffice to say, it was possible but impractical.
\nNow with React 19 it will just handle all of that caretaking of the custom elements for you, just treat it like any other normal tag and React will do all the babysitting for you. It's certainly a big step in making custom elements that work across Angular, React, Svelte, etc. but who knows, we've been talking about custom elements my whole career (seriously, I remember seeing a Polymer talk at the first Fluent conf I went to) and it still isn't here yet.
\nMore stuff! \nClick here to read the official React 19 blog post if you want to read more. Lots of cool stuff coming!!
\n","markdown":"\n## React 19\n\nThis course has been centered on version 18.3. The nice thing about React is that while they do make breaking changes, they are usually fairly intentional about it and do so sparingly. In other words, what you learned today will still be useful five years from now. You could take the version of the course I taught five years ago and still be pretty up to date on how to write React. In other words, despite the fact that React 19 is imminent (or perhaps even out by the time you read this), there's no need to panic. All the stuff they are adding will just complement what you have learned and not change it.\n\nDo keep an eye out for version 6 of my Intermediate React course. We will cover a lot of the React 19 features in that course.\n\nSo, given React 19 is about out, and we know 95% of what is going to be in it, we are going to cover a few features so that you can be prepared for it. Do remember, we are going to use the React 19 release candidate, which means while conceptually that are very unlikely to change big concepts, they may tweak the precise API of how it works. Just be aware that it may change a bit.\n\nFirst thing, let's discuss a few features that are cool but not worth us spending a lot of time writing code for. Then we'll cover a few that we'll actually add code to our app for.\n\n## 'use client' and 'use server'\n\nLet's start with one of the bigger shifts in React. We will cover this _extensively_ in Intermediate React so if you are curious, check that course out when it comes out. Essentially we can indicate to React \"hey, only run this component on the server\" or likewise, \"hey, only render this client side\". Why would you do that?\n\nFor server components, we can do things like reference server-side secrets, query databases, call private APIs, or other things that we want data for our client side app but we can't query client-side without risking leaking secrets or DDOS. All of the logic will be executed server-side and then the finished component will be sent down to the client. Pretty cool, right?\n\nThey're even taking it step further with taintUniqueValue and taintObjectReference. These allow a developer to say \"hey, this is super sensitive information, make sure this never is sent to the client\". You would use this with like an API key, a database connection string, or some other secret that you wouldn't want to accidentally leak. I love this because what if a developer changes a 'use server' directive to a 'use client' directive? They may not notice and send it to production accidentally, causing a data breach. With the concept of taint, you can make sure that never happens.\n\n'use client' is the opposite – something that would never make sense to render server-side. Think like a highly interactive component like a text editor or a maps widget or something like that – it's meant to be a client-side experience so you better off just passing all the down to the client immediately and let them do the rendering. Keep in mind that you don't need to use this directive unless you are doing server-side rendering. By default it will still do client-side rendering.\n\n## Putting stuff in the head\n\nImagine you want your React component to add `` or other HTML pages in the doc. Right now you either need to use a portal or you need something like [react-helmet][helmet] to do that. With React 19, you just need to render the tag and it will automatically stick it in the header.\n\n```javascript\nconst MyPizza = () => (\n <div>\n <h1>I love pizza</h1>\n <title>🍕 Brian Loves Pizza 🍕 \n \n);\n```\n\nNow whenever MyPizza gets rendered it will change the title of the doc (which what shows up in browser tab).\n\n## preload and preconnect\n\nTwo pretty helpful functions to help give hints to the browser of what it may want to start loading in the background. If you are not familiar with the concepts, [head here][preload] to read more, but long story short it's for things like images, fonts, scripts, stylesheets, etc. You can let the browser know \"hey, we're likely to going to need load these soon, can you either preconnect to this URL to get ready to download it or just go ahead and preload it?\" This will allow your user to have more instantaneous experiences since they won't need to wait for these things to load when required. Keep in mind these are hints though and the browser can ignore them. A good of example of this could be that your phone is in low-power mode, it may ignore those hints as it wants to save battery.\n\n```javascript\nconst EnterConfirmation = () => {\n preload(\"https://example.com/text-editor.js\", { as: \"script\" });\n return (\n \n );\n};\n```\n\n## Custom components (aka web components)\n\nIt's always been possible, in theory, to use web components with React, but it's been a huge pain in the butt, involving refs and other careful planning to make sure you don't accidentally un-render and re-render it. Suffice to say, it was possible but impractical.\n\nNow with React 19 it will just handle all of that caretaking of the custom elements for you, just treat it like any other normal tag and React will do all the babysitting for you. It's certainly a big step in making custom elements that work across Angular, React, Svelte, etc. but who knows, we've been talking about custom elements my whole career (seriously, I remember seeing a Polymer talk at the first Fluent conf I went to) and it still isn't here yet.\n\n## More stuff!\n\n[Click here][react19] to read the official React 19 blog post if you want to read more. Lots of cool stuff coming!!\n\n[helmet]: https://github.com/nfl/react-helmet\n[preload]: https://www.debugbear.com/blog/resource-hints-rel-preload-prefetch-preconnect\n[react19]: https://react.dev/blog/2024/04/25/react-19\n","slug":"react-19","title":"React 19","section":"Whats Next","icon":"shuttle-space","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/08-whats-next/A-react-19.md","nextSlug":"/lessons/whats-next/form-actions","prevSlug":"/lessons/testing/browser-tests"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/whats-next/react-compiler.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/whats-next/react-compiler.json
new file mode 100644
index 0000000..be3c29f
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/whats-next/react-compiler.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Learn about performance optimization in React with tools like useMemo and useCallback, and discover how the React Compiler can automate these optimizations for you. This guide provides practical steps for integrating React Compiler into your development workflow, ensuring improved performance with minimal effort.","keywords":["React Compiler","React performance","useMemo","useCallback","optimization","React development"]},"html":"React Compiler \nWe didn't talk much at all about performance hacks with React but there are a few. Generally speaking, React is in its "unoptimized" state is fast enough and adding these performance hacks on top make shave a millisecond here or there off, but in general aren't worth doing unless it's a big gain because it makes it harder to code with.
\nSpecifically I'm talking about useMemo and useCallback . These two tools allow you to control when React will re-render your app. If you're rendering a massive spreadsheet and it's not changing frequently but its parent is, you can use useMemo to say "hey, this doesn't need to re-render unless this condition is true". This only really helps when it's a big thing like this. I don't even teach this in this course because you use it very infrequently and some newer devs get tempted to use it all the time. It will make it hard later to understand why some things are rendering and some aren't. It makes bugs harder to find.
\nEnter React Compiler (formerly known as React Forget). The React team at Facebook is basically going to do these optimizations for you. It's going to detect "hey, this component shouldn't ever change, I'm going to put useMemo on it for you." I love this as it's free performance with zero thought on behalf of the developer. It's pretty conservative about when it does this, so it should work without a hitch.
\n\nIf you do ever hit a case where it is memoizing something and you don't want it do, you can stick "use no memo"; at the top of a file and the React Compiler will skip it.
\n \nSo let's run the checker on the app.
\nnpx react-compiler-healthcheck@beta\nOur app is good to go! You can run this on your codebase too and see if it will work on your code.
\nLet's go ahead and install the plugin.
\n\nnpm i -D babel-plugin-react-compiler@beta --force\nNow add this to your vite.config.js
\n\nreact ({\n babel : {\n plugins : [\n [\n "babel-plugin-react-compiler" ,\n {\n target : "19" ,\n },\n ],\n ],\n },\n}),\nNow let's run your app! If everything is done right, you will notice nothing . It will look no different. But open your React dev tools and look through your components. You should see lots of components have "Memo ✨" next to them. These are the components the React Compiler was able to automatically optimize for you.
\nAnd that's it! Over time this will get lots better. The React team is saying this is safe to try on your codebase today, so you might try it and see if it works for you. I know they'd love feedback on their GitHub repo.
\nIf you want to learn more, I'd strongly suggest Lauren Tan's talk from React Conf 2024 . She was/is the eng manager over React Compiler.
\n\n🏁 Click here to see the state of the project up until now: 17-react-compiler
\n \n","markdown":"\n## React Compiler\n\nWe didn't talk much at all about performance hacks with React but there are a few. Generally speaking, React is in its \"unoptimized\" state is fast enough and adding these performance hacks on top make shave a millisecond here or there off, but in general aren't worth doing unless it's a big gain because it makes it harder to code with.\n\nSpecifically I'm talking about [useMemo][memo] and [useCallback][callback]. These two tools allow you to control when React will re-render your app. If you're rendering a massive spreadsheet and it's not changing frequently but its parent is, you can use useMemo to say \"hey, this doesn't need to re-render unless this condition is true\". This only really helps when it's a big thing like this. I don't even teach this in this course because you use it very infrequently and some newer devs get tempted to use it all the time. It will make it hard later to understand why some things are rendering and some aren't. It makes bugs harder to find.\n\nEnter React Compiler (formerly known as React Forget). The React team at Facebook is basically going to do these optimizations for you. It's going to detect \"hey, this component shouldn't ever change, I'm going to put useMemo on it for you.\" I love this as it's free performance with zero thought on behalf of the developer. It's pretty conservative about when it does this, so it should work without a hitch.\n\n> If you do ever hit a case where it is memoizing something and you don't want it do, you can stick \"use no memo\"; at the top of a file and the React Compiler will skip it.\n\nSo let's run the checker on the app.\n\n```bash\nnpx react-compiler-healthcheck@beta\n```\n\nOur app is good to go! You can run this on your codebase too and see if it will work on your code.\n\nLet's go ahead and install the plugin.\n\n```bash\n# also prone to change as they're rapidly iterating on this\nnpm i -D babel-plugin-react-compiler@beta --force\n```\n\nNow add this to your vite.config.js\n\n```javascript\n// replace react()\nreact({\n babel: {\n plugins: [\n [\n \"babel-plugin-react-compiler\",\n {\n target: \"19\",\n },\n ],\n ],\n },\n}),\n```\n\nNow let's run your app! If everything is done right, you will notice _nothing_. It will look no different. But open your React dev tools and look through your components. You should see lots of components have \"Memo ✨\" next to them. These are the components the React Compiler was able to automatically optimize for you.\n\nAnd that's it! Over time this will get lots better. The React team is saying this is safe to try on your codebase today, so you might try it and see if it works for you. I know they'd love feedback on their GitHub repo.\n\nIf you want to learn more, I'd strongly suggest [Lauren Tan's talk from React Conf 2024][lauren]. She was/is the eng manager over React Compiler.\n\n> 🏁 [Click here to see the state of the project up until now: 17-react-compiler][step]\n\n[step]: https://github.com/btholt/citr-v9-project/tree/master/17-react-compiler\n[callback]: https://react.dev/reference/react/useCallback\n[memo]: https://react.dev/reference/react/useMemo\n[lauren]: https://www.youtube.com/live/T8TZQ6k4SLE?feature=shared&t=12020\n","slug":"react-compiler","title":"React Compiler","section":"Whats Next","icon":"shuttle-space","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/08-whats-next/D-react-compiler.md","nextSlug":"/lessons/wrap-up/congrats","prevSlug":"/lessons/whats-next/use-and-suspense"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/whats-next/use-and-suspense.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/whats-next/use-and-suspense.json
new file mode 100644
index 0000000..2cbfc3b
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/whats-next/use-and-suspense.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"title":"use and Suspense","description":"Explore React Suspense and the new 'use' hook in React 19, alongside TanStack Query integration, to manage component rendering and data loading seamlessly. Learn how to implement Suspense to improve code readability and handling of async operations in React applications, guided by seasoned developer Brian Holt.","keywords":["React Suspense","use hook","TanStack Query","React 19","async rendering"]},"html":"use and Suspense \nWe've been talking about React Suspense for a long time, and technically still we are not suppose to use it directly. But we React 19 we will get some blessed ways to start using it. (Some libraries already use it.)
\nThe idea behind Suspense is that a React component can start rendering and then suspend itself if all its data hasn't loaded yet. This is cool because your code reads really well: it basically looks like you're assuming the data is already there, and React takes care of getting it behind the scene.
\nThis is what the idea of the new use hook is from React. You say use(myPromise) and the React component will only render once myPromise has rendered.
\nLuckily TanStack Query already has a few ways of doing this, so we're going to use that. But just know that use works with any promise, not just TanStack Query.
\nFirst open App.jsx, we have to enable the experimental support for this in TanStack Query (you may not need to this in the future.)
\n\nconst queryClient = new QueryClient ({\n defaultOptions : {\n queries : {\n experimental_prefetchInRender : true ,\n },\n },\n});\nNow in past.lazy.jsx, we need to do some refactoring.
\nimport { Suspense , useState, use } from "react" ; \n\n\nfunction ErrorBoundaryWrappedPastOrderRoutes (const [page, setPage] = useState (1 );\n const loadedPromise = useQuery ({\n queryKey : ["past-orders" , page],\n queryFn : () => getPastOrders (page),\n staleTime : 30000 ,\n }).promise ;\n return (\n <ErrorBoundary > \n <Suspense \n fallback ={ \n <div className ="past-orders" > \n <h2 > Loading Past Orders …</h2 > \n </div > \n }\n >\n <PastOrdersRoute \n loadedPromise ={loadedPromise} \n page ={page} \n setPage ={setPage} \n /> \n </Suspense > \n </ErrorBoundary > const data = use (loadedPromise);\n\n\nWe use Suspense to tell React where to pause rendering until everything in it has resolved. If you have several things that suspend, this won't render until they all complete. \nfallback tells it what to render while it's suspended \nWe need to query inside the parent component (and thus keep track of the page too) because the promise needs to exist outside of the component that is getting suspended. Otherwise it'd be freshly called every single your component rendered. Similar to error boundaries. \nWe shoved everything in our error boundary wrapping component. This should probably be renamed. \nAgain, we're using TanStack Query's support for this, but it could be any promise. TanStack Query just made it easy. \nTanStack Query has several other ways of doing Suspense . We just wanted to try the use hook. \nuse has a few other uses. Check it out in the docs.Unlike most hooks, use, can be used in conditionals and for loops. Kinda weird given most of the rules around hooks, but still true. \n \n\n🏁 Click here to see the state of the project up until now: 16-use
\n \n","markdown":"\n## use and Suspense\n\nWe've been talking about React Suspense for a long time, and technically still we are not suppose to use it directly. But we React 19 we will get some blessed ways to start using it. (Some libraries already use it.)\n\nThe idea behind Suspense is that a React component can start rendering and then suspend itself if all its data hasn't loaded yet. This is cool because your code reads really well: it basically looks like you're assuming the data is already there, and React takes care of getting it behind the scene.\n\nThis is what the idea of the new `use` hook is from React. You say `use(myPromise)` and the React component will only render once myPromise has rendered.\n\nLuckily TanStack Query already has a few ways of doing this, so we're going to use that. But just know that `use` works with any promise, not just TanStack Query.\n\nFirst open App.jsx, we have to enable the experimental support for this in TanStack Query (you may not need to this in the future.)\n\n```javascript\n// replace queryClient\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n experimental_prefetchInRender: true,\n },\n },\n});\n```\n\nNow in past.lazy.jsx, we need to do some refactoring.\n\n```javascript\nimport { Suspense, useState, use } from \"react\"; // import Suspense and use\n\n// move query and page hooks to ErrorBoundary component\nfunction ErrorBoundaryWrappedPastOrderRoutes() {\n const [page, setPage] = useState(1);\n const loadedPromise = useQuery({\n queryKey: [\"past-orders\", page],\n queryFn: () => getPastOrders(page),\n staleTime: 30000,\n }).promise;\n return (\n \n \n Loading Past Orders … \n \n }\n >\n \n );\n}\n\n// first line in PastOrderRoute\nconst data = use(loadedPromise);\n// also, we had to remove the useQuery call to getPastOrders (with an S), and the related if (isLoading) return statement\n```\n\n- We use Suspense to tell React where to pause rendering until _everything_ in it has resolved. If you have several things that suspend, this won't render until they all complete.\n- fallback tells it what to render while it's suspended\n- We need to query inside the parent component (and thus keep track of the page too) because the promise needs to exist outside of the component that is getting suspended. Otherwise it'd be freshly called every single your component rendered. Similar to error boundaries.\n- We shoved everything in our error boundary wrapping component. This should probably be renamed.\n- Again, we're using TanStack Query's support for this, but it could be any promise. TanStack Query just made it easy.\n- TanStack Query [has several other ways of doing Suspense][tsq-suspense]. We just wanted to try the `use` hook.\n- [use][use] has a few other uses. Check it out in the docs.\n- Unlike most hooks, use, can be used in conditionals and for loops. Kinda weird given most of the rules around hooks, but still true.\n\n> 🏁 [Click here to see the state of the project up until now: 16-use][step]\n\n[step]: https://github.com/btholt/citr-v9-project/tree/master/16-use\n[tsq-suspense]: https://tanstack.com/query/v5/docs/framework/react/guides/suspense\n[use]: https://react.dev/reference/react/use\n","slug":"use-and-suspense","title":"use and Suspense","section":"Whats Next","icon":"shuttle-space","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/08-whats-next/C-use-and-suspense.md","nextSlug":"/lessons/whats-next/react-compiler","prevSlug":"/lessons/whats-next/form-actions"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/wrap-up/congrats.json b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/wrap-up/congrats.json
new file mode 100644
index 0000000..31a4a4f
--- /dev/null
+++ b/_next/data/PxJrDJjmFmsKzZJwY10Qb/lessons/wrap-up/congrats.json
@@ -0,0 +1 @@
+{"pageProps":{"post":{"attributes":{"description":"Congratulations on completing the Complete Intro to React v9 course by Brian Holt! You're ready to develop React applications professionally, with skills applicable to real-world tech jobs. Consider advancing your knowledge with Intermediate React v5, exploring server-side React techniques, or diving into hands-on projects to solidify your understanding.","keywords":["React","React course","Brian Holt","Intermediate React","React development"]},"html":"Congratulations!! You did it!
\nThis is a lot of material to take in, so congrats on sticking with it. Hopefully it was fun and maybe made you support your local pizzeria along the way!
\nYou are now fully equipped to write React professionally. Everything you learned here is 95%+ of what you would need to write React at any tech company. The last 5% is what I'll teach you in Intermediate React v6 which has more to do with server-side React and advance performance techniques. But for now, this is almost all you need to know!
\nSo what should you do from here?
\n\nIntermediate React v5 is still very relevant! Take this course and learn more about Tailwind, server-side rendering, more hooks, Redux, and a bunch of there cool things. I'll update this when the new Intermediate React v6 comes out.Follow the rest of the Frontend Masters React Learning Path . \nBuild your own app!! I cannot stress how important it is with concepts like this to just build. Take the dumbest idea in your head and make it. Nothing can replace experience!\nAn e-commerce website to sell single socks so you can match unmatched socks \nAn AI prompt text editor \nA music app that lets you add Spotify, Apple Music, and Tidal songs to it. \nA client to let you read Thread, X, and Bluesky in the same app. \n \n \nLearn Next.js , Remix/React-Router (soon those will be the same thing) or some other way of doing React on the server \nLearn React + Tailwind \n \nThere are lots of way to go with this and they're all fun! I hope you enjoyed the course and I look forward to hopefully getting to teach with you again soon!
\n","markdown":"\nCongratulations!! You did it!\n\nThis is a lot of material to take in, so congrats on sticking with it. Hopefully it was fun and maybe made you support your local pizzeria along the way!\n\nYou are now fully equipped to write React professionally. Everything you learned here is 95%+ of what you would need to write React at any tech company. The last 5% is what I'll teach you in [Intermediate React v6][v6] which has more to do with server-side React and advance performance techniques. But for now, this is almost all you need to know!\n\nSo what should you do from here?\n\n- [Intermediate React v5][v5] is still very relevant! Take this course and learn more about Tailwind, server-side rendering, more hooks, Redux, and a bunch of there cool things. I'll update this when the new Intermediate React v6 comes out.\n- Follow the rest of the [Frontend Masters React Learning Path][path].\n- Build your own app!! I cannot stress how important it is with concepts like this to just build. Take the dumbest idea in your head and make it. Nothing can replace experience!\n - An e-commerce website to sell single socks so you can match unmatched socks\n - An AI prompt text editor\n - A music app that lets you add Spotify, Apple Music, and Tidal songs to it.\n - A client to let you read Thread, X, and Bluesky in the same app.\n- Learn [Next.js][next], Remix/React-Router (soon those will be the same thing) or some other way of doing React on the server\n- Learn React + [Tailwind][tailwind]\n\nThere are lots of way to go with this and they're all fun! I hope you enjoyed the course and I look forward to hopefully getting to teach with you again soon!\n\n[v6]: https://frontendmasters.com/workshops/intermediate-react-v6/\n[v5]: https://frontendmasters.com/courses/intermediate-react-v5/\n[path]: https://frontendmasters.com/learn/react/\n[next]: https://frontendmasters.com/topics/next-js/\n[tailwind]: https://frontendmasters.com/courses/tailwind-css/","slug":"congrats","title":"Congrats","section":"Wrap Up","icon":"hands-clapping","filePath":"/home/runner/work/complete-intro-to-react-v9/complete-intro-to-react-v9/lessons/09-wrap-up/A-congrats.md","nextSlug":null,"prevSlug":"/lessons/whats-next/react-compiler"}},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/static/PxJrDJjmFmsKzZJwY10Qb/_buildManifest.js b/_next/static/PxJrDJjmFmsKzZJwY10Qb/_buildManifest.js
new file mode 100644
index 0000000..d544382
--- /dev/null
+++ b/_next/static/PxJrDJjmFmsKzZJwY10Qb/_buildManifest.js
@@ -0,0 +1 @@
+self.__BUILD_MANIFEST={__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":["static/chunks/pages/index-2a6b1d427e655e1b.js"],"/_error":["static/chunks/pages/_error-77823ddac6993d35.js"],"/lessons/[section]/[slug]":["static/chunks/pages/lessons/[section]/[slug]-f133ec3e69124099.js"],sortedPages:["/","/_app","/_error","/lessons/[section]/[slug]"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
diff --git a/_next/static/PxJrDJjmFmsKzZJwY10Qb/_ssgManifest.js b/_next/static/PxJrDJjmFmsKzZJwY10Qb/_ssgManifest.js
new file mode 100644
index 0000000..10f162a
--- /dev/null
+++ b/_next/static/PxJrDJjmFmsKzZJwY10Qb/_ssgManifest.js
@@ -0,0 +1 @@
+self.__SSG_MANIFEST=new Set(["\u002F","\u002Flessons\u002F[section]\u002F[slug]"]);self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()
\ No newline at end of file
diff --git a/_next/static/chunks/framework-ecc4130bc7a58a64.js b/_next/static/chunks/framework-ecc4130bc7a58a64.js
new file mode 100644
index 0000000..3b13c66
--- /dev/null
+++ b/_next/static/chunks/framework-ecc4130bc7a58a64.js
@@ -0,0 +1,33 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[774],{4448:function(e,n,t){/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var r,l,a,u,o,i,s=t(7294),c=t(3840);function f(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;tn}return!1}(n,t,a,r)&&(t=null),r||null===a?(l=n,(!!v.call(k,l)||!v.call(b,l)&&(y.test(l)?k[l]=!0:(b[l]=!0,!1)))&&(null===t?e.removeAttribute(n):e.setAttribute(n,""+t))):a.mustUseProperty?e[a.propertyName]=null===t?3!==a.type&&"":t:(n=a.attributeName,r=a.attributeNamespace,null===t?e.removeAttribute(n):(t=3===(a=a.type)||4===a&&!0===t?"":""+t,r?e.setAttributeNS(r,n,t):e.setAttribute(n,t))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(e){var n=e.replace(x,E);S[n]=new w(n,1,!1,e,null,!1,!1)}),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(e){var n=e.replace(x,E);S[n]=new w(n,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)}),["xml:base","xml:lang","xml:space"].forEach(function(e){var n=e.replace(x,E);S[n]=new w(n,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)}),["tabIndex","crossOrigin"].forEach(function(e){S[e]=new w(e,1,!1,e.toLowerCase(),null,!1,!1)}),S.xlinkHref=new w("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach(function(e){S[e]=new w(e,1,!1,e.toLowerCase(),null,!0,!0)});var C=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,P=Symbol.for("react.element"),N=Symbol.for("react.portal"),z=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),L=Symbol.for("react.profiler"),R=Symbol.for("react.provider"),M=Symbol.for("react.context"),F=Symbol.for("react.forward_ref"),O=Symbol.for("react.suspense"),D=Symbol.for("react.suspense_list"),I=Symbol.for("react.memo"),U=Symbol.for("react.lazy");Symbol.for("react.scope"),Symbol.for("react.debug_trace_mode");var V=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden"),Symbol.for("react.cache"),Symbol.for("react.tracing_marker");var $=Symbol.iterator;function A(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=$&&e[$]||e["@@iterator"])?e:null}var j,B=Object.assign;function H(e){if(void 0===j)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);j=n&&n[1]||""}return"\n"+j+e}var W=!1;function Q(e,n){if(!e||W)return"";W=!0;var t=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(n){if(n=function(){throw Error()},Object.defineProperty(n.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(n,[])}catch(e){var r=e}Reflect.construct(e,[],n)}else{try{n.call()}catch(e){r=e}e.call(n.prototype)}}else{try{throw Error()}catch(e){r=e}e()}}catch(n){if(n&&r&&"string"==typeof n.stack){for(var l=n.stack.split("\n"),a=r.stack.split("\n"),u=l.length-1,o=a.length-1;1<=u&&0<=o&&l[u]!==a[o];)o--;for(;1<=u&&0<=o;u--,o--)if(l[u]!==a[o]){if(1!==u||1!==o)do if(u--,0>--o||l[u]!==a[o]){var i="\n"+l[u].replace(" at new "," at ");return e.displayName&&i.includes("")&&(i=i.replace("",e.displayName)),i}while(1<=u&&0<=o);break}}}finally{W=!1,Error.prepareStackTrace=t}return(e=e?e.displayName||e.name:"")?H(e):""}function q(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function K(e){var n=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===n||"radio"===n)}function Y(e){e._valueTracker||(e._valueTracker=function(e){var n=K(e)?"checked":"value",t=Object.getOwnPropertyDescriptor(e.constructor.prototype,n),r=""+e[n];if(!e.hasOwnProperty(n)&&void 0!==t&&"function"==typeof t.get&&"function"==typeof t.set){var l=t.get,a=t.set;return Object.defineProperty(e,n,{configurable:!0,get:function(){return l.call(this)},set:function(e){r=""+e,a.call(this,e)}}),Object.defineProperty(e,n,{enumerable:t.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[n]}}}}(e))}function X(e){if(!e)return!1;var n=e._valueTracker;if(!n)return!0;var t=n.getValue(),r="";return e&&(r=K(e)?e.checked?"true":"false":e.value),(e=r)!==t&&(n.setValue(e),!0)}function G(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(n){return e.body}}function Z(e,n){var t=n.checked;return B({},n,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=t?t:e._wrapperState.initialChecked})}function J(e,n){var t=null==n.defaultValue?"":n.defaultValue,r=null!=n.checked?n.checked:n.defaultChecked;t=q(null!=n.value?n.value:t),e._wrapperState={initialChecked:r,initialValue:t,controlled:"checkbox"===n.type||"radio"===n.type?null!=n.checked:null!=n.value}}function ee(e,n){null!=(n=n.checked)&&_(e,"checked",n,!1)}function en(e,n){ee(e,n);var t=q(n.value),r=n.type;if(null!=t)"number"===r?(0===t&&""===e.value||e.value!=t)&&(e.value=""+t):e.value!==""+t&&(e.value=""+t);else if("submit"===r||"reset"===r){e.removeAttribute("value");return}n.hasOwnProperty("value")?er(e,n.type,t):n.hasOwnProperty("defaultValue")&&er(e,n.type,q(n.defaultValue)),null==n.checked&&null!=n.defaultChecked&&(e.defaultChecked=!!n.defaultChecked)}function et(e,n,t){if(n.hasOwnProperty("value")||n.hasOwnProperty("defaultValue")){var r=n.type;if(!("submit"!==r&&"reset"!==r||void 0!==n.value&&null!==n.value))return;n=""+e._wrapperState.initialValue,t||n===e.value||(e.value=n),e.defaultValue=n}""!==(t=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==t&&(e.name=t)}function er(e,n,t){("number"!==n||G(e.ownerDocument)!==e)&&(null==t?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+t&&(e.defaultValue=""+t))}var el=Array.isArray;function ea(e,n,t,r){if(e=e.options,n){n={};for(var l=0;l"+n.valueOf().toString()+"",n=ep.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;n.firstChild;)e.appendChild(n.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,n,t,r){MSApp.execUnsafeLocalFunction(function(){return ed(e,n,t,r)})}:ed);function eh(e,n){if(n){var t=e.firstChild;if(t&&t===e.lastChild&&3===t.nodeType){t.nodeValue=n;return}}e.textContent=n}var eg={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ev=["Webkit","ms","Moz","O"];function ey(e,n,t){return null==n||"boolean"==typeof n||""===n?"":t||"number"!=typeof n||0===n||eg.hasOwnProperty(e)&&eg[e]?(""+n).trim():n+"px"}function eb(e,n){for(var t in e=e.style,n)if(n.hasOwnProperty(t)){var r=0===t.indexOf("--"),l=ey(t,n[t],r);"float"===t&&(t="cssFloat"),r?e.setProperty(t,l):e[t]=l}}Object.keys(eg).forEach(function(e){ev.forEach(function(n){eg[n=n+e.charAt(0).toUpperCase()+e.substring(1)]=eg[e]})});var ek=B({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function ew(e,n){if(n){if(ek[e]&&(null!=n.children||null!=n.dangerouslySetInnerHTML))throw Error(f(137,e));if(null!=n.dangerouslySetInnerHTML){if(null!=n.children)throw Error(f(60));if("object"!=typeof n.dangerouslySetInnerHTML||!("__html"in n.dangerouslySetInnerHTML))throw Error(f(61))}if(null!=n.style&&"object"!=typeof n.style)throw Error(f(62))}}function eS(e,n){if(-1===e.indexOf("-"))return"string"==typeof n.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var ex=null;function eE(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var e_=null,eC=null,eP=null;function eN(e){if(e=rD(e)){if("function"!=typeof e_)throw Error(f(280));var n=e.stateNode;n&&(n=rU(n),e_(e.stateNode,e.type,n))}}function ez(e){eC?eP?eP.push(e):eP=[e]:eC=e}function eT(){if(eC){var e=eC,n=eP;if(eP=eC=null,eN(e),n)for(e=0;e>>=0)?32:31-(e7(e)/ne|0)|0},e7=Math.log,ne=Math.LN2,nn=64,nt=4194304;function nr(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return 4194240&e;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return 130023424&e;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function nl(e,n){var t=e.pendingLanes;if(0===t)return 0;var r=0,l=e.suspendedLanes,a=e.pingedLanes,u=268435455&t;if(0!==u){var o=u&~l;0!==o?r=nr(o):0!=(a&=u)&&(r=nr(a))}else 0!=(u=t&~l)?r=nr(u):0!==a&&(r=nr(a));if(0===r)return 0;if(0!==n&&n!==r&&0==(n&l)&&((l=r&-r)>=(a=n&-n)||16===l&&0!=(4194240&a)))return n;if(0!=(4&r)&&(r|=16&t),0!==(n=e.entangledLanes))for(e=e.entanglements,n&=r;0t;t++)n.push(e);return n}function ni(e,n,t){e.pendingLanes|=n,536870912!==n&&(e.suspendedLanes=0,e.pingedLanes=0),(e=e.eventTimes)[n=31-e9(n)]=t}function ns(e,n){var t=e.entangledLanes|=n;for(e=e.entanglements;t;){var r=31-e9(t),l=1<=td),th=!1;function tg(e,n){switch(e){case"keyup":return -1!==tc.indexOf(n.keyCode);case"keydown":return 229!==n.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function tv(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var ty=!1,tb={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function tk(e){var n=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===n?!!tb[e.type]:"textarea"===n}function tw(e,n,t,r){ez(r),0<(n=rs(n,"onChange")).length&&(t=new n0("onChange","change",null,t,r),e.push({event:t,listeners:n}))}var tS=null,tx=null;function tE(e){rn(e,0)}function t_(e){if(X(rI(e)))return e}function tC(e,n){if("change"===e)return n}var tP=!1;if(g){if(g){var tN="oninput"in document;if(!tN){var tz=document.createElement("div");tz.setAttribute("oninput","return;"),tN="function"==typeof tz.oninput}r=tN}else r=!1;tP=r&&(!document.documentMode||9=n)return{node:r,offset:n-e};e=t}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=tU(r)}}function t$(){for(var e=window,n=G();n instanceof e.HTMLIFrameElement;){try{var t="string"==typeof n.contentWindow.location.href}catch(e){t=!1}if(t)e=n.contentWindow;else break;n=G(e.document)}return n}function tA(e){var n=e&&e.nodeName&&e.nodeName.toLowerCase();return n&&("input"===n&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===n||"true"===e.contentEditable)}var tj=g&&"documentMode"in document&&11>=document.documentMode,tB=null,tH=null,tW=null,tQ=!1;function tq(e,n,t){var r=t.window===t?t.document:9===t.nodeType?t:t.ownerDocument;tQ||null==tB||tB!==G(r)||(r="selectionStart"in(r=tB)&&tA(r)?{start:r.selectionStart,end:r.selectionEnd}:{anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},tW&&tI(tW,r)||(tW=r,0<(r=rs(tH,"onSelect")).length&&(n=new n0("onSelect","select",null,n,t),e.push({event:n,listeners:r}),n.target=tB)))}function tK(e,n){var t={};return t[e.toLowerCase()]=n.toLowerCase(),t["Webkit"+e]="webkit"+n,t["Moz"+e]="moz"+n,t}var tY={animationend:tK("Animation","AnimationEnd"),animationiteration:tK("Animation","AnimationIteration"),animationstart:tK("Animation","AnimationStart"),transitionend:tK("Transition","TransitionEnd")},tX={},tG={};function tZ(e){if(tX[e])return tX[e];if(!tY[e])return e;var n,t=tY[e];for(n in t)if(t.hasOwnProperty(n)&&n in tG)return tX[e]=t[n];return e}g&&(tG=document.createElement("div").style,"AnimationEvent"in window||(delete tY.animationend.animation,delete tY.animationiteration.animation,delete tY.animationstart.animation),"TransitionEvent"in window||delete tY.transitionend.transition);var tJ=tZ("animationend"),t0=tZ("animationiteration"),t1=tZ("animationstart"),t2=tZ("transitionend"),t3=new Map,t4="abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");function t8(e,n){t3.set(e,n),m(n,[e])}for(var t5=0;t5r$||(e.current=rV[r$],rV[r$]=null,r$--)}function rB(e,n){rV[++r$]=e.current,e.current=n}var rH={},rW=rA(rH),rQ=rA(!1),rq=rH;function rK(e,n){var t=e.type.contextTypes;if(!t)return rH;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===n)return r.__reactInternalMemoizedMaskedChildContext;var l,a={};for(l in t)a[l]=n[l];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=n,e.__reactInternalMemoizedMaskedChildContext=a),a}function rY(e){return null!=(e=e.childContextTypes)}function rX(){rj(rQ),rj(rW)}function rG(e,n,t){if(rW.current!==rH)throw Error(f(168));rB(rW,n),rB(rQ,t)}function rZ(e,n,t){var r=e.stateNode;if(n=n.childContextTypes,"function"!=typeof r.getChildContext)return t;for(var l in r=r.getChildContext())if(!(l in n))throw Error(f(108,function(e){var n=e.type;switch(e.tag){case 24:return"Cache";case 9:return(n.displayName||"Context")+".Consumer";case 10:return(n._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=(e=n.render).displayName||e.name||"",n.displayName||(""!==e?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return n;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return function e(n){if(null==n)return null;if("function"==typeof n)return n.displayName||n.name||null;if("string"==typeof n)return n;switch(n){case z:return"Fragment";case N:return"Portal";case L:return"Profiler";case T:return"StrictMode";case O:return"Suspense";case D:return"SuspenseList"}if("object"==typeof n)switch(n.$$typeof){case M:return(n.displayName||"Context")+".Consumer";case R:return(n._context.displayName||"Context")+".Provider";case F:var t=n.render;return(n=n.displayName)||(n=""!==(n=t.displayName||t.name||"")?"ForwardRef("+n+")":"ForwardRef"),n;case I:return null!==(t=n.displayName||null)?t:e(n.type)||"Memo";case U:t=n._payload,n=n._init;try{return e(n(t))}catch(e){}}return null}(n);case 8:return n===T?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if("function"==typeof n)return n.displayName||n.name||null;if("string"==typeof n)return n}return null}(e)||"Unknown",l));return B({},t,r)}function rJ(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||rH,rq=rW.current,rB(rW,e),rB(rQ,rQ.current),!0}function r0(e,n,t){var r=e.stateNode;if(!r)throw Error(f(169));t?(e=rZ(e,n,rq),r.__reactInternalMemoizedMergedChildContext=e,rj(rQ),rj(rW),rB(rW,e)):rj(rQ),rB(rQ,t)}var r1=null,r2=!1,r3=!1;function r4(e){null===r1?r1=[e]:r1.push(e)}function r8(){if(!r3&&null!==r1){r3=!0;var e=0,n=nc;try{var t=r1;for(nc=1;e>=u,l-=u,lr=1<<32-e9(n)+l|t<h?(g=f,f=null):g=f.sibling;var v=p(l,f,o[h],i);if(null===v){null===f&&(f=g);break}e&&f&&null===v.alternate&&n(l,f),u=a(v,u,h),null===c?s=v:c.sibling=v,c=v,f=g}if(h===o.length)return t(l,f),lf&&la(l,h),s;if(null===f){for(;hg?(v=h,h=null):v=h.sibling;var b=p(l,h,y.value,i);if(null===b){null===h&&(h=v);break}e&&h&&null===b.alternate&&n(l,h),u=a(b,u,g),null===c?s=b:c.sibling=b,c=b,h=v}if(y.done)return t(l,h),lf&&la(l,g),s;if(null===h){for(;!y.done;g++,y=o.next())null!==(y=d(l,y.value,i))&&(u=a(y,u,g),null===c?s=y:c.sibling=y,c=y);return lf&&la(l,g),s}for(h=r(l,h);!y.done;g++,y=o.next())null!==(y=m(h,l,g,y.value,i))&&(e&&null!==y.alternate&&h.delete(null===y.key?g:y.key),u=a(y,u,g),null===c?s=y:c.sibling=y,c=y);return e&&h.forEach(function(e){return n(l,e)}),lf&&la(l,g),s}(i,s,c,h);lE(i,c)}return"string"==typeof c&&""!==c||"number"==typeof c?(c=""+c,null!==s&&6===s.tag?(t(i,s.sibling),(s=l(s,c)).return=i):(t(i,s),(s=oZ(c,i.mode,h)).return=i),u(i=s)):t(i,s)}}var lP=lC(!0),lN=lC(!1),lz=rA(null),lT=null,lL=null,lR=null;function lM(){lR=lL=lT=null}function lF(e){var n=lz.current;rj(lz),e._currentValue=n}function lO(e,n,t){for(;null!==e;){var r=e.alternate;if((e.childLanes&n)!==n?(e.childLanes|=n,null!==r&&(r.childLanes|=n)):null!==r&&(r.childLanes&n)!==n&&(r.childLanes|=n),e===t)break;e=e.return}}function lD(e,n){lT=e,lR=lL=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(0!=(e.lanes&n)&&(ua=!0),e.firstContext=null)}function lI(e){var n=e._currentValue;if(lR!==e){if(e={context:e,memoizedValue:n,next:null},null===lL){if(null===lT)throw Error(f(308));lL=e,lT.dependencies={lanes:0,firstContext:e}}else lL=lL.next=e}return n}var lU=null;function lV(e){null===lU?lU=[e]:lU.push(e)}function l$(e,n,t,r){var l=n.interleaved;return null===l?(t.next=t,lV(n)):(t.next=l.next,l.next=t),n.interleaved=t,lA(e,r)}function lA(e,n){e.lanes|=n;var t=e.alternate;for(null!==t&&(t.lanes|=n),t=e,e=e.return;null!==e;)e.childLanes|=n,null!==(t=e.alternate)&&(t.childLanes|=n),t=e,e=e.return;return 3===t.tag?t.stateNode:null}var lj=!1;function lB(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}}function lH(e,n){e=e.updateQueue,n.updateQueue===e&&(n.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function lW(e,n){return{eventTime:e,lane:n,tag:0,payload:null,callback:null,next:null}}function lQ(e,n,t){var r=e.updateQueue;if(null===r)return null;if(r=r.shared,0!=(2&u2)){var l=r.pending;return null===l?n.next=n:(n.next=l.next,l.next=n),r.pending=n,lA(e,t)}return null===(l=r.interleaved)?(n.next=n,lV(r)):(n.next=l.next,l.next=n),r.interleaved=n,lA(e,t)}function lq(e,n,t){if(null!==(n=n.updateQueue)&&(n=n.shared,0!=(4194240&t))){var r=n.lanes;r&=e.pendingLanes,t|=r,n.lanes=t,ns(e,t)}}function lK(e,n){var t=e.updateQueue,r=e.alternate;if(null!==r&&t===(r=r.updateQueue)){var l=null,a=null;if(null!==(t=t.firstBaseUpdate)){do{var u={eventTime:t.eventTime,lane:t.lane,tag:t.tag,payload:t.payload,callback:t.callback,next:null};null===a?l=a=u:a=a.next=u,t=t.next}while(null!==t);null===a?l=a=n:a=a.next=n}else l=a=n;t={baseState:r.baseState,firstBaseUpdate:l,lastBaseUpdate:a,shared:r.shared,effects:r.effects},e.updateQueue=t;return}null===(e=t.lastBaseUpdate)?t.firstBaseUpdate=n:e.next=n,t.lastBaseUpdate=n}function lY(e,n,t,r){var l=e.updateQueue;lj=!1;var a=l.firstBaseUpdate,u=l.lastBaseUpdate,o=l.shared.pending;if(null!==o){l.shared.pending=null;var i=o,s=i.next;i.next=null,null===u?a=s:u.next=s,u=i;var c=e.alternate;null!==c&&(o=(c=c.updateQueue).lastBaseUpdate)!==u&&(null===o?c.firstBaseUpdate=s:o.next=s,c.lastBaseUpdate=i)}if(null!==a){var f=l.baseState;for(u=0,c=s=i=null,o=a;;){var d=o.lane,p=o.eventTime;if((r&d)===d){null!==c&&(c=c.next={eventTime:p,lane:0,tag:o.tag,payload:o.payload,callback:o.callback,next:null});e:{var m=e,h=o;switch(d=n,p=t,h.tag){case 1:if("function"==typeof(m=h.payload)){f=m.call(p,f,d);break e}f=m;break e;case 3:m.flags=-65537&m.flags|128;case 0:if(null==(d="function"==typeof(m=h.payload)?m.call(p,f,d):m))break e;f=B({},f,d);break e;case 2:lj=!0}}null!==o.callback&&0!==o.lane&&(e.flags|=64,null===(d=l.effects)?l.effects=[o]:d.push(o))}else p={eventTime:p,lane:d,tag:o.tag,payload:o.payload,callback:o.callback,next:null},null===c?(s=c=p,i=f):c=c.next=p,u|=d;if(null===(o=o.next)){if(null===(o=l.shared.pending))break;o=(d=o).next,d.next=null,l.lastBaseUpdate=d,l.shared.pending=null}}if(null===c&&(i=f),l.baseState=i,l.firstBaseUpdate=s,l.lastBaseUpdate=c,null!==(n=l.shared.interleaved)){l=n;do u|=l.lane,l=l.next;while(l!==n)}else null===a&&(l.shared.lanes=0);oe|=u,e.lanes=u,e.memoizedState=f}}function lX(e,n,t){if(e=n.effects,n.effects=null,null!==e)for(n=0;nt?t:4,e(!0);var r=an.transition;an.transition={};try{e(!1),n()}finally{nc=t,an.transition=r}}function aj(){return ah().memoizedState}function aB(e,n,t){var r=ob(e);t={lane:r,action:t,hasEagerState:!1,eagerState:null,next:null},aW(e)?aQ(n,t):null!==(t=l$(e,n,t,r))&&(ok(t,e,r,oy()),aq(t,n,r))}function aH(e,n,t){var r=ob(e),l={lane:r,action:t,hasEagerState:!1,eagerState:null,next:null};if(aW(e))aQ(n,l);else{var a=e.alternate;if(0===e.lanes&&(null===a||0===a.lanes)&&null!==(a=n.lastRenderedReducer))try{var u=n.lastRenderedState,o=a(u,t);if(l.hasEagerState=!0,l.eagerState=o,tD(o,u)){var i=n.interleaved;null===i?(l.next=l,lV(n)):(l.next=i.next,i.next=l),n.interleaved=l;return}}catch(e){}finally{}null!==(t=l$(e,n,l,r))&&(ok(t,e,r,l=oy()),aq(t,n,r))}}function aW(e){var n=e.alternate;return e===ar||null!==n&&n===ar}function aQ(e,n){ao=au=!0;var t=e.pending;null===t?n.next=n:(n.next=t.next,t.next=n),e.pending=n}function aq(e,n,t){if(0!=(4194240&t)){var r=n.lanes;r&=e.pendingLanes,t|=r,n.lanes=t,ns(e,t)}}var aK={readContext:lI,useCallback:ac,useContext:ac,useEffect:ac,useImperativeHandle:ac,useInsertionEffect:ac,useLayoutEffect:ac,useMemo:ac,useReducer:ac,useRef:ac,useState:ac,useDebugValue:ac,useDeferredValue:ac,useTransition:ac,useMutableSource:ac,useSyncExternalStore:ac,useId:ac,unstable_isNewReconciler:!1},aY={readContext:lI,useCallback:function(e,n){return am().memoizedState=[e,void 0===n?null:n],e},useContext:lI,useEffect:aL,useImperativeHandle:function(e,n,t){return t=null!=t?t.concat([e]):null,az(4194308,4,aO.bind(null,n,e),t)},useLayoutEffect:function(e,n){return az(4194308,4,e,n)},useInsertionEffect:function(e,n){return az(4,2,e,n)},useMemo:function(e,n){var t=am();return n=void 0===n?null:n,e=e(),t.memoizedState=[e,n],e},useReducer:function(e,n,t){var r=am();return n=void 0!==t?t(n):n,r.memoizedState=r.baseState=n,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:n},r.queue=e,e=e.dispatch=aB.bind(null,ar,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},am().memoizedState=e},useState:aC,useDebugValue:aI,useDeferredValue:function(e){return am().memoizedState=e},useTransition:function(){var e=aC(!1),n=e[0];return e=aA.bind(null,e[1]),am().memoizedState=e,[n,e]},useMutableSource:function(){},useSyncExternalStore:function(e,n,t){var r=ar,l=am();if(lf){if(void 0===t)throw Error(f(407));t=t()}else{if(t=n(),null===u3)throw Error(f(349));0!=(30&at)||aw(r,n,t)}l.memoizedState=t;var a={value:t,getSnapshot:n};return l.queue=a,aL(ax.bind(null,r,a,e),[e]),r.flags|=2048,aP(9,aS.bind(null,r,a,t,n),void 0,null),t},useId:function(){var e=am(),n=u3.identifierPrefix;if(lf){var t=ll,r=lr;n=":"+n+"R"+(t=(r&~(1<<32-e9(r)-1)).toString(32)+t),0<(t=ai++)&&(n+="H"+t.toString(32)),n+=":"}else n=":"+n+"r"+(t=as++).toString(32)+":";return e.memoizedState=n},unstable_isNewReconciler:!1},aX={readContext:lI,useCallback:aU,useContext:lI,useEffect:aR,useImperativeHandle:aD,useInsertionEffect:aM,useLayoutEffect:aF,useMemo:aV,useReducer:av,useRef:aN,useState:function(){return av(ag)},useDebugValue:aI,useDeferredValue:function(e){return a$(ah(),al.memoizedState,e)},useTransition:function(){return[av(ag)[0],ah().memoizedState]},useMutableSource:ab,useSyncExternalStore:ak,useId:aj,unstable_isNewReconciler:!1},aG={readContext:lI,useCallback:aU,useContext:lI,useEffect:aR,useImperativeHandle:aD,useInsertionEffect:aM,useLayoutEffect:aF,useMemo:aV,useReducer:ay,useRef:aN,useState:function(){return ay(ag)},useDebugValue:aI,useDeferredValue:function(e){var n=ah();return null===al?n.memoizedState=e:a$(n,al.memoizedState,e)},useTransition:function(){return[ay(ag)[0],ah().memoizedState]},useMutableSource:ab,useSyncExternalStore:ak,useId:aj,unstable_isNewReconciler:!1};function aZ(e,n){if(e&&e.defaultProps)for(var t in n=B({},n),e=e.defaultProps)void 0===n[t]&&(n[t]=e[t]);return n}function aJ(e,n,t,r){t=null==(t=t(r,n=e.memoizedState))?n:B({},n,t),e.memoizedState=t,0===e.lanes&&(e.updateQueue.baseState=t)}var a0={isMounted:function(e){return!!(e=e._reactInternals)&&eW(e)===e},enqueueSetState:function(e,n,t){e=e._reactInternals;var r=oy(),l=ob(e),a=lW(r,l);a.payload=n,null!=t&&(a.callback=t),null!==(n=lQ(e,a,l))&&(ok(n,e,l,r),lq(n,e,l))},enqueueReplaceState:function(e,n,t){e=e._reactInternals;var r=oy(),l=ob(e),a=lW(r,l);a.tag=1,a.payload=n,null!=t&&(a.callback=t),null!==(n=lQ(e,a,l))&&(ok(n,e,l,r),lq(n,e,l))},enqueueForceUpdate:function(e,n){e=e._reactInternals;var t=oy(),r=ob(e),l=lW(t,r);l.tag=2,null!=n&&(l.callback=n),null!==(n=lQ(e,l,r))&&(ok(n,e,r,t),lq(n,e,r))}};function a1(e,n,t,r,l,a,u){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,a,u):!n.prototype||!n.prototype.isPureReactComponent||!tI(t,r)||!tI(l,a)}function a2(e,n,t){var r=!1,l=rH,a=n.contextType;return"object"==typeof a&&null!==a?a=lI(a):(l=rY(n)?rq:rW.current,a=(r=null!=(r=n.contextTypes))?rK(e,l):rH),n=new n(t,a),e.memoizedState=null!==n.state&&void 0!==n.state?n.state:null,n.updater=a0,e.stateNode=n,n._reactInternals=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=l,e.__reactInternalMemoizedMaskedChildContext=a),n}function a3(e,n,t,r){e=n.state,"function"==typeof n.componentWillReceiveProps&&n.componentWillReceiveProps(t,r),"function"==typeof n.UNSAFE_componentWillReceiveProps&&n.UNSAFE_componentWillReceiveProps(t,r),n.state!==e&&a0.enqueueReplaceState(n,n.state,null)}function a4(e,n,t,r){var l=e.stateNode;l.props=t,l.state=e.memoizedState,l.refs={},lB(e);var a=n.contextType;"object"==typeof a&&null!==a?l.context=lI(a):(a=rY(n)?rq:rW.current,l.context=rK(e,a)),l.state=e.memoizedState,"function"==typeof(a=n.getDerivedStateFromProps)&&(aJ(e,n,a,t),l.state=e.memoizedState),"function"==typeof n.getDerivedStateFromProps||"function"==typeof l.getSnapshotBeforeUpdate||"function"!=typeof l.UNSAFE_componentWillMount&&"function"!=typeof l.componentWillMount||(n=l.state,"function"==typeof l.componentWillMount&&l.componentWillMount(),"function"==typeof l.UNSAFE_componentWillMount&&l.UNSAFE_componentWillMount(),n!==l.state&&a0.enqueueReplaceState(l,l.state,null),lY(e,t,l,r),l.state=e.memoizedState),"function"==typeof l.componentDidMount&&(e.flags|=4194308)}function a8(e,n){try{var t="",r=n;do t+=function(e){switch(e.tag){case 5:return H(e.type);case 16:return H("Lazy");case 13:return H("Suspense");case 19:return H("SuspenseList");case 0:case 2:case 15:return e=Q(e.type,!1);case 11:return e=Q(e.type.render,!1);case 1:return e=Q(e.type,!0);default:return""}}(r),r=r.return;while(r);var l=t}catch(e){l="\nError generating stack: "+e.message+"\n"+e.stack}return{value:e,source:n,stack:l,digest:null}}function a5(e,n,t){return{value:e,source:null,stack:null!=t?t:null,digest:null!=n?n:null}}function a6(e,n){try{console.error(n.value)}catch(e){setTimeout(function(){throw e})}}var a9="function"==typeof WeakMap?WeakMap:Map;function a7(e,n,t){(t=lW(-1,t)).tag=3,t.payload={element:null};var r=n.value;return t.callback=function(){oi||(oi=!0,os=r),a6(e,n)},t}function ue(e,n,t){(t=lW(-1,t)).tag=3;var r=e.type.getDerivedStateFromError;if("function"==typeof r){var l=n.value;t.payload=function(){return r(l)},t.callback=function(){a6(e,n)}}var a=e.stateNode;return null!==a&&"function"==typeof a.componentDidCatch&&(t.callback=function(){a6(e,n),"function"!=typeof r&&(null===oc?oc=new Set([this]):oc.add(this));var t=n.stack;this.componentDidCatch(n.value,{componentStack:null!==t?t:""})}),t}function un(e,n,t){var r=e.pingCache;if(null===r){r=e.pingCache=new a9;var l=new Set;r.set(n,l)}else void 0===(l=r.get(n))&&(l=new Set,r.set(n,l));l.has(t)||(l.add(t),e=oA.bind(null,e,n,t),n.then(e,e))}function ut(e){do{var n;if((n=13===e.tag)&&(n=null===(n=e.memoizedState)||null!==n.dehydrated),n)return e;e=e.return}while(null!==e);return null}function ur(e,n,t,r,l){return 0==(1&e.mode)?e===n?e.flags|=65536:(e.flags|=128,t.flags|=131072,t.flags&=-52805,1===t.tag&&(null===t.alternate?t.tag=17:((n=lW(-1,1)).tag=2,lQ(t,n,1))),t.lanes|=1):(e.flags|=65536,e.lanes=l),e}var ul=C.ReactCurrentOwner,ua=!1;function uu(e,n,t,r){n.child=null===e?lN(n,null,t,r):lP(n,e.child,t,r)}function uo(e,n,t,r,l){t=t.render;var a=n.ref;return(lD(n,l),r=ad(e,n,t,r,a,l),t=ap(),null===e||ua)?(lf&&t&&lo(n),n.flags|=1,uu(e,n,r,l),n.child):(n.updateQueue=e.updateQueue,n.flags&=-2053,e.lanes&=~l,uC(e,n,l))}function ui(e,n,t,r,l){if(null===e){var a=t.type;return"function"!=typeof a||oq(a)||void 0!==a.defaultProps||null!==t.compare||void 0!==t.defaultProps?((e=oY(t.type,null,r,n,n.mode,l)).ref=n.ref,e.return=n,n.child=e):(n.tag=15,n.type=a,us(e,n,a,r,l))}if(a=e.child,0==(e.lanes&l)){var u=a.memoizedProps;if((t=null!==(t=t.compare)?t:tI)(u,r)&&e.ref===n.ref)return uC(e,n,l)}return n.flags|=1,(e=oK(a,r)).ref=n.ref,e.return=n,n.child=e}function us(e,n,t,r,l){if(null!==e){var a=e.memoizedProps;if(tI(a,r)&&e.ref===n.ref){if(ua=!1,n.pendingProps=r=a,0==(e.lanes&l))return n.lanes=e.lanes,uC(e,n,l);0!=(131072&e.flags)&&(ua=!0)}}return ud(e,n,t,r,l)}function uc(e,n,t){var r=n.pendingProps,l=r.children,a=null!==e?e.memoizedState:null;if("hidden"===r.mode){if(0==(1&n.mode))n.memoizedState={baseLanes:0,cachePool:null,transitions:null},rB(u6,u5),u5|=t;else{if(0==(1073741824&t))return e=null!==a?a.baseLanes|t:t,n.lanes=n.childLanes=1073741824,n.memoizedState={baseLanes:e,cachePool:null,transitions:null},n.updateQueue=null,rB(u6,u5),u5|=e,null;n.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=null!==a?a.baseLanes:t,rB(u6,u5),u5|=r}}else null!==a?(r=a.baseLanes|t,n.memoizedState=null):r=t,rB(u6,u5),u5|=r;return uu(e,n,l,t),n.child}function uf(e,n){var t=n.ref;(null===e&&null!==t||null!==e&&e.ref!==t)&&(n.flags|=512,n.flags|=2097152)}function ud(e,n,t,r,l){var a=rY(t)?rq:rW.current;return(a=rK(n,a),lD(n,l),t=ad(e,n,t,r,a,l),r=ap(),null===e||ua)?(lf&&r&&lo(n),n.flags|=1,uu(e,n,t,l),n.child):(n.updateQueue=e.updateQueue,n.flags&=-2053,e.lanes&=~l,uC(e,n,l))}function up(e,n,t,r,l){if(rY(t)){var a=!0;rJ(n)}else a=!1;if(lD(n,l),null===n.stateNode)u_(e,n),a2(n,t,r),a4(n,t,r,l),r=!0;else if(null===e){var u=n.stateNode,o=n.memoizedProps;u.props=o;var i=u.context,s=t.contextType;s="object"==typeof s&&null!==s?lI(s):rK(n,s=rY(t)?rq:rW.current);var c=t.getDerivedStateFromProps,f="function"==typeof c||"function"==typeof u.getSnapshotBeforeUpdate;f||"function"!=typeof u.UNSAFE_componentWillReceiveProps&&"function"!=typeof u.componentWillReceiveProps||(o!==r||i!==s)&&a3(n,u,r,s),lj=!1;var d=n.memoizedState;u.state=d,lY(n,r,u,l),i=n.memoizedState,o!==r||d!==i||rQ.current||lj?("function"==typeof c&&(aJ(n,t,c,r),i=n.memoizedState),(o=lj||a1(n,t,o,r,d,i,s))?(f||"function"!=typeof u.UNSAFE_componentWillMount&&"function"!=typeof u.componentWillMount||("function"==typeof u.componentWillMount&&u.componentWillMount(),"function"==typeof u.UNSAFE_componentWillMount&&u.UNSAFE_componentWillMount()),"function"==typeof u.componentDidMount&&(n.flags|=4194308)):("function"==typeof u.componentDidMount&&(n.flags|=4194308),n.memoizedProps=r,n.memoizedState=i),u.props=r,u.state=i,u.context=s,r=o):("function"==typeof u.componentDidMount&&(n.flags|=4194308),r=!1)}else{u=n.stateNode,lH(e,n),o=n.memoizedProps,s=n.type===n.elementType?o:aZ(n.type,o),u.props=s,f=n.pendingProps,d=u.context,i="object"==typeof(i=t.contextType)&&null!==i?lI(i):rK(n,i=rY(t)?rq:rW.current);var p=t.getDerivedStateFromProps;(c="function"==typeof p||"function"==typeof u.getSnapshotBeforeUpdate)||"function"!=typeof u.UNSAFE_componentWillReceiveProps&&"function"!=typeof u.componentWillReceiveProps||(o!==f||d!==i)&&a3(n,u,r,i),lj=!1,d=n.memoizedState,u.state=d,lY(n,r,u,l);var m=n.memoizedState;o!==f||d!==m||rQ.current||lj?("function"==typeof p&&(aJ(n,t,p,r),m=n.memoizedState),(s=lj||a1(n,t,s,r,d,m,i)||!1)?(c||"function"!=typeof u.UNSAFE_componentWillUpdate&&"function"!=typeof u.componentWillUpdate||("function"==typeof u.componentWillUpdate&&u.componentWillUpdate(r,m,i),"function"==typeof u.UNSAFE_componentWillUpdate&&u.UNSAFE_componentWillUpdate(r,m,i)),"function"==typeof u.componentDidUpdate&&(n.flags|=4),"function"==typeof u.getSnapshotBeforeUpdate&&(n.flags|=1024)):("function"!=typeof u.componentDidUpdate||o===e.memoizedProps&&d===e.memoizedState||(n.flags|=4),"function"!=typeof u.getSnapshotBeforeUpdate||o===e.memoizedProps&&d===e.memoizedState||(n.flags|=1024),n.memoizedProps=r,n.memoizedState=m),u.props=r,u.state=m,u.context=i,r=s):("function"!=typeof u.componentDidUpdate||o===e.memoizedProps&&d===e.memoizedState||(n.flags|=4),"function"!=typeof u.getSnapshotBeforeUpdate||o===e.memoizedProps&&d===e.memoizedState||(n.flags|=1024),r=!1)}return um(e,n,t,r,a,l)}function um(e,n,t,r,l,a){uf(e,n);var u=0!=(128&n.flags);if(!r&&!u)return l&&r0(n,t,!1),uC(e,n,a);r=n.stateNode,ul.current=n;var o=u&&"function"!=typeof t.getDerivedStateFromError?null:r.render();return n.flags|=1,null!==e&&u?(n.child=lP(n,e.child,null,a),n.child=lP(n,null,o,a)):uu(e,n,o,a),n.memoizedState=r.state,l&&r0(n,t,!0),n.child}function uh(e){var n=e.stateNode;n.pendingContext?rG(e,n.pendingContext,n.pendingContext!==n.context):n.context&&rG(e,n.context,!1),l2(e,n.containerInfo)}function ug(e,n,t,r,l){return lk(),lw(l),n.flags|=256,uu(e,n,t,r),n.child}var uv={dehydrated:null,treeContext:null,retryLane:0};function uy(e){return{baseLanes:e,cachePool:null,transitions:null}}function ub(e,n,t){var r,l=n.pendingProps,a=l5.current,u=!1,o=0!=(128&n.flags);if((r=o)||(r=(null===e||null!==e.memoizedState)&&0!=(2&a)),r?(u=!0,n.flags&=-129):(null===e||null!==e.memoizedState)&&(a|=1),rB(l5,1&a),null===e)return(lg(n),null!==(e=n.memoizedState)&&null!==(e=e.dehydrated))?(0==(1&n.mode)?n.lanes=1:"$!"===e.data?n.lanes=8:n.lanes=1073741824,null):(o=l.children,e=l.fallback,u?(l=n.mode,u=n.child,o={mode:"hidden",children:o},0==(1&l)&&null!==u?(u.childLanes=0,u.pendingProps=o):u=oG(o,l,0,null),e=oX(e,l,t,null),u.return=n,e.return=n,u.sibling=e,n.child=u,n.child.memoizedState=uy(t),n.memoizedState=uv,e):uk(n,o));if(null!==(a=e.memoizedState)&&null!==(r=a.dehydrated))return function(e,n,t,r,l,a,u){if(t)return 256&n.flags?(n.flags&=-257,uw(e,n,u,r=a5(Error(f(422))))):null!==n.memoizedState?(n.child=e.child,n.flags|=128,null):(a=r.fallback,l=n.mode,r=oG({mode:"visible",children:r.children},l,0,null),a=oX(a,l,u,null),a.flags|=2,r.return=n,a.return=n,r.sibling=a,n.child=r,0!=(1&n.mode)&&lP(n,e.child,null,u),n.child.memoizedState=uy(u),n.memoizedState=uv,a);if(0==(1&n.mode))return uw(e,n,u,null);if("$!"===l.data){if(r=l.nextSibling&&l.nextSibling.dataset)var o=r.dgst;return r=o,uw(e,n,u,r=a5(a=Error(f(419)),r,void 0))}if(o=0!=(u&e.childLanes),ua||o){if(null!==(r=u3)){switch(u&-u){case 4:l=2;break;case 16:l=8;break;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:l=32;break;case 536870912:l=268435456;break;default:l=0}0!==(l=0!=(l&(r.suspendedLanes|u))?0:l)&&l!==a.retryLane&&(a.retryLane=l,lA(e,l),ok(r,e,l,-1))}return oM(),uw(e,n,u,r=a5(Error(f(421))))}return"$?"===l.data?(n.flags|=128,n.child=e.child,n=oB.bind(null,e),l._reactRetry=n,null):(e=a.treeContext,lc=rC(l.nextSibling),ls=n,lf=!0,ld=null,null!==e&&(le[ln++]=lr,le[ln++]=ll,le[ln++]=lt,lr=e.id,ll=e.overflow,lt=n),n=uk(n,r.children),n.flags|=4096,n)}(e,n,o,l,r,a,t);if(u){u=l.fallback,o=n.mode,r=(a=e.child).sibling;var i={mode:"hidden",children:l.children};return 0==(1&o)&&n.child!==a?((l=n.child).childLanes=0,l.pendingProps=i,n.deletions=null):(l=oK(a,i)).subtreeFlags=14680064&a.subtreeFlags,null!==r?u=oK(r,u):(u=oX(u,o,t,null),u.flags|=2),u.return=n,l.return=n,l.sibling=u,n.child=l,l=u,u=n.child,o=null===(o=e.child.memoizedState)?uy(t):{baseLanes:o.baseLanes|t,cachePool:null,transitions:o.transitions},u.memoizedState=o,u.childLanes=e.childLanes&~t,n.memoizedState=uv,l}return e=(u=e.child).sibling,l=oK(u,{mode:"visible",children:l.children}),0==(1&n.mode)&&(l.lanes=t),l.return=n,l.sibling=null,null!==e&&(null===(t=n.deletions)?(n.deletions=[e],n.flags|=16):t.push(e)),n.child=l,n.memoizedState=null,l}function uk(e,n){return(n=oG({mode:"visible",children:n},e.mode,0,null)).return=e,e.child=n}function uw(e,n,t,r){return null!==r&&lw(r),lP(n,e.child,null,t),e=uk(n,n.pendingProps.children),e.flags|=2,n.memoizedState=null,e}function uS(e,n,t){e.lanes|=n;var r=e.alternate;null!==r&&(r.lanes|=n),lO(e.return,n,t)}function ux(e,n,t,r,l){var a=e.memoizedState;null===a?e.memoizedState={isBackwards:n,rendering:null,renderingStartTime:0,last:r,tail:t,tailMode:l}:(a.isBackwards=n,a.rendering=null,a.renderingStartTime=0,a.last=r,a.tail=t,a.tailMode=l)}function uE(e,n,t){var r=n.pendingProps,l=r.revealOrder,a=r.tail;if(uu(e,n,r.children,t),0!=(2&(r=l5.current)))r=1&r|2,n.flags|=128;else{if(null!==e&&0!=(128&e.flags))e:for(e=n.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&uS(e,t,n);else if(19===e.tag)uS(e,t,n);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===n)break;for(;null===e.sibling;){if(null===e.return||e.return===n)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(rB(l5,r),0==(1&n.mode))n.memoizedState=null;else switch(l){case"forwards":for(l=null,t=n.child;null!==t;)null!==(e=t.alternate)&&null===l6(e)&&(l=t),t=t.sibling;null===(t=l)?(l=n.child,n.child=null):(l=t.sibling,t.sibling=null),ux(n,!1,l,t,a);break;case"backwards":for(t=null,l=n.child,n.child=null;null!==l;){if(null!==(e=l.alternate)&&null===l6(e)){n.child=l;break}e=l.sibling,l.sibling=t,t=l,l=e}ux(n,!0,t,null,a);break;case"together":ux(n,!1,null,null,void 0);break;default:n.memoizedState=null}return n.child}function u_(e,n){0==(1&n.mode)&&null!==e&&(e.alternate=null,n.alternate=null,n.flags|=2)}function uC(e,n,t){if(null!==e&&(n.dependencies=e.dependencies),oe|=n.lanes,0==(t&n.childLanes))return null;if(null!==e&&n.child!==e.child)throw Error(f(153));if(null!==n.child){for(t=oK(e=n.child,e.pendingProps),n.child=t,t.return=n;null!==e.sibling;)e=e.sibling,(t=t.sibling=oK(e,e.pendingProps)).return=n;t.sibling=null}return n.child}function uP(e,n){if(!lf)switch(e.tailMode){case"hidden":n=e.tail;for(var t=null;null!==n;)null!==n.alternate&&(t=n),n=n.sibling;null===t?e.tail=null:t.sibling=null;break;case"collapsed":t=e.tail;for(var r=null;null!==t;)null!==t.alternate&&(r=t),t=t.sibling;null===r?n||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function uN(e){var n=null!==e.alternate&&e.alternate.child===e.child,t=0,r=0;if(n)for(var l=e.child;null!==l;)t|=l.lanes|l.childLanes,r|=14680064&l.subtreeFlags,r|=14680064&l.flags,l.return=e,l=l.sibling;else for(l=e.child;null!==l;)t|=l.lanes|l.childLanes,r|=l.subtreeFlags,r|=l.flags,l.return=e,l=l.sibling;return e.subtreeFlags|=r,e.childLanes=t,n}l=function(e,n){for(var t=n.child;null!==t;){if(5===t.tag||6===t.tag)e.appendChild(t.stateNode);else if(4!==t.tag&&null!==t.child){t.child.return=t,t=t.child;continue}if(t===n)break;for(;null===t.sibling;){if(null===t.return||t.return===n)return;t=t.return}t.sibling.return=t.return,t=t.sibling}},a=function(){},u=function(e,n,t,r){var l=e.memoizedProps;if(l!==r){e=n.stateNode,l1(lZ.current);var a,u=null;switch(t){case"input":l=Z(e,l),r=Z(e,r),u=[];break;case"select":l=B({},l,{value:void 0}),r=B({},r,{value:void 0}),u=[];break;case"textarea":l=eu(e,l),r=eu(e,r),u=[];break;default:"function"!=typeof l.onClick&&"function"==typeof r.onClick&&(e.onclick=rg)}for(s in ew(t,r),t=null,l)if(!r.hasOwnProperty(s)&&l.hasOwnProperty(s)&&null!=l[s]){if("style"===s){var o=l[s];for(a in o)o.hasOwnProperty(a)&&(t||(t={}),t[a]="")}else"dangerouslySetInnerHTML"!==s&&"children"!==s&&"suppressContentEditableWarning"!==s&&"suppressHydrationWarning"!==s&&"autoFocus"!==s&&(p.hasOwnProperty(s)?u||(u=[]):(u=u||[]).push(s,null))}for(s in r){var i=r[s];if(o=null!=l?l[s]:void 0,r.hasOwnProperty(s)&&i!==o&&(null!=i||null!=o)){if("style"===s){if(o){for(a in o)!o.hasOwnProperty(a)||i&&i.hasOwnProperty(a)||(t||(t={}),t[a]="");for(a in i)i.hasOwnProperty(a)&&o[a]!==i[a]&&(t||(t={}),t[a]=i[a])}else t||(u||(u=[]),u.push(s,t)),t=i}else"dangerouslySetInnerHTML"===s?(i=i?i.__html:void 0,o=o?o.__html:void 0,null!=i&&o!==i&&(u=u||[]).push(s,i)):"children"===s?"string"!=typeof i&&"number"!=typeof i||(u=u||[]).push(s,""+i):"suppressContentEditableWarning"!==s&&"suppressHydrationWarning"!==s&&(p.hasOwnProperty(s)?(null!=i&&"onScroll"===s&&rt("scroll",e),u||o===i||(u=[])):(u=u||[]).push(s,i))}}t&&(u=u||[]).push("style",t);var s=u;(n.updateQueue=s)&&(n.flags|=4)}},o=function(e,n,t,r){t!==r&&(n.flags|=4)};var uz=!1,uT=!1,uL="function"==typeof WeakSet?WeakSet:Set,uR=null;function uM(e,n){var t=e.ref;if(null!==t){if("function"==typeof t)try{t(null)}catch(t){o$(e,n,t)}else t.current=null}}function uF(e,n,t){try{t()}catch(t){o$(e,n,t)}}var uO=!1;function uD(e,n,t){var r=n.updateQueue;if(null!==(r=null!==r?r.lastEffect:null)){var l=r=r.next;do{if((l.tag&e)===e){var a=l.destroy;l.destroy=void 0,void 0!==a&&uF(n,t,a)}l=l.next}while(l!==r)}}function uI(e,n){if(null!==(n=null!==(n=n.updateQueue)?n.lastEffect:null)){var t=n=n.next;do{if((t.tag&e)===e){var r=t.create;t.destroy=r()}t=t.next}while(t!==n)}}function uU(e){var n=e.ref;if(null!==n){var t=e.stateNode;e.tag,e=t,"function"==typeof n?n(e):n.current=e}}function uV(e){return 5===e.tag||3===e.tag||4===e.tag}function u$(e){e:for(;;){for(;null===e.sibling;){if(null===e.return||uV(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;5!==e.tag&&6!==e.tag&&18!==e.tag;){if(2&e.flags||null===e.child||4===e.tag)continue e;e.child.return=e,e=e.child}if(!(2&e.flags))return e.stateNode}}var uA=null,uj=!1;function uB(e,n,t){for(t=t.child;null!==t;)uH(e,n,t),t=t.sibling}function uH(e,n,t){if(e6&&"function"==typeof e6.onCommitFiberUnmount)try{e6.onCommitFiberUnmount(e5,t)}catch(e){}switch(t.tag){case 5:uT||uM(t,n);case 6:var r=uA,l=uj;uA=null,uB(e,n,t),uA=r,uj=l,null!==uA&&(uj?(e=uA,t=t.stateNode,8===e.nodeType?e.parentNode.removeChild(t):e.removeChild(t)):uA.removeChild(t.stateNode));break;case 18:null!==uA&&(uj?(e=uA,t=t.stateNode,8===e.nodeType?r_(e.parentNode,t):1===e.nodeType&&r_(e,t),nM(e)):r_(uA,t.stateNode));break;case 4:r=uA,l=uj,uA=t.stateNode.containerInfo,uj=!0,uB(e,n,t),uA=r,uj=l;break;case 0:case 11:case 14:case 15:if(!uT&&null!==(r=t.updateQueue)&&null!==(r=r.lastEffect)){l=r=r.next;do{var a=l,u=a.destroy;a=a.tag,void 0!==u&&(0!=(2&a)?uF(t,n,u):0!=(4&a)&&uF(t,n,u)),l=l.next}while(l!==r)}uB(e,n,t);break;case 1:if(!uT&&(uM(t,n),"function"==typeof(r=t.stateNode).componentWillUnmount))try{r.props=t.memoizedProps,r.state=t.memoizedState,r.componentWillUnmount()}catch(e){o$(t,n,e)}uB(e,n,t);break;case 21:default:uB(e,n,t);break;case 22:1&t.mode?(uT=(r=uT)||null!==t.memoizedState,uB(e,n,t),uT=r):uB(e,n,t)}}function uW(e){var n=e.updateQueue;if(null!==n){e.updateQueue=null;var t=e.stateNode;null===t&&(t=e.stateNode=new uL),n.forEach(function(n){var r=oH.bind(null,e,n);t.has(n)||(t.add(n),n.then(r,r))})}}function uQ(e,n){var t=n.deletions;if(null!==t)for(var r=0;rl&&(l=u),r&=~a}if(r=l,10<(r=(120>(r=eJ()-r)?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*uZ(r/1960))-r)){e.timeoutHandle=rk(oI.bind(null,e,ol,oo),r);break}oI(e,ol,oo);break;default:throw Error(f(329))}}}return ow(e,eJ()),e.callbackNode===t?oS.bind(null,e):null}function ox(e,n){var t=or;return e.current.memoizedState.isDehydrated&&(oT(e,n).flags|=256),2!==(e=oF(e,n))&&(n=ol,ol=t,null!==n&&oE(n)),e}function oE(e){null===ol?ol=e:ol.push.apply(ol,e)}function o_(e,n){for(n&=~ot,n&=~on,e.suspendedLanes|=n,e.pingedLanes&=~n,e=e.expirationTimes;0",e=e.removeChild(e.firstChild)):"string"==typeof r.is?e=c.createElement(t,{is:r.is}):(e=c.createElement(t),"select"===t&&(c=e,r.multiple?c.multiple=!0:r.size&&(c.size=r.size))):e=c.createElementNS(e,t),e[rz]=n,e[rT]=r,l(e,n,!1,!1),n.stateNode=e;e:{switch(c=eS(t,r),t){case"dialog":rt("cancel",e),rt("close",e),i=r;break;case"iframe":case"object":case"embed":rt("load",e),i=r;break;case"video":case"audio":for(i=0;iou&&(n.flags|=128,r=!0,uP(s,!1),n.lanes=4194304)}}else{if(!r){if(null!==(e=l6(c))){if(n.flags|=128,r=!0,null!==(t=e.updateQueue)&&(n.updateQueue=t,n.flags|=4),uP(s,!0),null===s.tail&&"hidden"===s.tailMode&&!c.alternate&&!lf)return uN(n),null}else 2*eJ()-s.renderingStartTime>ou&&1073741824!==t&&(n.flags|=128,r=!0,uP(s,!1),n.lanes=4194304)}s.isBackwards?(c.sibling=n.child,n.child=c):(null!==(t=s.last)?t.sibling=c:n.child=c,s.last=c)}if(null!==s.tail)return n=s.tail,s.rendering=n,s.tail=n.sibling,s.renderingStartTime=eJ(),n.sibling=null,t=l5.current,rB(l5,r?1&t|2:1&t),n;return uN(n),null;case 22:case 23:return oz(),r=null!==n.memoizedState,null!==e&&null!==e.memoizedState!==r&&(n.flags|=8192),r&&0!=(1&n.mode)?0!=(1073741824&u5)&&(uN(n),6&n.subtreeFlags&&(n.flags|=8192)):uN(n),null;case 24:case 25:return null}throw Error(f(156,n.tag))}(t,n,u5))){u4=t;return}}else{if(null!==(t=function(e,n){switch(li(n),n.tag){case 1:return rY(n.type)&&rX(),65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 3:return l3(),rj(rQ),rj(rW),l7(),0!=(65536&(e=n.flags))&&0==(128&e)?(n.flags=-65537&e|128,n):null;case 5:return l8(n),null;case 13:if(rj(l5),null!==(e=n.memoizedState)&&null!==e.dehydrated){if(null===n.alternate)throw Error(f(340));lk()}return 65536&(e=n.flags)?(n.flags=-65537&e|128,n):null;case 19:return rj(l5),null;case 4:return l3(),null;case 10:return lF(n.type._context),null;case 22:case 23:return oz(),null;default:return null}}(t,n))){t.flags&=32767,u4=t;return}if(null!==e)e.flags|=32768,e.subtreeFlags=0,e.deletions=null;else{u9=6,u4=null;return}}if(null!==(n=n.sibling)){u4=n;return}u4=n=e}while(null!==n);0===u9&&(u9=5)}function oI(e,n,t){var r=nc,l=u1.transition;try{u1.transition=null,nc=1,function(e,n,t,r){do oU();while(null!==od);if(0!=(6&u2))throw Error(f(327));t=e.finishedWork;var l=e.finishedLanes;if(null!==t){if(e.finishedWork=null,e.finishedLanes=0,t===e.current)throw Error(f(177));e.callbackNode=null,e.callbackPriority=0;var a=t.lanes|t.childLanes;if(function(e,n){var t=e.pendingLanes&~n;e.pendingLanes=n,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=n,e.mutableReadLanes&=n,e.entangledLanes&=n,n=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0r&&(l=r,r=a,a=l),l=tV(t,a);var u=tV(t,r);l&&u&&(1!==e.rangeCount||e.anchorNode!==l.node||e.anchorOffset!==l.offset||e.focusNode!==u.node||e.focusOffset!==u.offset)&&((n=n.createRange()).setStart(l.node,l.offset),e.removeAllRanges(),a>r?(e.addRange(n),e.extend(u.node,u.offset)):(n.setEnd(u.node,u.offset),e.addRange(n)))}}for(n=[],e=t;e=e.parentNode;)1===e.nodeType&&n.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof t.focus&&t.focus(),t=0;te?16:e,null===od)var r=!1;else{if(e=od,od=null,op=0,0!=(6&u2))throw Error(f(331));var l=u2;for(u2|=4,uR=e.current;null!==uR;){var a=uR,u=a.child;if(0!=(16&uR.flags)){var o=a.deletions;if(null!==o){for(var i=0;ieJ()-oa?oT(e,0):ot|=t),ow(e,n)}function oj(e,n){0===n&&(0==(1&e.mode)?n=1:(n=nt,0==(130023424&(nt<<=1))&&(nt=4194304)));var t=oy();null!==(e=lA(e,n))&&(ni(e,n,t),ow(e,t))}function oB(e){var n=e.memoizedState,t=0;null!==n&&(t=n.retryLane),oj(e,t)}function oH(e,n){var t=0;switch(e.tag){case 13:var r=e.stateNode,l=e.memoizedState;null!==l&&(t=l.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(f(314))}null!==r&&r.delete(n),oj(e,t)}function oW(e,n,t,r){this.tag=e,this.key=t,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=n,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function oQ(e,n,t,r){return new oW(e,n,t,r)}function oq(e){return!(!(e=e.prototype)||!e.isReactComponent)}function oK(e,n){var t=e.alternate;return null===t?((t=oQ(e.tag,n,e.key,e.mode)).elementType=e.elementType,t.type=e.type,t.stateNode=e.stateNode,t.alternate=e,e.alternate=t):(t.pendingProps=n,t.type=e.type,t.flags=0,t.subtreeFlags=0,t.deletions=null),t.flags=14680064&e.flags,t.childLanes=e.childLanes,t.lanes=e.lanes,t.child=e.child,t.memoizedProps=e.memoizedProps,t.memoizedState=e.memoizedState,t.updateQueue=e.updateQueue,n=e.dependencies,t.dependencies=null===n?null:{lanes:n.lanes,firstContext:n.firstContext},t.sibling=e.sibling,t.index=e.index,t.ref=e.ref,t}function oY(e,n,t,r,l,a){var u=2;if(r=e,"function"==typeof e)oq(e)&&(u=1);else if("string"==typeof e)u=5;else e:switch(e){case z:return oX(t.children,l,a,n);case T:u=8,l|=8;break;case L:return(e=oQ(12,t,n,2|l)).elementType=L,e.lanes=a,e;case O:return(e=oQ(13,t,n,l)).elementType=O,e.lanes=a,e;case D:return(e=oQ(19,t,n,l)).elementType=D,e.lanes=a,e;case V:return oG(t,l,a,n);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case R:u=10;break e;case M:u=9;break e;case F:u=11;break e;case I:u=14;break e;case U:u=16,r=null;break e}throw Error(f(130,null==e?e:typeof e,""))}return(n=oQ(u,t,n,l)).elementType=e,n.type=r,n.lanes=a,n}function oX(e,n,t,r){return(e=oQ(7,e,r,n)).lanes=t,e}function oG(e,n,t,r){return(e=oQ(22,e,r,n)).elementType=V,e.lanes=t,e.stateNode={isHidden:!1},e}function oZ(e,n,t){return(e=oQ(6,e,null,n)).lanes=t,e}function oJ(e,n,t){return(n=oQ(4,null!==e.children?e.children:[],e.key,n)).lanes=t,n.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},n}function o0(e,n,t,r,l){this.tag=n,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=no(0),this.expirationTimes=no(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=no(0),this.identifierPrefix=r,this.onRecoverableError=l,this.mutableSourceEagerHydrationData=null}function o1(e,n,t,r,l,a,u,o,i){return e=new o0(e,n,t,o,i),1===n?(n=1,!0===a&&(n|=8)):n=0,a=oQ(3,null,null,n),e.current=a,a.stateNode=e,a.memoizedState={element:r,isDehydrated:t,cache:null,transitions:null,pendingSuspenseBoundaries:null},lB(a),e}function o2(e){if(!e)return rH;e=e._reactInternals;e:{if(eW(e)!==e||1!==e.tag)throw Error(f(170));var n=e;do{switch(n.tag){case 3:n=n.stateNode.context;break e;case 1:if(rY(n.type)){n=n.stateNode.__reactInternalMemoizedMergedChildContext;break e}}n=n.return}while(null!==n);throw Error(f(171))}if(1===e.tag){var t=e.type;if(rY(t))return rZ(e,t,n)}return n}function o3(e,n,t,r,l,a,u,o,i){return(e=o1(t,r,!0,e,l,a,u,o,i)).context=o2(null),t=e.current,(a=lW(r=oy(),l=ob(t))).callback=null!=n?n:null,lQ(t,a,l),e.current.lanes=l,ni(e,l,r),ow(e,r),e}function o4(e,n,t,r){var l=n.current,a=oy(),u=ob(l);return t=o2(t),null===n.context?n.context=t:n.pendingContext=t,(n=lW(a,u)).payload={element:e},null!==(r=void 0===r?null:r)&&(n.callback=r),null!==(e=lQ(l,n,u))&&(ok(e,l,u,a),lq(e,l,u)),u}function o8(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function o5(e,n){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var t=e.retryLane;e.retryLane=0!==t&&t>>1,l=e[r];if(0>>1;ra(i,t))sa(c,i)?(e[r]=c,e[s]=t,r=s):(e[r]=i,e[o]=t,r=o);else if(sa(c,t))e[r]=c,e[s]=t,r=s;else break}}return n}function a(e,n){var t=e.sortIndex-n.sortIndex;return 0!==t?t:e.id-n.id}if("object"==typeof performance&&"function"==typeof performance.now){var u,o=performance;n.unstable_now=function(){return o.now()}}else{var i=Date,s=i.now();n.unstable_now=function(){return i.now()-s}}var c=[],f=[],d=1,p=null,m=3,h=!1,g=!1,v=!1,y="function"==typeof setTimeout?setTimeout:null,b="function"==typeof clearTimeout?clearTimeout:null,k="undefined"!=typeof setImmediate?setImmediate:null;function w(e){for(var n=r(f);null!==n;){if(null===n.callback)l(f);else if(n.startTime<=e)l(f),n.sortIndex=n.expirationTime,t(c,n);else break;n=r(f)}}function S(e){if(v=!1,w(e),!g){if(null!==r(c))g=!0,M(x);else{var n=r(f);null!==n&&F(S,n.startTime-e)}}}function x(e,t){g=!1,v&&(v=!1,b(C),C=-1),h=!0;var a=m;try{for(w(t),p=r(c);null!==p&&(!(p.expirationTime>t)||e&&!z());){var u=p.callback;if("function"==typeof u){p.callback=null,m=p.priorityLevel;var o=u(p.expirationTime<=t);t=n.unstable_now(),"function"==typeof o?p.callback=o:p===r(c)&&l(c),w(t)}else l(c);p=r(c)}if(null!==p)var i=!0;else{var s=r(f);null!==s&&F(S,s.startTime-t),i=!1}return i}finally{p=null,m=a,h=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var E=!1,_=null,C=-1,P=5,N=-1;function z(){return!(n.unstable_now()-Ne||125u?(e.sortIndex=a,t(f,e),null===r(c)&&e===r(f)&&(v?(b(C),C=-1):v=!0,F(S,a-u))):(e.sortIndex=o,t(c,e),g||h||(g=!0,M(x))),e},n.unstable_shouldYield=z,n.unstable_wrapCallback=function(e){var n=m;return function(){var t=m;m=n;try{return e.apply(this,arguments)}finally{m=t}}}},3840:function(e,n,t){e.exports=t(53)}}]);
\ No newline at end of file
diff --git a/_next/static/chunks/main-a6a08e1f60796d6f.js b/_next/static/chunks/main-a6a08e1f60796d6f.js
new file mode 100644
index 0000000..6fa2a67
--- /dev/null
+++ b/_next/static/chunks/main-a6a08e1f60796d6f.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[179],{4878:function(e,t){"use strict";function r(){return""}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getDeploymentIdQueryOrEmptyString",{enumerable:!0,get:function(){return r}})},37:function(){"trimStart"in String.prototype||(String.prototype.trimStart=String.prototype.trimLeft),"trimEnd"in String.prototype||(String.prototype.trimEnd=String.prototype.trimRight),"description"in Symbol.prototype||Object.defineProperty(Symbol.prototype,"description",{configurable:!0,get:function(){var e=/\((.*)\)/.exec(this.toString());return e?e[1]:void 0}}),Array.prototype.flat||(Array.prototype.flat=function(e,t){return t=this.concat.apply([],this),e>1&&t.some(Array.isArray)?t.flat(e-1):t},Array.prototype.flatMap=function(e,t){return this.map(e,t).flat()}),Promise.prototype.finally||(Promise.prototype.finally=function(e){if("function"!=typeof e)return this.then(e,e);var t=this.constructor||Promise;return this.then(function(r){return t.resolve(e()).then(function(){return r})},function(r){return t.resolve(e()).then(function(){throw r})})}),Object.fromEntries||(Object.fromEntries=function(e){return Array.from(e).reduce(function(e,t){return e[t[0]]=t[1],e},{})}),Array.prototype.at||(Array.prototype.at=function(e){var t=Math.trunc(e)||0;if(t<0&&(t+=this.length),!(t<0||t>=this.length))return this[t]}),Object.hasOwn||(Object.hasOwn=function(e,t){if(null==e)throw TypeError("Cannot convert undefined or null to object");return Object.prototype.hasOwnProperty.call(Object(e),t)})},953:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"addBasePath",{enumerable:!0,get:function(){return a}});let n=r(475),o=r(8364);function a(e,t){return(0,o.normalizePathTrailingSlash)((0,n.addPathPrefix)(e,""))}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},1443:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"addLocale",{enumerable:!0,get:function(){return n}}),r(8364);let n=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n25){window.location.reload();return}clearTimeout(o),o=setTimeout(t,i>5?5e3:1e3)}r&&r.close();let{hostname:u,port:l}=location,s=function(e){let t=location.protocol;try{t=new URL(e).protocol}catch(e){}return"http:"===t?"ws":"wss"}(e.assetPrefix||""),c=e.assetPrefix.replace(/^\/+/,""),f=s+"://"+u+":"+l+(c?"/"+c:"");c.startsWith("http")&&(f=s+"://"+c.split("://",2)[1]),(r=new window.WebSocket(""+f+e.path)).onopen=function(){i=0,window.console.log("[HMR] connected")},r.onerror=a,r.onclose=a,r.onmessage=function(e){let t=JSON.parse(e.data);for(let e of n)e(t)}}()}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},3656:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"detectDomainLocale",{enumerable:!0,get:function(){return r}});let r=function(){for(var e=arguments.length,t=Array(e),r=0;r{let t={};e.forEach(e=>{if("link"===e.type&&e.props["data-optimized-fonts"]){if(document.querySelector('style[data-href="'+e.props["data-href"]+'"]'))return;e.props.href=e.props["data-href"],e.props["data-href"]=void 0}let r=t[e.type]||[];r.push(e),t[e.type]=r});let n=t.title?t.title[0]:null,o="";if(n){let{children:e}=n.props;o="string"==typeof e?e:Array.isArray(e)?e.join(""):""}o!==document.title&&(document.title=o),["meta","base","link","style","script"].forEach(e=>{r(e,t[e]||[])})}}}r=(e,t)=>{let r=document.getElementsByTagName("head")[0],n=r.querySelector("meta[name=next-head-count]"),i=Number(n.content),u=[];for(let t=0,r=n.previousElementSibling;t{for(let t=0,r=u.length;t{var t;return null==(t=e.parentNode)?void 0:t.removeChild(e)}),s.forEach(e=>r.insertBefore(e,n)),n.content=(i-u.length+s.length).toString()},("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},7796:function(e,t,r){"use strict";let n,o,a,i,u,l,s,c,f,d,p,h;Object.defineProperty(t,"__esModule",{value:!0});let m=r(1757);Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{emitter:function(){return z},hydrate:function(){return ef},initialize:function(){return K},router:function(){return n},version:function(){return G}});let _=r(8754),g=r(5893);r(37);let y=_._(r(7294)),b=_._(r(745)),P=r(9253),v=_._(r(4818)),E=r(9953),S=r(9683),O=r(8164),j=r(8260),w=r(1224),R=r(7201),T=r(290),M=_._(r(1546)),x=_._(r(2717)),I=_._(r(1931)),C=r(8936),A=r(9090),L=r(676),N=r(4938),D=r(8300),k=r(9142),F=r(5320),U=r(679),B=r(1083),H=_._(r(4572)),W=_._(r(3790)),q=_._(r(8177)),G="14.2.6",z=(0,v.default)(),V=e=>[].slice.call(e),X=!1;class Y extends y.default.Component{componentDidCatch(e,t){this.props.fn(e,t)}componentDidMount(){this.scrollToHash(),n.isSsr&&(o.isFallback||o.nextExport&&((0,O.isDynamicRoute)(n.pathname)||location.search||X)||o.props&&o.props.__N_SSG&&(location.search||X))&&n.replace(n.pathname+"?"+String((0,j.assign)((0,j.urlQueryToSearchParams)(n.query),new URLSearchParams(location.search))),a,{_h:1,shallow:!o.isFallback&&!X}).catch(e=>{if(!e.cancelled)throw e})}componentDidUpdate(){this.scrollToHash()}scrollToHash(){let{hash:e}=location;if(!(e=e&&e.substring(1)))return;let t=document.getElementById(e);t&&setTimeout(()=>t.scrollIntoView(),0)}render(){return this.props.children}}async function K(e){void 0===e&&(e={}),W.default.onSpanEnd(q.default),o=JSON.parse(document.getElementById("__NEXT_DATA__").textContent),window.__NEXT_DATA__=o,h=o.defaultLocale;let t=o.assetPrefix||"";if(self.__next_set_public_path__(""+t+"/_next/"),(0,w.setConfig)({serverRuntimeConfig:{},publicRuntimeConfig:o.runtimeConfig||{}}),a=(0,R.getURL)(),(0,k.hasBasePath)(a)&&(a=(0,D.removeBasePath)(a)),o.scriptLoader){let{initScriptLoader:e}=r(2892);e(o.scriptLoader)}i=new x.default(o.buildId,t);let s=e=>{let[t,r]=e;return i.routeLoader.onEntrypoint(t,r)};return window.__NEXT_P&&window.__NEXT_P.map(e=>setTimeout(()=>s(e),0)),window.__NEXT_P=[],window.__NEXT_P.push=s,(l=(0,M.default)()).getIsSsr=()=>n.isSsr,u=document.getElementById("__next"),{assetPrefix:t}}function $(e,t){return(0,g.jsx)(e,{...t})}function J(e){var t;let{children:r}=e,o=y.default.useMemo(()=>(0,U.adaptForAppRouterInstance)(n),[]);return(0,g.jsx)(Y,{fn:e=>Z({App:f,err:e}).catch(e=>console.error("Error rendering page: ",e)),children:(0,g.jsx)(F.AppRouterContext.Provider,{value:o,children:(0,g.jsx)(B.SearchParamsContext.Provider,{value:(0,U.adaptForSearchParams)(n),children:(0,g.jsx)(U.PathnameContextProviderAdapter,{router:n,isAutoExport:null!=(t=self.__NEXT_DATA__.autoExport)&&t,children:(0,g.jsx)(B.PathParamsContext.Provider,{value:(0,U.adaptForPathParams)(n),children:(0,g.jsx)(E.RouterContext.Provider,{value:(0,A.makePublicRouterInstance)(n),children:(0,g.jsx)(P.HeadManagerContext.Provider,{value:l,children:(0,g.jsx)(N.ImageConfigContext.Provider,{value:{deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image",loader:"default",dangerouslyAllowSVG:!1,unoptimized:!1},children:r})})})})})})})})}let Q=e=>t=>{let r={...t,Component:p,err:o.err,router:n};return(0,g.jsx)(J,{children:$(e,r)})};function Z(e){let{App:t,err:u}=e;return console.error(u),console.error("A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred"),i.loadPage("/_error").then(n=>{let{page:o,styleSheets:a}=n;return(null==s?void 0:s.Component)===o?Promise.resolve().then(()=>m._(r(6971))).then(n=>Promise.resolve().then(()=>m._(r(6958))).then(r=>(t=r.default,e.App=t,n))).then(e=>({ErrorComponent:e.default,styleSheets:[]})):{ErrorComponent:o,styleSheets:a}}).then(r=>{var i;let{ErrorComponent:l,styleSheets:s}=r,c=Q(t),f={Component:l,AppTree:c,router:n,ctx:{err:u,pathname:o.page,query:o.query,asPath:a,AppTree:c}};return Promise.resolve((null==(i=e.props)?void 0:i.err)?e.props:(0,R.loadGetInitialProps)(t,f)).then(t=>es({...e,err:u,Component:l,styleSheets:s,props:t}))})}function ee(e){let{callback:t}=e;return y.default.useLayoutEffect(()=>t(),[t]),null}let et={navigationStart:"navigationStart",beforeRender:"beforeRender",afterRender:"afterRender",afterHydrate:"afterHydrate",routeChange:"routeChange"},er={hydration:"Next.js-hydration",beforeHydration:"Next.js-before-hydration",routeChangeToRender:"Next.js-route-change-to-render",render:"Next.js-render"},en=null,eo=!0;function ea(){[et.beforeRender,et.afterHydrate,et.afterRender,et.routeChange].forEach(e=>performance.clearMarks(e))}function ei(){R.ST&&(performance.mark(et.afterHydrate),performance.getEntriesByName(et.beforeRender,"mark").length&&(performance.measure(er.beforeHydration,et.navigationStart,et.beforeRender),performance.measure(er.hydration,et.beforeRender,et.afterHydrate)),d&&performance.getEntriesByName(er.hydration).forEach(d),ea())}function eu(){if(!R.ST)return;performance.mark(et.afterRender);let e=performance.getEntriesByName(et.routeChange,"mark");e.length&&(performance.getEntriesByName(et.beforeRender,"mark").length&&(performance.measure(er.routeChangeToRender,e[0].name,et.beforeRender),performance.measure(er.render,et.beforeRender,et.afterRender),d&&(performance.getEntriesByName(er.render).forEach(d),performance.getEntriesByName(er.routeChangeToRender).forEach(d))),ea(),[er.routeChangeToRender,er.render].forEach(e=>performance.clearMeasures(e)))}function el(e){let{callbacks:t,children:r}=e;return y.default.useLayoutEffect(()=>t.forEach(e=>e()),[t]),y.default.useEffect(()=>{(0,I.default)(d)},[]),r}function es(e){let t,{App:r,Component:o,props:a,err:i}=e,l="initial"in e?void 0:e.styleSheets;o=o||s.Component;let f={...a=a||s.props,Component:o,err:i,router:n};s=f;let d=!1,p=new Promise((e,r)=>{c&&c(),t=()=>{c=null,e()},c=()=>{d=!0,c=null;let e=Error("Cancel rendering route");e.cancelled=!0,r(e)}});function h(){t()}!function(){if(!l)return;let e=new Set(V(document.querySelectorAll("style[data-n-href]")).map(e=>e.getAttribute("data-n-href"))),t=document.querySelector("noscript[data-n-css]"),r=null==t?void 0:t.getAttribute("data-n-css");l.forEach(t=>{let{href:n,text:o}=t;if(!e.has(n)){let e=document.createElement("style");e.setAttribute("data-n-href",n),e.setAttribute("media","x"),r&&e.setAttribute("nonce",r),document.head.appendChild(e),e.appendChild(document.createTextNode(o))}})}();let m=(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(ee,{callback:function(){if(l&&!d){let e=new Set(l.map(e=>e.href)),t=V(document.querySelectorAll("style[data-n-href]")),r=t.map(e=>e.getAttribute("data-n-href"));for(let n=0;n{let{href:t}=e,r=document.querySelector('style[data-n-href="'+t+'"]');r&&(n.parentNode.insertBefore(r,n.nextSibling),n=r)}),V(document.querySelectorAll("link[data-n-p]")).forEach(e=>{e.parentNode.removeChild(e)})}if(e.scroll){let{x:t,y:r}=e.scroll;(0,S.handleSmoothScroll)(()=>{window.scrollTo(t,r)})}}}),(0,g.jsxs)(J,{children:[$(r,f),(0,g.jsx)(T.Portal,{type:"next-route-announcer",children:(0,g.jsx)(C.RouteAnnouncer,{})})]})]});return!function(e,t){R.ST&&performance.mark(et.beforeRender);let r=t(eo?ei:eu);en?(0,y.default.startTransition)(()=>{en.render(r)}):(en=b.default.hydrateRoot(e,r,{onRecoverableError:H.default}),eo=!1)}(u,e=>(0,g.jsx)(el,{callbacks:[e,h],children:m})),p}async function ec(e){if(e.err&&(void 0===e.Component||!e.isHydratePass)){await Z(e);return}try{await es(e)}catch(r){let t=(0,L.getProperError)(r);if(t.cancelled)throw t;await Z({...e,err:t})}}async function ef(e){let t=o.err;try{let e=await i.routeLoader.whenEntrypoint("/_app");if("error"in e)throw e.error;let{component:t,exports:r}=e;f=t,r&&r.reportWebVitals&&(d=e=>{let t,{id:n,name:o,startTime:a,value:i,duration:u,entryType:l,entries:s,attribution:c}=e,f=Date.now()+"-"+(Math.floor(Math.random()*(9e12-1))+1e12);s&&s.length&&(t=s[0].startTime);let d={id:n||f,name:o,startTime:a||t,value:null==i?u:i,label:"mark"===l||"measure"===l?"custom":"web-vital"};c&&(d.attribution=c),r.reportWebVitals(d)});let n=await i.routeLoader.whenEntrypoint(o.page);if("error"in n)throw n.error;p=n.component}catch(e){t=(0,L.getProperError)(e)}window.__NEXT_PRELOADREADY&&await window.__NEXT_PRELOADREADY(o.dynamicIds),n=(0,A.createRouter)(o.page,o.query,a,{initialProps:o.props,pageLoader:i,App:f,Component:p,wrapApp:Q,err:t,isFallback:!!o.isFallback,subscription:(e,t,r)=>ec(Object.assign({},e,{App:t,scroll:r})),locale:o.locale,locales:o.locales,defaultLocale:h,domainLocales:o.domainLocales,isPreview:o.isPreview}),X=await n._initialMatchesMiddlewarePromise;let r={App:f,initial:!0,Component:p,props:o.props,err:t,isHydratePass:!0};(null==e?void 0:e.beforeRender)&&await e.beforeRender(),ec(r)}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},4768:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),r(8626);let n=r(7796);window.next={version:n.version,get router(){return n.router},emitter:n.emitter},(0,n.initialize)({}).then(()=>(0,n.hydrate)()).catch(console.error),("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8364:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"normalizePathTrailingSlash",{enumerable:!0,get:function(){return a}});let n=r(9362),o=r(2107),a=e=>{if(!e.startsWith("/"))return e;let{pathname:t,query:r,hash:a}=(0,o.parsePath)(e);return""+(0,n.removeTrailingSlash)(t)+r+a};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},4572:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return o}});let n=r(3467);function o(e){let t="function"==typeof reportError?reportError:e=>{window.console.error(e)};(0,n.isBailoutToCSRError)(e)||t(e)}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},2717:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return d}});let n=r(8754),o=r(953),a=r(4321),i=n._(r(8211)),u=r(1443),l=r(8164),s=r(505),c=r(9362),f=r(7270);r(5960);class d{getPageList(){return(0,f.getClientBuildManifest)().then(e=>e.sortedPages)}getMiddleware(){return window.__MIDDLEWARE_MATCHERS=[],window.__MIDDLEWARE_MATCHERS}getDataHref(e){let{asPath:t,href:r,locale:n}=e,{pathname:f,query:d,search:p}=(0,s.parseRelativeUrl)(r),{pathname:h}=(0,s.parseRelativeUrl)(t),m=(0,c.removeTrailingSlash)(f);if("/"!==m[0])throw Error('Route name should start with a "/", got "'+m+'"');return(e=>{let t=(0,i.default)((0,c.removeTrailingSlash)((0,u.addLocale)(e,n)),".json");return(0,o.addBasePath)("/_next/data/"+this.buildId+t+p,!0)})(e.skipInterpolation?h:(0,l.isDynamicRoute)(m)?(0,a.interpolateAs)(f,h,d).result:m)}_isSsg(e){return this.promisedSsgManifest.then(t=>t.has(e))}loadPage(e){return this.routeLoader.loadRoute(e).then(e=>{if("component"in e)return{page:e.component,mod:e.exports,styleSheets:e.styles.map(e=>({href:e.href,text:e.content}))};throw e.error})}prefetch(e){return this.routeLoader.prefetch(e)}constructor(e,t){this.routeLoader=(0,f.createRouteLoader)(t),this.buildId=e,this.assetPrefix=t,this.promisedSsgManifest=new Promise(e=>{window.__SSG_MANIFEST?e(window.__SSG_MANIFEST):window.__SSG_MANIFEST_CB=()=>{e(window.__SSG_MANIFEST)}})}}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},1931:function(e,t,r){"use strict";let n;Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return u}});let o=["CLS","FCP","FID","INP","LCP","TTFB"];location.href;let a=!1;function i(e){n&&n(e)}let u=e=>{if(n=e,!a)for(let e of(a=!0,o))try{let t;t||(t=r(8018)),t["on"+e](i)}catch(t){console.warn("Failed to track "+e+" web-vital",t)}};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},290:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"Portal",{enumerable:!0,get:function(){return a}});let n=r(7294),o=r(3935),a=e=>{let{children:t,type:r}=e,[a,i]=(0,n.useState)(null);return(0,n.useEffect)(()=>{let e=document.createElement(r);return document.body.appendChild(e),i(e),()=>{document.body.removeChild(e)}},[r]),a?(0,o.createPortal)(t,a):null};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8300:function(e,t,r){"use strict";function n(e){return e}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"removeBasePath",{enumerable:!0,get:function(){return n}}),r(9142),("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},4569:function(e,t,r){"use strict";function n(e,t){return e}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"removeLocale",{enumerable:!0,get:function(){return n}}),r(2107),("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},3815:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{cancelIdleCallback:function(){return n},requestIdleCallback:function(){return r}});let r="undefined"!=typeof self&&self.requestIdleCallback&&self.requestIdleCallback.bind(window)||function(e){let t=Date.now();return self.setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-t))}})},1)},n="undefined"!=typeof self&&self.cancelIdleCallback&&self.cancelIdleCallback.bind(window)||function(e){return clearTimeout(e)};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},1401:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"resolveHref",{enumerable:!0,get:function(){return f}});let n=r(8260),o=r(7420),a=r(3061),i=r(7201),u=r(8364),l=r(2045),s=r(5722),c=r(4321);function f(e,t,r){let f;let d="string"==typeof t?t:(0,o.formatWithValidation)(t),p=d.match(/^[a-zA-Z]{1,}:\/\//),h=p?d.slice(p[0].length):d;if((h.split("?",1)[0]||"").match(/(\/\/|\\)/)){console.error("Invalid href '"+d+"' passed to next/router in page: '"+e.pathname+"'. Repeated forward-slashes (//) or backslashes \\ are not valid in the href.");let t=(0,i.normalizeRepeatedSlashes)(h);d=(p?p[0]:"")+t}if(!(0,l.isLocalURL)(d))return r?[d]:d;try{f=new URL(d.startsWith("#")?e.asPath:e.pathname,"http://n")}catch(e){f=new URL("/","http://n")}try{let e=new URL(d,f);e.pathname=(0,u.normalizePathTrailingSlash)(e.pathname);let t="";if((0,s.isDynamicRoute)(e.pathname)&&e.searchParams&&r){let r=(0,n.searchParamsToUrlQuery)(e.searchParams),{result:i,params:u}=(0,c.interpolateAs)(e.pathname,e.pathname,r);i&&(t=(0,o.formatWithValidation)({pathname:i,hash:e.hash,query:(0,a.omit)(r,u)}))}let i=e.origin===f.origin?e.href.slice(e.origin.length):e.href;return r?[i,t||i]:i}catch(e){return r?[d]:d}}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8936:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{RouteAnnouncer:function(){return l},default:function(){return s}});let n=r(8754),o=r(5893),a=n._(r(7294)),i=r(9090),u={border:0,clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",top:0,width:"1px",whiteSpace:"nowrap",wordWrap:"normal"},l=()=>{let{asPath:e}=(0,i.useRouter)(),[t,r]=a.default.useState(""),n=a.default.useRef(e);return a.default.useEffect(()=>{if(n.current!==e){if(n.current=e,document.title)r(document.title);else{var t;let n=document.querySelector("h1");r((null!=(t=null==n?void 0:n.innerText)?t:null==n?void 0:n.textContent)||e)}}},[e]),(0,o.jsx)("p",{"aria-live":"assertive",id:"__next-route-announcer__",role:"alert",style:u,children:t})},s=l;("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},7270:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{createRouteLoader:function(){return m},getClientBuildManifest:function(){return p},isAssetError:function(){return s},markAssetError:function(){return l}}),r(8754),r(8211);let n=r(1220),o=r(3815),a=r(4878);function i(e,t,r){let n,o=t.get(e);if(o)return"future"in o?o.future:Promise.resolve(o);let a=new Promise(e=>{n=e});return t.set(e,o={resolve:n,future:a}),r?r().then(e=>(n(e),e)).catch(r=>{throw t.delete(e),r}):a}let u=Symbol("ASSET_LOAD_ERROR");function l(e){return Object.defineProperty(e,u,{})}function s(e){return e&&u in e}let c=function(e){try{return e=document.createElement("link"),!!window.MSInputMethodContext&&!!document.documentMode||e.relList.supports("prefetch")}catch(e){return!1}}(),f=()=>(0,a.getDeploymentIdQueryOrEmptyString)();function d(e,t,r){return new Promise((n,a)=>{let i=!1;e.then(e=>{i=!0,n(e)}).catch(a),(0,o.requestIdleCallback)(()=>setTimeout(()=>{i||a(r)},t))})}function p(){return self.__BUILD_MANIFEST?Promise.resolve(self.__BUILD_MANIFEST):d(new Promise(e=>{let t=self.__BUILD_MANIFEST_CB;self.__BUILD_MANIFEST_CB=()=>{e(self.__BUILD_MANIFEST),t&&t()}}),3800,l(Error("Failed to load client build manifest")))}function h(e,t){return p().then(r=>{if(!(t in r))throw l(Error("Failed to lookup route: "+t));let o=r[t].map(t=>e+"/_next/"+encodeURI(t));return{scripts:o.filter(e=>e.endsWith(".js")).map(e=>(0,n.__unsafeCreateTrustedScriptURL)(e)+f()),css:o.filter(e=>e.endsWith(".css")).map(e=>e+f())}})}function m(e){let t=new Map,r=new Map,n=new Map,a=new Map;function u(e){{var t;let n=r.get(e.toString());return n||(document.querySelector('script[src^="'+e+'"]')?Promise.resolve():(r.set(e.toString(),n=new Promise((r,n)=>{(t=document.createElement("script")).onload=r,t.onerror=()=>n(l(Error("Failed to load script: "+e))),t.crossOrigin=void 0,t.src=e,document.body.appendChild(t)})),n))}}function s(e){let t=n.get(e);return t||n.set(e,t=fetch(e,{credentials:"same-origin"}).then(t=>{if(!t.ok)throw Error("Failed to load stylesheet: "+e);return t.text().then(t=>({href:e,content:t}))}).catch(e=>{throw l(e)})),t}return{whenEntrypoint:e=>i(e,t),onEntrypoint(e,r){(r?Promise.resolve().then(()=>r()).then(e=>({component:e&&e.default||e,exports:e}),e=>({error:e})):Promise.resolve(void 0)).then(r=>{let n=t.get(e);n&&"resolve"in n?r&&(t.set(e,r),n.resolve(r)):(r?t.set(e,r):t.delete(e),a.delete(e))})},loadRoute(r,n){return i(r,a,()=>{let o;return d(h(e,r).then(e=>{let{scripts:n,css:o}=e;return Promise.all([t.has(r)?[]:Promise.all(n.map(u)),Promise.all(o.map(s))])}).then(e=>this.whenEntrypoint(r).then(t=>({entrypoint:t,styles:e[1]}))),3800,l(Error("Route did not complete loading: "+r))).then(e=>{let{entrypoint:t,styles:r}=e,n=Object.assign({styles:r},t);return"error"in t?t:n}).catch(e=>{if(n)throw e;return{error:e}}).finally(()=>null==o?void 0:o())})},prefetch(t){let r;return(r=navigator.connection)&&(r.saveData||/2g/.test(r.effectiveType))?Promise.resolve():h(e,t).then(e=>Promise.all(c?e.scripts.map(e=>{var t,r,n;return t=e.toString(),r="script",new Promise((e,o)=>{if(document.querySelector('\n link[rel="prefetch"][href^="'+t+'"],\n link[rel="preload"][href^="'+t+'"],\n script[src^="'+t+'"]'))return e();n=document.createElement("link"),r&&(n.as=r),n.rel="prefetch",n.crossOrigin=void 0,n.onload=e,n.onerror=()=>o(l(Error("Failed to prefetch: "+t))),n.href=t,document.head.appendChild(n)})}):[])).then(()=>{(0,o.requestIdleCallback)(()=>this.loadRoute(t,!0).catch(()=>{}))}).catch(()=>{})}}}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},9090:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{Router:function(){return a.default},createRouter:function(){return m},default:function(){return p},makePublicRouterInstance:function(){return _},useRouter:function(){return h},withRouter:function(){return l.default}});let n=r(8754),o=n._(r(7294)),a=n._(r(9554)),i=r(9953),u=n._(r(676)),l=n._(r(9780)),s={router:null,readyCallbacks:[],ready(e){if(this.router)return e();this.readyCallbacks.push(e)}},c=["pathname","route","query","asPath","components","isFallback","basePath","locale","locales","defaultLocale","isReady","isPreview","isLocaleDomain","domainLocales"],f=["push","replace","reload","back","prefetch","beforePopState"];function d(){if(!s.router)throw Error('No router instance found.\nYou should only use "next/router" on the client side of your app.\n');return s.router}Object.defineProperty(s,"events",{get:()=>a.default.events}),c.forEach(e=>{Object.defineProperty(s,e,{get:()=>d()[e]})}),f.forEach(e=>{s[e]=function(){for(var t=arguments.length,r=Array(t),n=0;n{s.ready(()=>{a.default.events.on(e,function(){for(var t=arguments.length,r=Array(t),n=0;ne()),s.readyCallbacks=[],s.router}function _(e){let t={};for(let r of c){if("object"==typeof e[r]){t[r]=Object.assign(Array.isArray(e[r])?[]:{},e[r]);continue}t[r]=e[r]}return t.events=a.default.events,f.forEach(r=>{t[r]=function(){for(var t=arguments.length,n=Array(t),o=0;o{if(i.default.preinit){e.forEach(e=>{i.default.preinit(e,{as:"style"})});return}{let t=document.head;e.forEach(e=>{let r=document.createElement("link");r.type="text/css",r.rel="stylesheet",r.href=e,t.appendChild(r)})}},m=e=>{let{src:t,id:r,onLoad:n=()=>{},onReady:o=null,dangerouslySetInnerHTML:a,children:i="",strategy:u="afterInteractive",onError:l,stylesheets:c}=e,m=r||t;if(m&&d.has(m))return;if(f.has(t)){d.add(m),f.get(t).then(n,l);return}let _=()=>{o&&o(),d.add(m)},g=document.createElement("script"),y=new Promise((e,t)=>{g.addEventListener("load",function(t){e(),n&&n.call(this,t),_()}),g.addEventListener("error",function(e){t(e)})}).catch(function(e){l&&l(e)});for(let[r,n]of(a?(g.innerHTML=a.__html||"",_()):i?(g.textContent="string"==typeof i?i:Array.isArray(i)?i.join(""):"",_()):t&&(g.src=t,f.set(t,y)),Object.entries(e))){if(void 0===n||p.includes(r))continue;let e=s.DOMAttributeNames[r]||r.toLowerCase();g.setAttribute(e,n)}"worker"===u&&g.setAttribute("type","text/partytown"),g.setAttribute("data-nscript",u),c&&h(c),document.body.appendChild(g)};function _(e){let{strategy:t="afterInteractive"}=e;"lazyOnload"===t?window.addEventListener("load",()=>{(0,c.requestIdleCallback)(()=>m(e))}):m(e)}function g(e){e.forEach(_),[...document.querySelectorAll('[data-nscript="beforeInteractive"]'),...document.querySelectorAll('[data-nscript="beforePageRender"]')].forEach(e=>{let t=e.id||e.getAttribute("src");d.add(t)})}function y(e){let{id:t,src:r="",onLoad:n=()=>{},onReady:o=null,strategy:s="afterInteractive",onError:f,stylesheets:p,...h}=e,{updateScripts:_,scripts:g,getIsSsr:y,appDir:b,nonce:P}=(0,u.useContext)(l.HeadManagerContext),v=(0,u.useRef)(!1);(0,u.useEffect)(()=>{let e=t||r;v.current||(o&&e&&d.has(e)&&o(),v.current=!0)},[o,t,r]);let E=(0,u.useRef)(!1);if((0,u.useEffect)(()=>{!E.current&&("afterInteractive"===s?m(e):"lazyOnload"===s&&("complete"===document.readyState?(0,c.requestIdleCallback)(()=>m(e)):window.addEventListener("load",()=>{(0,c.requestIdleCallback)(()=>m(e))})),E.current=!0)},[e,s]),("beforeInteractive"===s||"worker"===s)&&(_?(g[s]=(g[s]||[]).concat([{id:t,src:r,onLoad:n,onReady:o,onError:f,...h}]),_(g)):y&&y()?d.add(t||r):y&&!y()&&m(e)),b){if(p&&p.forEach(e=>{i.default.preinit(e,{as:"style"})}),"beforeInteractive"===s)return r?(i.default.preload(r,h.integrity?{as:"script",integrity:h.integrity,nonce:P}:{as:"script",nonce:P}),(0,a.jsx)("script",{nonce:P,dangerouslySetInnerHTML:{__html:"(self.__next_s=self.__next_s||[]).push("+JSON.stringify([r,{...h,id:t}])+")"}})):(h.dangerouslySetInnerHTML&&(h.children=h.dangerouslySetInnerHTML.__html,delete h.dangerouslySetInnerHTML),(0,a.jsx)("script",{nonce:P,dangerouslySetInnerHTML:{__html:"(self.__next_s=self.__next_s||[]).push("+JSON.stringify([0,{...h,id:t}])+")"}}));"afterInteractive"===s&&r&&i.default.preload(r,h.integrity?{as:"script",integrity:h.integrity,nonce:P}:{as:"script",nonce:P})}return null}Object.defineProperty(y,"__nextScript",{value:!0});let b=y;("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8177:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return o}});let n=r(7089);function o(e){if("ended"!==e.state.state)throw Error("Expected span to be ended");(0,n.sendMessage)(JSON.stringify({event:"span-end",startTime:e.startTime,endTime:e.state.endTime,spanName:e.name,attributes:e.attributes}))}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},3790:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return i}});let n=r(8754)._(r(4818));class o{end(e){if("ended"===this.state.state)throw Error("Span has already ended");this.state={state:"ended",endTime:null!=e?e:Date.now()},this.onSpanEnd(this)}constructor(e,t,r){var n,o;this.name=e,this.attributes=null!=(n=t.attributes)?n:{},this.startTime=null!=(o=t.startTime)?o:Date.now(),this.onSpanEnd=r,this.state={state:"inprogress"}}}class a{startSpan(e,t){return new o(e,t,this.handleSpanEnd)}onSpanEnd(e){return this._emitter.on("spanend",e),()=>{this._emitter.off("spanend",e)}}constructor(){this._emitter=(0,n.default)(),this.handleSpanEnd=e=>{this._emitter.emit("spanend",e)}}}let i=new a;("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},1220:function(e,t){"use strict";let r;function n(e){var t;return(null==(t=function(){if(void 0===r){var e;r=(null==(e=window.trustedTypes)?void 0:e.createPolicy("nextjs",{createHTML:e=>e,createScript:e=>e,createScriptURL:e=>e}))||null}return r}())?void 0:t.createScriptURL(e))||e}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"__unsafeCreateTrustedScriptURL",{enumerable:!0,get:function(){return n}}),("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8626:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),r(4878),self.__next_set_public_path__=e=>{r.p=e},("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},9780:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return a}}),r(8754);let n=r(5893);r(7294);let o=r(9090);function a(e){function t(t){return(0,n.jsx)(e,{router:(0,o.useRouter)(),...t})}return t.getInitialProps=e.getInitialProps,t.origGetInitialProps=e.origGetInitialProps,t}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},6958:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return l}});let n=r(8754),o=r(5893),a=n._(r(7294)),i=r(7201);async function u(e){let{Component:t,ctx:r}=e;return{pageProps:await (0,i.loadGetInitialProps)(t,r)}}class l extends a.default.Component{render(){let{Component:e,pageProps:t}=this.props;return(0,o.jsx)(e,{...t})}}l.origGetInitialProps=u,l.getInitialProps=u,("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},6971:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return c}});let n=r(8754),o=r(5893),a=n._(r(7294)),i=n._(r(7828)),u={400:"Bad Request",404:"This page could not be found",405:"Method Not Allowed",500:"Internal Server Error"};function l(e){let{res:t,err:r}=e;return{statusCode:t&&t.statusCode?t.statusCode:r?r.statusCode:404}}let s={error:{fontFamily:'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',height:"100vh",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},desc:{lineHeight:"48px"},h1:{display:"inline-block",margin:"0 20px 0 0",paddingRight:23,fontSize:24,fontWeight:500,verticalAlign:"top"},h2:{fontSize:14,fontWeight:400,lineHeight:"28px"},wrap:{display:"inline-block"}};class c extends a.default.Component{render(){let{statusCode:e,withDarkMode:t=!0}=this.props,r=this.props.title||u[e]||"An unexpected error has occurred";return(0,o.jsxs)("div",{style:s.error,children:[(0,o.jsx)(i.default,{children:(0,o.jsx)("title",{children:e?e+": "+r:"Application error: a client-side exception has occurred"})}),(0,o.jsxs)("div",{style:s.desc,children:[(0,o.jsx)("style",{dangerouslySetInnerHTML:{__html:"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}"+(t?"@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}":"")}}),e?(0,o.jsx)("h1",{className:"next-error-h1",style:s.h1,children:e}):null,(0,o.jsx)("div",{style:s.wrap,children:(0,o.jsxs)("h2",{style:s.h2,children:[this.props.title||e?r:(0,o.jsx)(o.Fragment,{children:"Application error: a client-side exception has occurred (see the browser console for more information)"}),"."]})})]})]})}}c.displayName="ErrorPage",c.getInitialProps=l,c.origGetInitialProps=l,("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8438:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"AmpStateContext",{enumerable:!0,get:function(){return n}});let n=r(8754)._(r(7294)).default.createContext({})},5495:function(e,t){"use strict";function r(e){let{ampFirst:t=!1,hybrid:r=!1,hasQuery:n=!1}=void 0===e?{}:e;return t||r&&n}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"isInAmpMode",{enumerable:!0,get:function(){return r}})},5320:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{AppRouterContext:function(){return o},GlobalLayoutRouterContext:function(){return i},LayoutRouterContext:function(){return a},MissingSlotContext:function(){return l},TemplateContext:function(){return u}});let n=r(8754)._(r(7294)),o=n.default.createContext(null),a=n.default.createContext(null),i=n.default.createContext(null),u=n.default.createContext(null),l=n.default.createContext(new Set)},7019:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"BloomFilter",{enumerable:!0,get:function(){return r}});class r{static from(e,t){void 0===t&&(t=1e-4);let n=new r(e.length,t);for(let t of e)n.add(t);return n}export(){return{numItems:this.numItems,errorRate:this.errorRate,numBits:this.numBits,numHashes:this.numHashes,bitArray:this.bitArray}}import(e){this.numItems=e.numItems,this.errorRate=e.errorRate,this.numBits=e.numBits,this.numHashes=e.numHashes,this.bitArray=e.bitArray}add(e){this.getHashValues(e).forEach(e=>{this.bitArray[e]=1})}contains(e){return this.getHashValues(e).every(e=>this.bitArray[e])}getHashValues(e){let t=[];for(let r=1;r<=this.numHashes;r++){let n=function(e){let t=0;for(let r=0;r>>13,t=Math.imul(t,1540483477);return t>>>0}(""+e+r)%this.numBits;t.push(n)}return t}constructor(e,t=1e-4){this.numItems=e,this.errorRate=t,this.numBits=Math.ceil(-(e*Math.log(t))/(Math.log(2)*Math.log(2))),this.numHashes=Math.ceil(this.numBits/e*Math.log(2)),this.bitArray=Array(this.numBits).fill(0)}}},5960:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{APP_BUILD_MANIFEST:function(){return b},APP_CLIENT_INTERNALS:function(){return $},APP_PATHS_MANIFEST:function(){return _},APP_PATH_ROUTES_MANIFEST:function(){return g},AUTOMATIC_FONT_OPTIMIZATION_MANIFEST:function(){return A},BARREL_OPTIMIZATION_PREFIX:function(){return W},BLOCKED_PAGES:function(){return k},BUILD_ID_FILE:function(){return D},BUILD_MANIFEST:function(){return y},CLIENT_PUBLIC_FILES_PATH:function(){return F},CLIENT_REFERENCE_MANIFEST:function(){return q},CLIENT_STATIC_FILES_PATH:function(){return U},CLIENT_STATIC_FILES_RUNTIME_AMP:function(){return Q},CLIENT_STATIC_FILES_RUNTIME_MAIN:function(){return Y},CLIENT_STATIC_FILES_RUNTIME_MAIN_APP:function(){return K},CLIENT_STATIC_FILES_RUNTIME_POLYFILLS:function(){return ee},CLIENT_STATIC_FILES_RUNTIME_POLYFILLS_SYMBOL:function(){return et},CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH:function(){return J},CLIENT_STATIC_FILES_RUNTIME_WEBPACK:function(){return Z},COMPILER_INDEXES:function(){return i},COMPILER_NAMES:function(){return o},CONFIG_FILES:function(){return N},DEFAULT_RUNTIME_WEBPACK:function(){return er},DEFAULT_SANS_SERIF_FONT:function(){return es},DEFAULT_SERIF_FONT:function(){return el},DEV_CLIENT_PAGES_MANIFEST:function(){return M},DEV_MIDDLEWARE_MANIFEST:function(){return I},EDGE_RUNTIME_WEBPACK:function(){return en},EDGE_UNSUPPORTED_NODE_APIS:function(){return eh},EXPORT_DETAIL:function(){return O},EXPORT_MARKER:function(){return S},FUNCTIONS_CONFIG_MANIFEST:function(){return P},GOOGLE_FONT_PROVIDER:function(){return ei},IMAGES_MANIFEST:function(){return R},INTERCEPTION_ROUTE_REWRITE_MANIFEST:function(){return X},INTERNAL_HEADERS:function(){return a},MIDDLEWARE_BUILD_MANIFEST:function(){return z},MIDDLEWARE_MANIFEST:function(){return x},MIDDLEWARE_REACT_LOADABLE_MANIFEST:function(){return V},MODERN_BROWSERSLIST_TARGET:function(){return n.default},NEXT_BUILTIN_DOCUMENT:function(){return H},NEXT_FONT_MANIFEST:function(){return E},OPTIMIZED_FONT_PROVIDERS:function(){return eu},PAGES_MANIFEST:function(){return m},PHASE_DEVELOPMENT_SERVER:function(){return d},PHASE_EXPORT:function(){return s},PHASE_INFO:function(){return h},PHASE_PRODUCTION_BUILD:function(){return c},PHASE_PRODUCTION_SERVER:function(){return f},PHASE_TEST:function(){return p},PRERENDER_MANIFEST:function(){return j},REACT_LOADABLE_MANIFEST:function(){return C},ROUTES_MANIFEST:function(){return w},RSC_MODULE_TYPES:function(){return ep},SERVER_DIRECTORY:function(){return L},SERVER_FILES_MANIFEST:function(){return T},SERVER_PROPS_ID:function(){return ea},SERVER_REFERENCE_MANIFEST:function(){return G},STATIC_PROPS_ID:function(){return eo},STATIC_STATUS_PAGES:function(){return ec},STRING_LITERAL_DROP_BUNDLE:function(){return B},SUBRESOURCE_INTEGRITY_MANIFEST:function(){return v},SYSTEM_ENTRYPOINTS:function(){return em},TRACE_OUTPUT_VERSION:function(){return ef},TURBO_TRACE_DEFAULT_MEMORY_LIMIT:function(){return ed},UNDERSCORE_NOT_FOUND_ROUTE:function(){return u},UNDERSCORE_NOT_FOUND_ROUTE_ENTRY:function(){return l}});let n=r(8754)._(r(3479)),o={client:"client",server:"server",edgeServer:"edge-server"},a=["x-invoke-error","x-invoke-output","x-invoke-path","x-invoke-query","x-invoke-status","x-middleware-invoke"],i={[o.client]:0,[o.server]:1,[o.edgeServer]:2},u="/_not-found",l=""+u+"/page",s="phase-export",c="phase-production-build",f="phase-production-server",d="phase-development-server",p="phase-test",h="phase-info",m="pages-manifest.json",_="app-paths-manifest.json",g="app-path-routes-manifest.json",y="build-manifest.json",b="app-build-manifest.json",P="functions-config-manifest.json",v="subresource-integrity-manifest",E="next-font-manifest",S="export-marker.json",O="export-detail.json",j="prerender-manifest.json",w="routes-manifest.json",R="images-manifest.json",T="required-server-files.json",M="_devPagesManifest.json",x="middleware-manifest.json",I="_devMiddlewareManifest.json",C="react-loadable-manifest.json",A="font-manifest.json",L="server",N=["next.config.js","next.config.mjs"],D="BUILD_ID",k=["/_document","/_app","/_error"],F="public",U="static",B="__NEXT_DROP_CLIENT_FILE__",H="__NEXT_BUILTIN_DOCUMENT__",W="__barrel_optimize__",q="client-reference-manifest",G="server-reference-manifest",z="middleware-build-manifest",V="middleware-react-loadable-manifest",X="interception-route-rewrite-manifest",Y="main",K=""+Y+"-app",$="app-pages-internals",J="react-refresh",Q="amp",Z="webpack",ee="polyfills",et=Symbol(ee),er="webpack-runtime",en="edge-runtime-webpack",eo="__N_SSG",ea="__N_SSP",ei="https://fonts.googleapis.com/",eu=[{url:ei,preconnect:"https://fonts.gstatic.com"},{url:"https://use.typekit.net",preconnect:"https://use.typekit.net"}],el={name:"Times New Roman",xAvgCharWidth:821,azAvgWidth:854.3953488372093,unitsPerEm:2048},es={name:"Arial",xAvgCharWidth:904,azAvgWidth:934.5116279069767,unitsPerEm:2048},ec=["/500"],ef=1,ed=6e3,ep={client:"client",server:"server"},eh=["clearImmediate","setImmediate","BroadcastChannel","ByteLengthQueuingStrategy","CompressionStream","CountQueuingStrategy","DecompressionStream","DomException","MessageChannel","MessageEvent","MessagePort","ReadableByteStreamController","ReadableStreamBYOBRequest","ReadableStreamDefaultController","TransformStreamDefaultController","WritableStreamDefaultController"],em=new Set([Y,J,Q,K]);("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},1885:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"escapeStringRegexp",{enumerable:!0,get:function(){return o}});let r=/[|\\{}()[\]^$+*?.-]/,n=/[|\\{}()[\]^$+*?.-]/g;function o(e){return r.test(e)?e.replace(n,"\\$&"):e}},9253:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"HeadManagerContext",{enumerable:!0,get:function(){return n}});let n=r(8754)._(r(7294)).default.createContext({})},7828:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{default:function(){return m},defaultHead:function(){return f}});let n=r(8754),o=r(1757),a=r(5893),i=o._(r(7294)),u=n._(r(7215)),l=r(8438),s=r(9253),c=r(5495);function f(e){void 0===e&&(e=!1);let t=[(0,a.jsx)("meta",{charSet:"utf-8"})];return e||t.push((0,a.jsx)("meta",{name:"viewport",content:"width=device-width"})),t}function d(e,t){return"string"==typeof t||"number"==typeof t?e:t.type===i.default.Fragment?e.concat(i.default.Children.toArray(t.props.children).reduce((e,t)=>"string"==typeof t||"number"==typeof t?e:e.concat(t),[])):e.concat(t)}r(1997);let p=["name","httpEquiv","charSet","itemProp"];function h(e,t){let{inAmpMode:r}=t;return e.reduce(d,[]).reverse().concat(f(r).reverse()).filter(function(){let e=new Set,t=new Set,r=new Set,n={};return o=>{let a=!0,i=!1;if(o.key&&"number"!=typeof o.key&&o.key.indexOf("$")>0){i=!0;let t=o.key.slice(o.key.indexOf("$")+1);e.has(t)?a=!1:e.add(t)}switch(o.type){case"title":case"base":t.has(o.type)?a=!1:t.add(o.type);break;case"meta":for(let e=0,t=p.length;e{let n=e.key||t;if(!r&&"link"===e.type&&e.props.href&&["https://fonts.googleapis.com/css","https://use.typekit.net/"].some(t=>e.props.href.startsWith(t))){let t={...e.props||{}};return t["data-href"]=t.href,t.href=void 0,t["data-optimized-fonts"]=!0,i.default.cloneElement(e,t)}return i.default.cloneElement(e,{key:n})})}let m=function(e){let{children:t}=e,r=(0,i.useContext)(l.AmpStateContext),n=(0,i.useContext)(s.HeadManagerContext);return(0,a.jsx)(u.default,{reduceComponentsToState:h,headManager:n,inAmpMode:(0,c.isInAmpMode)(r),children:t})};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},1083:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{PathParamsContext:function(){return i},PathnameContext:function(){return a},SearchParamsContext:function(){return o}});let n=r(7294),o=(0,n.createContext)(null),a=(0,n.createContext)(null),i=(0,n.createContext)(null)},1808:function(e,t){"use strict";function r(e,t){let r;let n=e.split("/");return(t||[]).some(t=>!!n[1]&&n[1].toLowerCase()===t.toLowerCase()&&(r=t,n.splice(1,1),e=n.join("/")||"/",!0)),{pathname:e,detectedLocale:r}}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"normalizeLocalePath",{enumerable:!0,get:function(){return r}})},4938:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"ImageConfigContext",{enumerable:!0,get:function(){return a}});let n=r(8754)._(r(7294)),o=r(7903),a=n.default.createContext(o.imageConfigDefault)},7903:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{VALID_LOADERS:function(){return r},imageConfigDefault:function(){return n}});let r=["default","imgix","cloudinary","akamai","custom"],n={deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image",loader:"default",loaderFile:"",domains:[],disableStaticImages:!1,minimumCacheTTL:60,formats:["image/webp"],dangerouslyAllowSVG:!1,contentSecurityPolicy:"script-src 'none'; frame-src 'none'; sandbox;",contentDispositionType:"inline",remotePatterns:[],unoptimized:!1}},5841:function(e,t){"use strict";function r(e){return Object.prototype.toString.call(e)}function n(e){if("[object Object]"!==r(e))return!1;let t=Object.getPrototypeOf(e);return null===t||t.hasOwnProperty("isPrototypeOf")}Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{getObjectClassLabel:function(){return r},isPlainObject:function(){return n}})},3467:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{BailoutToCSRError:function(){return n},isBailoutToCSRError:function(){return o}});let r="BAILOUT_TO_CLIENT_SIDE_RENDERING";class n extends Error{constructor(e){super("Bail out to client-side rendering: "+e),this.reason=e,this.digest=r}}function o(e){return"object"==typeof e&&null!==e&&"digest"in e&&e.digest===r}},4818:function(e,t){"use strict";function r(){let e=Object.create(null);return{on(t,r){(e[t]||(e[t]=[])).push(r)},off(t,r){e[t]&&e[t].splice(e[t].indexOf(r)>>>0,1)},emit(t){for(var r=arguments.length,n=Array(r>1?r-1:0),o=1;o{e(...n)})}}}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return r}})},3479:function(e){"use strict";e.exports=["chrome 64","edge 79","firefox 67","opera 51","safari 12"]},9521:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"denormalizePagePath",{enumerable:!0,get:function(){return a}});let n=r(5722),o=r(1026);function a(e){let t=(0,o.normalizePathSep)(e);return t.startsWith("/index/")&&!(0,n.isDynamicRoute)(t)?t.slice(6):"/index"!==t?t:"/"}},3650:function(e,t){"use strict";function r(e){return e.startsWith("/")?e:"/"+e}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"ensureLeadingSlash",{enumerable:!0,get:function(){return r}})},1026:function(e,t){"use strict";function r(e){return e.replace(/\\/g,"/")}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"normalizePathSep",{enumerable:!0,get:function(){return r}})},9953:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"RouterContext",{enumerable:!0,get:function(){return n}});let n=r(8754)._(r(7294)).default.createContext(null)},679:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{PathnameContextProviderAdapter:function(){return p},adaptForAppRouterInstance:function(){return c},adaptForPathParams:function(){return d},adaptForSearchParams:function(){return f}});let n=r(1757),o=r(5893),a=n._(r(7294)),i=r(1083),u=r(5722),l=r(7750),s=r(2437);function c(e){return{back(){e.back()},forward(){e.forward()},refresh(){e.reload()},fastRefresh(){},push(t,r){let{scroll:n}=void 0===r?{}:r;e.push(t,void 0,{scroll:n})},replace(t,r){let{scroll:n}=void 0===r?{}:r;e.replace(t,void 0,{scroll:n})},prefetch(t){e.prefetch(t)}}}function f(e){return e.isReady&&e.query?(0,l.asPathToSearchParams)(e.asPath):new URLSearchParams}function d(e){if(!e.isReady||!e.query)return null;let t={};for(let r of Object.keys((0,s.getRouteRegex)(e.pathname).groups))t[r]=e.query[r];return t}function p(e){let{children:t,router:r,...n}=e,l=(0,a.useRef)(n.isAutoExport),s=(0,a.useMemo)(()=>{let e;let t=l.current;if(t&&(l.current=!1),(0,u.isDynamicRoute)(r.pathname)&&(r.isFallback||t&&!r.isReady))return null;try{e=new URL(r.asPath,"http://f")}catch(e){return"/"}return e.pathname},[r.asPath,r.isFallback,r.isReady,r.pathname]);return(0,o.jsx)(i.PathnameContext.Provider,{value:s,children:t})}},9554:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{createKey:function(){return q},default:function(){return V},matchesMiddleware:function(){return N}});let n=r(8754),o=r(1757),a=r(9362),i=r(7270),u=r(2892),l=o._(r(676)),s=r(9521),c=r(1808),f=n._(r(4818)),d=r(7201),p=r(8164),h=r(505);r(2431);let m=r(122),_=r(2437),g=r(7420);r(3656);let y=r(2107),b=r(1443),P=r(4569),v=r(8300),E=r(953),S=r(9142),O=r(1401),j=r(9423),w=r(1858),R=r(5127),T=r(4389),M=r(2045),x=r(5004),I=r(3061),C=r(4321),A=r(9683);function L(){return Object.assign(Error("Route Cancelled"),{cancelled:!0})}async function N(e){let t=await Promise.resolve(e.router.pageLoader.getMiddleware());if(!t)return!1;let{pathname:r}=(0,y.parsePath)(e.asPath),n=(0,S.hasBasePath)(r)?(0,v.removeBasePath)(r):r,o=(0,E.addBasePath)((0,b.addLocale)(n,e.locale));return t.some(e=>new RegExp(e.regexp).test(o))}function D(e){let t=(0,d.getLocationOrigin)();return e.startsWith(t)?e.substring(t.length):e}function k(e,t,r){let[n,o]=(0,O.resolveHref)(e,t,!0),a=(0,d.getLocationOrigin)(),i=n.startsWith(a),u=o&&o.startsWith(a);n=D(n),o=o?D(o):o;let l=i?n:(0,E.addBasePath)(n),s=r?D((0,O.resolveHref)(e,r)):o||n;return{url:l,as:u?s:(0,E.addBasePath)(s)}}function F(e,t){let r=(0,a.removeTrailingSlash)((0,s.denormalizePagePath)(e));return"/404"===r||"/_error"===r?e:(t.includes(r)||t.some(t=>{if((0,p.isDynamicRoute)(t)&&(0,_.getRouteRegex)(t).re.test(r))return e=t,!0}),(0,a.removeTrailingSlash)(e))}async function U(e){if(!await N(e)||!e.fetchData)return null;let t=await e.fetchData(),r=await function(e,t,r){let n={basePath:r.router.basePath,i18n:{locales:r.router.locales},trailingSlash:!1},o=t.headers.get("x-nextjs-rewrite"),u=o||t.headers.get("x-nextjs-matched-path"),l=t.headers.get("x-matched-path");if(!l||u||l.includes("__next_data_catchall")||l.includes("/_error")||l.includes("/404")||(u=l),u){if(u.startsWith("/")){let t=(0,h.parseRelativeUrl)(u),l=(0,w.getNextPathnameInfo)(t.pathname,{nextConfig:n,parseData:!0}),s=(0,a.removeTrailingSlash)(l.pathname);return Promise.all([r.router.pageLoader.getPageList(),(0,i.getClientBuildManifest)()]).then(a=>{let[i,{__rewrites:u}]=a,f=(0,b.addLocale)(l.pathname,l.locale);if((0,p.isDynamicRoute)(f)||!o&&i.includes((0,c.normalizeLocalePath)((0,v.removeBasePath)(f),r.router.locales).pathname)){let r=(0,w.getNextPathnameInfo)((0,h.parseRelativeUrl)(e).pathname,{nextConfig:n,parseData:!0});f=(0,E.addBasePath)(r.pathname),t.pathname=f}if(!i.includes(s)){let e=F(s,i);e!==s&&(s=e)}let d=i.includes(s)?s:F((0,c.normalizeLocalePath)((0,v.removeBasePath)(t.pathname),r.router.locales).pathname,i);if((0,p.isDynamicRoute)(d)){let e=(0,m.getRouteMatcher)((0,_.getRouteRegex)(d))(f);Object.assign(t.query,e||{})}return{type:"rewrite",parsedAs:t,resolvedHref:d}})}let t=(0,y.parsePath)(e);return Promise.resolve({type:"redirect-external",destination:""+(0,R.formatNextPathnameInfo)({...(0,w.getNextPathnameInfo)(t.pathname,{nextConfig:n,parseData:!0}),defaultLocale:r.router.defaultLocale,buildId:""})+t.query+t.hash})}let s=t.headers.get("x-nextjs-redirect");if(s){if(s.startsWith("/")){let e=(0,y.parsePath)(s),t=(0,R.formatNextPathnameInfo)({...(0,w.getNextPathnameInfo)(e.pathname,{nextConfig:n,parseData:!0}),defaultLocale:r.router.defaultLocale,buildId:""});return Promise.resolve({type:"redirect-internal",newAs:""+t+e.query+e.hash,newUrl:""+t+e.query+e.hash})}return Promise.resolve({type:"redirect-external",destination:s})}return Promise.resolve({type:"next"})}(t.dataHref,t.response,e);return{dataHref:t.dataHref,json:t.json,response:t.response,text:t.text,cacheKey:t.cacheKey,effect:r}}let B=Symbol("SSG_DATA_NOT_FOUND");function H(e){try{return JSON.parse(e)}catch(e){return null}}function W(e){let{dataHref:t,inflightCache:r,isPrefetch:n,hasMiddleware:o,isServerRender:a,parseJSON:u,persistCache:l,isBackground:s,unstable_skipClientCache:c}=e,{href:f}=new URL(t,window.location.href),d=e=>{var s;return(function e(t,r,n){return fetch(t,{credentials:"same-origin",method:n.method||"GET",headers:Object.assign({},n.headers,{"x-nextjs-data":"1"})}).then(o=>!o.ok&&r>1&&o.status>=500?e(t,r-1,n):o)})(t,a?3:1,{headers:Object.assign({},n?{purpose:"prefetch"}:{},n&&o?{"x-middleware-prefetch":"1"}:{}),method:null!=(s=null==e?void 0:e.method)?s:"GET"}).then(r=>r.ok&&(null==e?void 0:e.method)==="HEAD"?{dataHref:t,response:r,text:"",json:{},cacheKey:f}:r.text().then(e=>{if(!r.ok){if(o&&[301,302,307,308].includes(r.status))return{dataHref:t,response:r,text:e,json:{},cacheKey:f};if(404===r.status){var n;if(null==(n=H(e))?void 0:n.notFound)return{dataHref:t,json:{notFound:B},response:r,text:e,cacheKey:f}}let u=Error("Failed to load static props");throw a||(0,i.markAssetError)(u),u}return{dataHref:t,json:u?H(e):null,response:r,text:e,cacheKey:f}})).then(e=>(l&&"no-cache"!==e.response.headers.get("x-middleware-cache")||delete r[f],e)).catch(e=>{throw c||delete r[f],("Failed to fetch"===e.message||"NetworkError when attempting to fetch resource."===e.message||"Load failed"===e.message)&&(0,i.markAssetError)(e),e})};return c&&l?d({}).then(e=>(r[f]=Promise.resolve(e),e)):void 0!==r[f]?r[f]:r[f]=d(s?{method:"HEAD"}:{})}function q(){return Math.random().toString(36).slice(2,10)}function G(e){let{url:t,router:r}=e;if(t===(0,E.addBasePath)((0,b.addLocale)(r.asPath,r.locale)))throw Error("Invariant: attempted to hard navigate to the same URL "+t+" "+location.href);window.location.href=t}let z=e=>{let{route:t,router:r}=e,n=!1,o=r.clc=()=>{n=!0};return()=>{if(n){let e=Error('Abort fetching component for route: "'+t+'"');throw e.cancelled=!0,e}o===r.clc&&(r.clc=null)}};class V{reload(){window.location.reload()}back(){window.history.back()}forward(){window.history.forward()}push(e,t,r){return void 0===r&&(r={}),{url:e,as:t}=k(this,e,t),this.change("pushState",e,t,r)}replace(e,t,r){return void 0===r&&(r={}),{url:e,as:t}=k(this,e,t),this.change("replaceState",e,t,r)}async _bfl(e,t,r,n){{let l=!1,s=!1;for(let c of[e,t])if(c){let t=(0,a.removeTrailingSlash)(new URL(c,"http://n").pathname),f=(0,E.addBasePath)((0,b.addLocale)(t,r||this.locale));if(t!==(0,a.removeTrailingSlash)(new URL(this.asPath,"http://n").pathname)){var o,i,u;for(let e of(l=l||!!(null==(o=this._bfl_s)?void 0:o.contains(t))||!!(null==(i=this._bfl_s)?void 0:i.contains(f)),[t,f])){let t=e.split("/");for(let e=0;!s&&e{})}}}}return!1}async change(e,t,r,n,o){var s,c,f,O,j,w,R,x,A;let D,U;if(!(0,M.isLocalURL)(t))return G({url:t,router:this}),!1;let H=1===n._h;H||n.shallow||await this._bfl(r,void 0,n.locale);let W=H||n._shouldResolveHref||(0,y.parsePath)(t).pathname===(0,y.parsePath)(r).pathname,q={...this.state},z=!0!==this.isReady;this.isReady=!0;let X=this.isSsr;if(H||(this.isSsr=!1),H&&this.clc)return!1;let Y=q.locale;d.ST&&performance.mark("routeChange");let{shallow:K=!1,scroll:$=!0}=n,J={shallow:K};this._inFlightRoute&&this.clc&&(X||V.events.emit("routeChangeError",L(),this._inFlightRoute,J),this.clc(),this.clc=null),r=(0,E.addBasePath)((0,b.addLocale)((0,S.hasBasePath)(r)?(0,v.removeBasePath)(r):r,n.locale,this.defaultLocale));let Q=(0,P.removeLocale)((0,S.hasBasePath)(r)?(0,v.removeBasePath)(r):r,q.locale);this._inFlightRoute=r;let Z=Y!==q.locale;if(!H&&this.onlyAHashChange(Q)&&!Z){q.asPath=Q,V.events.emit("hashChangeStart",r,J),this.changeState(e,t,r,{...n,scroll:!1}),$&&this.scrollToHash(Q);try{await this.set(q,this.components[q.route],null)}catch(e){throw(0,l.default)(e)&&e.cancelled&&V.events.emit("routeChangeError",e,Q,J),e}return V.events.emit("hashChangeComplete",r,J),!0}let ee=(0,h.parseRelativeUrl)(t),{pathname:et,query:er}=ee;try{[D,{__rewrites:U}]=await Promise.all([this.pageLoader.getPageList(),(0,i.getClientBuildManifest)(),this.pageLoader.getMiddleware()])}catch(e){return G({url:r,router:this}),!1}this.urlIsNew(Q)||Z||(e="replaceState");let en=r;et=et?(0,a.removeTrailingSlash)((0,v.removeBasePath)(et)):et;let eo=(0,a.removeTrailingSlash)(et),ea=r.startsWith("/")&&(0,h.parseRelativeUrl)(r).pathname;if(null==(s=this.components[et])?void 0:s.__appRouter)return G({url:r,router:this}),new Promise(()=>{});let ei=!!(ea&&eo!==ea&&(!(0,p.isDynamicRoute)(eo)||!(0,m.getRouteMatcher)((0,_.getRouteRegex)(eo))(ea))),eu=!n.shallow&&await N({asPath:r,locale:q.locale,router:this});if(H&&eu&&(W=!1),W&&"/_error"!==et&&(n._shouldResolveHref=!0,ee.pathname=F(et,D),ee.pathname===et||(et=ee.pathname,ee.pathname=(0,E.addBasePath)(et),eu||(t=(0,g.formatWithValidation)(ee)))),!(0,M.isLocalURL)(r))return G({url:r,router:this}),!1;en=(0,P.removeLocale)((0,v.removeBasePath)(en),q.locale),eo=(0,a.removeTrailingSlash)(et);let el=!1;if((0,p.isDynamicRoute)(eo)){let e=(0,h.parseRelativeUrl)(en),n=e.pathname,o=(0,_.getRouteRegex)(eo);el=(0,m.getRouteMatcher)(o)(n);let a=eo===n,i=a?(0,C.interpolateAs)(eo,n,er):{};if(el&&(!a||i.result))a?r=(0,g.formatWithValidation)(Object.assign({},e,{pathname:i.result,query:(0,I.omit)(er,i.params)})):Object.assign(er,el);else{let e=Object.keys(o.groups).filter(e=>!er[e]&&!o.groups[e].optional);if(e.length>0&&!eu)throw Error((a?"The provided `href` ("+t+") value is missing query values ("+e.join(", ")+") to be interpolated properly. ":"The provided `as` value ("+n+") is incompatible with the `href` value ("+eo+"). ")+"Read more: https://nextjs.org/docs/messages/"+(a?"href-interpolation-failed":"incompatible-href-as"))}}H||V.events.emit("routeChangeStart",r,J);let es="/404"===this.pathname||"/_error"===this.pathname;try{let a=await this.getRouteInfo({route:eo,pathname:et,query:er,as:r,resolvedAs:en,routeProps:J,locale:q.locale,isPreview:q.isPreview,hasMiddleware:eu,unstable_skipClientCache:n.unstable_skipClientCache,isQueryUpdating:H&&!this.isFallback,isMiddlewareRewrite:ei});if(H||n.shallow||await this._bfl(r,"resolvedAs"in a?a.resolvedAs:void 0,q.locale),"route"in a&&eu){eo=et=a.route||eo,J.shallow||(er=Object.assign({},a.query||{},er));let e=(0,S.hasBasePath)(ee.pathname)?(0,v.removeBasePath)(ee.pathname):ee.pathname;if(el&&et!==e&&Object.keys(el).forEach(e=>{el&&er[e]===el[e]&&delete er[e]}),(0,p.isDynamicRoute)(et)){let e=!J.shallow&&a.resolvedAs?a.resolvedAs:(0,E.addBasePath)((0,b.addLocale)(new URL(r,location.href).pathname,q.locale),!0);(0,S.hasBasePath)(e)&&(e=(0,v.removeBasePath)(e));let t=(0,_.getRouteRegex)(et),n=(0,m.getRouteMatcher)(t)(new URL(e,location.href).pathname);n&&Object.assign(er,n)}}if("type"in a){if("redirect-internal"===a.type)return this.change(e,a.newUrl,a.newAs,n);return G({url:a.destination,router:this}),new Promise(()=>{})}let i=a.Component;if(i&&i.unstable_scriptLoader&&[].concat(i.unstable_scriptLoader()).forEach(e=>{(0,u.handleClientScriptLoad)(e.props)}),(a.__N_SSG||a.__N_SSP)&&a.props){if(a.props.pageProps&&a.props.pageProps.__N_REDIRECT){n.locale=!1;let t=a.props.pageProps.__N_REDIRECT;if(t.startsWith("/")&&!1!==a.props.pageProps.__N_REDIRECT_BASE_PATH){let r=(0,h.parseRelativeUrl)(t);r.pathname=F(r.pathname,D);let{url:o,as:a}=k(this,t,t);return this.change(e,o,a,n)}return G({url:t,router:this}),new Promise(()=>{})}if(q.isPreview=!!a.props.__N_PREVIEW,a.props.notFound===B){let e;try{await this.fetchComponent("/404"),e="/404"}catch(t){e="/_error"}if(a=await this.getRouteInfo({route:e,pathname:e,query:er,as:r,resolvedAs:en,routeProps:{shallow:!1},locale:q.locale,isPreview:q.isPreview,isNotFound:!0}),"type"in a)throw Error("Unexpected middleware effect on /404")}}H&&"/_error"===this.pathname&&(null==(f=self.__NEXT_DATA__.props)?void 0:null==(c=f.pageProps)?void 0:c.statusCode)===500&&(null==(O=a.props)?void 0:O.pageProps)&&(a.props.pageProps.statusCode=500);let s=n.shallow&&q.route===(null!=(j=a.route)?j:eo),d=null!=(w=n.scroll)?w:!H&&!s,g=null!=o?o:d?{x:0,y:0}:null,y={...q,route:eo,pathname:et,query:er,asPath:Q,isFallback:!1};if(H&&es){if(a=await this.getRouteInfo({route:this.pathname,pathname:this.pathname,query:er,as:r,resolvedAs:en,routeProps:{shallow:!1},locale:q.locale,isPreview:q.isPreview,isQueryUpdating:H&&!this.isFallback}),"type"in a)throw Error("Unexpected middleware effect on "+this.pathname);"/_error"===this.pathname&&(null==(x=self.__NEXT_DATA__.props)?void 0:null==(R=x.pageProps)?void 0:R.statusCode)===500&&(null==(A=a.props)?void 0:A.pageProps)&&(a.props.pageProps.statusCode=500);try{await this.set(y,a,g)}catch(e){throw(0,l.default)(e)&&e.cancelled&&V.events.emit("routeChangeError",e,Q,J),e}return!0}if(V.events.emit("beforeHistoryChange",r,J),this.changeState(e,t,r,n),!(H&&!g&&!z&&!Z&&(0,T.compareRouterStates)(y,this.state))){try{await this.set(y,a,g)}catch(e){if(e.cancelled)a.error=a.error||e;else throw e}if(a.error)throw H||V.events.emit("routeChangeError",a.error,Q,J),a.error;H||V.events.emit("routeChangeComplete",r,J),d&&/#.+$/.test(r)&&this.scrollToHash(r)}return!0}catch(e){if((0,l.default)(e)&&e.cancelled)return!1;throw e}}changeState(e,t,r,n){void 0===n&&(n={}),("pushState"!==e||(0,d.getURL)()!==r)&&(this._shallow=n.shallow,window.history[e]({url:t,as:r,options:n,__N:!0,key:this._key="pushState"!==e?this._key:q()},"",r))}async handleRouteInfoError(e,t,r,n,o,a){if(console.error(e),e.cancelled)throw e;if((0,i.isAssetError)(e)||a)throw V.events.emit("routeChangeError",e,n,o),G({url:n,router:this}),L();try{let n;let{page:o,styleSheets:a}=await this.fetchComponent("/_error"),i={props:n,Component:o,styleSheets:a,err:e,error:e};if(!i.props)try{i.props=await this.getInitialProps(o,{err:e,pathname:t,query:r})}catch(e){console.error("Error in error page `getInitialProps`: ",e),i.props={}}return i}catch(e){return this.handleRouteInfoError((0,l.default)(e)?e:Error(e+""),t,r,n,o,!0)}}async getRouteInfo(e){let{route:t,pathname:r,query:n,as:o,resolvedAs:i,routeProps:u,locale:s,hasMiddleware:f,isPreview:d,unstable_skipClientCache:p,isQueryUpdating:h,isMiddlewareRewrite:m,isNotFound:_}=e,y=t;try{var b,P,E,S;let e=this.components[y];if(u.shallow&&e&&this.route===y)return e;let t=z({route:y,router:this});f&&(e=void 0);let l=!e||"initial"in e?void 0:e,O={dataHref:this.pageLoader.getDataHref({href:(0,g.formatWithValidation)({pathname:r,query:n}),skipInterpolation:!0,asPath:_?"/404":i,locale:s}),hasMiddleware:!0,isServerRender:this.isSsr,parseJSON:!0,inflightCache:h?this.sbc:this.sdc,persistCache:!d,isPrefetch:!1,unstable_skipClientCache:p,isBackground:h},w=h&&!m?null:await U({fetchData:()=>W(O),asPath:_?"/404":i,locale:s,router:this}).catch(e=>{if(h)return null;throw e});if(w&&("/_error"===r||"/404"===r)&&(w.effect=void 0),h&&(w?w.json=self.__NEXT_DATA__.props:w={json:self.__NEXT_DATA__.props}),t(),(null==w?void 0:null==(b=w.effect)?void 0:b.type)==="redirect-internal"||(null==w?void 0:null==(P=w.effect)?void 0:P.type)==="redirect-external")return w.effect;if((null==w?void 0:null==(E=w.effect)?void 0:E.type)==="rewrite"){let t=(0,a.removeTrailingSlash)(w.effect.resolvedHref),o=await this.pageLoader.getPageList();if((!h||o.includes(t))&&(y=t,r=w.effect.resolvedHref,n={...n,...w.effect.parsedAs.query},i=(0,v.removeBasePath)((0,c.normalizeLocalePath)(w.effect.parsedAs.pathname,this.locales).pathname),e=this.components[y],u.shallow&&e&&this.route===y&&!f))return{...e,route:y}}if((0,j.isAPIRoute)(y))return G({url:o,router:this}),new Promise(()=>{});let R=l||await this.fetchComponent(y).then(e=>({Component:e.page,styleSheets:e.styleSheets,__N_SSG:e.mod.__N_SSG,__N_SSP:e.mod.__N_SSP})),T=null==w?void 0:null==(S=w.response)?void 0:S.headers.get("x-middleware-skip"),M=R.__N_SSG||R.__N_SSP;T&&(null==w?void 0:w.dataHref)&&delete this.sdc[w.dataHref];let{props:x,cacheKey:I}=await this._getData(async()=>{if(M){if((null==w?void 0:w.json)&&!T)return{cacheKey:w.cacheKey,props:w.json};let e=(null==w?void 0:w.dataHref)?w.dataHref:this.pageLoader.getDataHref({href:(0,g.formatWithValidation)({pathname:r,query:n}),asPath:i,locale:s}),t=await W({dataHref:e,isServerRender:this.isSsr,parseJSON:!0,inflightCache:T?{}:this.sdc,persistCache:!d,isPrefetch:!1,unstable_skipClientCache:p});return{cacheKey:t.cacheKey,props:t.json||{}}}return{headers:{},props:await this.getInitialProps(R.Component,{pathname:r,query:n,asPath:o,locale:s,locales:this.locales,defaultLocale:this.defaultLocale})}});return R.__N_SSP&&O.dataHref&&I&&delete this.sdc[I],this.isPreview||!R.__N_SSG||h||W(Object.assign({},O,{isBackground:!0,persistCache:!1,inflightCache:this.sbc})).catch(()=>{}),x.pageProps=Object.assign({},x.pageProps),R.props=x,R.route=y,R.query=n,R.resolvedAs=i,this.components[y]=R,R}catch(e){return this.handleRouteInfoError((0,l.getProperError)(e),r,n,o,u)}}set(e,t,r){return this.state=e,this.sub(t,this.components["/_app"].Component,r)}beforePopState(e){this._bps=e}onlyAHashChange(e){if(!this.asPath)return!1;let[t,r]=this.asPath.split("#",2),[n,o]=e.split("#",2);return!!o&&t===n&&r===o||t===n&&r!==o}scrollToHash(e){let[,t=""]=e.split("#",2);(0,A.handleSmoothScroll)(()=>{if(""===t||"top"===t){window.scrollTo(0,0);return}let e=decodeURIComponent(t),r=document.getElementById(e);if(r){r.scrollIntoView();return}let n=document.getElementsByName(e)[0];n&&n.scrollIntoView()},{onlyHashChange:this.onlyAHashChange(e)})}urlIsNew(e){return this.asPath!==e}async prefetch(e,t,r){if(void 0===t&&(t=e),void 0===r&&(r={}),(0,x.isBot)(window.navigator.userAgent))return;let n=(0,h.parseRelativeUrl)(e),o=n.pathname,{pathname:i,query:u}=n,l=i,s=await this.pageLoader.getPageList(),c=t,f=void 0!==r.locale?r.locale||void 0:this.locale,d=await N({asPath:t,locale:f,router:this});n.pathname=F(n.pathname,s),(0,p.isDynamicRoute)(n.pathname)&&(i=n.pathname,n.pathname=i,Object.assign(u,(0,m.getRouteMatcher)((0,_.getRouteRegex)(n.pathname))((0,y.parsePath)(t).pathname)||{}),d||(e=(0,g.formatWithValidation)(n)));let b=await U({fetchData:()=>W({dataHref:this.pageLoader.getDataHref({href:(0,g.formatWithValidation)({pathname:l,query:u}),skipInterpolation:!0,asPath:c,locale:f}),hasMiddleware:!0,isServerRender:!1,parseJSON:!0,inflightCache:this.sdc,persistCache:!this.isPreview,isPrefetch:!0}),asPath:t,locale:f,router:this});if((null==b?void 0:b.effect.type)==="rewrite"&&(n.pathname=b.effect.resolvedHref,i=b.effect.resolvedHref,u={...u,...b.effect.parsedAs.query},c=b.effect.parsedAs.pathname,e=(0,g.formatWithValidation)(n)),(null==b?void 0:b.effect.type)==="redirect-external")return;let P=(0,a.removeTrailingSlash)(i);await this._bfl(t,c,r.locale,!0)&&(this.components[o]={__appRouter:!0}),await Promise.all([this.pageLoader._isSsg(P).then(t=>!!t&&W({dataHref:(null==b?void 0:b.json)?null==b?void 0:b.dataHref:this.pageLoader.getDataHref({href:e,asPath:c,locale:f}),isServerRender:!1,parseJSON:!0,inflightCache:this.sdc,persistCache:!this.isPreview,isPrefetch:!0,unstable_skipClientCache:r.unstable_skipClientCache||r.priority&&!0}).then(()=>!1).catch(()=>!1)),this.pageLoader[r.priority?"loadPage":"prefetch"](P)])}async fetchComponent(e){let t=z({route:e,router:this});try{let r=await this.pageLoader.loadPage(e);return t(),r}catch(e){throw t(),e}}_getData(e){let t=!1,r=()=>{t=!0};return this.clc=r,e().then(e=>{if(r===this.clc&&(this.clc=null),t){let e=Error("Loading initial props cancelled");throw e.cancelled=!0,e}return e})}_getFlightData(e){return W({dataHref:e,isServerRender:!0,parseJSON:!1,inflightCache:this.sdc,persistCache:!1,isPrefetch:!1}).then(e=>{let{text:t}=e;return{data:t}})}getInitialProps(e,t){let{Component:r}=this.components["/_app"],n=this._wrapApp(r);return t.AppTree=n,(0,d.loadGetInitialProps)(r,{AppTree:n,Component:e,router:this,ctx:t})}get route(){return this.state.route}get pathname(){return this.state.pathname}get query(){return this.state.query}get asPath(){return this.state.asPath}get locale(){return this.state.locale}get isFallback(){return this.state.isFallback}get isPreview(){return this.state.isPreview}constructor(e,t,n,{initialProps:o,pageLoader:i,App:u,wrapApp:l,Component:s,err:c,subscription:f,isFallback:m,locale:_,locales:y,defaultLocale:b,domainLocales:P,isPreview:v}){this.sdc={},this.sbc={},this.isFirstPopStateEvent=!0,this._key=q(),this.onPopState=e=>{let t;let{isFirstPopStateEvent:r}=this;this.isFirstPopStateEvent=!1;let n=e.state;if(!n){let{pathname:e,query:t}=this;this.changeState("replaceState",(0,g.formatWithValidation)({pathname:(0,E.addBasePath)(e),query:t}),(0,d.getURL)());return}if(n.__NA){window.location.reload();return}if(!n.__N||r&&this.locale===n.options.locale&&n.as===this.asPath)return;let{url:o,as:a,options:i,key:u}=n;this._key=u;let{pathname:l}=(0,h.parseRelativeUrl)(o);(!this.isSsr||a!==(0,E.addBasePath)(this.asPath)||l!==(0,E.addBasePath)(this.pathname))&&(!this._bps||this._bps(n))&&this.change("replaceState",o,a,Object.assign({},i,{shallow:i.shallow&&this._shallow,locale:i.locale||this.defaultLocale,_h:0}),t)};let S=(0,a.removeTrailingSlash)(e);this.components={},"/_error"!==e&&(this.components[S]={Component:s,initial:!0,props:o,err:c,__N_SSG:o&&o.__N_SSG,__N_SSP:o&&o.__N_SSP}),this.components["/_app"]={Component:u,styleSheets:[]};{let{BloomFilter:e}=r(7019),t={numItems:0,errorRate:1e-4,numBits:0,numHashes:null,bitArray:[]},n={numItems:0,errorRate:1e-4,numBits:0,numHashes:null,bitArray:[]};(null==t?void 0:t.numHashes)&&(this._bfl_s=new e(t.numItems,t.errorRate),this._bfl_s.import(t)),(null==n?void 0:n.numHashes)&&(this._bfl_d=new e(n.numItems,n.errorRate),this._bfl_d.import(n))}this.events=V.events,this.pageLoader=i;let O=(0,p.isDynamicRoute)(e)&&self.__NEXT_DATA__.autoExport;if(this.basePath="",this.sub=f,this.clc=null,this._wrapApp=l,this.isSsr=!0,this.isLocaleDomain=!1,this.isReady=!!(self.__NEXT_DATA__.gssp||self.__NEXT_DATA__.gip||self.__NEXT_DATA__.isExperimentalCompile||self.__NEXT_DATA__.appGip&&!self.__NEXT_DATA__.gsp||!O&&!self.location.search),this.state={route:S,pathname:e,query:t,asPath:O?e:n,isPreview:!!v,locale:void 0,isFallback:m},this._initialMatchesMiddlewarePromise=Promise.resolve(!1),!n.startsWith("//")){let r={locale:_},o=(0,d.getURL)();this._initialMatchesMiddlewarePromise=N({router:this,locale:_,asPath:o}).then(a=>(r._shouldResolveHref=n!==e,this.changeState("replaceState",a?o:(0,g.formatWithValidation)({pathname:(0,E.addBasePath)(e),query:t}),o,r),a))}window.addEventListener("popstate",this.onPopState)}}V.events=(0,f.default)()},2947:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"addLocale",{enumerable:!0,get:function(){return a}});let n=r(475),o=r(8106);function a(e,t,r,a){if(!t||t===r)return e;let i=e.toLowerCase();return!a&&((0,o.pathHasPrefix)(i,"/api")||(0,o.pathHasPrefix)(i,"/"+t.toLowerCase()))?e:(0,n.addPathPrefix)(e,"/"+t)}},475:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"addPathPrefix",{enumerable:!0,get:function(){return o}});let n=r(2107);function o(e,t){if(!e.startsWith("/")||!t)return e;let{pathname:r,query:o,hash:a}=(0,n.parsePath)(e);return""+t+r+o+a}},1476:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"addPathSuffix",{enumerable:!0,get:function(){return o}});let n=r(2107);function o(e,t){if(!e.startsWith("/")||!t)return e;let{pathname:r,query:o,hash:a}=(0,n.parsePath)(e);return""+r+t+o+a}},3787:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{normalizeAppPath:function(){return a},normalizeRscURL:function(){return i}});let n=r(3650),o=r(4722);function a(e){return(0,n.ensureLeadingSlash)(e.split("/").reduce((e,t,r,n)=>!t||(0,o.isGroupSegment)(t)||"@"===t[0]||("page"===t||"route"===t)&&r===n.length-1?e:e+"/"+t,""))}function i(e){return e.replace(/\.rsc($|\?)/,"$1")}},7750:function(e,t){"use strict";function r(e){return new URL(e,"http://n").searchParams}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"asPathToSearchParams",{enumerable:!0,get:function(){return r}})},4389:function(e,t){"use strict";function r(e,t){let r=Object.keys(e);if(r.length!==Object.keys(t).length)return!1;for(let n=r.length;n--;){let o=r[n];if("query"===o){let r=Object.keys(e.query);if(r.length!==Object.keys(t.query).length)return!1;for(let n=r.length;n--;){let o=r[n];if(!t.query.hasOwnProperty(o)||e.query[o]!==t.query[o])return!1}}else if(!t.hasOwnProperty(o)||e[o]!==t[o])return!1}return!0}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"compareRouterStates",{enumerable:!0,get:function(){return r}})},5127:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"formatNextPathnameInfo",{enumerable:!0,get:function(){return u}});let n=r(9362),o=r(475),a=r(1476),i=r(2947);function u(e){let t=(0,i.addLocale)(e.pathname,e.locale,e.buildId?void 0:e.defaultLocale,e.ignorePrefix);return(e.buildId||!e.trailingSlash)&&(t=(0,n.removeTrailingSlash)(t)),e.buildId&&(t=(0,a.addPathSuffix)((0,o.addPathPrefix)(t,"/_next/data/"+e.buildId),"/"===e.pathname?"index.json":".json")),t=(0,o.addPathPrefix)(t,e.basePath),!e.buildId&&e.trailingSlash?t.endsWith("/")?t:(0,a.addPathSuffix)(t,"/"):(0,n.removeTrailingSlash)(t)}},7420:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{formatUrl:function(){return a},formatWithValidation:function(){return u},urlObjectKeys:function(){return i}});let n=r(1757)._(r(8260)),o=/https?|ftp|gopher|file/;function a(e){let{auth:t,hostname:r}=e,a=e.protocol||"",i=e.pathname||"",u=e.hash||"",l=e.query||"",s=!1;t=t?encodeURIComponent(t).replace(/%3A/i,":")+"@":"",e.host?s=t+e.host:r&&(s=t+(~r.indexOf(":")?"["+r+"]":r),e.port&&(s+=":"+e.port)),l&&"object"==typeof l&&(l=String(n.urlQueryToSearchParams(l)));let c=e.search||l&&"?"+l||"";return a&&!a.endsWith(":")&&(a+=":"),e.slashes||(!a||o.test(a))&&!1!==s?(s="//"+(s||""),i&&"/"!==i[0]&&(i="/"+i)):s||(s=""),u&&"#"!==u[0]&&(u="#"+u),c&&"?"!==c[0]&&(c="?"+c),""+a+s+(i=i.replace(/[?#]/g,encodeURIComponent))+(c=c.replace("#","%23"))+u}let i=["auth","hash","host","hostname","href","path","pathname","port","protocol","query","search","slashes"];function u(e){return a(e)}},8211:function(e,t){"use strict";function r(e,t){return void 0===t&&(t=""),("/"===e?"/index":/^\/index(\/|$)/.test(e)?"/index"+e:e)+t}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return r}})},1858:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getNextPathnameInfo",{enumerable:!0,get:function(){return i}});let n=r(1808),o=r(6943),a=r(8106);function i(e,t){var r,i;let{basePath:u,i18n:l,trailingSlash:s}=null!=(r=t.nextConfig)?r:{},c={pathname:e,trailingSlash:"/"!==e?e.endsWith("/"):s};u&&(0,a.pathHasPrefix)(c.pathname,u)&&(c.pathname=(0,o.removePathPrefix)(c.pathname,u),c.basePath=u);let f=c.pathname;if(c.pathname.startsWith("/_next/data/")&&c.pathname.endsWith(".json")){let e=c.pathname.replace(/^\/_next\/data\//,"").replace(/\.json$/,"").split("/"),r=e[0];c.buildId=r,f="index"!==e[1]?"/"+e.slice(1).join("/"):"/",!0===t.parseData&&(c.pathname=f)}if(l){let e=t.i18nProvider?t.i18nProvider.analyze(c.pathname):(0,n.normalizeLocalePath)(c.pathname,l.locales);c.locale=e.detectedLocale,c.pathname=null!=(i=e.pathname)?i:c.pathname,!e.detectedLocale&&c.buildId&&(e=t.i18nProvider?t.i18nProvider.analyze(f):(0,n.normalizeLocalePath)(f,l.locales)).detectedLocale&&(c.locale=e.detectedLocale)}return c}},9683:function(e,t){"use strict";function r(e,t){if(void 0===t&&(t={}),t.onlyHashChange){e();return}let r=document.documentElement,n=r.style.scrollBehavior;r.style.scrollBehavior="auto",t.dontForceLayout||r.getClientRects(),e(),r.style.scrollBehavior=n}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"handleSmoothScroll",{enumerable:!0,get:function(){return r}})},5722:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{getSortedRoutes:function(){return n.getSortedRoutes},isDynamicRoute:function(){return o.isDynamicRoute}});let n=r(9960),o=r(8164)},4321:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"interpolateAs",{enumerable:!0,get:function(){return a}});let n=r(122),o=r(2437);function a(e,t,r){let a="",i=(0,o.getRouteRegex)(e),u=i.groups,l=(t!==e?(0,n.getRouteMatcher)(i)(t):"")||r;a=e;let s=Object.keys(u);return s.every(e=>{let t=l[e]||"",{repeat:r,optional:n}=u[e],o="["+(r?"...":"")+e+"]";return n&&(o=(t?"":"/")+"["+o+"]"),r&&!Array.isArray(t)&&(t=[t]),(n||e in l)&&(a=a.replace(o,r?t.map(e=>encodeURIComponent(e)).join("/"):encodeURIComponent(t))||"/")})||(a=""),{params:s,result:a}}},5004:function(e,t){"use strict";function r(e){return/Googlebot|Mediapartners-Google|AdsBot-Google|googleweblight|Storebot-Google|Google-PageRenderer|Bingbot|BingPreview|Slurp|DuckDuckBot|baiduspider|yandex|sogou|LinkedInBot|bitlybot|tumblr|vkShare|quora link preview|facebookexternalhit|facebookcatalog|Twitterbot|applebot|redditbot|Slackbot|Discordbot|WhatsApp|SkypeUriPreview|ia_archiver/i.test(e)}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"isBot",{enumerable:!0,get:function(){return r}})},8164:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"isDynamicRoute",{enumerable:!0,get:function(){return a}});let n=r(2407),o=/\/\[[^/]+?\](?=\/|$)/;function a(e){return(0,n.isInterceptionRouteAppPath)(e)&&(e=(0,n.extractInterceptionRouteInformation)(e).interceptedRoute),o.test(e)}},2045:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"isLocalURL",{enumerable:!0,get:function(){return a}});let n=r(7201),o=r(9142);function a(e){if(!(0,n.isAbsoluteUrl)(e))return!0;try{let t=(0,n.getLocationOrigin)(),r=new URL(e,t);return r.origin===t&&(0,o.hasBasePath)(r.pathname)}catch(e){return!1}}},3061:function(e,t){"use strict";function r(e,t){let r={};return Object.keys(e).forEach(n=>{t.includes(n)||(r[n]=e[n])}),r}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"omit",{enumerable:!0,get:function(){return r}})},2107:function(e,t){"use strict";function r(e){let t=e.indexOf("#"),r=e.indexOf("?"),n=r>-1&&(t<0||r-1?{pathname:e.substring(0,n?r:t),query:n?e.substring(r,t>-1?t:void 0):"",hash:t>-1?e.slice(t):""}:{pathname:e,query:"",hash:""}}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"parsePath",{enumerable:!0,get:function(){return r}})},505:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"parseRelativeUrl",{enumerable:!0,get:function(){return a}});let n=r(7201),o=r(8260);function a(e,t){let r=new URL((0,n.getLocationOrigin)()),a=t?new URL(t,r):e.startsWith(".")?new URL(window.location.href):r,{pathname:i,searchParams:u,search:l,hash:s,href:c,origin:f}=new URL(e,a);if(f!==r.origin)throw Error("invariant: invalid relative URL, router received "+e);return{pathname:i,query:(0,o.searchParamsToUrlQuery)(u),search:l,hash:s,href:c.slice(r.origin.length)}}},8106:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"pathHasPrefix",{enumerable:!0,get:function(){return o}});let n=r(2107);function o(e,t){if("string"!=typeof e)return!1;let{pathname:r}=(0,n.parsePath)(e);return r===t||r.startsWith(t+"/")}},8260:function(e,t){"use strict";function r(e){let t={};return e.forEach((e,r)=>{void 0===t[r]?t[r]=e:Array.isArray(t[r])?t[r].push(e):t[r]=[t[r],e]}),t}function n(e){return"string"!=typeof e&&("number"!=typeof e||isNaN(e))&&"boolean"!=typeof e?"":String(e)}function o(e){let t=new URLSearchParams;return Object.entries(e).forEach(e=>{let[r,o]=e;Array.isArray(o)?o.forEach(e=>t.append(r,n(e))):t.set(r,n(o))}),t}function a(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n{Array.from(t.keys()).forEach(t=>e.delete(t)),t.forEach((t,r)=>e.append(r,t))}),e}Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{assign:function(){return a},searchParamsToUrlQuery:function(){return r},urlQueryToSearchParams:function(){return o}})},6943:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"removePathPrefix",{enumerable:!0,get:function(){return o}});let n=r(8106);function o(e,t){if(!(0,n.pathHasPrefix)(e,t))return e;let r=e.slice(t.length);return r.startsWith("/")?r:"/"+r}},9362:function(e,t){"use strict";function r(e){return e.replace(/\/$/,"")||"/"}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"removeTrailingSlash",{enumerable:!0,get:function(){return r}})},122:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getRouteMatcher",{enumerable:!0,get:function(){return o}});let n=r(7201);function o(e){let{re:t,groups:r}=e;return e=>{let o=t.exec(e);if(!o)return!1;let a=e=>{try{return decodeURIComponent(e)}catch(e){throw new n.DecodeError("failed to decode param")}},i={};return Object.keys(r).forEach(e=>{let t=r[e],n=o[t.pos];void 0!==n&&(i[e]=~n.indexOf("/")?n.split("/").map(e=>a(e)):t.repeat?[a(n)]:a(n))}),i}}},2437:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{getNamedMiddlewareRegex:function(){return d},getNamedRouteRegex:function(){return f},getRouteRegex:function(){return l}});let n=r(2407),o=r(1885),a=r(9362);function i(e){let t=e.startsWith("[")&&e.endsWith("]");t&&(e=e.slice(1,-1));let r=e.startsWith("...");return r&&(e=e.slice(3)),{key:e,repeat:r,optional:t}}function u(e){let t=(0,a.removeTrailingSlash)(e).slice(1).split("/"),r={},u=1;return{parameterizedRoute:t.map(e=>{let t=n.INTERCEPTION_ROUTE_MARKERS.find(t=>e.startsWith(t)),a=e.match(/\[((?:\[.*\])|.+)\]/);if(t&&a){let{key:e,optional:n,repeat:l}=i(a[1]);return r[e]={pos:u++,repeat:l,optional:n},"/"+(0,o.escapeStringRegexp)(t)+"([^/]+?)"}if(!a)return"/"+(0,o.escapeStringRegexp)(e);{let{key:e,repeat:t,optional:n}=i(a[1]);return r[e]={pos:u++,repeat:t,optional:n},t?n?"(?:/(.+?))?":"/(.+?)":"/([^/]+?)"}}).join(""),groups:r}}function l(e){let{parameterizedRoute:t,groups:r}=u(e);return{re:RegExp("^"+t+"(?:/)?$"),groups:r}}function s(e){let{interceptionMarker:t,getSafeRouteKey:r,segment:n,routeKeys:a,keyPrefix:u}=e,{key:l,optional:s,repeat:c}=i(n),f=l.replace(/\W/g,"");u&&(f=""+u+f);let d=!1;(0===f.length||f.length>30)&&(d=!0),isNaN(parseInt(f.slice(0,1)))||(d=!0),d&&(f=r()),u?a[f]=""+u+l:a[f]=l;let p=t?(0,o.escapeStringRegexp)(t):"";return c?s?"(?:/"+p+"(?<"+f+">.+?))?":"/"+p+"(?<"+f+">.+?)":"/"+p+"(?<"+f+">[^/]+?)"}function c(e,t){let r;let i=(0,a.removeTrailingSlash)(e).slice(1).split("/"),u=(r=0,()=>{let e="",t=++r;for(;t>0;)e+=String.fromCharCode(97+(t-1)%26),t=Math.floor((t-1)/26);return e}),l={};return{namedParameterizedRoute:i.map(e=>{let r=n.INTERCEPTION_ROUTE_MARKERS.some(t=>e.startsWith(t)),a=e.match(/\[((?:\[.*\])|.+)\]/);if(r&&a){let[r]=e.split(a[0]);return s({getSafeRouteKey:u,interceptionMarker:r,segment:a[1],routeKeys:l,keyPrefix:t?"nxtI":void 0})}return a?s({getSafeRouteKey:u,segment:a[1],routeKeys:l,keyPrefix:t?"nxtP":void 0}):"/"+(0,o.escapeStringRegexp)(e)}).join(""),routeKeys:l}}function f(e,t){let r=c(e,t);return{...l(e),namedRegex:"^"+r.namedParameterizedRoute+"(?:/)?$",routeKeys:r.routeKeys}}function d(e,t){let{parameterizedRoute:r}=u(e),{catchAll:n=!0}=t;if("/"===r)return{namedRegex:"^/"+(n?".*":"")+"$"};let{namedParameterizedRoute:o}=c(e,!1);return{namedRegex:"^"+o+(n?"(?:(/.*)?)":"")+"$"}}},9960:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getSortedRoutes",{enumerable:!0,get:function(){return n}});class r{insert(e){this._insert(e.split("/").filter(Boolean),[],!1)}smoosh(){return this._smoosh()}_smoosh(e){void 0===e&&(e="/");let t=[...this.children.keys()].sort();null!==this.slugName&&t.splice(t.indexOf("[]"),1),null!==this.restSlugName&&t.splice(t.indexOf("[...]"),1),null!==this.optionalRestSlugName&&t.splice(t.indexOf("[[...]]"),1);let r=t.map(t=>this.children.get(t)._smoosh(""+e+t+"/")).reduce((e,t)=>[...e,...t],[]);if(null!==this.slugName&&r.push(...this.children.get("[]")._smoosh(e+"["+this.slugName+"]/")),!this.placeholder){let t="/"===e?"/":e.slice(0,-1);if(null!=this.optionalRestSlugName)throw Error('You cannot define a route with the same specificity as a optional catch-all route ("'+t+'" and "'+t+"[[..."+this.optionalRestSlugName+']]").');r.unshift(t)}return null!==this.restSlugName&&r.push(...this.children.get("[...]")._smoosh(e+"[..."+this.restSlugName+"]/")),null!==this.optionalRestSlugName&&r.push(...this.children.get("[[...]]")._smoosh(e+"[[..."+this.optionalRestSlugName+"]]/")),r}_insert(e,t,n){if(0===e.length){this.placeholder=!1;return}if(n)throw Error("Catch-all must be the last part of the URL.");let o=e[0];if(o.startsWith("[")&&o.endsWith("]")){let r=o.slice(1,-1),i=!1;if(r.startsWith("[")&&r.endsWith("]")&&(r=r.slice(1,-1),i=!0),r.startsWith("...")&&(r=r.substring(3),n=!0),r.startsWith("[")||r.endsWith("]"))throw Error("Segment names may not start or end with extra brackets ('"+r+"').");if(r.startsWith("."))throw Error("Segment names may not start with erroneous periods ('"+r+"').");function a(e,r){if(null!==e&&e!==r)throw Error("You cannot use different slug names for the same dynamic path ('"+e+"' !== '"+r+"').");t.forEach(e=>{if(e===r)throw Error('You cannot have the same slug name "'+r+'" repeat within a single dynamic path');if(e.replace(/\W/g,"")===o.replace(/\W/g,""))throw Error('You cannot have the slug names "'+e+'" and "'+r+'" differ only by non-word symbols within a single dynamic path')}),t.push(r)}if(n){if(i){if(null!=this.restSlugName)throw Error('You cannot use both an required and optional catch-all route at the same level ("[...'+this.restSlugName+']" and "'+e[0]+'" ).');a(this.optionalRestSlugName,r),this.optionalRestSlugName=r,o="[[...]]"}else{if(null!=this.optionalRestSlugName)throw Error('You cannot use both an optional and required catch-all route at the same level ("[[...'+this.optionalRestSlugName+']]" and "'+e[0]+'").');a(this.restSlugName,r),this.restSlugName=r,o="[...]"}}else{if(i)throw Error('Optional route parameters are not yet supported ("'+e[0]+'").');a(this.slugName,r),this.slugName=r,o="[]"}}this.children.has(o)||this.children.set(o,new r),this.children.get(o)._insert(e.slice(1),t,n)}constructor(){this.placeholder=!0,this.children=new Map,this.slugName=null,this.restSlugName=null,this.optionalRestSlugName=null}}function n(e){let t=new r;return e.forEach(e=>t.insert(e)),t.smoosh()}},1224:function(e,t){"use strict";let r;Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{default:function(){return n},setConfig:function(){return o}});let n=()=>r;function o(e){r=e}},4722:function(e,t){"use strict";function r(e){return"("===e[0]&&e.endsWith(")")}Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{DEFAULT_SEGMENT_KEY:function(){return o},PAGE_SEGMENT_KEY:function(){return n},isGroupSegment:function(){return r}});let n="__PAGE__",o="__DEFAULT__"},7215:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return i}});let n=r(7294),o=n.useLayoutEffect,a=n.useEffect;function i(e){let{headManager:t,reduceComponentsToState:r}=e;function i(){if(t&&t.mountedInstances){let o=n.Children.toArray(Array.from(t.mountedInstances).filter(Boolean));t.updateHead(r(o,e))}}return o(()=>{var r;return null==t||null==(r=t.mountedInstances)||r.add(e.children),()=>{var r;null==t||null==(r=t.mountedInstances)||r.delete(e.children)}}),o(()=>(t&&(t._pendingUpdate=i),()=>{t&&(t._pendingUpdate=i)})),a(()=>(t&&t._pendingUpdate&&(t._pendingUpdate(),t._pendingUpdate=null),()=>{t&&t._pendingUpdate&&(t._pendingUpdate(),t._pendingUpdate=null)})),null}},7201:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{DecodeError:function(){return h},MiddlewareNotFoundError:function(){return y},MissingStaticPage:function(){return g},NormalizeError:function(){return m},PageNotFoundError:function(){return _},SP:function(){return d},ST:function(){return p},WEB_VITALS:function(){return r},execOnce:function(){return n},getDisplayName:function(){return l},getLocationOrigin:function(){return i},getURL:function(){return u},isAbsoluteUrl:function(){return a},isResSent:function(){return s},loadGetInitialProps:function(){return f},normalizeRepeatedSlashes:function(){return c},stringifyError:function(){return b}});let r=["CLS","FCP","FID","INP","LCP","TTFB"];function n(e){let t,r=!1;return function(){for(var n=arguments.length,o=Array(n),a=0;ao.test(e);function i(){let{protocol:e,hostname:t,port:r}=window.location;return e+"//"+t+(r?":"+r:"")}function u(){let{href:e}=window.location,t=i();return e.substring(t.length)}function l(e){return"string"==typeof e?e:e.displayName||e.name||"Unknown"}function s(e){return e.finished||e.headersSent}function c(e){let t=e.split("?");return t[0].replace(/\\/g,"/").replace(/\/\/+/g,"/")+(t[1]?"?"+t.slice(1).join("?"):"")}async function f(e,t){let r=t.res||t.ctx&&t.ctx.res;if(!e.getInitialProps)return t.ctx&&t.Component?{pageProps:await f(t.Component,t.ctx)}:{};let n=await e.getInitialProps(t);if(r&&s(r))return n;if(!n)throw Error('"'+l(e)+'.getInitialProps()" should resolve to an object. But found "'+n+'" instead.');return n}let d="undefined"!=typeof performance,p=d&&["mark","measure","getEntriesByName"].every(e=>"function"==typeof performance[e]);class h extends Error{}class m extends Error{}class _ extends Error{constructor(e){super(),this.code="ENOENT",this.name="PageNotFoundError",this.message="Cannot find module for page: "+e}}class g extends Error{constructor(e,t){super(),this.message="Failed to load static file for page: "+e+" "+t}}class y extends Error{constructor(){super(),this.code="ENOENT",this.message="Cannot find the middleware module"}}function b(e){return JSON.stringify({message:e.message,stack:e.stack})}},1997:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"warnOnce",{enumerable:!0,get:function(){return r}});let r=e=>{}},8018:function(e){var t,r,n,o,a,i,u,l,s,c,f,d,p,h,m,_,g,y,b,P,v,E,S,O,j,w,R,T,M,x,I,C,A,L,N,D,k,F,U,B,H,W,q,G,z,V;(t={}).d=function(e,r){for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},void 0!==t&&(t.ab="//"),r={},t.r(r),t.d(r,{getCLS:function(){return S},getFCP:function(){return P},getFID:function(){return x},getINP:function(){return W},getLCP:function(){return G},getTTFB:function(){return V},onCLS:function(){return S},onFCP:function(){return P},onFID:function(){return x},onINP:function(){return W},onLCP:function(){return G},onTTFB:function(){return V}}),l=-1,s=function(e){addEventListener("pageshow",function(t){t.persisted&&(l=t.timeStamp,e(t))},!0)},c=function(){return window.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]},f=function(){var e=c();return e&&e.activationStart||0},d=function(e,t){var r=c(),n="navigate";return l>=0?n="back-forward-cache":r&&(n=document.prerendering||f()>0?"prerender":r.type.replace(/_/g,"-")),{name:e,value:void 0===t?-1:t,rating:"good",delta:0,entries:[],id:"v3-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:n}},p=function(e,t,r){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var n=new PerformanceObserver(function(e){t(e.getEntries())});return n.observe(Object.assign({type:e,buffered:!0},r||{})),n}}catch(e){}},h=function(e,t){var r=function r(n){"pagehide"!==n.type&&"hidden"!==document.visibilityState||(e(n),t&&(removeEventListener("visibilitychange",r,!0),removeEventListener("pagehide",r,!0)))};addEventListener("visibilitychange",r,!0),addEventListener("pagehide",r,!0)},m=function(e,t,r,n){var o,a;return function(i){var u;t.value>=0&&(i||n)&&((a=t.value-(o||0))||void 0===o)&&(o=t.value,t.delta=a,t.rating=(u=t.value)>r[1]?"poor":u>r[0]?"needs-improvement":"good",e(t))}},_=-1,g=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},y=function(){h(function(e){_=e.timeStamp},!0)},b=function(){return _<0&&(_=g(),y(),s(function(){setTimeout(function(){_=g(),y()},0)})),{get firstHiddenTime(){return _}}},P=function(e,t){t=t||{};var r,n=[1800,3e3],o=b(),a=d("FCP"),i=function(e){e.forEach(function(e){"first-contentful-paint"===e.name&&(l&&l.disconnect(),e.startTime-1&&e(t)},a=d("CLS",0),i=0,u=[],l=function(e){e.forEach(function(e){if(!e.hadRecentInput){var t=u[0],r=u[u.length-1];i&&e.startTime-r.startTime<1e3&&e.startTime-t.startTime<5e3?(i+=e.value,u.push(e)):(i=e.value,u=[e]),i>a.value&&(a.value=i,a.entries=u,n())}})},c=p("layout-shift",l);c&&(n=m(o,a,r,t.reportAllChanges),h(function(){l(c.takeRecords()),n(!0)}),s(function(){i=0,E=-1,n=m(o,a=d("CLS",0),r,t.reportAllChanges)}))},O={passive:!0,capture:!0},j=new Date,w=function(e,t){n||(n=t,o=e,a=new Date,M(removeEventListener),R())},R=function(){if(o>=0&&o1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?(t=function(){w(o,e),n()},r=function(){n()},n=function(){removeEventListener("pointerup",t,O),removeEventListener("pointercancel",r,O)},addEventListener("pointerup",t,O),addEventListener("pointercancel",r,O)):w(o,e)}},M=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach(function(t){return e(t,T,O)})},x=function(e,t){t=t||{};var r,a=[100,300],u=b(),l=d("FID"),c=function(e){e.startTimet.latency){if(r)r.entries.push(e),r.latency=Math.max(r.latency,e.duration);else{var n={id:e.interactionId,latency:e.duration,entries:[e]};B[n.id]=n,U.push(n)}U.sort(function(e,t){return t.latency-e.latency}),U.splice(10).forEach(function(e){delete B[e.id]})}},W=function(e,t){t=t||{};var r=[200,500];D();var n,o=d("INP"),a=function(e){e.forEach(function(e){e.interactionId&&H(e),"first-input"!==e.entryType||U.some(function(t){return t.entries.some(function(t){return e.duration===t.duration&&e.startTime===t.startTime})})||H(e)});var t,r=(t=Math.min(U.length-1,Math.floor(F()/50)),U[t]);r&&r.latency!==o.value&&(o.value=r.latency,o.entries=r.entries,n())},i=p("event",a,{durationThreshold:t.durationThreshold||40});n=m(e,o,r,t.reportAllChanges),i&&(i.observe({type:"first-input",buffered:!0}),h(function(){a(i.takeRecords()),o.value<0&&F()>0&&(o.value=0,o.entries=[]),n(!0)}),s(function(){U=[],k=N(),n=m(e,o=d("INP"),r,t.reportAllChanges)}))},q={},G=function(e,t){t=t||{};var r,n=[2500,4e3],o=b(),a=d("LCP"),i=function(e){var t=e[e.length-1];if(t){var n=t.startTime-f();nperformance.now())return;n.entries=[a],o(!0),s(function(){(o=m(e,n=d("TTFB",0),r,t.reportAllChanges))(!0)})}})},e.exports=r},9423:function(e,t){"use strict";function r(e){return"/api"===e||!!(null==e?void 0:e.startsWith("/api/"))}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"isAPIRoute",{enumerable:!0,get:function(){return r}})},676:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{default:function(){return o},getProperError:function(){return a}});let n=r(5841);function o(e){return"object"==typeof e&&null!==e&&"name"in e&&"message"in e}function a(e){return o(e)?e:Error((0,n.isPlainObject)(e)?JSON.stringify(e):e+"")}},2407:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{INTERCEPTION_ROUTE_MARKERS:function(){return o},extractInterceptionRouteInformation:function(){return i},isInterceptionRouteAppPath:function(){return a}});let n=r(3787),o=["(..)(..)","(.)","(..)","(...)"];function a(e){return void 0!==e.split("/").find(e=>o.find(t=>e.startsWith(t)))}function i(e){let t,r,a;for(let n of e.split("/"))if(r=o.find(e=>n.startsWith(e))){[t,a]=e.split(r,2);break}if(!t||!r||!a)throw Error(`Invalid interception route: ${e}. Must be in the format //(..|...|..)(..)/`);switch(t=(0,n.normalizeAppPath)(t),r){case"(.)":a="/"===t?`/${a}`:t+"/"+a;break;case"(..)":if("/"===t)throw Error(`Invalid interception route: ${e}. Cannot use (..) marker at the root level, use (.) instead.`);a=t.split("/").slice(0,-1).concat(a).join("/");break;case"(...)":a="/"+a;break;case"(..)(..)":let i=t.split("/");if(i.length<=2)throw Error(`Invalid interception route: ${e}. Cannot use (..)(..) marker at the root level or one level up.`);a=i.slice(0,-2).concat(a).join("/");break;default:throw Error("Invariant: unexpected marker")}return{interceptingRoute:t,interceptedRoute:a}}},2431:function(){},8754:function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}r.r(t),r.d(t,{_:function(){return n},_interop_require_default:function(){return n}})},1757:function(e,t,r){"use strict";function n(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(n=function(e){return e?r:t})(e)}function o(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=n(t);if(r&&r.has(e))return r.get(e);var o={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var u=a?Object.getOwnPropertyDescriptor(e,i):null;u&&(u.get||u.set)?Object.defineProperty(o,i,u):o[i]=e[i]}return o.default=e,r&&r.set(e,o),o}r.r(t),r.d(t,{_:function(){return o},_interop_require_wildcard:function(){return o}})}},function(e){e.O(0,[774],function(){return e(e.s=4768)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/_app-eac778379b538880.js b/_next/static/chunks/pages/_app-eac778379b538880.js
new file mode 100644
index 0000000..9ae7f13
--- /dev/null
+++ b/_next/static/chunks/pages/_app-eac778379b538880.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[888],{1118:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return n(8314)}])},6691:function(e,t){"use strict";var n,r,o,i;Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var n in t)Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}(t,{ACTION_FAST_REFRESH:function(){return f},ACTION_NAVIGATE:function(){return s},ACTION_PREFETCH:function(){return u},ACTION_REFRESH:function(){return l},ACTION_RESTORE:function(){return a},ACTION_SERVER_ACTION:function(){return d},ACTION_SERVER_PATCH:function(){return c},PrefetchCacheEntryStatus:function(){return r},PrefetchKind:function(){return n},isThenable:function(){return h}});let l="refresh",s="navigate",a="restore",c="server-patch",u="prefetch",f="fast-refresh",d="server-action";function h(e){return e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then}(o=n||(n={})).AUTO="auto",o.FULL="full",o.TEMPORARY="temporary",(i=r||(r={})).fresh="fresh",i.reusable="reusable",i.expired="expired",i.stale="stale",("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},4318:function(e,t,n){"use strict";function r(e,t,n,r){return!1}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getDomainLocale",{enumerable:!0,get:function(){return r}}),n(8364),("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},9577:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return b}});let r=n(8754),o=n(5893),i=r._(n(7294)),l=n(1401),s=n(2045),a=n(7420),c=n(7201),u=n(1443),f=n(9953),d=n(5320),h=n(2905),p=n(4318),x=n(953),j=n(6691),v=new Set;function g(e,t,n,r,o,i){if(i||(0,s.isLocalURL)(t)){if(!r.bypassPrefetchedCheck){let o=t+"%"+n+"%"+(void 0!==r.locale?r.locale:"locale"in e?e.locale:void 0);if(v.has(o))return;v.add(o)}(async()=>i?e.prefetch(t,o):e.prefetch(t,n,r))().catch(e=>{})}}function m(e){return"string"==typeof e?e:(0,a.formatUrl)(e)}let b=i.default.forwardRef(function(e,t){let n,r;let{href:a,as:v,children:b,prefetch:y=null,passHref:w,replace:_,shallow:k,scroll:C,locale:P,onClick:N,onMouseEnter:O,onTouchStart:E,legacyBehavior:A=!1,...M}=e;n=b,A&&("string"==typeof n||"number"==typeof n)&&(n=(0,o.jsx)("a",{children:n}));let T=i.default.useContext(f.RouterContext),R=i.default.useContext(d.AppRouterContext),L=null!=T?T:R,S=!T,I=!1!==y,H=null===y?j.PrefetchKind.AUTO:j.PrefetchKind.FULL,{href:z,as:U}=i.default.useMemo(()=>{if(!T){let e=m(a);return{href:e,as:v?m(v):e}}let[e,t]=(0,l.resolveHref)(T,a,!0);return{href:e,as:v?(0,l.resolveHref)(T,v):t||e}},[T,a,v]),B=i.default.useRef(z),F=i.default.useRef(U);A&&(r=i.default.Children.only(n));let V=A?r&&"object"==typeof r&&r.ref:t,[Z,D,K]=(0,h.useIntersection)({rootMargin:"200px"}),G=i.default.useCallback(e=>{(F.current!==U||B.current!==z)&&(K(),F.current=U,B.current=z),Z(e),V&&("function"==typeof V?V(e):"object"==typeof V&&(V.current=e))},[U,V,z,K,Z]);i.default.useEffect(()=>{L&&D&&I&&g(L,z,U,{locale:P},{kind:H},S)},[U,z,D,P,I,null==T?void 0:T.locale,L,S,H]);let X={ref:G,onClick(e){A||"function"!=typeof N||N(e),A&&r.props&&"function"==typeof r.props.onClick&&r.props.onClick(e),L&&!e.defaultPrevented&&function(e,t,n,r,o,l,a,c,u){let{nodeName:f}=e.currentTarget;if("A"===f.toUpperCase()&&(function(e){let t=e.currentTarget.getAttribute("target");return t&&"_self"!==t||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.nativeEvent&&2===e.nativeEvent.which}(e)||!u&&!(0,s.isLocalURL)(n)))return;e.preventDefault();let d=()=>{let e=null==a||a;"beforePopState"in t?t[o?"replace":"push"](n,r,{shallow:l,locale:c,scroll:e}):t[o?"replace":"push"](r||n,{scroll:e})};u?i.default.startTransition(d):d()}(e,L,z,U,_,k,C,P,S)},onMouseEnter(e){A||"function"!=typeof O||O(e),A&&r.props&&"function"==typeof r.props.onMouseEnter&&r.props.onMouseEnter(e),L&&(I||!S)&&g(L,z,U,{locale:P,priority:!0,bypassPrefetchedCheck:!0},{kind:H},S)},onTouchStart:function(e){A||"function"!=typeof E||E(e),A&&r.props&&"function"==typeof r.props.onTouchStart&&r.props.onTouchStart(e),L&&(I||!S)&&g(L,z,U,{locale:P,priority:!0,bypassPrefetchedCheck:!0},{kind:H},S)}};if((0,c.isAbsoluteUrl)(U))X.href=U;else if(!A||w||"a"===r.type&&!("href"in r.props)){let e=void 0!==P?P:null==T?void 0:T.locale,t=(null==T?void 0:T.isLocaleDomain)&&(0,p.getDomainLocale)(U,e,null==T?void 0:T.locales,null==T?void 0:T.domainLocales);X.href=t||(0,x.addBasePath)((0,u.addLocale)(U,e,null==T?void 0:T.defaultLocale))}return A?i.default.cloneElement(r,X):(0,o.jsx)("a",{...M,...X,children:n})});("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},2905:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"useIntersection",{enumerable:!0,get:function(){return a}});let r=n(7294),o=n(3815),i="function"==typeof IntersectionObserver,l=new Map,s=[];function a(e){let{rootRef:t,rootMargin:n,disabled:a}=e,c=a||!i,[u,f]=(0,r.useState)(!1),d=(0,r.useRef)(null),h=(0,r.useCallback)(e=>{d.current=e},[]);return(0,r.useEffect)(()=>{if(i){if(c||u)return;let e=d.current;if(e&&e.tagName)return function(e,t,n){let{id:r,observer:o,elements:i}=function(e){let t;let n={root:e.root||null,margin:e.rootMargin||""},r=s.find(e=>e.root===n.root&&e.margin===n.margin);if(r&&(t=l.get(r)))return t;let o=new Map;return t={id:n,observer:new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e),elements:o},s.push(n),l.set(n,t),t}(n);return i.set(e,t),o.observe(e),function(){if(i.delete(e),o.unobserve(e),0===i.size){o.disconnect(),l.delete(r);let e=s.findIndex(e=>e.root===r.root&&e.margin===r.margin);e>-1&&s.splice(e,1)}}}(e,e=>e&&f(e),{root:null==t?void 0:t.current,rootMargin:n})}else if(!u){let e=(0,o.requestIdleCallback)(()=>f(!0));return()=>(0,o.cancelIdleCallback)(e)}},[c,n,t,u,d.current]),[h,u,(0,r.useCallback)(()=>{f(!1)},[])]}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},5712:function(){},9672:function(){},881:function(){},4588:function(){},7381:function(){},9008:function(e,t,n){e.exports=n(7828)},1664:function(e,t,n){e.exports=n(9577)},5213:function(e,t,n){"use strict";n.d(t,{_y:function(){return i},zt:function(){return o}});let r=(0,n(7294).createContext)([{},()=>{}]),o=r.Provider;r.Consumer;let i=r},2920:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var r=JSON.parse('{"author":{"name":"Brian Holt","company":"Neon"},"title":"Complete Intro to React","subtitle":"v9","frontendMastersLink":"https://frontendmasters.com/courses/complete-react-v9/","social":{"linkedin":"btholt","github":"btholt","twitter":"holtbt","bluesky":"brianholt.me"},"description":"Discover the Complete Intro to React, version 9, a comprehensive course designed by Brian Holt to take you from beginner to job-ready in React development. Learn essential React concepts, tools like Vite, JSX, and ecosystem integration at your own pace, with guidance on using GitHub for collaborative learning and support. Ideal for anyone looking to enhance their React skills, this course offers practical, real-world experience from a seasoned developer.","keywords":["Brian Holt","React","Meta","Facebook","tanstack","testing","web development","javascript","frontend","front end","testing"],"csvPath":"./out/lessons.csv"}');let o={author:{name:"An Author",company:"An Author's Company"},title:"A Superb Course",subtitle:"That Teaches Nice Things",frontendMastersLink:"",description:"A nice course for nice people.",keywords:["a nice course","for people","to learn","nice things"],social:{linkedin:"btholt",github:"btholt",twitter:"holtbt"}};function i(){return Object.assign({},o,r)}},8314:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return m}});var r=n(5893),o=n(9008);n(5712),n(9672),n(7381),n(4588),n(881);var i=n(7294);function l(){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",width:"32",height:"32",viewBox:"0 0 32 32",children:[(0,r.jsx)("defs",{children:(0,r.jsx)("clipPath",{id:"clip-github-social",children:(0,r.jsx)("rect",{width:"32",height:"32"})})}),(0,r.jsx)("g",{id:"github-social",clipPath:"url(#clip-github-social)",children:(0,r.jsxs)("g",{id:"Group_272","data-name":"Group 272",transform:"translate(13522.5 -6994)",children:[(0,r.jsx)("path",{id:"Subtraction_33","data-name":"Subtraction 33",d:"M-24967.5,8041a15.9,15.9,0,0,1-11.312-4.688A15.893,15.893,0,0,1-24983.5,8025a15.893,15.893,0,0,1,4.689-11.315A15.894,15.894,0,0,1-24967.5,8009a15.894,15.894,0,0,1,11.313,4.686A15.893,15.893,0,0,1-24951.5,8025a15.893,15.893,0,0,1-4.689,11.313A15.9,15.9,0,0,1-24967.5,8041Zm-3.781-4.571h0v3.918h7.895v-6.665a1.836,1.836,0,0,0-1.2-1.718c5.1-.617,7.467-2.975,7.467-7.424a7.176,7.176,0,0,0-1.637-4.728,6.74,6.74,0,0,0,.275-1.812,4.34,4.34,0,0,0-.52-2.452.574.574,0,0,0-.359-.1c-1.061,0-3.465,1.411-3.936,1.694a16.644,16.644,0,0,0-4.2-.489,16.379,16.379,0,0,0-3.969.445c-.846-.5-2.91-1.649-3.859-1.649a.566.566,0,0,0-.354.095,4.3,4.3,0,0,0-.521,2.452,6.7,6.7,0,0,0,.244,1.718,7.346,7.346,0,0,0-1.6,4.822,7.263,7.263,0,0,0,1.533,4.985c1.193,1.359,3.115,2.165,5.871,2.464a1.826,1.826,0,0,0-1.129,1.693v.5h0l-.006,0a7.121,7.121,0,0,1-2.033.363,2.608,2.608,0,0,1-.965-.158,4.438,4.438,0,0,1-1.836-1.881,2.361,2.361,0,0,0-1.248-1.091,3.472,3.472,0,0,0-1.217-.3.584.584,0,0,0-.545.224.282.282,0,0,0,.027.367,1.875,1.875,0,0,0,.447.307,4.732,4.732,0,0,1,.561.355,10.726,10.726,0,0,1,1.682,2.755c.043.092.078.163.105.217a3.876,3.876,0,0,0,2.42,1.185,6.036,6.036,0,0,0,.607.025c.875,0,1.988-.124,2-.125Z",transform:"translate(11461 -1015)",fill:"var(--footer-icons)"}),(0,r.jsxs)("g",{id:"Ellipse_670","data-name":"Ellipse 670",transform:"translate(-13522.5 6994)",fill:"none",stroke:"var(--footer-icons)",strokeWidth:"1",children:[(0,r.jsx)("circle",{cx:"16",cy:"16",r:"16",stroke:"none"}),(0,r.jsx)("circle",{cx:"16",cy:"16",r:"15.5",fill:"none"})]})]})})]})}function s(){return(0,r.jsx)("svg",{fill:"none",height:"auto",width:"32",xmlns:"http://www.w3.org/2000/svg",viewBox:"0.254 0.25 500 451.95400000000006",children:(0,r.jsx)("path",{d:"M394.033.25h76.67L303.202 191.693l197.052 260.511h-154.29L225.118 294.205 86.844 452.204H10.127l179.16-204.77L.254.25H158.46l109.234 144.417zm-26.908 406.063h42.483L135.377 43.73h-45.59z",fill:"var(--footer-icons)"})})}function a(){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",width:"32",height:"32",viewBox:"0 0 32 32",children:[(0,r.jsx)("defs",{children:(0,r.jsx)("clipPath",{id:"clip-linkedin-social",children:(0,r.jsx)("rect",{width:"32",height:"32"})})}),(0,r.jsx)("g",{id:"linkedin-social",clipPath:"url(#clip-linkedin-social)",children:(0,r.jsx)("g",{id:"Group_270","data-name":"Group 270",transform:"translate(-86.349 -633.073)",children:(0,r.jsx)("path",{id:"Path_375","data-name":"Path 375",d:"M115.789,633.073a2.324,2.324,0,0,1,1.682.676,2.194,2.194,0,0,1,.695,1.627V662.8a2.131,2.131,0,0,1-.695,1.609,2.314,2.314,0,0,1-1.646.659H88.69a2.307,2.307,0,0,1-1.646-.659,2.128,2.128,0,0,1-.695-1.609V635.376a2.19,2.19,0,0,1,.695-1.627,2.322,2.322,0,0,1,1.682-.676h27.063Zm-20.224,9.672a2.561,2.561,0,0,0,0-3.584,2.658,2.658,0,0,0-1.938-.712,2.724,2.724,0,0,0-1.957.712,2.371,2.371,0,0,0-.75,1.792,2.4,2.4,0,0,0,.731,1.792,2.605,2.605,0,0,0,1.9.713h.037A2.7,2.7,0,0,0,95.565,642.745ZM96,645.434H91.213V659.88H96Zm17.3,6.144a7.007,7.007,0,0,0-1.573-4.9,5.68,5.68,0,0,0-6.839-.769,5.663,5.663,0,0,0-1.426,1.573v-2.048H98.674q.036.841,0,7.717v6.728h4.791V651.8a3.592,3.592,0,0,1,.146-1.17,2.913,2.913,0,0,1,.878-1.206,2.429,2.429,0,0,1,1.609-.549,2.108,2.108,0,0,1,1.865.914,4.265,4.265,0,0,1,.549,2.341v7.752H113.3Z",fill:"var(--footer-icons)"})})})]})}function c(){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -3.268 64 68.414",width:"38",height:"auto",children:(0,r.jsx)("path",{fill:"var(--footer-icons)",d:"M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805zm36.254 0C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745z"})})}function u(e){let{twitter:t,linkedin:n,github:o,bluesky:i}=e;return(0,r.jsx)("footer",{className:"footer",children:(0,r.jsxs)("ul",{className:"socials",children:[t?(0,r.jsx)("li",{className:"social",children:(0,r.jsx)("a",{href:"https://twitter.com/".concat(t),children:(0,r.jsx)(s,{})})}):null,i?(0,r.jsx)("li",{className:"social",children:(0,r.jsx)("a",{href:"https://bsky.app/profile/".concat(i),children:(0,r.jsx)(c,{})})}):null,o?(0,r.jsx)("li",{className:"social",children:(0,r.jsx)("a",{href:"https://github.com/".concat(o),children:(0,r.jsx)(l,{})})}):null,n?(0,r.jsx)("li",{className:"social",children:(0,r.jsx)("a",{href:"https://linkedin.com/in/".concat(n),children:(0,r.jsx)(a,{})})}):null,(0,r.jsx)("li",{className:"social",children:(0,r.jsxs)("div",{className:"terms",children:[(0,r.jsx)("p",{children:"Content Licensed Under CC-BY-NC-4.0"}),(0,r.jsx)("p",{children:"Code Samples and Exercises Licensed Under Apache 2.0"}),(0,r.jsxs)("p",{children:["Site Designed by"," ",(0,r.jsx)("a",{href:"https://www.alexdanielson.com/",children:"Alex Danielson"})]})]})})]})})}var f=n(1664),d=n(5213);let h=(0,i.createContext)([{},()=>{}]),p=h.Provider;function x(e){let[{section:t,title:n,icon:o}]=(0,i.useContext)(d._y),{frontendMastersLink:l}=(0,i.useContext)(h);return(0,r.jsxs)("header",{className:"navbar",children:[(0,r.jsx)("h1",{className:"navbar-brand",children:(0,r.jsx)(f,{href:"/",children:e.title})}),(0,r.jsxs)("div",{className:"navbar-info",children:[l?(0,r.jsx)("a",{href:l,className:"cta-btn",children:"Watch on Frontend Masters"}):null,t?(0,r.jsxs)("h2",{children:[t," ",(0,r.jsx)("i",{className:"fas fa-".concat(o)})," ",n]}):null]})]})}h.Consumer;var j=n(2920);function v(e){let{children:t}=e,n=(0,j.Z)(),o=(0,i.useState)({});return(0,r.jsx)(p,{value:n,children:(0,r.jsxs)(d.zt,{value:o,children:[(0,r.jsxs)("div",{className:"remix-app",children:[(0,r.jsx)(x,{title:n.title}),(0,r.jsx)("div",{className:"content-container",children:(0,r.jsx)("div",{className:"main",children:t})}),(0,r.jsx)("script",{async:!0,defer:!0,src:"https://a.holt.courses/latest.js"}),(0,r.jsx)("noscript",{children:(0,r.jsx)("img",{src:"https://a.holt.courses/noscript.gif",alt:"",referrerPolicy:"no-referrer-when-downgrade"})}),(0,r.jsx)(u,{twitter:n.social.twitter,github:n.social.github,linkedin:n.social.linkedin,bluesky:n.social.bluesky})]}),(0,r.jsx)("script",{async:!0,defer:!0,src:"https://a.holt.courses/latest.js"}),(0,r.jsx)("noscript",{children:(0,r.jsx)("img",{src:"https://a.holt.courses/noscript.gif",alt:"",referrerPolicy:"no-referrer-when-downgrade"})})]})})}function g(e){let{children:t}=e;return(0,r.jsx)(v,{children:t})}function m(e){let{Component:t,pageProps:n}=e;return(0,r.jsxs)(g,{children:[(0,r.jsxs)(o,{children:[(0,r.jsx)("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/images/apple-touch-icon.png"}),(0,r.jsx)("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/images/favicon-32x32.png"}),(0,r.jsx)("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/images/favicon-16x16.png"}),(0,r.jsx)("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/images/favicon-16x16.png"}),(0,r.jsx)("link",{rel:"icon",type:"image/x-icon",href:"/images/favicon.ico"})]}),(0,r.jsx)(t,{...n})]})}}},function(e){var t=function(t){return e(e.s=t)};e.O(0,[774,179],function(){return t(1118),t(9090)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/_error-77823ddac6993d35.js b/_next/static/chunks/pages/_error-77823ddac6993d35.js
new file mode 100644
index 0000000..8f1fc25
--- /dev/null
+++ b/_next/static/chunks/pages/_error-77823ddac6993d35.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[820],{1981:function(n,_,u){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_error",function(){return u(6971)}])}},function(n){n.O(0,[888,774,179],function(){return n(n.s=1981)}),_N_E=n.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/index-2a6b1d427e655e1b.js b/_next/static/chunks/pages/index-2a6b1d427e655e1b.js
new file mode 100644
index 0000000..b35799c
--- /dev/null
+++ b/_next/static/chunks/pages/index-2a6b1d427e655e1b.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{5557:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return n(4610)}])},2634:function(e,s,n){"use strict";n.d(s,{Z:function(){return t}});var i=n(5893);function t(){return(0,i.jsx)("div",{className:"details-bg",children:(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",width:"154",height:"154",viewBox:"0 0 154 154",children:[(0,i.jsxs)("defs",{children:[(0,i.jsx)("clipPath",{id:"clip-path",children:(0,i.jsx)("rect",{id:"Rectangle_2238","data-name":"Rectangle 2238",width:"154",height:"154",transform:"translate(9467 350)",fill:"#fff",stroke:"#707070",strokeWidth:"1"})}),(0,i.jsx)("clipPath",{id:"clip-corner-image-active",children:(0,i.jsx)("rect",{width:"154",height:"154"})})]}),(0,i.jsx)("g",{id:"corner-image-active",clipPath:"url(#clip-corner-image-active)",children:(0,i.jsx)("g",{id:"Corner-image-active-2","data-name":"Corner-image-active",transform:"translate(-9467 -350)",clipPath:"url(#clip-path)",children:(0,i.jsx)("path",{id:"Subtraction_34","data-name":"Subtraction 34",d:"M-3857.365,1740.766h0l-7.07-7.07,12.89-12.89v14.142l-5.818,5.818Zm-14.142-14.142h0l-7.071-7.07,27.033-27.033v14.143l-19.96,19.96Zm-14.143-14.143h0l-7.07-7.069,41.175-41.175v14.142Zm-14.142-14.142h0l-7.07-7.069,55.317-55.317v14.142Zm-14.142-14.142h0l-7.07-7.069,69.459-69.459v14.142Zm-14.142-14.142h0l-7.07-7.069,76.739-76.739h6.862v7.28Zm-14.143-14.143h0l-7.07-7.069,62.6-62.6h14.142Zm-14.142-14.142h0l-7.07-7.069,48.454-48.454h14.142Zm-14.142-14.142h0l-7.07-7.069,34.312-34.312h14.142Zm-14.142-14.142h0l-7.07-7.069,20.17-20.17h14.142Zm-14.142-14.142h0l-7.071-7.071,6.027-6.027h14.144l-13.1,13.1Zm367.24-56.114v-.909l.455.455-.453.453Z",transform:"translate(13472.546 -1236.766)",fill:"var(--corner-fill)"})})})]})})}},4610:function(e,s,n){"use strict";n.r(s),n.d(s,{__N_SSG:function(){return r},default:function(){return h}});var i=n(5893),t=n(9008),a=n(1664),l=n(2634),c=n(2920),r=!0;function h(e){let{sections:s}=e,n=(0,c.Z)();return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t,{children:[(0,i.jsx)("title",{children:n.title}),(0,i.jsx)("meta",{name:"description",content:n.description}),(0,i.jsx)("meta",{name:"keywords",content:n.keywords.join(",")}),(0,i.jsx)("meta",{name:"og:description",content:n.description}),(0,i.jsx)("meta",{name:"og:title",content:n.title}),(0,i.jsx)("meta",{name:"og:image",content:"/images/social-share-cover.jpg"}),(0,i.jsx)("meta",{name:"twitter:card",content:"summary_large_image"})]}),(0,i.jsxs)("div",{children:[(0,i.jsxs)("div",{className:"jumbotron",children:[(0,i.jsx)("div",{className:"courseInfo",children:(0,i.jsxs)("div",{className:"courseInfo-inner",children:[(0,i.jsx)("h1",{children:n.title}),(0,i.jsx)("h2",{children:n.subtitle}),(0,i.jsxs)("div",{className:"author",children:[(0,i.jsx)("div",{className:"image",children:(0,i.jsx)("img",{src:"/images/author.jpg",alt:"author image",className:"image"})}),(0,i.jsxs)("div",{className:"info",children:[(0,i.jsx)("div",{className:"name",children:n.author.name}),(0,i.jsx)("div",{className:"company",children:n.author.company})]})]})]})}),(0,i.jsx)("div",{className:"courseIcon",children:(0,i.jsx)("img",{src:"/images/course-icon.png",alt:"course icon"})})]}),n.frontendMastersLink?(0,i.jsx)("a",{href:n.frontendMastersLink,className:"cta-btn",children:"Watch on Frontend Masters"}):null,(0,i.jsxs)("div",{className:"main-card",children:[(0,i.jsx)("h1",{className:"lesson-title",children:"Table of Contents"}),(0,i.jsx)("div",{className:"lesson-content",children:(0,i.jsx)("ol",{className:"sections-name",children:s.map(e=>(0,i.jsx)("li",{children:(0,i.jsxs)("div",{className:"lesson-details",children:[(0,i.jsx)("div",{className:"lesson-preface",children:(0,i.jsx)("i",{className:"fas fa-".concat(e.icon)})}),(0,i.jsxs)("div",{className:"lesson-text",children:[(0,i.jsx)("h2",{className:"lesson-section-title",children:e.title}),(0,i.jsx)("ol",{children:e.lessons.map(e=>(0,i.jsx)("li",{children:(0,i.jsx)(a,{href:e.fullSlug,children:e.title})},e.slug))})]}),(0,i.jsx)(l.Z,{})]})},e.slug))})})]})]})]})}}},function(e){e.O(0,[888,774,179],function(){return e(e.s=5557)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/lessons/[section]/[slug]-f133ec3e69124099.js b/_next/static/chunks/pages/lessons/[section]/[slug]-f133ec3e69124099.js
new file mode 100644
index 0000000..681d720
--- /dev/null
+++ b/_next/static/chunks/pages/lessons/[section]/[slug]-f133ec3e69124099.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[620],{7025:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/lessons/[section]/[slug]",function(){return n(2477)}])},2634:function(e,t,n){"use strict";n.d(t,{Z:function(){return s}});var i=n(5893);function s(){return(0,i.jsx)("div",{className:"details-bg",children:(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",width:"154",height:"154",viewBox:"0 0 154 154",children:[(0,i.jsxs)("defs",{children:[(0,i.jsx)("clipPath",{id:"clip-path",children:(0,i.jsx)("rect",{id:"Rectangle_2238","data-name":"Rectangle 2238",width:"154",height:"154",transform:"translate(9467 350)",fill:"#fff",stroke:"#707070",strokeWidth:"1"})}),(0,i.jsx)("clipPath",{id:"clip-corner-image-active",children:(0,i.jsx)("rect",{width:"154",height:"154"})})]}),(0,i.jsx)("g",{id:"corner-image-active",clipPath:"url(#clip-corner-image-active)",children:(0,i.jsx)("g",{id:"Corner-image-active-2","data-name":"Corner-image-active",transform:"translate(-9467 -350)",clipPath:"url(#clip-path)",children:(0,i.jsx)("path",{id:"Subtraction_34","data-name":"Subtraction 34",d:"M-3857.365,1740.766h0l-7.07-7.07,12.89-12.89v14.142l-5.818,5.818Zm-14.142-14.142h0l-7.071-7.07,27.033-27.033v14.143l-19.96,19.96Zm-14.143-14.143h0l-7.07-7.069,41.175-41.175v14.142Zm-14.142-14.142h0l-7.07-7.069,55.317-55.317v14.142Zm-14.142-14.142h0l-7.07-7.069,69.459-69.459v14.142Zm-14.142-14.142h0l-7.07-7.069,76.739-76.739h6.862v7.28Zm-14.143-14.143h0l-7.07-7.069,62.6-62.6h14.142Zm-14.142-14.142h0l-7.07-7.069,48.454-48.454h14.142Zm-14.142-14.142h0l-7.07-7.069,34.312-34.312h14.142Zm-14.142-14.142h0l-7.07-7.069,20.17-20.17h14.142Zm-14.142-14.142h0l-7.071-7.071,6.027-6.027h14.144l-13.1,13.1Zm367.24-56.114v-.909l.455.455-.453.453Z",transform:"translate(13472.546 -1236.766)",fill:"var(--corner-fill)"})})})]})})}},2477:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSG:function(){return o},default:function(){return h}});var i=n(5893),s=n(7294),l=n(9008),r=n(2920),a=n(2634),c=n(5213),o=!0;function h(e){let{post:t}=e,n=(0,r.Z)(),[o,h]=(0,s.useContext)(c._y);(0,s.useEffect)(()=>(h({section:t.section,title:t.title,icon:t.icon}),()=>h({})),[]);let d=t.title?"".concat(t.title," – ").concat(n.title):n.title,m=t.attributes.description?t.attributes.description:n.description,u=t.attributes.keywords?t.attributes.keywords:n.keywords;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(l,{children:[(0,i.jsx)("title",{children:d}),(0,i.jsx)("meta",{name:"description",content:m}),(0,i.jsx)("meta",{name:"keywords",content:u.join(",")}),(0,i.jsx)("meta",{name:"og:description",content:m}),(0,i.jsx)("meta",{name:"og:title",content:d}),(0,i.jsx)("meta",{name:"og:image",content:"/images/social-share-cover.jpg"}),(0,i.jsx)("meta",{name:"twitter:card",content:"summary_large_image"})]}),(0,i.jsxs)("div",{className:"lesson-container",children:[(0,i.jsxs)("div",{className:"lesson",children:[(0,i.jsx)("div",{className:"lesson-content",dangerouslySetInnerHTML:{__html:t.html}}),(0,i.jsxs)("div",{className:"lesson-links",children:[t.prevSlug?(0,i.jsx)("a",{href:t.prevSlug,className:"prev",children:"← Previous"}):null,t.nextSlug?(0,i.jsx)("a",{href:t.nextSlug,className:"next",children:"Next →"}):null]})]}),(0,i.jsx)(a.Z,{})]})]})}}},function(e){e.O(0,[888,774,179],function(){return e(e.s=7025)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js b/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js
new file mode 100644
index 0000000..6c105ca
--- /dev/null
+++ b/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js
@@ -0,0 +1 @@
+!function(){var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function e(t){var e={exports:{}};return t(e,e.exports),e.exports}var r=function(t){return t&&t.Math==Math&&t},n=r("object"==typeof globalThis&&globalThis)||r("object"==typeof window&&window)||r("object"==typeof self&&self)||r("object"==typeof t&&t)||Function("return this")(),o=function(t){try{return!!t()}catch(t){return!0}},i=!o(function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}),a={}.propertyIsEnumerable,u=Object.getOwnPropertyDescriptor,s=u&&!a.call({1:2},1)?function(t){var e=u(this,t);return!!e&&e.enumerable}:a,c={f:s},f=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}},l={}.toString,h=function(t){return l.call(t).slice(8,-1)},p="".split,d=o(function(){return!Object("z").propertyIsEnumerable(0)})?function(t){return"String"==h(t)?p.call(t,""):Object(t)}:Object,v=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t},g=function(t){return d(v(t))},y=function(t){return"object"==typeof t?null!==t:"function"==typeof t},m=function(t,e){if(!y(t))return t;var r,n;if(e&&"function"==typeof(r=t.toString)&&!y(n=r.call(t)))return n;if("function"==typeof(r=t.valueOf)&&!y(n=r.call(t)))return n;if(!e&&"function"==typeof(r=t.toString)&&!y(n=r.call(t)))return n;throw TypeError("Can't convert object to primitive value")},b={}.hasOwnProperty,w=function(t,e){return b.call(t,e)},S=n.document,E=y(S)&&y(S.createElement),x=function(t){return E?S.createElement(t):{}},A=!i&&!o(function(){return 7!=Object.defineProperty(x("div"),"a",{get:function(){return 7}}).a}),O=Object.getOwnPropertyDescriptor,R={f:i?O:function(t,e){if(t=g(t),e=m(e,!0),A)try{return O(t,e)}catch(t){}if(w(t,e))return f(!c.f.call(t,e),t[e])}},j=function(t){if(!y(t))throw TypeError(String(t)+" is not an object");return t},P=Object.defineProperty,I={f:i?P:function(t,e,r){if(j(t),e=m(e,!0),j(r),A)try{return P(t,e,r)}catch(t){}if("get"in r||"set"in r)throw TypeError("Accessors not supported");return"value"in r&&(t[e]=r.value),t}},T=i?function(t,e,r){return I.f(t,e,f(1,r))}:function(t,e,r){return t[e]=r,t},k=function(t,e){try{T(n,t,e)}catch(r){n[t]=e}return e},L="__core-js_shared__",U=n[L]||k(L,{}),M=Function.toString;"function"!=typeof U.inspectSource&&(U.inspectSource=function(t){return M.call(t)});var _,N,C,F=U.inspectSource,B=n.WeakMap,D="function"==typeof B&&/native code/.test(F(B)),q=!1,z=e(function(t){(t.exports=function(t,e){return U[t]||(U[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.6.5",mode:"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})}),W=0,K=Math.random(),G=function(t){return"Symbol("+String(void 0===t?"":t)+")_"+(++W+K).toString(36)},$=z("keys"),V=function(t){return $[t]||($[t]=G(t))},H={};if(D){var X=new(0,n.WeakMap),Y=X.get,J=X.has,Q=X.set;_=function(t,e){return Q.call(X,t,e),e},N=function(t){return Y.call(X,t)||{}},C=function(t){return J.call(X,t)}}else{var Z=V("state");H[Z]=!0,_=function(t,e){return T(t,Z,e),e},N=function(t){return w(t,Z)?t[Z]:{}},C=function(t){return w(t,Z)}}var tt,et={set:_,get:N,has:C,enforce:function(t){return C(t)?N(t):_(t,{})},getterFor:function(t){return function(e){var r;if(!y(e)||(r=N(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return r}}},rt=e(function(t){var e=et.get,r=et.enforce,o=String(String).split("String");(t.exports=function(t,e,i,a){var u=!!a&&!!a.unsafe,s=!!a&&!!a.enumerable,c=!!a&&!!a.noTargetGet;"function"==typeof i&&("string"!=typeof e||w(i,"name")||T(i,"name",e),r(i).source=o.join("string"==typeof e?e:"")),t!==n?(u?!c&&t[e]&&(s=!0):delete t[e],s?t[e]=i:T(t,e,i)):s?t[e]=i:k(e,i)})(Function.prototype,"toString",function(){return"function"==typeof this&&e(this).source||F(this)})}),nt=n,ot=function(t){return"function"==typeof t?t:void 0},it=function(t,e){return arguments.length<2?ot(nt[t])||ot(n[t]):nt[t]&&nt[t][e]||n[t]&&n[t][e]},at=Math.ceil,ut=Math.floor,st=function(t){return isNaN(t=+t)?0:(t>0?ut:at)(t)},ct=Math.min,ft=function(t){return t>0?ct(st(t),9007199254740991):0},lt=Math.max,ht=Math.min,pt=function(t,e){var r=st(t);return r<0?lt(r+e,0):ht(r,e)},dt=function(t){return function(e,r,n){var o,i=g(e),a=ft(i.length),u=pt(n,a);if(t&&r!=r){for(;a>u;)if((o=i[u++])!=o)return!0}else for(;a>u;u++)if((t||u in i)&&i[u]===r)return t||u||0;return!t&&-1}},vt={includes:dt(!0),indexOf:dt(!1)},gt=vt.indexOf,yt=function(t,e){var r,n=g(t),o=0,i=[];for(r in n)!w(H,r)&&w(n,r)&&i.push(r);for(;e.length>o;)w(n,r=e[o++])&&(~gt(i,r)||i.push(r));return i},mt=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"],bt=mt.concat("length","prototype"),wt={f:Object.getOwnPropertyNames||function(t){return yt(t,bt)}},St={f:Object.getOwnPropertySymbols},Et=it("Reflect","ownKeys")||function(t){var e=wt.f(j(t)),r=St.f;return r?e.concat(r(t)):e},xt=function(t,e){for(var r=Et(e),n=I.f,o=R.f,i=0;i2?arguments[2]:void 0,u=Mt((void 0===a?n:pt(a,n))-i,n-o),s=1;for(i0;)i in r?r[o]=r[i]:delete r[o],o+=s,i+=s;return r},Nt=!!Object.getOwnPropertySymbols&&!o(function(){return!String(Symbol())}),Ct=Nt&&!Symbol.sham&&"symbol"==typeof Symbol.iterator,Ft=z("wks"),Bt=n.Symbol,Dt=Ct?Bt:Bt&&Bt.withoutSetter||G,qt=function(t){return w(Ft,t)||(Ft[t]=Nt&&w(Bt,t)?Bt[t]:Dt("Symbol."+t)),Ft[t]},zt=Object.keys||function(t){return yt(t,mt)},Wt=i?Object.defineProperties:function(t,e){j(t);for(var r,n=zt(e),o=n.length,i=0;o>i;)I.f(t,r=n[i++],e[r]);return t},Kt=it("document","documentElement"),Gt="prototype",$t="script",Vt=V("IE_PROTO"),Ht=function(){},Xt=function(t){return"<"+$t+">"+t+""},Yt=function(){try{tt=document.domain&&new ActiveXObject("htmlfile")}catch(t){}var t,e,r;Yt=tt?function(t){t.write(Xt("")),t.close();var e=t.parentWindow.Object;return t=null,e}(tt):(e=x("iframe"),r="java"+$t+":",e.style.display="none",Kt.appendChild(e),e.src=String(r),(t=e.contentWindow.document).open(),t.write(Xt("document.F=Object")),t.close(),t.F);for(var n=mt.length;n--;)delete Yt[Gt][mt[n]];return Yt()};H[Vt]=!0;var Jt=Object.create||function(t,e){var r;return null!==t?(Ht[Gt]=j(t),r=new Ht,Ht[Gt]=null,r[Vt]=t):r=Yt(),void 0===e?r:Wt(r,e)},Qt=qt("unscopables"),Zt=Array.prototype;null==Zt[Qt]&&I.f(Zt,Qt,{configurable:!0,value:Jt(null)});var te=function(t){Zt[Qt][t]=!0};Lt({target:"Array",proto:!0},{copyWithin:_t}),te("copyWithin");var ee=function(t){if("function"!=typeof t)throw TypeError(String(t)+" is not a function");return t},re=function(t,e,r){if(ee(t),void 0===e)return t;switch(r){case 0:return function(){return t.call(e)};case 1:return function(r){return t.call(e,r)};case 2:return function(r,n){return t.call(e,r,n)};case 3:return function(r,n,o){return t.call(e,r,n,o)}}return function(){return t.apply(e,arguments)}},ne=Function.call,oe=function(t,e,r){return re(ne,n[t].prototype[e],r)};oe("Array","copyWithin"),Lt({target:"Array",proto:!0},{fill:function(t){for(var e=Ut(this),r=ft(e.length),n=arguments.length,o=pt(n>1?arguments[1]:void 0,r),i=n>2?arguments[2]:void 0,a=void 0===i?r:pt(i,r);a>o;)e[o++]=t;return e}}),te("fill"),oe("Array","fill");var ie=Array.isArray||function(t){return"Array"==h(t)},ae=qt("species"),ue=function(t,e){var r;return ie(t)&&("function"!=typeof(r=t.constructor)||r!==Array&&!ie(r.prototype)?y(r)&&null===(r=r[ae])&&(r=void 0):r=void 0),new(void 0===r?Array:r)(0===e?0:e)},se=[].push,ce=function(t){var e=1==t,r=2==t,n=3==t,o=4==t,i=6==t,a=5==t||i;return function(u,s,c,f){for(var l,h,p=Ut(u),v=d(p),g=re(s,c,3),y=ft(v.length),m=0,b=f||ue,w=e?b(u,y):r?b(u,0):void 0;y>m;m++)if((a||m in v)&&(h=g(l=v[m],m,p),t))if(e)w[m]=h;else if(h)switch(t){case 3:return!0;case 5:return l;case 6:return m;case 2:se.call(w,l)}else if(o)return!1;return i?-1:n||o?o:w}},fe={forEach:ce(0),map:ce(1),filter:ce(2),some:ce(3),every:ce(4),find:ce(5),findIndex:ce(6)},le=Object.defineProperty,he={},pe=function(t){throw t},de=function(t,e){if(w(he,t))return he[t];e||(e={});var r=[][t],n=!!w(e,"ACCESSORS")&&e.ACCESSORS,a=w(e,0)?e[0]:pe,u=w(e,1)?e[1]:void 0;return he[t]=!!r&&!o(function(){if(n&&!i)return!0;var t={length:-1};n?le(t,1,{enumerable:!0,get:pe}):t[1]=1,r.call(t,a,u)})},ve=fe.find,ge="find",ye=!0,me=de(ge);ge in[]&&Array(1)[ge](function(){ye=!1}),Lt({target:"Array",proto:!0,forced:ye||!me},{find:function(t){return ve(this,t,arguments.length>1?arguments[1]:void 0)}}),te(ge),oe("Array","find");var be=fe.findIndex,we="findIndex",Se=!0,Ee=de(we);we in[]&&Array(1)[we](function(){Se=!1}),Lt({target:"Array",proto:!0,forced:Se||!Ee},{findIndex:function(t){return be(this,t,arguments.length>1?arguments[1]:void 0)}}),te(we),oe("Array","findIndex");var xe=function(t,e,r,n,o,i,a,u){for(var s,c=o,f=0,l=!!a&&re(a,u,3);f0&&ie(s))c=xe(t,e,s,ft(s.length),c,i-1)-1;else{if(c>=9007199254740991)throw TypeError("Exceed the acceptable array length");t[c]=s}c++}f++}return c},Ae=xe;Lt({target:"Array",proto:!0},{flatMap:function(t){var e,r=Ut(this),n=ft(r.length);return ee(t),(e=ue(r,0)).length=Ae(e,r,r,n,0,1,t,arguments.length>1?arguments[1]:void 0),e}}),te("flatMap"),oe("Array","flatMap"),Lt({target:"Array",proto:!0},{flat:function(){var t=arguments.length?arguments[0]:void 0,e=Ut(this),r=ft(e.length),n=ue(e,0);return n.length=Ae(n,e,e,r,0,void 0===t?1:st(t)),n}}),te("flat"),oe("Array","flat");var Oe,Re,je,Pe=function(t){return function(e,r){var n,o,i=String(v(e)),a=st(r),u=i.length;return a<0||a>=u?t?"":void 0:(n=i.charCodeAt(a))<55296||n>56319||a+1===u||(o=i.charCodeAt(a+1))<56320||o>57343?t?i.charAt(a):n:t?i.slice(a,a+2):o-56320+(n-55296<<10)+65536}},Ie={codeAt:Pe(!1),charAt:Pe(!0)},Te=!o(function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype}),ke=V("IE_PROTO"),Le=Object.prototype,Ue=Te?Object.getPrototypeOf:function(t){return t=Ut(t),w(t,ke)?t[ke]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?Le:null},Me=qt("iterator"),_e=!1;[].keys&&("next"in(je=[].keys())?(Re=Ue(Ue(je)))!==Object.prototype&&(Oe=Re):_e=!0),null==Oe&&(Oe={}),w(Oe,Me)||T(Oe,Me,function(){return this});var Ne={IteratorPrototype:Oe,BUGGY_SAFARI_ITERATORS:_e},Ce=I.f,Fe=qt("toStringTag"),Be=function(t,e,r){t&&!w(t=r?t:t.prototype,Fe)&&Ce(t,Fe,{configurable:!0,value:e})},De={},qe=Ne.IteratorPrototype,ze=function(){return this},We=function(t,e,r){var n=e+" Iterator";return t.prototype=Jt(qe,{next:f(1,r)}),Be(t,n,!1),De[n]=ze,t},Ke=function(t){if(!y(t)&&null!==t)throw TypeError("Can't set "+String(t)+" as a prototype");return t},Ge=Object.setPrototypeOf||("__proto__"in{}?function(){var t,e=!1,r={};try{(t=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(r,[]),e=r instanceof Array}catch(t){}return function(r,n){return j(r),Ke(n),e?t.call(r,n):r.__proto__=n,r}}():void 0),$e=Ne.IteratorPrototype,Ve=Ne.BUGGY_SAFARI_ITERATORS,He=qt("iterator"),Xe="keys",Ye="values",Je="entries",Qe=function(){return this},Ze=function(t,e,r,n,o,i,a){We(r,e,n);var u,s,c,f=function(t){if(t===o&&v)return v;if(!Ve&&t in p)return p[t];switch(t){case Xe:case Ye:case Je:return function(){return new r(this,t)}}return function(){return new r(this)}},l=e+" Iterator",h=!1,p=t.prototype,d=p[He]||p["@@iterator"]||o&&p[o],v=!Ve&&d||f(o),g="Array"==e&&p.entries||d;if(g&&(u=Ue(g.call(new t)),$e!==Object.prototype&&u.next&&(Ue(u)!==$e&&(Ge?Ge(u,$e):"function"!=typeof u[He]&&T(u,He,Qe)),Be(u,l,!0))),o==Ye&&d&&d.name!==Ye&&(h=!0,v=function(){return d.call(this)}),p[He]!==v&&T(p,He,v),De[e]=v,o)if(s={values:f(Ye),keys:i?v:f(Xe),entries:f(Je)},a)for(c in s)(Ve||h||!(c in p))&&rt(p,c,s[c]);else Lt({target:e,proto:!0,forced:Ve||h},s);return s},tr=Ie.charAt,er="String Iterator",rr=et.set,nr=et.getterFor(er);Ze(String,"String",function(t){rr(this,{type:er,string:String(t),index:0})},function(){var t,e=nr(this),r=e.string,n=e.index;return n>=r.length?{value:void 0,done:!0}:(t=tr(r,n),e.index+=t.length,{value:t,done:!1})});var or=function(t,e,r,n){try{return n?e(j(r)[0],r[1]):e(r)}catch(e){var o=t.return;throw void 0!==o&&j(o.call(t)),e}},ir=qt("iterator"),ar=Array.prototype,ur=function(t){return void 0!==t&&(De.Array===t||ar[ir]===t)},sr=function(t,e,r){var n=m(e);n in t?I.f(t,n,f(0,r)):t[n]=r},cr={};cr[qt("toStringTag")]="z";var fr="[object z]"===String(cr),lr=qt("toStringTag"),hr="Arguments"==h(function(){return arguments}()),pr=fr?h:function(t){var e,r,n;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),lr))?r:hr?h(e):"Object"==(n=h(e))&&"function"==typeof e.callee?"Arguments":n},dr=qt("iterator"),vr=function(t){if(null!=t)return t[dr]||t["@@iterator"]||De[pr(t)]},gr=function(t){var e,r,n,o,i,a,u=Ut(t),s="function"==typeof this?this:Array,c=arguments.length,f=c>1?arguments[1]:void 0,l=void 0!==f,h=vr(u),p=0;if(l&&(f=re(f,c>2?arguments[2]:void 0,2)),null==h||s==Array&&ur(h))for(r=new s(e=ft(u.length));e>p;p++)a=l?f(u[p],p):u[p],sr(r,p,a);else for(i=(o=h.call(u)).next,r=new s;!(n=i.call(o)).done;p++)a=l?or(o,f,[n.value,p],!0):n.value,sr(r,p,a);return r.length=p,r},yr=qt("iterator"),mr=!1;try{var br=0,wr={next:function(){return{done:!!br++}},return:function(){mr=!0}};wr[yr]=function(){return this},Array.from(wr,function(){throw 2})}catch(t){}var Sr=function(t,e){if(!e&&!mr)return!1;var r=!1;try{var n={};n[yr]=function(){return{next:function(){return{done:r=!0}}}},t(n)}catch(t){}return r},Er=!Sr(function(t){Array.from(t)});Lt({target:"Array",stat:!0,forced:Er},{from:gr});var xr=vt.includes,Ar=de("indexOf",{ACCESSORS:!0,1:0});Lt({target:"Array",proto:!0,forced:!Ar},{includes:function(t){return xr(this,t,arguments.length>1?arguments[1]:void 0)}}),te("includes"),oe("Array","includes");var Or="Array Iterator",Rr=et.set,jr=et.getterFor(Or),Pr=Ze(Array,"Array",function(t,e){Rr(this,{type:Or,target:g(t),index:0,kind:e})},function(){var t=jr(this),e=t.target,r=t.kind,n=t.index++;return!e||n>=e.length?(t.target=void 0,{value:void 0,done:!0}):"keys"==r?{value:n,done:!1}:"values"==r?{value:e[n],done:!1}:{value:[n,e[n]],done:!1}},"values");De.Arguments=De.Array,te("keys"),te("values"),te("entries"),oe("Array","values");var Ir=o(function(){function t(){}return!(Array.of.call(t)instanceof t)});Lt({target:"Array",stat:!0,forced:Ir},{of:function(){for(var t=0,e=arguments.length,r=new("function"==typeof this?this:Array)(e);e>t;)sr(r,t,arguments[t++]);return r.length=e,r}});var Tr=qt("hasInstance"),kr=Function.prototype;Tr in kr||I.f(kr,Tr,{value:function(t){if("function"!=typeof this||!y(t))return!1;if(!y(this.prototype))return t instanceof this;for(;t=Ue(t);)if(this.prototype===t)return!0;return!1}}),qt("hasInstance");var Lr=Function.prototype,Ur=Lr.toString,Mr=/^\s*function ([^ (]*)/,_r="name";i&&!(_r in Lr)&&(0,I.f)(Lr,_r,{configurable:!0,get:function(){try{return Ur.call(this).match(Mr)[1]}catch(t){return""}}});var Nr=!o(function(){return Object.isExtensible(Object.preventExtensions({}))}),Cr=e(function(t){var e=I.f,r=G("meta"),n=0,o=Object.isExtensible||function(){return!0},i=function(t){e(t,r,{value:{objectID:"O"+ ++n,weakData:{}}})},a=t.exports={REQUIRED:!1,fastKey:function(t,e){if(!y(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!w(t,r)){if(!o(t))return"F";if(!e)return"E";i(t)}return t[r].objectID},getWeakData:function(t,e){if(!w(t,r)){if(!o(t))return!0;if(!e)return!1;i(t)}return t[r].weakData},onFreeze:function(t){return Nr&&a.REQUIRED&&o(t)&&!w(t,r)&&i(t),t}};H[r]=!0}),Fr=e(function(t){var e=function(t,e){this.stopped=t,this.result=e},r=t.exports=function(t,r,n,o,i){var a,u,s,c,f,l,h,p=re(r,n,o?2:1);if(i)a=t;else{if("function"!=typeof(u=vr(t)))throw TypeError("Target is not iterable");if(ur(u)){for(s=0,c=ft(t.length);c>s;s++)if((f=o?p(j(h=t[s])[0],h[1]):p(t[s]))&&f instanceof e)return f;return new e(!1)}a=u.call(t)}for(l=a.next;!(h=l.call(a)).done;)if("object"==typeof(f=or(a,p,h.value,o))&&f&&f instanceof e)return f;return new e(!1)};r.stop=function(t){return new e(!0,t)}}),Br=function(t,e,r){if(!(t instanceof e))throw TypeError("Incorrect "+(r?r+" ":"")+"invocation");return t},Dr=function(t,e,r){var n,o;return Ge&&"function"==typeof(n=e.constructor)&&n!==r&&y(o=n.prototype)&&o!==r.prototype&&Ge(t,o),t},qr=function(t,e,r){var i=-1!==t.indexOf("Map"),a=-1!==t.indexOf("Weak"),u=i?"set":"add",s=n[t],c=s&&s.prototype,f=s,l={},h=function(t){var e=c[t];rt(c,t,"add"==t?function(t){return e.call(this,0===t?0:t),this}:"delete"==t?function(t){return!(a&&!y(t))&&e.call(this,0===t?0:t)}:"get"==t?function(t){return a&&!y(t)?void 0:e.call(this,0===t?0:t)}:"has"==t?function(t){return!(a&&!y(t))&&e.call(this,0===t?0:t)}:function(t,r){return e.call(this,0===t?0:t,r),this})};if(Tt(t,"function"!=typeof s||!(a||c.forEach&&!o(function(){(new s).entries().next()}))))f=r.getConstructor(e,t,i,u),Cr.REQUIRED=!0;else if(Tt(t,!0)){var p=new f,d=p[u](a?{}:-0,1)!=p,v=o(function(){p.has(1)}),g=Sr(function(t){new s(t)}),m=!a&&o(function(){for(var t=new s,e=5;e--;)t[u](e,e);return!t.has(-0)});g||((f=e(function(e,r){Br(e,f,t);var n=Dr(new s,e,f);return null!=r&&Fr(r,n[u],n,i),n})).prototype=c,c.constructor=f),(v||m)&&(h("delete"),h("has"),i&&h("get")),(m||d)&&h(u),a&&c.clear&&delete c.clear}return l[t]=f,Lt({global:!0,forced:f!=s},l),Be(f,t),a||r.setStrong(f,t,i),f},zr=function(t,e,r){for(var n in e)rt(t,n,e[n],r);return t},Wr=qt("species"),Kr=function(t){var e=it(t);i&&e&&!e[Wr]&&(0,I.f)(e,Wr,{configurable:!0,get:function(){return this}})},Gr=I.f,$r=Cr.fastKey,Vr=et.set,Hr=et.getterFor,Xr={getConstructor:function(t,e,r,n){var o=t(function(t,a){Br(t,o,e),Vr(t,{type:e,index:Jt(null),first:void 0,last:void 0,size:0}),i||(t.size=0),null!=a&&Fr(a,t[n],t,r)}),a=Hr(e),u=function(t,e,r){var n,o,u=a(t),c=s(t,e);return c?c.value=r:(u.last=c={index:o=$r(e,!0),key:e,value:r,previous:n=u.last,next:void 0,removed:!1},u.first||(u.first=c),n&&(n.next=c),i?u.size++:t.size++,"F"!==o&&(u.index[o]=c)),t},s=function(t,e){var r,n=a(t),o=$r(e);if("F"!==o)return n.index[o];for(r=n.first;r;r=r.next)if(r.key==e)return r};return zr(o.prototype,{clear:function(){for(var t=a(this),e=t.index,r=t.first;r;)r.removed=!0,r.previous&&(r.previous=r.previous.next=void 0),delete e[r.index],r=r.next;t.first=t.last=void 0,i?t.size=0:this.size=0},delete:function(t){var e=this,r=a(e),n=s(e,t);if(n){var o=n.next,u=n.previous;delete r.index[n.index],n.removed=!0,u&&(u.next=o),o&&(o.previous=u),r.first==n&&(r.first=o),r.last==n&&(r.last=u),i?r.size--:e.size--}return!!n},forEach:function(t){for(var e,r=a(this),n=re(t,arguments.length>1?arguments[1]:void 0,3);e=e?e.next:r.first;)for(n(e.value,e.key,this);e&&e.removed;)e=e.previous},has:function(t){return!!s(this,t)}}),zr(o.prototype,r?{get:function(t){var e=s(this,t);return e&&e.value},set:function(t,e){return u(this,0===t?0:t,e)}}:{add:function(t){return u(this,t=0===t?0:t,t)}}),i&&Gr(o.prototype,"size",{get:function(){return a(this).size}}),o},setStrong:function(t,e,r){var n=e+" Iterator",o=Hr(e),i=Hr(n);Ze(t,e,function(t,e){Vr(this,{type:n,target:t,state:o(t),kind:e,last:void 0})},function(){for(var t=i(this),e=t.kind,r=t.last;r&&r.removed;)r=r.previous;return t.target&&(t.last=r=r?r.next:t.state.first)?"keys"==e?{value:r.key,done:!1}:"values"==e?{value:r.value,done:!1}:{value:[r.key,r.value],done:!1}:(t.target=void 0,{value:void 0,done:!0})},r?"entries":"values",!r,!0),Kr(e)}},Yr=qr("Map",function(t){return function(){return t(this,arguments.length?arguments[0]:void 0)}},Xr);fr||rt(Object.prototype,"toString",fr?{}.toString:function(){return"[object "+pr(this)+"]"},{unsafe:!0});var Jr={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0},Qr=qt("iterator"),Zr=qt("toStringTag"),tn=Pr.values;for(var en in Jr){var rn=n[en],nn=rn&&rn.prototype;if(nn){if(nn[Qr]!==tn)try{T(nn,Qr,tn)}catch(t){nn[Qr]=tn}if(nn[Zr]||T(nn,Zr,en),Jr[en])for(var on in Pr)if(nn[on]!==Pr[on])try{T(nn,on,Pr[on])}catch(t){nn[on]=Pr[on]}}}var an=function(t){var e,r,n,o,i=arguments.length,a=i>1?arguments[1]:void 0;return ee(this),(e=void 0!==a)&&ee(a),null==t?new this:(r=[],e?(n=0,o=re(a,i>2?arguments[2]:void 0,2),Fr(t,function(t){r.push(o(t,n++))})):Fr(t,r.push,r),new this(r))};Lt({target:"Map",stat:!0},{from:an});var un=function(){for(var t=arguments.length,e=new Array(t);t--;)e[t]=arguments[t];return new this(e)};Lt({target:"Map",stat:!0},{of:un});var sn=function(){for(var t,e=j(this),r=ee(e.delete),n=!0,o=0,i=arguments.length;o1?arguments[1]:void 0,3);return!Fr(r,function(t,r){if(!n(r,t,e))return Fr.stop()},void 0,!0,!0).stopped}});var ln=qt("species"),hn=function(t,e){var r,n=j(t).constructor;return void 0===n||null==(r=j(n)[ln])?e:ee(r)};Lt({target:"Map",proto:!0,real:!0,forced:q},{filter:function(t){var e=j(this),r=fn(e),n=re(t,arguments.length>1?arguments[1]:void 0,3),o=new(hn(e,it("Map"))),i=ee(o.set);return Fr(r,function(t,r){n(r,t,e)&&i.call(o,t,r)},void 0,!0,!0),o}}),Lt({target:"Map",proto:!0,real:!0,forced:q},{find:function(t){var e=j(this),r=fn(e),n=re(t,arguments.length>1?arguments[1]:void 0,3);return Fr(r,function(t,r){if(n(r,t,e))return Fr.stop(r)},void 0,!0,!0).result}}),Lt({target:"Map",proto:!0,real:!0,forced:q},{findKey:function(t){var e=j(this),r=fn(e),n=re(t,arguments.length>1?arguments[1]:void 0,3);return Fr(r,function(t,r){if(n(r,t,e))return Fr.stop(t)},void 0,!0,!0).result}}),Lt({target:"Map",stat:!0},{groupBy:function(t,e){var r=new this;ee(e);var n=ee(r.has),o=ee(r.get),i=ee(r.set);return Fr(t,function(t){var a=e(t);n.call(r,a)?o.call(r,a).push(t):i.call(r,a,[t])}),r}}),Lt({target:"Map",proto:!0,real:!0,forced:q},{includes:function(t){return Fr(fn(j(this)),function(e,r){if((n=r)===(o=t)||n!=n&&o!=o)return Fr.stop();var n,o},void 0,!0,!0).stopped}}),Lt({target:"Map",stat:!0},{keyBy:function(t,e){var r=new this;ee(e);var n=ee(r.set);return Fr(t,function(t){n.call(r,e(t),t)}),r}}),Lt({target:"Map",proto:!0,real:!0,forced:q},{keyOf:function(t){return Fr(fn(j(this)),function(e,r){if(r===t)return Fr.stop(e)},void 0,!0,!0).result}}),Lt({target:"Map",proto:!0,real:!0,forced:q},{mapKeys:function(t){var e=j(this),r=fn(e),n=re(t,arguments.length>1?arguments[1]:void 0,3),o=new(hn(e,it("Map"))),i=ee(o.set);return Fr(r,function(t,r){i.call(o,n(r,t,e),r)},void 0,!0,!0),o}}),Lt({target:"Map",proto:!0,real:!0,forced:q},{mapValues:function(t){var e=j(this),r=fn(e),n=re(t,arguments.length>1?arguments[1]:void 0,3),o=new(hn(e,it("Map"))),i=ee(o.set);return Fr(r,function(t,r){i.call(o,t,n(r,t,e))},void 0,!0,!0),o}}),Lt({target:"Map",proto:!0,real:!0,forced:q},{merge:function(t){for(var e=j(this),r=ee(e.set),n=0;n1?arguments[1]:void 0,3);return Fr(r,function(t,r){if(n(r,t,e))return Fr.stop()},void 0,!0,!0).stopped}}),Lt({target:"Map",proto:!0,real:!0,forced:q},{update:function(t,e){var r=j(this),n=arguments.length;ee(e);var o=r.has(t);if(!o&&n<3)throw TypeError("Updating absent value");var i=o?r.get(t):ee(n>2?arguments[2]:void 0)(t,r);return r.set(t,e(i,t,r)),r}});var pn=function(t,e){var r,n=j(this),o=arguments.length>2?arguments[2]:void 0;if("function"!=typeof e&&"function"!=typeof o)throw TypeError("At least one callback required");return n.has(t)?(r=n.get(t),"function"==typeof e&&(r=e(r),n.set(t,r))):"function"==typeof o&&(r=o(),n.set(t,r)),r};Lt({target:"Map",proto:!0,real:!0,forced:q},{upsert:pn}),Lt({target:"Map",proto:!0,real:!0,forced:q},{updateOrInsert:pn});var dn="\t\n\v\f\r \u2028\u2029\ufeff",vn="["+dn+"]",gn=RegExp("^"+vn+vn+"*"),yn=RegExp(vn+vn+"*$"),mn=function(t){return function(e){var r=String(v(e));return 1&t&&(r=r.replace(gn,"")),2&t&&(r=r.replace(yn,"")),r}},bn={start:mn(1),end:mn(2),trim:mn(3)},wn=wt.f,Sn=R.f,En=I.f,xn=bn.trim,An="Number",On=n[An],Rn=On.prototype,jn=h(Jt(Rn))==An,Pn=function(t){var e,r,n,o,i,a,u,s,c=m(t,!1);if("string"==typeof c&&c.length>2)if(43===(e=(c=xn(c)).charCodeAt(0))||45===e){if(88===(r=c.charCodeAt(2))||120===r)return NaN}else if(48===e){switch(c.charCodeAt(1)){case 66:case 98:n=2,o=49;break;case 79:case 111:n=8,o=55;break;default:return+c}for(a=(i=c.slice(2)).length,u=0;uo)return NaN;return parseInt(i,n)}return+c};if(Tt(An,!On(" 0o1")||!On("0b1")||On("+0x1"))){for(var In,Tn=function(t){var e=arguments.length<1?0:t,r=this;return r instanceof Tn&&(jn?o(function(){Rn.valueOf.call(r)}):h(r)!=An)?Dr(new On(Pn(e)),r,Tn):Pn(e)},kn=i?wn(On):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),Ln=0;kn.length>Ln;Ln++)w(On,In=kn[Ln])&&!w(Tn,In)&&En(Tn,In,Sn(On,In));Tn.prototype=Rn,Rn.constructor=Tn,rt(n,An,Tn)}Lt({target:"Number",stat:!0},{EPSILON:Math.pow(2,-52)});var Un=n.isFinite;Lt({target:"Number",stat:!0},{isFinite:Number.isFinite||function(t){return"number"==typeof t&&Un(t)}});var Mn=Math.floor,_n=function(t){return!y(t)&&isFinite(t)&&Mn(t)===t};Lt({target:"Number",stat:!0},{isInteger:_n}),Lt({target:"Number",stat:!0},{isNaN:function(t){return t!=t}});var Nn=Math.abs;Lt({target:"Number",stat:!0},{isSafeInteger:function(t){return _n(t)&&Nn(t)<=9007199254740991}}),Lt({target:"Number",stat:!0},{MAX_SAFE_INTEGER:9007199254740991}),Lt({target:"Number",stat:!0},{MIN_SAFE_INTEGER:-9007199254740991});var Cn=bn.trim,Fn=n.parseFloat,Bn=1/Fn(dn+"-0")!=-Infinity?function(t){var e=Cn(String(t)),r=Fn(e);return 0===r&&"-"==e.charAt(0)?-0:r}:Fn;Lt({target:"Number",stat:!0,forced:Number.parseFloat!=Bn},{parseFloat:Bn});var Dn=bn.trim,qn=n.parseInt,zn=/^[+-]?0[Xx]/,Wn=8!==qn(dn+"08")||22!==qn(dn+"0x16")?function(t,e){var r=Dn(String(t));return qn(r,e>>>0||(zn.test(r)?16:10))}:qn;Lt({target:"Number",stat:!0,forced:Number.parseInt!=Wn},{parseInt:Wn});var Kn=c.f,Gn=function(t){return function(e){for(var r,n=g(e),o=zt(n),a=o.length,u=0,s=[];a>u;)r=o[u++],i&&!Kn.call(n,r)||s.push(t?[r,n[r]]:n[r]);return s}},$n={entries:Gn(!0),values:Gn(!1)},Vn=$n.entries;Lt({target:"Object",stat:!0},{entries:function(t){return Vn(t)}}),Lt({target:"Object",stat:!0,sham:!i},{getOwnPropertyDescriptors:function(t){for(var e,r,n=g(t),o=R.f,i=Et(n),a={},u=0;i.length>u;)void 0!==(r=o(n,e=i[u++]))&&sr(a,e,r);return a}});var Hn=o(function(){zt(1)});Lt({target:"Object",stat:!0,forced:Hn},{keys:function(t){return zt(Ut(t))}});var Xn=Object.is||function(t,e){return t===e?0!==t||1/t==1/e:t!=t&&e!=e};Lt({target:"Object",stat:!0},{is:Xn});var Yn=$n.values;Lt({target:"Object",stat:!0},{values:function(t){return Yn(t)}});var Jn=it("Reflect","apply"),Qn=Function.apply,Zn=!o(function(){Jn(function(){})});Lt({target:"Reflect",stat:!0,forced:Zn},{apply:function(t,e,r){return ee(t),j(r),Jn?Jn(t,e,r):Qn.call(t,e,r)}});var to=[].slice,eo={},ro=Function.bind||function(t){var e=ee(this),r=to.call(arguments,1),n=function(){var o=r.concat(to.call(arguments));return this instanceof n?function(t,e,r){if(!(e in eo)){for(var n=[],o=0;o-1)&&(e=e.replace(/y/g,""));var a=Dr(hi?new si(t,e):si(t,e),n?this:ci,di);return pi&&r&&ai(a,{sticky:r}),a},vi=function(t){t in di||oi(di,t,{configurable:!0,get:function(){return si[t]},set:function(e){si[t]=e}})},gi=ii(si),yi=0;gi.length>yi;)vi(gi[yi++]);ci.constructor=di,di.prototype=ci,rt(n,"RegExp",di)}Kr("RegExp");var mi="toString",bi=RegExp.prototype,wi=bi[mi];(o(function(){return"/a/b"!=wi.call({source:"a",flags:"b"})})||wi.name!=mi)&&rt(RegExp.prototype,mi,function(){var t=j(this),e=String(t.source),r=t.flags;return"/"+e+"/"+String(void 0===r&&t instanceof RegExp&&!("flags"in bi)?Zo.call(t):r)},{unsafe:!0});var Si=RegExp.prototype.exec,Ei=String.prototype.replace,xi=Si,Ai=function(){var t=/a/,e=/b*/g;return Si.call(t,"a"),Si.call(e,"a"),0!==t.lastIndex||0!==e.lastIndex}(),Oi=ni.UNSUPPORTED_Y||ni.BROKEN_CARET,Ri=void 0!==/()??/.exec("")[1];(Ai||Ri||Oi)&&(xi=function(t){var e,r,n,o,i=this,a=Oi&&i.sticky,u=Zo.call(i),s=i.source,c=0,f=t;return a&&(-1===(u=u.replace("y","")).indexOf("g")&&(u+="g"),f=String(t).slice(i.lastIndex),i.lastIndex>0&&(!i.multiline||i.multiline&&"\n"!==t[i.lastIndex-1])&&(s="(?: "+s+")",f=" "+f,c++),r=new RegExp("^(?:"+s+")",u)),Ri&&(r=new RegExp("^"+s+"$(?!\\s)",u)),Ai&&(e=i.lastIndex),n=Si.call(a?r:i,f),a?n?(n.input=n.input.slice(c),n[0]=n[0].slice(c),n.index=i.lastIndex,i.lastIndex+=n[0].length):i.lastIndex=0:Ai&&n&&(i.lastIndex=i.global?n.index+n[0].length:e),Ri&&n&&n.length>1&&Ei.call(n[0],r,function(){for(o=1;o")}),Ni="$0"==="a".replace(/./,"$0"),Ci=qt("replace"),Fi=!!/./[Ci]&&""===/./[Ci]("a","$0"),Bi=!o(function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var r="ab".split(t);return 2!==r.length||"a"!==r[0]||"b"!==r[1]}),Di=function(t,e,r,n){var i=qt(t),a=!o(function(){var e={};return e[i]=function(){return 7},7!=""[t](e)}),u=a&&!o(function(){var e=!1,r=/a/;return"split"===t&&((r={}).constructor={},r.constructor[Mi]=function(){return r},r.flags="",r[i]=/./[i]),r.exec=function(){return e=!0,null},r[i](""),!e});if(!a||!u||"replace"===t&&(!_i||!Ni||Fi)||"split"===t&&!Bi){var s=/./[i],c=r(i,""[t],function(t,e,r,n,o){return e.exec===ji?a&&!o?{done:!0,value:s.call(e,r,n)}:{done:!0,value:t.call(r,e,n)}:{done:!1}},{REPLACE_KEEPS_$0:Ni,REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE:Fi}),f=c[1];rt(String.prototype,t,c[0]),rt(RegExp.prototype,i,2==e?function(t,e){return f.call(t,this,e)}:function(t){return f.call(t,this)})}n&&T(RegExp.prototype[i],"sham",!0)},qi=Ie.charAt,zi=function(t,e,r){return e+(r?qi(t,e).length:1)},Wi=function(t,e){var r=t.exec;if("function"==typeof r){var n=r.call(t,e);if("object"!=typeof n)throw TypeError("RegExp exec method returned something other than an Object or null");return n}if("RegExp"!==h(t))throw TypeError("RegExp#exec called on incompatible receiver");return ji.call(t,e)};Di("match",1,function(t,e,r){return[function(e){var r=v(this),n=null==e?void 0:e[t];return void 0!==n?n.call(e,r):new RegExp(e)[t](String(r))},function(t){var n=r(e,t,this);if(n.done)return n.value;var o=j(t),i=String(this);if(!o.global)return Wi(o,i);var a=o.unicode;o.lastIndex=0;for(var u,s=[],c=0;null!==(u=Wi(o,i));){var f=String(u[0]);s[c]=f,""===f&&(o.lastIndex=zi(i,ft(o.lastIndex),a)),c++}return 0===c?null:s}]});var Ki=Math.max,Gi=Math.min,$i=Math.floor,Vi=/\$([$&'`]|\d\d?|<[^>]*>)/g,Hi=/\$([$&'`]|\d\d?)/g;Di("replace",2,function(t,e,r,n){var o=n.REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE,i=n.REPLACE_KEEPS_$0,a=o?"$":"$0";return[function(r,n){var o=v(this),i=null==r?void 0:r[t];return void 0!==i?i.call(r,o,n):e.call(String(o),r,n)},function(t,n){if(!o&&i||"string"==typeof n&&-1===n.indexOf(a)){var s=r(e,t,this,n);if(s.done)return s.value}var c=j(t),f=String(this),l="function"==typeof n;l||(n=String(n));var h=c.global;if(h){var p=c.unicode;c.lastIndex=0}for(var d=[];;){var v=Wi(c,f);if(null===v)break;if(d.push(v),!h)break;""===String(v[0])&&(c.lastIndex=zi(f,ft(c.lastIndex),p))}for(var g,y="",m=0,b=0;b=m&&(y+=f.slice(m,S)+R,m=S+w.length)}return y+f.slice(m)}];function u(t,r,n,o,i,a){var u=n+t.length,s=o.length,c=Hi;return void 0!==i&&(i=Ut(i),c=Vi),e.call(a,c,function(e,a){var c;switch(a.charAt(0)){case"$":return"$";case"&":return t;case"`":return r.slice(0,n);case"'":return r.slice(u);case"<":c=i[a.slice(1,-1)];break;default:var f=+a;if(0===f)return e;if(f>s){var l=$i(f/10);return 0===l?e:l<=s?void 0===o[l-1]?a.charAt(1):o[l-1]+a.charAt(1):e}c=o[f-1]}return void 0===c?"":c})}}),Di("search",1,function(t,e,r){return[function(e){var r=v(this),n=null==e?void 0:e[t];return void 0!==n?n.call(e,r):new RegExp(e)[t](String(r))},function(t){var n=r(e,t,this);if(n.done)return n.value;var o=j(t),i=String(this),a=o.lastIndex;Xn(a,0)||(o.lastIndex=0);var u=Wi(o,i);return Xn(o.lastIndex,a)||(o.lastIndex=a),null===u?-1:u.index}]});var Xi=[].push,Yi=Math.min,Ji=4294967295,Qi=!o(function(){return!RegExp(Ji,"y")});Di("split",2,function(t,e,r){var n;return n="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,r){var n=String(v(this)),o=void 0===r?Ji:r>>>0;if(0===o)return[];if(void 0===t)return[n];if(!Qo(t))return e.call(n,t,o);for(var i,a,u,s=[],c=0,f=new RegExp(t.source,(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":"")+"g");(i=ji.call(f,n))&&!((a=f.lastIndex)>c&&(s.push(n.slice(c,i.index)),i.length>1&&i.index=o));)f.lastIndex===i.index&&f.lastIndex++;return c===n.length?!u&&f.test("")||s.push(""):s.push(n.slice(c)),s.length>o?s.slice(0,o):s}:"0".split(void 0,0).length?function(t,r){return void 0===t&&0===r?[]:e.call(this,t,r)}:e,[function(e,r){var o=v(this),i=null==e?void 0:e[t];return void 0!==i?i.call(e,o,r):n.call(String(o),e,r)},function(t,o){var i=r(n,t,this,o,n!==e);if(i.done)return i.value;var a=j(t),u=String(this),s=hn(a,RegExp),c=a.unicode,f=new s(Qi?a:"^(?:"+a.source+")",(a.ignoreCase?"i":"")+(a.multiline?"m":"")+(a.unicode?"u":"")+(Qi?"y":"g")),l=void 0===o?Ji:o>>>0;if(0===l)return[];if(0===u.length)return null===Wi(f,u)?[u]:[];for(var h=0,p=0,d=[];p1?arguments[1]:void 0,3);return!Fr(r,function(t){if(!n(t,t,e))return Fr.stop()},void 0,!1,!0).stopped}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{difference:function(t){var e=j(this),r=new(hn(e,it("Set")))(e),n=ee(r.delete);return Fr(t,function(t){n.call(r,t)}),r}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{filter:function(t){var e=j(this),r=ta(e),n=re(t,arguments.length>1?arguments[1]:void 0,3),o=new(hn(e,it("Set"))),i=ee(o.add);return Fr(r,function(t){n(t,t,e)&&i.call(o,t)},void 0,!1,!0),o}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{find:function(t){var e=j(this),r=ta(e),n=re(t,arguments.length>1?arguments[1]:void 0,3);return Fr(r,function(t){if(n(t,t,e))return Fr.stop(t)},void 0,!1,!0).result}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{intersection:function(t){var e=j(this),r=new(hn(e,it("Set"))),n=ee(e.has),o=ee(r.add);return Fr(t,function(t){n.call(e,t)&&o.call(r,t)}),r}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{isDisjointFrom:function(t){var e=j(this),r=ee(e.has);return!Fr(t,function(t){if(!0===r.call(e,t))return Fr.stop()}).stopped}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{isSubsetOf:function(t){var e=cn(this),r=j(t),n=r.has;return"function"!=typeof n&&(r=new(it("Set"))(t),n=ee(r.has)),!Fr(e,function(t){if(!1===n.call(r,t))return Fr.stop()},void 0,!1,!0).stopped}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{isSupersetOf:function(t){var e=j(this),r=ee(e.has);return!Fr(t,function(t){if(!1===r.call(e,t))return Fr.stop()}).stopped}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{join:function(t){var e=j(this),r=ta(e),n=void 0===t?",":String(t),o=[];return Fr(r,o.push,o,!1,!0),o.join(n)}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{map:function(t){var e=j(this),r=ta(e),n=re(t,arguments.length>1?arguments[1]:void 0,3),o=new(hn(e,it("Set"))),i=ee(o.add);return Fr(r,function(t){i.call(o,n(t,t,e))},void 0,!1,!0),o}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{reduce:function(t){var e=j(this),r=ta(e),n=arguments.length<2,o=n?void 0:arguments[1];if(ee(t),Fr(r,function(r){n?(n=!1,o=r):o=t(o,r,r,e)},void 0,!1,!0),n)throw TypeError("Reduce of empty set with no initial value");return o}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{some:function(t){var e=j(this),r=ta(e),n=re(t,arguments.length>1?arguments[1]:void 0,3);return Fr(r,function(t){if(n(t,t,e))return Fr.stop()},void 0,!1,!0).stopped}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{symmetricDifference:function(t){var e=j(this),r=new(hn(e,it("Set")))(e),n=ee(r.delete),o=ee(r.add);return Fr(t,function(t){n.call(r,t)||o.call(r,t)}),r}}),Lt({target:"Set",proto:!0,real:!0,forced:q},{union:function(t){var e=j(this),r=new(hn(e,it("Set")))(e);return Fr(t,ee(r.add),r),r}});var ea,ra,na=it("navigator","userAgent")||"",oa=n.process,ia=oa&&oa.versions,aa=ia&&ia.v8;aa?ra=(ea=aa.split("."))[0]+ea[1]:na&&(!(ea=na.match(/Edge\/(\d+)/))||ea[1]>=74)&&(ea=na.match(/Chrome\/(\d+)/))&&(ra=ea[1]);var ua=ra&&+ra,sa=qt("species"),ca=qt("isConcatSpreadable"),fa=9007199254740991,la="Maximum allowed index exceeded",ha=ua>=51||!o(function(){var t=[];return t[ca]=!1,t.concat()[0]!==t}),pa=ua>=51||!o(function(){var t=[];return(t.constructor={})[sa]=function(){return{foo:1}},1!==t.concat(Boolean).foo}),da=function(t){if(!y(t))return!1;var e=t[ca];return void 0!==e?!!e:ie(t)};Lt({target:"Array",proto:!0,forced:!ha||!pa},{concat:function(t){var e,r,n,o,i,a=Ut(this),u=ue(a,0),s=0;for(e=-1,n=arguments.length;efa)throw TypeError(la);for(r=0;r=fa)throw TypeError(la);sr(u,s++,i)}return u.length=s,u}});var va=wt.f,ga={}.toString,ya="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],ma={f:function(t){return ya&&"[object Window]"==ga.call(t)?function(t){try{return va(t)}catch(t){return ya.slice()}}(t):va(g(t))}},ba={f:qt},wa=I.f,Sa=function(t){var e=nt.Symbol||(nt.Symbol={});w(e,t)||wa(e,t,{value:ba.f(t)})},Ea=fe.forEach,xa=V("hidden"),Aa="Symbol",Oa="prototype",Ra=qt("toPrimitive"),ja=et.set,Pa=et.getterFor(Aa),Ia=Object[Oa],Ta=n.Symbol,ka=it("JSON","stringify"),La=R.f,Ua=I.f,Ma=ma.f,_a=c.f,Na=z("symbols"),Ca=z("op-symbols"),Fa=z("string-to-symbol-registry"),Ba=z("symbol-to-string-registry"),Da=z("wks"),qa=n.QObject,za=!qa||!qa[Oa]||!qa[Oa].findChild,Wa=i&&o(function(){return 7!=Jt(Ua({},"a",{get:function(){return Ua(this,"a",{value:7}).a}})).a})?function(t,e,r){var n=La(Ia,e);n&&delete Ia[e],Ua(t,e,r),n&&t!==Ia&&Ua(Ia,e,n)}:Ua,Ka=function(t,e){var r=Na[t]=Jt(Ta[Oa]);return ja(r,{type:Aa,tag:t,description:e}),i||(r.description=e),r},Ga=Ct?function(t){return"symbol"==typeof t}:function(t){return Object(t)instanceof Ta},$a=function(t,e,r){t===Ia&&$a(Ca,e,r),j(t);var n=m(e,!0);return j(r),w(Na,n)?(r.enumerable?(w(t,xa)&&t[xa][n]&&(t[xa][n]=!1),r=Jt(r,{enumerable:f(0,!1)})):(w(t,xa)||Ua(t,xa,f(1,{})),t[xa][n]=!0),Wa(t,n,r)):Ua(t,n,r)},Va=function(t,e){j(t);var r=g(e),n=zt(r).concat(Ja(r));return Ea(n,function(e){i&&!Ha.call(r,e)||$a(t,e,r[e])}),t},Ha=function(t){var e=m(t,!0),r=_a.call(this,e);return!(this===Ia&&w(Na,e)&&!w(Ca,e))&&(!(r||!w(this,e)||!w(Na,e)||w(this,xa)&&this[xa][e])||r)},Xa=function(t,e){var r=g(t),n=m(e,!0);if(r!==Ia||!w(Na,n)||w(Ca,n)){var o=La(r,n);return!o||!w(Na,n)||w(r,xa)&&r[xa][n]||(o.enumerable=!0),o}},Ya=function(t){var e=Ma(g(t)),r=[];return Ea(e,function(t){w(Na,t)||w(H,t)||r.push(t)}),r},Ja=function(t){var e=t===Ia,r=Ma(e?Ca:g(t)),n=[];return Ea(r,function(t){!w(Na,t)||e&&!w(Ia,t)||n.push(Na[t])}),n};if(Nt||(Ta=function(){if(this instanceof Ta)throw TypeError("Symbol is not a constructor");var t=arguments.length&&void 0!==arguments[0]?String(arguments[0]):void 0,e=G(t),r=function(t){this===Ia&&r.call(Ca,t),w(this,xa)&&w(this[xa],e)&&(this[xa][e]=!1),Wa(this,e,f(1,t))};return i&&za&&Wa(Ia,e,{configurable:!0,set:r}),Ka(e,t)},rt(Ta[Oa],"toString",function(){return Pa(this).tag}),rt(Ta,"withoutSetter",function(t){return Ka(G(t),t)}),c.f=Ha,I.f=$a,R.f=Xa,wt.f=ma.f=Ya,St.f=Ja,ba.f=function(t){return Ka(qt(t),t)},i&&(Ua(Ta[Oa],"description",{configurable:!0,get:function(){return Pa(this).description}}),rt(Ia,"propertyIsEnumerable",Ha,{unsafe:!0}))),Lt({global:!0,wrap:!0,forced:!Nt,sham:!Nt},{Symbol:Ta}),Ea(zt(Da),function(t){Sa(t)}),Lt({target:Aa,stat:!0,forced:!Nt},{for:function(t){var e=String(t);if(w(Fa,e))return Fa[e];var r=Ta(e);return Fa[e]=r,Ba[r]=e,r},keyFor:function(t){if(!Ga(t))throw TypeError(t+" is not a symbol");if(w(Ba,t))return Ba[t]},useSetter:function(){za=!0},useSimple:function(){za=!1}}),Lt({target:"Object",stat:!0,forced:!Nt,sham:!i},{create:function(t,e){return void 0===e?Jt(t):Va(Jt(t),e)},defineProperty:$a,defineProperties:Va,getOwnPropertyDescriptor:Xa}),Lt({target:"Object",stat:!0,forced:!Nt},{getOwnPropertyNames:Ya,getOwnPropertySymbols:Ja}),Lt({target:"Object",stat:!0,forced:o(function(){St.f(1)})},{getOwnPropertySymbols:function(t){return St.f(Ut(t))}}),ka){var Qa=!Nt||o(function(){var t=Ta();return"[null]"!=ka([t])||"{}"!=ka({a:t})||"{}"!=ka(Object(t))});Lt({target:"JSON",stat:!0,forced:Qa},{stringify:function(t,e,r){for(var n,o=[t],i=1;arguments.length>i;)o.push(arguments[i++]);if(n=e,(y(e)||void 0!==t)&&!Ga(t))return ie(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!Ga(e))return e}),o[1]=e,ka.apply(null,o)}})}Ta[Oa][Ra]||T(Ta[Oa],Ra,Ta[Oa].valueOf),Be(Ta,Aa),H[xa]=!0,Sa("asyncIterator");var Za=I.f,tu=n.Symbol;if(i&&"function"==typeof tu&&(!("description"in tu.prototype)||void 0!==tu().description)){var eu={},ru=function(){var t=arguments.length<1||void 0===arguments[0]?void 0:String(arguments[0]),e=this instanceof ru?new tu(t):void 0===t?tu():tu(t);return""===t&&(eu[e]=!0),e};xt(ru,tu);var nu=ru.prototype=tu.prototype;nu.constructor=ru;var ou=nu.toString,iu="Symbol(test)"==String(tu("test")),au=/^Symbol\((.*)\)[^)]+$/;Za(nu,"description",{configurable:!0,get:function(){var t=y(this)?this.valueOf():this,e=ou.call(t);if(w(eu,t))return"";var r=iu?e.slice(7,-1):e.replace(au,"$1");return""===r?void 0:r}}),Lt({global:!0,forced:!0},{Symbol:ru})}Sa("hasInstance"),Sa("isConcatSpreadable"),Sa("iterator"),Sa("match"),Sa("matchAll"),Sa("replace"),Sa("search"),Sa("species"),Sa("split"),Sa("toPrimitive"),Sa("toStringTag"),Sa("unscopables"),Be(Math,"Math",!0),Be(n.JSON,"JSON",!0),Sa("asyncDispose"),Sa("dispose"),Sa("observable"),Sa("patternMatch"),Sa("replaceAll"),ba.f("asyncIterator");var uu=Ie.codeAt;Lt({target:"String",proto:!0},{codePointAt:function(t){return uu(this,t)}}),oe("String","codePointAt");var su,cu=function(t){if(Qo(t))throw TypeError("The method doesn't accept regular expressions");return t},fu=qt("match"),lu=function(t){var e=/./;try{"/./"[t](e)}catch(r){try{return e[fu]=!1,"/./"[t](e)}catch(t){}}return!1},hu=R.f,pu="".endsWith,du=Math.min,vu=lu("endsWith"),gu=!(vu||(su=hu(String.prototype,"endsWith"),!su||su.writable));Lt({target:"String",proto:!0,forced:!gu&&!vu},{endsWith:function(t){var e=String(v(this));cu(t);var r=arguments.length>1?arguments[1]:void 0,n=ft(e.length),o=void 0===r?n:du(ft(r),n),i=String(t);return pu?pu.call(e,i,o):e.slice(o-i.length,o)===i}}),oe("String","endsWith");var yu=String.fromCharCode,mu=String.fromCodePoint;Lt({target:"String",stat:!0,forced:!!mu&&1!=mu.length},{fromCodePoint:function(t){for(var e,r=[],n=arguments.length,o=0;n>o;){if(e=+arguments[o++],pt(e,1114111)!==e)throw RangeError(e+" is not a valid code point");r.push(e<65536?yu(e):yu(55296+((e-=65536)>>10),e%1024+56320))}return r.join("")}}),Lt({target:"String",proto:!0,forced:!lu("includes")},{includes:function(t){return!!~String(v(this)).indexOf(cu(t),arguments.length>1?arguments[1]:void 0)}}),oe("String","includes");var bu="".repeat||function(t){var e=String(v(this)),r="",n=st(t);if(n<0||Infinity==n)throw RangeError("Wrong number of repetitions");for(;n>0;(n>>>=1)&&(e+=e))1&n&&(r+=e);return r},wu=Math.ceil,Su=function(t){return function(e,r,n){var o,i,a=String(v(e)),u=a.length,s=void 0===n?" ":String(n),c=ft(r);return c<=u||""==s?a:((i=bu.call(s,wu((o=c-u)/s.length))).length>o&&(i=i.slice(0,o)),t?a+i:i+a)}},Eu={start:Su(!1),end:Su(!0)},xu=/Version\/10\.\d+(\.\d+)?( Mobile\/\w+)? Safari\//.test(na),Au=Eu.start;Lt({target:"String",proto:!0,forced:xu},{padStart:function(t){return Au(this,t,arguments.length>1?arguments[1]:void 0)}}),oe("String","padStart");var Ou=Eu.end;Lt({target:"String",proto:!0,forced:xu},{padEnd:function(t){return Ou(this,t,arguments.length>1?arguments[1]:void 0)}}),oe("String","padEnd"),Lt({target:"String",stat:!0},{raw:function(t){for(var e=g(t.raw),r=ft(e.length),n=arguments.length,o=[],i=0;r>i;)o.push(String(e[i++])),i1?arguments[1]:void 0,e.length)),n=String(t);return ju?ju.call(e,n,r):e.slice(r,r+n.length)===n}}),oe("String","startsWith");var ku=function(t){return o(function(){return!!dn[t]()||"
"!="
"[t]()||dn[t].name!==t})},Lu=bn.start,Uu=ku("trimStart"),Mu=Uu?function(){return Lu(this)}:"".trimStart;Lt({target:"String",proto:!0,forced:Uu},{trimStart:Mu,trimLeft:Mu}),oe("String","trimLeft");var _u=bn.end,Nu=ku("trimEnd"),Cu=Nu?function(){return _u(this)}:"".trimEnd;Lt({target:"String",proto:!0,forced:Nu},{trimEnd:Cu,trimRight:Cu}),oe("String","trimRight");var Fu=qt("iterator"),Bu=!o(function(){var t=new URL("b?a=1&b=2&c=3","http://a"),e=t.searchParams,r="";return t.pathname="c%20d",e.forEach(function(t,n){e.delete("b"),r+=n+t}),!e.sort||"http://a/c%20d?a=1&c=3"!==t.href||"3"!==e.get("c")||"a=1"!==String(new URLSearchParams("?a=1"))||!e[Fu]||"a"!==new URL("https://a@b").username||"b"!==new URLSearchParams(new URLSearchParams("a=b")).get("a")||"xn--e1aybc"!==new URL("http://тест").host||"#%D0%B1"!==new URL("http://a#б").hash||"a1c3"!==r||"x"!==new URL("http://x",void 0).host}),Du=Object.assign,qu=Object.defineProperty,zu=!Du||o(function(){if(i&&1!==Du({b:1},Du(qu({},"a",{enumerable:!0,get:function(){qu(this,"b",{value:3,enumerable:!1})}}),{b:2})).b)return!0;var t={},e={},r=Symbol(),n="abcdefghijklmnopqrst";return t[r]=7,n.split("").forEach(function(t){e[t]=t}),7!=Du({},t)[r]||zt(Du({},e)).join("")!=n})?function(t,e){for(var r=Ut(t),n=arguments.length,o=1,a=St.f,u=c.f;n>o;)for(var s,f=d(arguments[o++]),l=a?zt(f).concat(a(f)):zt(f),h=l.length,p=0;h>p;)s=l[p++],i&&!u.call(f,s)||(r[s]=f[s]);return r}:Du,Wu=2147483647,Ku=/[^\0-\u007E]/,Gu=/[.\u3002\uFF0E\uFF61]/g,$u="Overflow: input needs wider integers to process",Vu=Math.floor,Hu=String.fromCharCode,Xu=function(t){return t+22+75*(t<26)},Yu=function(t,e,r){var n=0;for(t=r?Vu(t/700):t>>1,t+=Vu(t/e);t>455;n+=36)t=Vu(t/35);return Vu(n+36*t/(t+38))},Ju=function(t){var e=[];t=function(t){for(var e=[],r=0,n=t.length;r=55296&&o<=56319&&r=i&&nVu((Wu-a)/l))throw RangeError($u);for(a+=(f-i)*l,i=f,r=0;rWu)throw RangeError($u);if(n==i){for(var h=a,p=36;;p+=36){var d=p<=u?1:p>=u+26?26:p-u;if(h0?arguments[0]:void 0,f=[];if(ns(this,{type:es,entries:f,updateURL:function(){},updateSearchParams:gs}),void 0!==c)if(y(c))if("function"==typeof(t=vr(c)))for(r=(e=t.call(c)).next;!(n=r.call(e)).done;){if((a=(i=(o=cn(j(n.value))).next).call(o)).done||(u=i.call(o)).done||!i.call(o).done)throw TypeError("Expected sequence with length 2");f.push({key:a.value+"",value:u.value+""})}else for(s in c)w(c,s)&&f.push({key:s,value:c[s]+""});else vs(f,"string"==typeof c?"?"===c.charAt(0)?c.slice(1):c:c+"")},ws=bs.prototype;zr(ws,{append:function(t,e){ys(arguments.length,2);var r=os(this);r.entries.push({key:t+"",value:e+""}),r.updateURL()},delete:function(t){ys(arguments.length,1);for(var e=os(this),r=e.entries,n=t+"",o=0;ot.key){o.splice(e,0,t);break}e===r&&o.push(t)}n.updateURL()},forEach:function(t){for(var e,r=os(this).entries,n=re(t,arguments.length>1?arguments[1]:void 0,3),o=0;o1&&(y(e=arguments[1])&&pr(r=e.body)===es&&((n=e.headers?new Zu(e.headers):new Zu).has("content-type")||n.set("content-type","application/x-www-form-urlencoded;charset=UTF-8"),e=Jt(e,{body:f(0,String(r)),headers:f(0,n)})),o.push(e)),Qu.apply(this,o)}});var Ss,Es={URLSearchParams:bs,getState:os},xs=Ie.codeAt,As=n.URL,Os=Es.URLSearchParams,Rs=Es.getState,js=et.set,Ps=et.getterFor("URL"),Is=Math.floor,Ts=Math.pow,ks="Invalid scheme",Ls="Invalid host",Us="Invalid port",Ms=/[A-Za-z]/,_s=/[\d+-.A-Za-z]/,Ns=/\d/,Cs=/^(0x|0X)/,Fs=/^[0-7]+$/,Bs=/^\d+$/,Ds=/^[\dA-Fa-f]+$/,qs=/[\u0000\u0009\u000A\u000D #%/:?@[\\]]/,zs=/[\u0000\u0009\u000A\u000D #/:?@[\\]]/,Ws=/^[\u0000-\u001F ]+|[\u0000-\u001F ]+$/g,Ks=/[\u0009\u000A\u000D]/g,Gs=function(t,e){var r,n,o;if("["==e.charAt(0)){if("]"!=e.charAt(e.length-1))return Ls;if(!(r=Vs(e.slice(1,-1))))return Ls;t.host=r}else if(ec(t)){if(e=function(t){var e,r,n=[],o=t.toLowerCase().replace(Gu,".").split(".");for(e=0;e4)return t;for(r=[],n=0;n1&&"0"==o.charAt(0)&&(i=Cs.test(o)?16:8,o=o.slice(8==i?1:2)),""===o)a=0;else{if(!(10==i?Bs:8==i?Fs:Ds).test(o))return t;a=parseInt(o,i)}r.push(a)}for(n=0;n=Ts(256,5-e))return null}else if(a>255)return null;for(u=r.pop(),n=0;n6)return;for(n=0;h();){if(o=null,n>0){if(!("."==h()&&n<4))return;l++}if(!Ns.test(h()))return;for(;Ns.test(h());){if(i=parseInt(h(),10),null===o)o=i;else{if(0==o)return;o=10*o+i}if(o>255)return;l++}s[c]=256*s[c]+o,2!=++n&&4!=n||c++}if(4!=n)return;break}if(":"==h()){if(l++,!h())return}else if(h())return;s[c++]=e}else{if(null!==f)return;l++,f=++c}}if(null!==f)for(a=c-f,c=7;0!=c&&a>0;)u=s[c],s[c--]=s[f+a-1],s[f+--a]=u;else if(8!=c)return;return s},Hs=function(t){var e,r,n,o;if("number"==typeof t){for(e=[],r=0;r<4;r++)e.unshift(t%256),t=Is(t/256);return e.join(".")}if("object"==typeof t){for(e="",n=function(t){for(var e=null,r=1,n=null,o=0,i=0;i<8;i++)0!==t[i]?(o>r&&(e=n,r=o),n=null,o=0):(null===n&&(n=i),++o);return o>r&&(e=n,r=o),e}(t),r=0;r<8;r++)o&&0===t[r]||(o&&(o=!1),n===r?(e+=r?":":"::",o=!0):(e+=t[r].toString(16),r<7&&(e+=":")));return"["+e+"]"}return t},Xs={},Ys=zu({},Xs,{" ":1,'"':1,"<":1,">":1,"`":1}),Js=zu({},Ys,{"#":1,"?":1,"{":1,"}":1}),Qs=zu({},Js,{"/":1,":":1,";":1,"=":1,"@":1,"[":1,"\\":1,"]":1,"^":1,"|":1}),Zs=function(t,e){var r=xs(t,0);return r>32&&r<127&&!w(e,t)?t:encodeURIComponent(t)},tc={ftp:21,file:null,http:80,https:443,ws:80,wss:443},ec=function(t){return w(tc,t.scheme)},rc=function(t){return""!=t.username||""!=t.password},nc=function(t){return!t.host||t.cannotBeABaseURL||"file"==t.scheme},oc=function(t,e){var r;return 2==t.length&&Ms.test(t.charAt(0))&&(":"==(r=t.charAt(1))||!e&&"|"==r)},ic=function(t){var e;return t.length>1&&oc(t.slice(0,2))&&(2==t.length||"/"===(e=t.charAt(2))||"\\"===e||"?"===e||"#"===e)},ac=function(t){var e=t.path,r=e.length;!r||"file"==t.scheme&&1==r&&oc(e[0],!0)||e.pop()},uc=function(t){return"."===t||"%2e"===t.toLowerCase()},sc={},cc={},fc={},lc={},hc={},pc={},dc={},vc={},gc={},yc={},mc={},bc={},wc={},Sc={},Ec={},xc={},Ac={},Oc={},Rc={},jc={},Pc={},Ic=function(t,e,r,n){var o,i,a,u,s,c=r||sc,f=0,l="",h=!1,p=!1,d=!1;for(r||(t.scheme="",t.username="",t.password="",t.host=null,t.port=null,t.path=[],t.query=null,t.fragment=null,t.cannotBeABaseURL=!1,e=e.replace(Ws,"")),e=e.replace(Ks,""),o=gr(e);f<=o.length;){switch(i=o[f],c){case sc:if(!i||!Ms.test(i)){if(r)return ks;c=fc;continue}l+=i.toLowerCase(),c=cc;break;case cc:if(i&&(_s.test(i)||"+"==i||"-"==i||"."==i))l+=i.toLowerCase();else{if(":"!=i){if(r)return ks;l="",c=fc,f=0;continue}if(r&&(ec(t)!=w(tc,l)||"file"==l&&(rc(t)||null!==t.port)||"file"==t.scheme&&!t.host))return;if(t.scheme=l,r)return void(ec(t)&&tc[t.scheme]==t.port&&(t.port=null));l="","file"==t.scheme?c=Sc:ec(t)&&n&&n.scheme==t.scheme?c=lc:ec(t)?c=vc:"/"==o[f+1]?(c=hc,f++):(t.cannotBeABaseURL=!0,t.path.push(""),c=Rc)}break;case fc:if(!n||n.cannotBeABaseURL&&"#"!=i)return ks;if(n.cannotBeABaseURL&&"#"==i){t.scheme=n.scheme,t.path=n.path.slice(),t.query=n.query,t.fragment="",t.cannotBeABaseURL=!0,c=Pc;break}c="file"==n.scheme?Sc:pc;continue;case lc:if("/"!=i||"/"!=o[f+1]){c=pc;continue}c=gc,f++;break;case hc:if("/"==i){c=yc;break}c=Oc;continue;case pc:if(t.scheme=n.scheme,i==Ss)t.username=n.username,t.password=n.password,t.host=n.host,t.port=n.port,t.path=n.path.slice(),t.query=n.query;else if("/"==i||"\\"==i&&ec(t))c=dc;else if("?"==i)t.username=n.username,t.password=n.password,t.host=n.host,t.port=n.port,t.path=n.path.slice(),t.query="",c=jc;else{if("#"!=i){t.username=n.username,t.password=n.password,t.host=n.host,t.port=n.port,t.path=n.path.slice(),t.path.pop(),c=Oc;continue}t.username=n.username,t.password=n.password,t.host=n.host,t.port=n.port,t.path=n.path.slice(),t.query=n.query,t.fragment="",c=Pc}break;case dc:if(!ec(t)||"/"!=i&&"\\"!=i){if("/"!=i){t.username=n.username,t.password=n.password,t.host=n.host,t.port=n.port,c=Oc;continue}c=yc}else c=gc;break;case vc:if(c=gc,"/"!=i||"/"!=l.charAt(f+1))continue;f++;break;case gc:if("/"!=i&&"\\"!=i){c=yc;continue}break;case yc:if("@"==i){h&&(l="%40"+l),h=!0,a=gr(l);for(var v=0;v65535)return Us;t.port=ec(t)&&m===tc[t.scheme]?null:m,l=""}if(r)return;c=Ac;continue}return Us}l+=i;break;case Sc:if(t.scheme="file","/"==i||"\\"==i)c=Ec;else{if(!n||"file"!=n.scheme){c=Oc;continue}if(i==Ss)t.host=n.host,t.path=n.path.slice(),t.query=n.query;else if("?"==i)t.host=n.host,t.path=n.path.slice(),t.query="",c=jc;else{if("#"!=i){ic(o.slice(f).join(""))||(t.host=n.host,t.path=n.path.slice(),ac(t)),c=Oc;continue}t.host=n.host,t.path=n.path.slice(),t.query=n.query,t.fragment="",c=Pc}}break;case Ec:if("/"==i||"\\"==i){c=xc;break}n&&"file"==n.scheme&&!ic(o.slice(f).join(""))&&(oc(n.path[0],!0)?t.path.push(n.path[0]):t.host=n.host),c=Oc;continue;case xc:if(i==Ss||"/"==i||"\\"==i||"?"==i||"#"==i){if(!r&&oc(l))c=Oc;else if(""==l){if(t.host="",r)return;c=Ac}else{if(u=Gs(t,l))return u;if("localhost"==t.host&&(t.host=""),r)return;l="",c=Ac}continue}l+=i;break;case Ac:if(ec(t)){if(c=Oc,"/"!=i&&"\\"!=i)continue}else if(r||"?"!=i)if(r||"#"!=i){if(i!=Ss&&(c=Oc,"/"!=i))continue}else t.fragment="",c=Pc;else t.query="",c=jc;break;case Oc:if(i==Ss||"/"==i||"\\"==i&&ec(t)||!r&&("?"==i||"#"==i)){if(".."===(s=(s=l).toLowerCase())||"%2e."===s||".%2e"===s||"%2e%2e"===s?(ac(t),"/"==i||"\\"==i&&ec(t)||t.path.push("")):uc(l)?"/"==i||"\\"==i&&ec(t)||t.path.push(""):("file"==t.scheme&&!t.path.length&&oc(l)&&(t.host&&(t.host=""),l=l.charAt(0)+":"),t.path.push(l)),l="","file"==t.scheme&&(i==Ss||"?"==i||"#"==i))for(;t.path.length>1&&""===t.path[0];)t.path.shift();"?"==i?(t.query="",c=jc):"#"==i&&(t.fragment="",c=Pc)}else l+=Zs(i,Js);break;case Rc:"?"==i?(t.query="",c=jc):"#"==i?(t.fragment="",c=Pc):i!=Ss&&(t.path[0]+=Zs(i,Xs));break;case jc:r||"#"!=i?i!=Ss&&("'"==i&&ec(t)?t.query+="%27":t.query+="#"==i?"%23":Zs(i,Xs)):(t.fragment="",c=Pc);break;case Pc:i!=Ss&&(t.fragment+=Zs(i,Ys))}f++}},Tc=function(t){var e,r,n=Br(this,Tc,"URL"),o=arguments.length>1?arguments[1]:void 0,a=String(t),u=js(n,{type:"URL"});if(void 0!==o)if(o instanceof Tc)e=Ps(o);else if(r=Ic(e={},String(o)))throw TypeError(r);if(r=Ic(u,a,null,e))throw TypeError(r);var s=u.searchParams=new Os,c=Rs(s);c.updateSearchParams(u.query),c.updateURL=function(){u.query=String(s)||null},i||(n.href=Lc.call(n),n.origin=Uc.call(n),n.protocol=Mc.call(n),n.username=_c.call(n),n.password=Nc.call(n),n.host=Cc.call(n),n.hostname=Fc.call(n),n.port=Bc.call(n),n.pathname=Dc.call(n),n.search=qc.call(n),n.searchParams=zc.call(n),n.hash=Wc.call(n))},kc=Tc.prototype,Lc=function(){var t=Ps(this),e=t.scheme,r=t.username,n=t.password,o=t.host,i=t.port,a=t.path,u=t.query,s=t.fragment,c=e+":";return null!==o?(c+="//",rc(t)&&(c+=r+(n?":"+n:"")+"@"),c+=Hs(o),null!==i&&(c+=":"+i)):"file"==e&&(c+="//"),c+=t.cannotBeABaseURL?a[0]:a.length?"/"+a.join("/"):"",null!==u&&(c+="?"+u),null!==s&&(c+="#"+s),c},Uc=function(){var t=Ps(this),e=t.scheme,r=t.port;if("blob"==e)try{return new URL(e.path[0]).origin}catch(t){return"null"}return"file"!=e&&ec(t)?e+"://"+Hs(t.host)+(null!==r?":"+r:""):"null"},Mc=function(){return Ps(this).scheme+":"},_c=function(){return Ps(this).username},Nc=function(){return Ps(this).password},Cc=function(){var t=Ps(this),e=t.host,r=t.port;return null===e?"":null===r?Hs(e):Hs(e)+":"+r},Fc=function(){var t=Ps(this).host;return null===t?"":Hs(t)},Bc=function(){var t=Ps(this).port;return null===t?"":String(t)},Dc=function(){var t=Ps(this),e=t.path;return t.cannotBeABaseURL?e[0]:e.length?"/"+e.join("/"):""},qc=function(){var t=Ps(this).query;return t?"?"+t:""},zc=function(){return Ps(this).searchParams},Wc=function(){var t=Ps(this).fragment;return t?"#"+t:""},Kc=function(t,e){return{get:t,set:e,configurable:!0,enumerable:!0}};if(i&&Wt(kc,{href:Kc(Lc,function(t){var e=Ps(this),r=String(t),n=Ic(e,r);if(n)throw TypeError(n);Rs(e.searchParams).updateSearchParams(e.query)}),origin:Kc(Uc),protocol:Kc(Mc,function(t){var e=Ps(this);Ic(e,String(t)+":",sc)}),username:Kc(_c,function(t){var e=Ps(this),r=gr(String(t));if(!nc(e)){e.username="";for(var n=0;nr;)e.push(arguments[r++]);return af[++of]=function(){("function"==typeof t?t:Function(t)).apply(void 0,e)},Vc(of),of},tf=function(t){delete af[t]},"process"==h(ef)?Vc=function(t){ef.nextTick(cf(t))}:nf&&nf.now?Vc=function(t){nf.now(cf(t))}:rf&&!Jc?(Xc=(Hc=new rf).port2,Hc.port1.onmessage=ff,Vc=re(Xc.postMessage,Xc,1)):!n.addEventListener||"function"!=typeof postMessage||n.importScripts||o(lf)||"file:"===Qc.protocol?Vc=uf in x("script")?function(t){Kt.appendChild(x("script"))[uf]=function(){Kt.removeChild(this),sf(t)}}:function(t){setTimeout(cf(t),0)}:(Vc=lf,n.addEventListener("message",ff,!1)));var hf,pf,df,vf,gf,yf,mf,bf,wf={set:Zc,clear:tf},Sf=R.f,Ef=wf.set,xf=n.MutationObserver||n.WebKitMutationObserver,Af=n.process,Of=n.Promise,Rf="process"==h(Af),jf=Sf(n,"queueMicrotask"),Pf=jf&&jf.value;Pf||(hf=function(){var t,e;for(Rf&&(t=Af.domain)&&t.exit();pf;){e=pf.fn,pf=pf.next;try{e()}catch(t){throw pf?vf():df=void 0,t}}df=void 0,t&&t.enter()},Rf?vf=function(){Af.nextTick(hf)}:xf&&!Jc?(gf=!0,yf=document.createTextNode(""),new xf(hf).observe(yf,{characterData:!0}),vf=function(){yf.data=gf=!gf}):Of&&Of.resolve?(mf=Of.resolve(void 0),bf=mf.then,vf=function(){bf.call(mf,hf)}):vf=function(){Ef.call(n,hf)});var If,Tf,kf,Lf,Uf=Pf||function(t){var e={fn:t,next:void 0};df&&(df.next=e),pf||(pf=e,vf()),df=e},Mf=function(t){var e,r;this.promise=new t(function(t,n){if(void 0!==e||void 0!==r)throw TypeError("Bad Promise constructor");e=t,r=n}),this.resolve=ee(e),this.reject=ee(r)},_f={f:function(t){return new Mf(t)}},Nf=function(t,e){if(j(t),y(e)&&e.constructor===t)return e;var r=_f.f(t);return(0,r.resolve)(e),r.promise},Cf=function(t){try{return{error:!1,value:t()}}catch(t){return{error:!0,value:t}}},Ff=wf.set,Bf=qt("species"),Df="Promise",qf=et.get,zf=et.set,Wf=et.getterFor(Df),Kf=Yc,Gf=n.TypeError,$f=n.document,Vf=n.process,Hf=it("fetch"),Xf=_f.f,Yf=Xf,Jf="process"==h(Vf),Qf=!!($f&&$f.createEvent&&n.dispatchEvent),Zf="unhandledrejection",tl=Tt(Df,function(){if(F(Kf)===String(Kf)){if(66===ua)return!0;if(!Jf&&"function"!=typeof PromiseRejectionEvent)return!0}if(ua>=51&&/native code/.test(Kf))return!1;var t=Kf.resolve(1),e=function(t){t(function(){},function(){})};return(t.constructor={})[Bf]=e,!(t.then(function(){})instanceof e)}),el=tl||!Sr(function(t){Kf.all(t).catch(function(){})}),rl=function(t){var e;return!(!y(t)||"function"!=typeof(e=t.then))&&e},nl=function(t,e,r){if(!e.notified){e.notified=!0;var n=e.reactions;Uf(function(){for(var o=e.value,i=1==e.state,a=0;n.length>a;){var u,s,c,f=n[a++],l=i?f.ok:f.fail,h=f.resolve,p=f.reject,d=f.domain;try{l?(i||(2===e.rejection&&ul(t,e),e.rejection=1),!0===l?u=o:(d&&d.enter(),u=l(o),d&&(d.exit(),c=!0)),u===f.promise?p(Gf("Promise-chain cycle")):(s=rl(u))?s.call(u,h,p):h(u)):p(o)}catch(t){d&&!c&&d.exit(),p(t)}}e.reactions=[],e.notified=!1,r&&!e.rejection&&il(t,e)})}},ol=function(t,e,r){var o,i;Qf?((o=$f.createEvent("Event")).promise=e,o.reason=r,o.initEvent(t,!1,!0),n.dispatchEvent(o)):o={promise:e,reason:r},(i=n["on"+t])?i(o):t===Zf&&function(t,e){var r=n.console;r&&r.error&&(1===arguments.length?r.error(t):r.error(t,e))}("Unhandled promise rejection",r)},il=function(t,e){Ff.call(n,function(){var r,n=e.value;if(al(e)&&(r=Cf(function(){Jf?Vf.emit("unhandledRejection",n,t):ol(Zf,t,n)}),e.rejection=Jf||al(e)?2:1,r.error))throw r.value})},al=function(t){return 1!==t.rejection&&!t.parent},ul=function(t,e){Ff.call(n,function(){Jf?Vf.emit("rejectionHandled",t):ol("rejectionhandled",t,e.value)})},sl=function(t,e,r,n){return function(o){t(e,r,o,n)}},cl=function(t,e,r,n){e.done||(e.done=!0,n&&(e=n),e.value=r,e.state=2,nl(t,e,!0))},fl=function(t,e,r,n){if(!e.done){e.done=!0,n&&(e=n);try{if(t===r)throw Gf("Promise can't be resolved itself");var o=rl(r);o?Uf(function(){var n={done:!1};try{o.call(r,sl(fl,t,n,e),sl(cl,t,n,e))}catch(r){cl(t,n,r,e)}}):(e.value=r,e.state=1,nl(t,e,!1))}catch(r){cl(t,{done:!1},r,e)}}};tl&&(Kf=function(t){Br(this,Kf,Df),ee(t),If.call(this);var e=qf(this);try{t(sl(fl,this,e),sl(cl,this,e))}catch(t){cl(this,e,t)}},(If=function(t){zf(this,{type:Df,done:!1,notified:!1,parent:!1,reactions:[],rejection:!1,state:0,value:void 0})}).prototype=zr(Kf.prototype,{then:function(t,e){var r=Wf(this),n=Xf(hn(this,Kf));return n.ok="function"!=typeof t||t,n.fail="function"==typeof e&&e,n.domain=Jf?Vf.domain:void 0,r.parent=!0,r.reactions.push(n),0!=r.state&&nl(this,r,!1),n.promise},catch:function(t){return this.then(void 0,t)}}),Tf=function(){var t=new If,e=qf(t);this.promise=t,this.resolve=sl(fl,t,e),this.reject=sl(cl,t,e)},_f.f=Xf=function(t){return t===Kf||t===kf?new Tf(t):Yf(t)},"function"==typeof Yc&&(Lf=Yc.prototype.then,rt(Yc.prototype,"then",function(t,e){var r=this;return new Kf(function(t,e){Lf.call(r,t,e)}).then(t,e)},{unsafe:!0}),"function"==typeof Hf&&Lt({global:!0,enumerable:!0,forced:!0},{fetch:function(t){return Nf(Kf,Hf.apply(n,arguments))}}))),Lt({global:!0,wrap:!0,forced:tl},{Promise:Kf}),Be(Kf,Df,!1),Kr(Df),kf=it(Df),Lt({target:Df,stat:!0,forced:tl},{reject:function(t){var e=Xf(this);return e.reject.call(void 0,t),e.promise}}),Lt({target:Df,stat:!0,forced:tl},{resolve:function(t){return Nf(this,t)}}),Lt({target:Df,stat:!0,forced:el},{all:function(t){var e=this,r=Xf(e),n=r.resolve,o=r.reject,i=Cf(function(){var r=ee(e.resolve),i=[],a=0,u=1;Fr(t,function(t){var s=a++,c=!1;i.push(void 0),u++,r.call(e,t).then(function(t){c||(c=!0,i[s]=t,--u||n(i))},o)}),--u||n(i)});return i.error&&o(i.value),r.promise},race:function(t){var e=this,r=Xf(e),n=r.reject,o=Cf(function(){var o=ee(e.resolve);Fr(t,function(t){o.call(e,t).then(r.resolve,n)})});return o.error&&n(o.value),r.promise}}),Lt({target:"Promise",stat:!0},{allSettled:function(t){var e=this,r=_f.f(e),n=r.resolve,o=r.reject,i=Cf(function(){var r=ee(e.resolve),o=[],i=0,a=1;Fr(t,function(t){var u=i++,s=!1;o.push(void 0),a++,r.call(e,t).then(function(t){s||(s=!0,o[u]={status:"fulfilled",value:t},--a||n(o))},function(t){s||(s=!0,o[u]={status:"rejected",reason:t},--a||n(o))})}),--a||n(o)});return i.error&&o(i.value),r.promise}});var ll=!!Yc&&o(function(){Yc.prototype.finally.call({then:function(){}},function(){})});Lt({target:"Promise",proto:!0,real:!0,forced:ll},{finally:function(t){var e=hn(this,it("Promise")),r="function"==typeof t;return this.then(r?function(r){return Nf(e,t()).then(function(){return r})}:t,r?function(r){return Nf(e,t()).then(function(){throw r})}:t)}}),"function"!=typeof Yc||Yc.prototype.finally||rt(Yc.prototype,"finally",it("Promise").prototype.finally);var hl=et.set,pl=et.getterFor("AggregateError"),dl=function(t,e){var r=this;if(!(r instanceof dl))return new dl(t,e);Ge&&(r=Ge(new Error(e),Ue(r)));var n=[];return Fr(t,n.push,n),i?hl(r,{errors:n,type:"AggregateError"}):r.errors=n,void 0!==e&&T(r,"message",String(e)),r};dl.prototype=Jt(Error.prototype,{constructor:f(5,dl),message:f(5,""),name:f(5,"AggregateError")}),i&&I.f(dl.prototype,"errors",{get:function(){return pl(this).errors},configurable:!0}),Lt({global:!0},{AggregateError:dl}),Lt({target:"Promise",stat:!0},{try:function(t){var e=_f.f(this),r=Cf(t);return(r.error?e.reject:e.resolve)(r.value),e.promise}});var vl="No one promise resolved";Lt({target:"Promise",stat:!0},{any:function(t){var e=this,r=_f.f(e),n=r.resolve,o=r.reject,i=Cf(function(){var r=ee(e.resolve),i=[],a=0,u=1,s=!1;Fr(t,function(t){var c=a++,f=!1;i.push(void 0),u++,r.call(e,t).then(function(t){f||s||(s=!0,n(t))},function(t){f||s||(f=!0,i[c]=t,--u||o(new(it("AggregateError"))(i,vl)))})}),--u||o(new(it("AggregateError"))(i,vl))});return i.error&&o(i.value),r.promise}}),oe("Promise","finally");var gl="URLSearchParams"in self,yl="Symbol"in self&&"iterator"in Symbol,ml="FileReader"in self&&"Blob"in self&&function(){try{return new Blob,!0}catch(t){return!1}}(),bl="FormData"in self,wl="ArrayBuffer"in self;if(wl)var Sl=["[object Int8Array]","[object Uint8Array]","[object Uint8ClampedArray]","[object Int16Array]","[object Uint16Array]","[object Int32Array]","[object Uint32Array]","[object Float32Array]","[object Float64Array]"],El=ArrayBuffer.isView||function(t){return t&&Sl.indexOf(Object.prototype.toString.call(t))>-1};function xl(t){if("string"!=typeof t&&(t=String(t)),/[^a-z0-9\-#$%&'*+.^_`|~]/i.test(t))throw new TypeError("Invalid character in header field name");return t.toLowerCase()}function Al(t){return"string"!=typeof t&&(t=String(t)),t}function Ol(t){var e={next:function(){var e=t.shift();return{done:void 0===e,value:e}}};return yl&&(e[Symbol.iterator]=function(){return e}),e}function Rl(t){this.map={},t instanceof Rl?t.forEach(function(t,e){this.append(e,t)},this):Array.isArray(t)?t.forEach(function(t){this.append(t[0],t[1])},this):t&&Object.getOwnPropertyNames(t).forEach(function(e){this.append(e,t[e])},this)}function jl(t){if(t.bodyUsed)return Promise.reject(new TypeError("Already read"));t.bodyUsed=!0}function Pl(t){return new Promise(function(e,r){t.onload=function(){e(t.result)},t.onerror=function(){r(t.error)}})}function Il(t){var e=new FileReader,r=Pl(e);return e.readAsArrayBuffer(t),r}function Tl(t){if(t.slice)return t.slice(0);var e=new Uint8Array(t.byteLength);return e.set(new Uint8Array(t)),e.buffer}function kl(){return this.bodyUsed=!1,this._initBody=function(t){var e;this._bodyInit=t,t?"string"==typeof t?this._bodyText=t:ml&&Blob.prototype.isPrototypeOf(t)?this._bodyBlob=t:bl&&FormData.prototype.isPrototypeOf(t)?this._bodyFormData=t:gl&&URLSearchParams.prototype.isPrototypeOf(t)?this._bodyText=t.toString():wl&&ml&&(e=t)&&DataView.prototype.isPrototypeOf(e)?(this._bodyArrayBuffer=Tl(t.buffer),this._bodyInit=new Blob([this._bodyArrayBuffer])):wl&&(ArrayBuffer.prototype.isPrototypeOf(t)||El(t))?this._bodyArrayBuffer=Tl(t):this._bodyText=t=Object.prototype.toString.call(t):this._bodyText="",this.headers.get("content-type")||("string"==typeof t?this.headers.set("content-type","text/plain;charset=UTF-8"):this._bodyBlob&&this._bodyBlob.type?this.headers.set("content-type",this._bodyBlob.type):gl&&URLSearchParams.prototype.isPrototypeOf(t)&&this.headers.set("content-type","application/x-www-form-urlencoded;charset=UTF-8"))},ml&&(this.blob=function(){var t=jl(this);if(t)return t;if(this._bodyBlob)return Promise.resolve(this._bodyBlob);if(this._bodyArrayBuffer)return Promise.resolve(new Blob([this._bodyArrayBuffer]));if(this._bodyFormData)throw new Error("could not read FormData body as blob");return Promise.resolve(new Blob([this._bodyText]))},this.arrayBuffer=function(){return this._bodyArrayBuffer?jl(this)||Promise.resolve(this._bodyArrayBuffer):this.blob().then(Il)}),this.text=function(){var t=jl(this);if(t)return t;if(this._bodyBlob)return function(t){var e=new FileReader,r=Pl(e);return e.readAsText(t),r}(this._bodyBlob);if(this._bodyArrayBuffer)return Promise.resolve(function(t){for(var e=new Uint8Array(t),r=new Array(e.length),n=0;n-1?n:r),this.mode=e.mode||this.mode||null,this.signal=e.signal||this.signal,this.referrer=null,("GET"===this.method||"HEAD"===this.method)&&o)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(o)}function Ml(t){var e=new FormData;return t.trim().split("&").forEach(function(t){if(t){var r=t.split("="),n=r.shift().replace(/\+/g," "),o=r.join("=").replace(/\+/g," ");e.append(decodeURIComponent(n),decodeURIComponent(o))}}),e}function _l(t,e){e||(e={}),this.type="default",this.status=void 0===e.status?200:e.status,this.ok=this.status>=200&&this.status<300,this.statusText="statusText"in e?e.statusText:"OK",this.headers=new Rl(e.headers),this.url=e.url||"",this._initBody(t)}Ul.prototype.clone=function(){return new Ul(this,{body:this._bodyInit})},kl.call(Ul.prototype),kl.call(_l.prototype),_l.prototype.clone=function(){return new _l(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new Rl(this.headers),url:this.url})},_l.error=function(){var t=new _l(null,{status:0,statusText:""});return t.type="error",t};var Nl=[301,302,303,307,308];_l.redirect=function(t,e){if(-1===Nl.indexOf(e))throw new RangeError("Invalid status code");return new _l(null,{status:e,headers:{location:t}})};var Cl=self.DOMException;try{new Cl}catch(t){(Cl=function(t,e){this.message=t,this.name=e;var r=Error(t);this.stack=r.stack}).prototype=Object.create(Error.prototype),Cl.prototype.constructor=Cl}function Fl(t,e){return new Promise(function(r,n){var o=new Ul(t,e);if(o.signal&&o.signal.aborted)return n(new Cl("Aborted","AbortError"));var i=new XMLHttpRequest;function a(){i.abort()}i.onload=function(){var t,e,n={status:i.status,statusText:i.statusText,headers:(t=i.getAllResponseHeaders()||"",e=new Rl,t.replace(/\r?\n[\t ]+/g," ").split(/\r?\n/).forEach(function(t){var r=t.split(":"),n=r.shift().trim();if(n){var o=r.join(":").trim();e.append(n,o)}}),e)};n.url="responseURL"in i?i.responseURL:n.headers.get("X-Request-URL"),r(new _l("response"in i?i.response:i.responseText,n))},i.onerror=function(){n(new TypeError("Network request failed"))},i.ontimeout=function(){n(new TypeError("Network request failed"))},i.onabort=function(){n(new Cl("Aborted","AbortError"))},i.open(o.method,o.url,!0),"include"===o.credentials?i.withCredentials=!0:"omit"===o.credentials&&(i.withCredentials=!1),"responseType"in i&&ml&&(i.responseType="blob"),o.headers.forEach(function(t,e){i.setRequestHeader(e,t)}),o.signal&&(o.signal.addEventListener("abort",a),i.onreadystatechange=function(){4===i.readyState&&o.signal.removeEventListener("abort",a)}),i.send(void 0===o._bodyInit?null:o._bodyInit)})}Fl.polyfill=!0,self.fetch||(self.fetch=Fl,self.Headers=Rl,self.Request=Ul,self.Response=_l);var Bl=Object.getOwnPropertySymbols,Dl=Object.prototype.hasOwnProperty,ql=Object.prototype.propertyIsEnumerable,zl=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},r=0;r<10;r++)e["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(t){n[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var r,n,o=function(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}(t),i=1;i0&&e[i-1][2]>o;i--)e[i]=e[i-1];e[i]=[n,t,o];return}for(var f=1/0,i=0;i=o&&Object.keys(u.O).every(function(e){return u.O[e](n[c])})?n.splice(c--,1):(l=!1,oh1{color:var(--text-header);font-size:24px}.lesson h2{font-size:24px;margin-top:20px;margin-bottom:10px}.lesson h2:after{content:"";display:block;height:3px;margin-top:5px;background:var(--text-header);max-width:300px}.lesson p{clear:both}.lesson li,.lesson p{line-height:180%}.lesson-links{font-size:18px;padding:15px 0}.lesson li li{margin-left:25px}.next{float:right}.prev{float:left}.lesson-title{text-transform:uppercase;font-weight:700}.gatsby-highlight{padding:4px;border-radius:4px;display:flex;justify-content:space-between;flex-direction:column;align-items:stretch}.lesson-content td{border:1px solid #000;padding:8px}.lesson-content td input{min-width:300px}.lesson-content img{margin:5px auto;display:block}.lesson-flex{display:flex;flex-direction:column;justify-content:center;align-items:center}.random-tweet{width:100%;margin-top:90px}.fem-link{text-align:center}.content-container{display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;padding-top:50px}blockquote{padding:15px;background-color:var(--emphasized-bg);border:2px solid var(--emphasized-border);border-radius:5px;width:100%;margin:10px 0}blockquote>:last-child{margin-bottom:0}blockquote>:first-child{margin-top:0}.lesson-content img{max-width:100%}.main-card{max-width:900px;margin:0 auto;overflow:hidden}.lesson-title{font-size:20px;padding:15px 30px}.lesson-content{line-height:1.5}.lesson-text{width:100%;padding:25px 5px 25px 35px;min-height:200px}.sections-name,ol.sections-name{margin:0;padding:0}ol.sections-name{counter-reset:my-awesome-counter;list-style:none;width:98%}ol.sections-name>li{counter-increment:my-awesome-counter;display:flex;flex-direction:row;flex-wrap:wrap;margin-bottom:35px;width:100%;box-shadow:0 4px 10px 0 rgba(0,0,0,.2);border-bottom-right-radius:5px;border-top-right-radius:5px}ol.sections-name .lesson-preface{color:var(--icons);display:flex;position:relative;align-items:center;justify-content:center;background:var(--primary);font-size:100px;padding:25px;width:40%}.lesson-preface.lesson-preface>svg{width:80%;height:inherit;max-height:100px}ol.sections-name .lesson-preface:before{content:counter(my-awesome-counter);position:absolute;top:0;left:5px;font-size:20px;font-weight:700;color:var(--icons)}ol.sections-name .lesson-details{display:flex;flex-basis:100%;flex:1 1;background:var(--bg-lesson);position:relative}.details-bg{--corner-fill:var(--corner-inactive);transition:fill .25s;width:10%;height:0;padding-bottom:10%;background-size:cover;background-repeat:no-repeat;position:absolute;top:0;right:0}.details-bg>svg{width:100%;height:auto}.details-bg>svg path{transition:fill .25s}.lesson-container .details-bg,.lesson-details:hover .details-bg{--corner-fill:var(--corner-active)}@media (min-width:1000px){ol.sections-name>li:before{border-bottom-left-radius:5px;border-top-left-radius:5px}ol.sections-name .lesson-details{border-bottom-right-radius:5px;border-top-right-radius:5px}}@media (max-width:600px){.lesson-container{padding:2px}ol.sections-name .lesson-preface{font-size:60px}}.lesson-details h3{font-size:22px;border-bottom:1px solid var(--less);padding-bottom:10px;display:inline-block;font-weight:700;margin-bottom:20px}.lesson-links{margin-top:45px;margin-bottom:80px}.lesson-links a{border-radius:10px;background:var(--nav-buttons);color:var(--nav-buttons-text);padding:15px 20px;display:inline-block;display:flex;justify-content:center;align-items:center}.lesson-links a.prev{padding-left:10px}.lesson-links a.next{padding-right:10px}.lesson-links a:hover{background:#152837;text-decoration:none}.lesson-links .arrow{font-size:24px;line-height:24px;padding:0 5px}code,pre code{padding:.5rem}code,pre code,pre code.hljs{background-color:var(--emphasized-bg);color:#000}pre code,pre code.hljs{display:block}
+
+/*!
+ * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp-solid,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-feature-settings:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:Font Awesome\ 6 Free}.fa-brands,.fab{font-family:Font Awesome\ 6 Brands}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(-1 * var(--fa-li-width, 2em));position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-color:var(--fa-border-color,#eee);border-radius:var(--fa-border-radius,.1em);border-style:var(--fa-border-style,solid);border-width:var(--fa-border-width,.08em);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{animation-name:fa-flip;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{animation-name:fa-spin;animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation-delay:-1ms;animation-duration:1ms;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}24%,8%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}.fa-0:before{content:"\30"}.fa-1:before{content:"\31"}.fa-2:before{content:"\32"}.fa-3:before{content:"\33"}.fa-4:before{content:"\34"}.fa-5:before{content:"\35"}.fa-6:before{content:"\36"}.fa-7:before{content:"\37"}.fa-8:before{content:"\38"}.fa-9:before{content:"\39"}.fa-fill-drip:before{content:"\f576"}.fa-arrows-to-circle:before{content:"\e4bd"}.fa-chevron-circle-right:before,.fa-circle-chevron-right:before{content:"\f138"}.fa-at:before{content:"\40"}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-text-height:before{content:"\f034"}.fa-user-times:before,.fa-user-xmark:before{content:"\f235"}.fa-stethoscope:before{content:"\f0f1"}.fa-comment-alt:before,.fa-message:before{content:"\f27a"}.fa-info:before{content:"\f129"}.fa-compress-alt:before,.fa-down-left-and-up-right-to-center:before{content:"\f422"}.fa-explosion:before{content:"\e4e9"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-wave-square:before{content:"\f83e"}.fa-ring:before{content:"\f70b"}.fa-building-un:before{content:"\e4d9"}.fa-dice-three:before{content:"\f527"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-anchor-circle-check:before{content:"\e4aa"}.fa-building-circle-arrow-right:before{content:"\e4d1"}.fa-volleyball-ball:before,.fa-volleyball:before{content:"\f45f"}.fa-arrows-up-to-line:before{content:"\e4c2"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-circle-minus:before,.fa-minus-circle:before{content:"\f056"}.fa-door-open:before{content:"\f52b"}.fa-right-from-bracket:before,.fa-sign-out-alt:before{content:"\f2f5"}.fa-atom:before{content:"\f5d2"}.fa-soap:before{content:"\e06e"}.fa-heart-music-camera-bolt:before,.fa-icons:before{content:"\f86d"}.fa-microphone-alt-slash:before,.fa-microphone-lines-slash:before{content:"\f539"}.fa-bridge-circle-check:before{content:"\e4c9"}.fa-pump-medical:before{content:"\e06a"}.fa-fingerprint:before{content:"\f577"}.fa-hand-point-right:before{content:"\f0a4"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"}.fa-forward-step:before,.fa-step-forward:before{content:"\f051"}.fa-face-smile-beam:before,.fa-smile-beam:before{content:"\f5b8"}.fa-flag-checkered:before{content:"\f11e"}.fa-football-ball:before,.fa-football:before{content:"\f44e"}.fa-school-circle-exclamation:before{content:"\e56c"}.fa-crop:before{content:"\f125"}.fa-angle-double-down:before,.fa-angles-down:before{content:"\f103"}.fa-users-rectangle:before{content:"\e594"}.fa-people-roof:before{content:"\e537"}.fa-people-line:before{content:"\e534"}.fa-beer-mug-empty:before,.fa-beer:before{content:"\f0fc"}.fa-diagram-predecessor:before{content:"\e477"}.fa-arrow-up-long:before,.fa-long-arrow-up:before{content:"\f176"}.fa-burn:before,.fa-fire-flame-simple:before{content:"\f46a"}.fa-male:before,.fa-person:before{content:"\f183"}.fa-laptop:before{content:"\f109"}.fa-file-csv:before{content:"\f6dd"}.fa-menorah:before{content:"\f676"}.fa-truck-plane:before{content:"\e58f"}.fa-record-vinyl:before{content:"\f8d9"}.fa-face-grin-stars:before,.fa-grin-stars:before{content:"\f587"}.fa-bong:before{content:"\f55c"}.fa-pastafarianism:before,.fa-spaghetti-monster-flying:before{content:"\f67b"}.fa-arrow-down-up-across-line:before{content:"\e4af"}.fa-spoon:before,.fa-utensil-spoon:before{content:"\f2e5"}.fa-jar-wheat:before{content:"\e517"}.fa-envelopes-bulk:before,.fa-mail-bulk:before{content:"\f674"}.fa-file-circle-exclamation:before{content:"\e4eb"}.fa-circle-h:before,.fa-hospital-symbol:before{content:"\f47e"}.fa-pager:before{content:"\f815"}.fa-address-book:before,.fa-contact-book:before{content:"\f2b9"}.fa-strikethrough:before{content:"\f0cc"}.fa-k:before{content:"\4b"}.fa-landmark-flag:before{content:"\e51c"}.fa-pencil-alt:before,.fa-pencil:before{content:"\f303"}.fa-backward:before{content:"\f04a"}.fa-caret-right:before{content:"\f0da"}.fa-comments:before{content:"\f086"}.fa-file-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-code-pull-request:before{content:"\e13c"}.fa-clipboard-list:before{content:"\f46d"}.fa-truck-loading:before,.fa-truck-ramp-box:before{content:"\f4de"}.fa-user-check:before{content:"\f4fc"}.fa-vial-virus:before{content:"\e597"}.fa-sheet-plastic:before{content:"\e571"}.fa-blog:before{content:"\f781"}.fa-user-ninja:before{content:"\f504"}.fa-person-arrow-up-from-line:before{content:"\e539"}.fa-scroll-torah:before,.fa-torah:before{content:"\f6a0"}.fa-broom-ball:before,.fa-quidditch-broom-ball:before,.fa-quidditch:before{content:"\f458"}.fa-toggle-off:before{content:"\f204"}.fa-archive:before,.fa-box-archive:before{content:"\f187"}.fa-person-drowning:before{content:"\e545"}.fa-arrow-down-9-1:before,.fa-sort-numeric-desc:before,.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-face-grin-tongue-squint:before,.fa-grin-tongue-squint:before{content:"\f58a"}.fa-spray-can:before{content:"\f5bd"}.fa-truck-monster:before{content:"\f63b"}.fa-w:before{content:"\57"}.fa-earth-africa:before,.fa-globe-africa:before{content:"\f57c"}.fa-rainbow:before{content:"\f75b"}.fa-circle-notch:before{content:"\f1ce"}.fa-tablet-alt:before,.fa-tablet-screen-button:before{content:"\f3fa"}.fa-paw:before{content:"\f1b0"}.fa-cloud:before{content:"\f0c2"}.fa-trowel-bricks:before{content:"\e58a"}.fa-face-flushed:before,.fa-flushed:before{content:"\f579"}.fa-hospital-user:before{content:"\f80d"}.fa-tent-arrow-left-right:before{content:"\e57f"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-binoculars:before{content:"\f1e5"}.fa-microphone-slash:before{content:"\f131"}.fa-box-tissue:before{content:"\e05b"}.fa-motorcycle:before{content:"\f21c"}.fa-bell-concierge:before,.fa-concierge-bell:before{content:"\f562"}.fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-arrows-left-right:before,.fa-people-arrows:before{content:"\e068"}.fa-mars-and-venus-burst:before{content:"\e523"}.fa-caret-square-right:before,.fa-square-caret-right:before{content:"\f152"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-sun-plant-wilt:before{content:"\e57a"}.fa-toilets-portable:before{content:"\e584"}.fa-hockey-puck:before{content:"\f453"}.fa-table:before{content:"\f0ce"}.fa-magnifying-glass-arrow-right:before{content:"\e521"}.fa-digital-tachograph:before,.fa-tachograph-digital:before{content:"\f566"}.fa-users-slash:before{content:"\e073"}.fa-clover:before{content:"\e139"}.fa-mail-reply:before,.fa-reply:before{content:"\f3e5"}.fa-star-and-crescent:before{content:"\f699"}.fa-house-fire:before{content:"\e50c"}.fa-minus-square:before,.fa-square-minus:before{content:"\f146"}.fa-helicopter:before{content:"\f533"}.fa-compass:before{content:"\f14e"}.fa-caret-square-down:before,.fa-square-caret-down:before{content:"\f150"}.fa-file-circle-question:before{content:"\e4ef"}.fa-laptop-code:before{content:"\f5fc"}.fa-swatchbook:before{content:"\f5c3"}.fa-prescription-bottle:before{content:"\f485"}.fa-bars:before,.fa-navicon:before{content:"\f0c9"}.fa-people-group:before{content:"\e533"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-heart-broken:before,.fa-heart-crack:before{content:"\f7a9"}.fa-external-link-square-alt:before,.fa-square-up-right:before{content:"\f360"}.fa-face-kiss-beam:before,.fa-kiss-beam:before{content:"\f597"}.fa-film:before{content:"\f008"}.fa-ruler-horizontal:before{content:"\f547"}.fa-people-robbery:before{content:"\e536"}.fa-lightbulb:before{content:"\f0eb"}.fa-caret-left:before{content:"\f0d9"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-school-circle-xmark:before{content:"\e56d"}.fa-arrow-right-from-bracket:before,.fa-sign-out:before{content:"\f08b"}.fa-chevron-circle-down:before,.fa-circle-chevron-down:before{content:"\f13a"}.fa-unlock-alt:before,.fa-unlock-keyhole:before{content:"\f13e"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-headphones-alt:before,.fa-headphones-simple:before{content:"\f58f"}.fa-sitemap:before{content:"\f0e8"}.fa-circle-dollar-to-slot:before,.fa-donate:before{content:"\f4b9"}.fa-memory:before{content:"\f538"}.fa-road-spikes:before{content:"\e568"}.fa-fire-burner:before{content:"\e4f1"}.fa-flag:before{content:"\f024"}.fa-hanukiah:before{content:"\f6e6"}.fa-feather:before{content:"\f52d"}.fa-volume-down:before,.fa-volume-low:before{content:"\f027"}.fa-comment-slash:before{content:"\f4b3"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-compress:before{content:"\f066"}.fa-wheat-alt:before,.fa-wheat-awn:before{content:"\e2cd"}.fa-ankh:before{content:"\f644"}.fa-hands-holding-child:before{content:"\e4fa"}.fa-asterisk:before{content:"\2a"}.fa-check-square:before,.fa-square-check:before{content:"\f14a"}.fa-peseta-sign:before{content:"\e221"}.fa-header:before,.fa-heading:before{content:"\f1dc"}.fa-ghost:before{content:"\f6e2"}.fa-list-squares:before,.fa-list:before{content:"\f03a"}.fa-phone-square-alt:before,.fa-square-phone-flip:before{content:"\f87b"}.fa-cart-plus:before{content:"\f217"}.fa-gamepad:before{content:"\f11b"}.fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"}.fa-dizzy:before,.fa-face-dizzy:before{content:"\f567"}.fa-egg:before{content:"\f7fb"}.fa-house-medical-circle-xmark:before{content:"\e513"}.fa-campground:before{content:"\f6bb"}.fa-folder-plus:before{content:"\f65e"}.fa-futbol-ball:before,.fa-futbol:before,.fa-soccer-ball:before{content:"\f1e3"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-lock:before{content:"\f023"}.fa-gas-pump:before{content:"\f52f"}.fa-hot-tub-person:before,.fa-hot-tub:before{content:"\f593"}.fa-map-location:before,.fa-map-marked:before{content:"\f59f"}.fa-house-flood-water:before{content:"\e50e"}.fa-tree:before{content:"\f1bb"}.fa-bridge-lock:before{content:"\e4cc"}.fa-sack-dollar:before{content:"\f81d"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-car-side:before{content:"\f5e4"}.fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"}.fa-heart-circle-minus:before{content:"\e4ff"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-microscope:before{content:"\f610"}.fa-sink:before{content:"\e06d"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-arrow-down-z-a:before,.fa-sort-alpha-desc:before,.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-mitten:before{content:"\f7b5"}.fa-person-rays:before{content:"\e54d"}.fa-users:before{content:"\f0c0"}.fa-eye-slash:before{content:"\f070"}.fa-flask-vial:before{content:"\e4f3"}.fa-hand-paper:before,.fa-hand:before{content:"\f256"}.fa-om:before{content:"\f679"}.fa-worm:before{content:"\e599"}.fa-house-circle-xmark:before{content:"\e50b"}.fa-plug:before{content:"\f1e6"}.fa-chevron-up:before{content:"\f077"}.fa-hand-spock:before{content:"\f259"}.fa-stopwatch:before{content:"\f2f2"}.fa-face-kiss:before,.fa-kiss:before{content:"\f596"}.fa-bridge-circle-xmark:before{content:"\e4cb"}.fa-face-grin-tongue:before,.fa-grin-tongue:before{content:"\f589"}.fa-chess-bishop:before{content:"\f43a"}.fa-face-grin-wink:before,.fa-grin-wink:before{content:"\f58c"}.fa-deaf:before,.fa-deafness:before,.fa-ear-deaf:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-road-circle-check:before{content:"\e564"}.fa-dice-five:before{content:"\f523"}.fa-rss-square:before,.fa-square-rss:before{content:"\f143"}.fa-land-mine-on:before{content:"\e51b"}.fa-i-cursor:before{content:"\f246"}.fa-stamp:before{content:"\f5bf"}.fa-stairs:before{content:"\e289"}.fa-i:before{content:"\49"}.fa-hryvnia-sign:before,.fa-hryvnia:before{content:"\f6f2"}.fa-pills:before{content:"\f484"}.fa-face-grin-wide:before,.fa-grin-alt:before{content:"\f581"}.fa-tooth:before{content:"\f5c9"}.fa-v:before{content:"\56"}.fa-bangladeshi-taka-sign:before{content:"\e2e6"}.fa-bicycle:before{content:"\f206"}.fa-rod-asclepius:before,.fa-rod-snake:before,.fa-staff-aesculapius:before,.fa-staff-snake:before{content:"\e579"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-ambulance:before,.fa-truck-medical:before{content:"\f0f9"}.fa-wheat-awn-circle-exclamation:before{content:"\e598"}.fa-snowman:before{content:"\f7d0"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-road-barrier:before{content:"\e562"}.fa-school:before{content:"\f549"}.fa-igloo:before{content:"\f7ae"}.fa-joint:before{content:"\f595"}.fa-angle-right:before{content:"\f105"}.fa-horse:before{content:"\f6f0"}.fa-q:before{content:"\51"}.fa-g:before{content:"\47"}.fa-notes-medical:before{content:"\f481"}.fa-temperature-2:before,.fa-temperature-half:before,.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-dong-sign:before{content:"\e169"}.fa-capsules:before{content:"\f46b"}.fa-poo-bolt:before,.fa-poo-storm:before{content:"\f75a"}.fa-face-frown-open:before,.fa-frown-open:before{content:"\f57a"}.fa-hand-point-up:before{content:"\f0a6"}.fa-money-bill:before{content:"\f0d6"}.fa-bookmark:before{content:"\f02e"}.fa-align-justify:before{content:"\f039"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-helmet-un:before{content:"\e503"}.fa-bullseye:before{content:"\f140"}.fa-bacon:before{content:"\f7e5"}.fa-hand-point-down:before{content:"\f0a7"}.fa-arrow-up-from-bracket:before{content:"\e09a"}.fa-folder-blank:before,.fa-folder:before{content:"\f07b"}.fa-file-medical-alt:before,.fa-file-waveform:before{content:"\f478"}.fa-radiation:before{content:"\f7b9"}.fa-chart-simple:before{content:"\e473"}.fa-mars-stroke:before{content:"\f229"}.fa-vial:before{content:"\f492"}.fa-dashboard:before,.fa-gauge-med:before,.fa-gauge:before,.fa-tachometer-alt-average:before{content:"\f624"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-e:before{content:"\45"}.fa-pen-alt:before,.fa-pen-clip:before{content:"\f305"}.fa-bridge-circle-exclamation:before{content:"\e4ca"}.fa-user:before{content:"\f007"}.fa-school-circle-check:before{content:"\e56b"}.fa-dumpster:before{content:"\f793"}.fa-shuttle-van:before,.fa-van-shuttle:before{content:"\f5b6"}.fa-building-user:before{content:"\e4da"}.fa-caret-square-left:before,.fa-square-caret-left:before{content:"\f191"}.fa-highlighter:before{content:"\f591"}.fa-key:before{content:"\f084"}.fa-bullhorn:before{content:"\f0a1"}.fa-globe:before{content:"\f0ac"}.fa-synagogue:before{content:"\f69b"}.fa-person-half-dress:before{content:"\e548"}.fa-road-bridge:before{content:"\e563"}.fa-location-arrow:before{content:"\f124"}.fa-c:before{content:"\43"}.fa-tablet-button:before{content:"\f10a"}.fa-building-lock:before{content:"\e4d6"}.fa-pizza-slice:before{content:"\f818"}.fa-money-bill-wave:before{content:"\f53a"}.fa-area-chart:before,.fa-chart-area:before{content:"\f1fe"}.fa-house-flag:before{content:"\e50d"}.fa-person-circle-minus:before{content:"\e540"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-camera-rotate:before{content:"\e0d8"}.fa-air-freshener:before,.fa-spray-can-sparkles:before{content:"\f5d0"}.fa-star:before{content:"\f005"}.fa-repeat:before{content:"\f363"}.fa-cross:before{content:"\f654"}.fa-box:before{content:"\f466"}.fa-venus-mars:before{content:"\f228"}.fa-arrow-pointer:before,.fa-mouse-pointer:before{content:"\f245"}.fa-expand-arrows-alt:before,.fa-maximize:before{content:"\f31e"}.fa-charging-station:before{content:"\f5e7"}.fa-shapes:before,.fa-triangle-circle-square:before{content:"\f61f"}.fa-random:before,.fa-shuffle:before{content:"\f074"}.fa-person-running:before,.fa-running:before{content:"\f70c"}.fa-mobile-retro:before{content:"\e527"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-spider:before{content:"\f717"}.fa-hands-bound:before{content:"\e4f9"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-plane-circle-exclamation:before{content:"\e556"}.fa-x-ray:before{content:"\f497"}.fa-spell-check:before{content:"\f891"}.fa-slash:before{content:"\f715"}.fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"}.fa-arrow-right-to-bracket:before,.fa-sign-in:before{content:"\f090"}.fa-shop-slash:before,.fa-store-alt-slash:before{content:"\e070"}.fa-server:before{content:"\f233"}.fa-virus-covid-slash:before{content:"\e4a9"}.fa-shop-lock:before{content:"\e4a5"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-blender-phone:before{content:"\f6b6"}.fa-building-wheat:before{content:"\e4db"}.fa-person-breastfeeding:before{content:"\e53a"}.fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"}.fa-venus:before{content:"\f221"}.fa-passport:before{content:"\f5ab"}.fa-thumb-tack-slash:before,.fa-thumbtack-slash:before{content:"\e68f"}.fa-heart-pulse:before,.fa-heartbeat:before{content:"\f21e"}.fa-people-carry-box:before,.fa-people-carry:before{content:"\f4ce"}.fa-temperature-high:before{content:"\f769"}.fa-microchip:before{content:"\f2db"}.fa-crown:before{content:"\f521"}.fa-weight-hanging:before{content:"\f5cd"}.fa-xmarks-lines:before{content:"\e59a"}.fa-file-prescription:before{content:"\f572"}.fa-weight-scale:before,.fa-weight:before{content:"\f496"}.fa-user-friends:before,.fa-user-group:before{content:"\f500"}.fa-arrow-up-a-z:before,.fa-sort-alpha-up:before{content:"\f15e"}.fa-chess-knight:before{content:"\f441"}.fa-face-laugh-squint:before,.fa-laugh-squint:before{content:"\f59b"}.fa-wheelchair:before{content:"\f193"}.fa-arrow-circle-up:before,.fa-circle-arrow-up:before{content:"\f0aa"}.fa-toggle-on:before{content:"\f205"}.fa-person-walking:before,.fa-walking:before{content:"\f554"}.fa-l:before{content:"\4c"}.fa-fire:before{content:"\f06d"}.fa-bed-pulse:before,.fa-procedures:before{content:"\f487"}.fa-shuttle-space:before,.fa-space-shuttle:before{content:"\f197"}.fa-face-laugh:before,.fa-laugh:before{content:"\f599"}.fa-folder-open:before{content:"\f07c"}.fa-heart-circle-plus:before{content:"\e500"}.fa-code-fork:before{content:"\e13b"}.fa-city:before{content:"\f64f"}.fa-microphone-alt:before,.fa-microphone-lines:before{content:"\f3c9"}.fa-pepper-hot:before{content:"\f816"}.fa-unlock:before{content:"\f09c"}.fa-colon-sign:before{content:"\e140"}.fa-headset:before{content:"\f590"}.fa-store-slash:before{content:"\e071"}.fa-road-circle-xmark:before{content:"\e566"}.fa-user-minus:before{content:"\f503"}.fa-mars-stroke-up:before,.fa-mars-stroke-v:before{content:"\f22a"}.fa-champagne-glasses:before,.fa-glass-cheers:before{content:"\f79f"}.fa-clipboard:before{content:"\f328"}.fa-house-circle-exclamation:before{content:"\e50a"}.fa-file-arrow-up:before,.fa-file-upload:before{content:"\f574"}.fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"}.fa-bath:before,.fa-bathtub:before{content:"\f2cd"}.fa-underline:before{content:"\f0cd"}.fa-user-edit:before,.fa-user-pen:before{content:"\f4ff"}.fa-signature:before{content:"\f5b7"}.fa-stroopwafel:before{content:"\f551"}.fa-bold:before{content:"\f032"}.fa-anchor-lock:before{content:"\e4ad"}.fa-building-ngo:before{content:"\e4d7"}.fa-manat-sign:before{content:"\e1d5"}.fa-not-equal:before{content:"\f53e"}.fa-border-style:before,.fa-border-top-left:before{content:"\f853"}.fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"}.fa-jedi:before{content:"\f669"}.fa-poll:before,.fa-square-poll-vertical:before{content:"\f681"}.fa-mug-hot:before{content:"\f7b6"}.fa-battery-car:before,.fa-car-battery:before{content:"\f5df"}.fa-gift:before{content:"\f06b"}.fa-dice-two:before{content:"\f528"}.fa-chess-queen:before{content:"\f445"}.fa-glasses:before{content:"\f530"}.fa-chess-board:before{content:"\f43c"}.fa-building-circle-check:before{content:"\e4d2"}.fa-person-chalkboard:before{content:"\e53d"}.fa-mars-stroke-h:before,.fa-mars-stroke-right:before{content:"\f22b"}.fa-hand-back-fist:before,.fa-hand-rock:before{content:"\f255"}.fa-caret-square-up:before,.fa-square-caret-up:before{content:"\f151"}.fa-cloud-showers-water:before{content:"\e4e4"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\f080"}.fa-hands-bubbles:before,.fa-hands-wash:before{content:"\e05e"}.fa-less-than-equal:before{content:"\f537"}.fa-train:before{content:"\f238"}.fa-eye-low-vision:before,.fa-low-vision:before{content:"\f2a8"}.fa-crow:before{content:"\f520"}.fa-sailboat:before{content:"\e445"}.fa-window-restore:before{content:"\f2d2"}.fa-plus-square:before,.fa-square-plus:before{content:"\f0fe"}.fa-torii-gate:before{content:"\f6a1"}.fa-frog:before{content:"\f52e"}.fa-bucket:before{content:"\e4cf"}.fa-image:before{content:"\f03e"}.fa-microphone:before{content:"\f130"}.fa-cow:before{content:"\f6c8"}.fa-caret-up:before{content:"\f0d8"}.fa-screwdriver:before{content:"\f54a"}.fa-folder-closed:before{content:"\e185"}.fa-house-tsunami:before{content:"\e515"}.fa-square-nfi:before{content:"\e576"}.fa-arrow-up-from-ground-water:before{content:"\e4b5"}.fa-glass-martini-alt:before,.fa-martini-glass:before{content:"\f57b"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-columns:before,.fa-table-columns:before{content:"\f0db"}.fa-lemon:before{content:"\f094"}.fa-head-side-mask:before{content:"\e063"}.fa-handshake:before{content:"\f2b5"}.fa-gem:before{content:"\f3a5"}.fa-dolly-box:before,.fa-dolly:before{content:"\f472"}.fa-smoking:before{content:"\f48d"}.fa-compress-arrows-alt:before,.fa-minimize:before{content:"\f78c"}.fa-monument:before{content:"\f5a6"}.fa-snowplow:before{content:"\f7d2"}.fa-angle-double-right:before,.fa-angles-right:before{content:"\f101"}.fa-cannabis:before{content:"\f55f"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-tablets:before{content:"\f490"}.fa-ethernet:before{content:"\f796"}.fa-eur:before,.fa-euro-sign:before,.fa-euro:before{content:"\f153"}.fa-chair:before{content:"\f6c0"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-circle-stop:before,.fa-stop-circle:before{content:"\f28d"}.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}.fa-plate-wheat:before{content:"\e55a"}.fa-icicles:before{content:"\f7ad"}.fa-person-shelter:before{content:"\e54f"}.fa-neuter:before{content:"\f22c"}.fa-id-badge:before{content:"\f2c1"}.fa-marker:before{content:"\f5a1"}.fa-face-laugh-beam:before,.fa-laugh-beam:before{content:"\f59a"}.fa-helicopter-symbol:before{content:"\e502"}.fa-universal-access:before{content:"\f29a"}.fa-chevron-circle-up:before,.fa-circle-chevron-up:before{content:"\f139"}.fa-lari-sign:before{content:"\e1c8"}.fa-volcano:before{content:"\f770"}.fa-person-walking-dashed-line-arrow-right:before{content:"\e553"}.fa-gbp:before,.fa-pound-sign:before,.fa-sterling-sign:before{content:"\f154"}.fa-viruses:before{content:"\e076"}.fa-square-person-confined:before{content:"\e577"}.fa-user-tie:before{content:"\f508"}.fa-arrow-down-long:before,.fa-long-arrow-down:before{content:"\f175"}.fa-tent-arrow-down-to-line:before{content:"\e57e"}.fa-certificate:before{content:"\f0a3"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-suitcase:before{content:"\f0f2"}.fa-person-skating:before,.fa-skating:before{content:"\f7c5"}.fa-filter-circle-dollar:before,.fa-funnel-dollar:before{content:"\f662"}.fa-camera-retro:before{content:"\f083"}.fa-arrow-circle-down:before,.fa-circle-arrow-down:before{content:"\f0ab"}.fa-arrow-right-to-file:before,.fa-file-import:before{content:"\f56f"}.fa-external-link-square:before,.fa-square-arrow-up-right:before{content:"\f14c"}.fa-box-open:before{content:"\f49e"}.fa-scroll:before{content:"\f70e"}.fa-spa:before{content:"\f5bb"}.fa-location-pin-lock:before{content:"\e51f"}.fa-pause:before{content:"\f04c"}.fa-hill-avalanche:before{content:"\e507"}.fa-temperature-0:before,.fa-temperature-empty:before,.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-bomb:before{content:"\f1e2"}.fa-registered:before{content:"\f25d"}.fa-address-card:before,.fa-contact-card:before,.fa-vcard:before{content:"\f2bb"}.fa-balance-scale-right:before,.fa-scale-unbalanced-flip:before{content:"\f516"}.fa-subscript:before{content:"\f12c"}.fa-diamond-turn-right:before,.fa-directions:before{content:"\f5eb"}.fa-burst:before{content:"\e4dc"}.fa-house-laptop:before,.fa-laptop-house:before{content:"\e066"}.fa-face-tired:before,.fa-tired:before{content:"\f5c8"}.fa-money-bills:before{content:"\e1f3"}.fa-smog:before{content:"\f75f"}.fa-crutch:before{content:"\f7f7"}.fa-cloud-arrow-up:before,.fa-cloud-upload-alt:before,.fa-cloud-upload:before{content:"\f0ee"}.fa-palette:before{content:"\f53f"}.fa-arrows-turn-right:before{content:"\e4c0"}.fa-vest:before{content:"\e085"}.fa-ferry:before{content:"\e4ea"}.fa-arrows-down-to-people:before{content:"\e4b9"}.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}.fa-arrows-alt-h:before,.fa-left-right:before{content:"\f337"}.fa-boxes-packing:before{content:"\e4c7"}.fa-arrow-circle-left:before,.fa-circle-arrow-left:before{content:"\f0a8"}.fa-group-arrows-rotate:before{content:"\e4f6"}.fa-bowl-food:before{content:"\e4c6"}.fa-candy-cane:before{content:"\f786"}.fa-arrow-down-wide-short:before,.fa-sort-amount-asc:before,.fa-sort-amount-down:before{content:"\f160"}.fa-cloud-bolt:before,.fa-thunderstorm:before{content:"\f76c"}.fa-remove-format:before,.fa-text-slash:before{content:"\f87d"}.fa-face-smile-wink:before,.fa-smile-wink:before{content:"\f4da"}.fa-file-word:before{content:"\f1c2"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-arrows-h:before,.fa-arrows-left-right:before{content:"\f07e"}.fa-house-lock:before{content:"\e510"}.fa-cloud-arrow-down:before,.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}.fa-children:before{content:"\e4e1"}.fa-blackboard:before,.fa-chalkboard:before{content:"\f51b"}.fa-user-alt-slash:before,.fa-user-large-slash:before{content:"\f4fa"}.fa-envelope-open:before{content:"\f2b6"}.fa-handshake-alt-slash:before,.fa-handshake-simple-slash:before{content:"\e05f"}.fa-mattress-pillow:before{content:"\e525"}.fa-guarani-sign:before{content:"\e19a"}.fa-arrows-rotate:before,.fa-refresh:before,.fa-sync:before{content:"\f021"}.fa-fire-extinguisher:before{content:"\f134"}.fa-cruzeiro-sign:before{content:"\e152"}.fa-greater-than-equal:before{content:"\f532"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-atlas:before,.fa-book-atlas:before{content:"\f558"}.fa-virus:before{content:"\e074"}.fa-envelope-circle-check:before{content:"\e4e8"}.fa-layer-group:before{content:"\f5fd"}.fa-arrows-to-dot:before{content:"\e4be"}.fa-archway:before{content:"\f557"}.fa-heart-circle-check:before{content:"\e4fd"}.fa-house-chimney-crack:before,.fa-house-damage:before{content:"\f6f1"}.fa-file-archive:before,.fa-file-zipper:before{content:"\f1c6"}.fa-square:before{content:"\f0c8"}.fa-glass-martini:before,.fa-martini-glass-empty:before{content:"\f000"}.fa-couch:before{content:"\f4b8"}.fa-cedi-sign:before{content:"\e0df"}.fa-italic:before{content:"\f033"}.fa-table-cells-column-lock:before{content:"\e678"}.fa-church:before{content:"\f51d"}.fa-comments-dollar:before{content:"\f653"}.fa-democrat:before{content:"\f747"}.fa-z:before{content:"\5a"}.fa-person-skiing:before,.fa-skiing:before{content:"\f7c9"}.fa-road-lock:before{content:"\e567"}.fa-a:before{content:"\41"}.fa-temperature-arrow-down:before,.fa-temperature-down:before{content:"\e03f"}.fa-feather-alt:before,.fa-feather-pointed:before{content:"\f56b"}.fa-p:before{content:"\50"}.fa-snowflake:before{content:"\f2dc"}.fa-newspaper:before{content:"\f1ea"}.fa-ad:before,.fa-rectangle-ad:before{content:"\f641"}.fa-arrow-circle-right:before,.fa-circle-arrow-right:before{content:"\f0a9"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-locust:before{content:"\e520"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-list-1-2:before,.fa-list-numeric:before,.fa-list-ol:before{content:"\f0cb"}.fa-person-dress-burst:before{content:"\e544"}.fa-money-check-alt:before,.fa-money-check-dollar:before{content:"\f53d"}.fa-vector-square:before{content:"\f5cb"}.fa-bread-slice:before{content:"\f7ec"}.fa-language:before{content:"\f1ab"}.fa-face-kiss-wink-heart:before,.fa-kiss-wink-heart:before{content:"\f598"}.fa-filter:before{content:"\f0b0"}.fa-question:before{content:"\3f"}.fa-file-signature:before{content:"\f573"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-house-chimney-user:before{content:"\e065"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-puzzle-piece:before{content:"\f12e"}.fa-money-check:before{content:"\f53c"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-code:before{content:"\f121"}.fa-glass-whiskey:before,.fa-whiskey-glass:before{content:"\f7a0"}.fa-building-circle-exclamation:before{content:"\e4d3"}.fa-magnifying-glass-chart:before{content:"\e522"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-cubes-stacked:before{content:"\e4e6"}.fa-krw:before,.fa-won-sign:before,.fa-won:before{content:"\f159"}.fa-virus-covid:before{content:"\e4a8"}.fa-austral-sign:before{content:"\e0a9"}.fa-f:before{content:"\46"}.fa-leaf:before{content:"\f06c"}.fa-road:before{content:"\f018"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-person-circle-plus:before{content:"\e541"}.fa-chart-pie:before,.fa-pie-chart:before{content:"\f200"}.fa-bolt-lightning:before{content:"\e0b7"}.fa-sack-xmark:before{content:"\e56a"}.fa-file-excel:before{content:"\f1c3"}.fa-file-contract:before{content:"\f56c"}.fa-fish-fins:before{content:"\e4f2"}.fa-building-flag:before{content:"\e4d5"}.fa-face-grin-beam:before,.fa-grin-beam:before{content:"\f582"}.fa-object-ungroup:before{content:"\f248"}.fa-poop:before{content:"\f619"}.fa-location-pin:before,.fa-map-marker:before{content:"\f041"}.fa-kaaba:before{content:"\f66b"}.fa-toilet-paper:before{content:"\f71e"}.fa-hard-hat:before,.fa-hat-hard:before,.fa-helmet-safety:before{content:"\f807"}.fa-eject:before{content:"\f052"}.fa-arrow-alt-circle-right:before,.fa-circle-right:before{content:"\f35a"}.fa-plane-circle-check:before{content:"\e555"}.fa-face-rolling-eyes:before,.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-object-group:before{content:"\f247"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-mask-ventilator:before{content:"\e524"}.fa-arrow-right:before{content:"\f061"}.fa-map-signs:before,.fa-signs-post:before{content:"\f277"}.fa-cash-register:before{content:"\f788"}.fa-person-circle-question:before{content:"\e542"}.fa-h:before{content:"\48"}.fa-tarp:before{content:"\e57b"}.fa-screwdriver-wrench:before,.fa-tools:before{content:"\f7d9"}.fa-arrows-to-eye:before{content:"\e4bf"}.fa-plug-circle-bolt:before{content:"\e55b"}.fa-heart:before{content:"\f004"}.fa-mars-and-venus:before{content:"\f224"}.fa-home-user:before,.fa-house-user:before{content:"\e1b0"}.fa-dumpster-fire:before{content:"\f794"}.fa-house-crack:before{content:"\e3b1"}.fa-cocktail:before,.fa-martini-glass-citrus:before{content:"\f561"}.fa-face-surprise:before,.fa-surprise:before{content:"\f5c2"}.fa-bottle-water:before{content:"\e4c5"}.fa-circle-pause:before,.fa-pause-circle:before{content:"\f28b"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-apple-alt:before,.fa-apple-whole:before{content:"\f5d1"}.fa-kitchen-set:before{content:"\e51a"}.fa-r:before{content:"\52"}.fa-temperature-1:before,.fa-temperature-quarter:before,.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-cube:before{content:"\f1b2"}.fa-bitcoin-sign:before{content:"\e0b4"}.fa-shield-dog:before{content:"\e573"}.fa-solar-panel:before{content:"\f5ba"}.fa-lock-open:before{content:"\f3c1"}.fa-elevator:before{content:"\e16d"}.fa-money-bill-transfer:before{content:"\e528"}.fa-money-bill-trend-up:before{content:"\e529"}.fa-house-flood-water-circle-arrow-right:before{content:"\e50f"}.fa-poll-h:before,.fa-square-poll-horizontal:before{content:"\f682"}.fa-circle:before{content:"\f111"}.fa-backward-fast:before,.fa-fast-backward:before{content:"\f049"}.fa-recycle:before{content:"\f1b8"}.fa-user-astronaut:before{content:"\f4fb"}.fa-plane-slash:before{content:"\e069"}.fa-trademark:before{content:"\f25c"}.fa-basketball-ball:before,.fa-basketball:before{content:"\f434"}.fa-satellite-dish:before{content:"\f7c0"}.fa-arrow-alt-circle-up:before,.fa-circle-up:before{content:"\f35b"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-volume-high:before,.fa-volume-up:before{content:"\f028"}.fa-users-rays:before{content:"\e593"}.fa-wallet:before{content:"\f555"}.fa-clipboard-check:before{content:"\f46c"}.fa-file-audio:before{content:"\f1c7"}.fa-burger:before,.fa-hamburger:before{content:"\f805"}.fa-wrench:before{content:"\f0ad"}.fa-bugs:before{content:"\e4d0"}.fa-rupee-sign:before,.fa-rupee:before{content:"\f156"}.fa-file-image:before{content:"\f1c5"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-plane-departure:before{content:"\f5b0"}.fa-handshake-slash:before{content:"\e060"}.fa-book-bookmark:before{content:"\e0bb"}.fa-code-branch:before{content:"\f126"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-bridge:before{content:"\e4c8"}.fa-phone-alt:before,.fa-phone-flip:before{content:"\f879"}.fa-truck-front:before{content:"\e2b7"}.fa-cat:before{content:"\f6be"}.fa-anchor-circle-exclamation:before{content:"\e4ab"}.fa-truck-field:before{content:"\e58d"}.fa-route:before{content:"\f4d7"}.fa-clipboard-question:before{content:"\e4e3"}.fa-panorama:before{content:"\e209"}.fa-comment-medical:before{content:"\f7f5"}.fa-teeth-open:before{content:"\f62f"}.fa-file-circle-minus:before{content:"\e4ed"}.fa-tags:before{content:"\f02c"}.fa-wine-glass:before{content:"\f4e3"}.fa-fast-forward:before,.fa-forward-fast:before{content:"\f050"}.fa-face-meh-blank:before,.fa-meh-blank:before{content:"\f5a4"}.fa-parking:before,.fa-square-parking:before{content:"\f540"}.fa-house-signal:before{content:"\e012"}.fa-bars-progress:before,.fa-tasks-alt:before{content:"\f828"}.fa-faucet-drip:before{content:"\e006"}.fa-cart-flatbed:before,.fa-dolly-flatbed:before{content:"\f474"}.fa-ban-smoking:before,.fa-smoking-ban:before{content:"\f54d"}.fa-terminal:before{content:"\f120"}.fa-mobile-button:before{content:"\f10b"}.fa-house-medical-flag:before{content:"\e514"}.fa-basket-shopping:before,.fa-shopping-basket:before{content:"\f291"}.fa-tape:before{content:"\f4db"}.fa-bus-alt:before,.fa-bus-simple:before{content:"\f55e"}.fa-eye:before{content:"\f06e"}.fa-face-sad-cry:before,.fa-sad-cry:before{content:"\f5b3"}.fa-audio-description:before{content:"\f29e"}.fa-person-military-to-person:before{content:"\e54c"}.fa-file-shield:before{content:"\e4f0"}.fa-user-slash:before{content:"\f506"}.fa-pen:before{content:"\f304"}.fa-tower-observation:before{content:"\e586"}.fa-file-code:before{content:"\f1c9"}.fa-signal-5:before,.fa-signal-perfect:before,.fa-signal:before{content:"\f012"}.fa-bus:before{content:"\f207"}.fa-heart-circle-xmark:before{content:"\e501"}.fa-home-lg:before,.fa-house-chimney:before{content:"\e3af"}.fa-window-maximize:before{content:"\f2d0"}.fa-face-frown:before,.fa-frown:before{content:"\f119"}.fa-prescription:before{content:"\f5b1"}.fa-shop:before,.fa-store-alt:before{content:"\f54f"}.fa-floppy-disk:before,.fa-save:before{content:"\f0c7"}.fa-vihara:before{content:"\f6a7"}.fa-balance-scale-left:before,.fa-scale-unbalanced:before{content:"\f515"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}.fa-plant-wilt:before{content:"\e5aa"}.fa-diamond:before{content:"\f219"}.fa-face-grin-squint:before,.fa-grin-squint:before{content:"\f585"}.fa-hand-holding-dollar:before,.fa-hand-holding-usd:before{content:"\f4c0"}.fa-bacterium:before{content:"\e05a"}.fa-hand-pointer:before{content:"\f25a"}.fa-drum-steelpan:before{content:"\f56a"}.fa-hand-scissors:before{content:"\f257"}.fa-hands-praying:before,.fa-praying-hands:before{content:"\f684"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-biohazard:before{content:"\f780"}.fa-location-crosshairs:before,.fa-location:before{content:"\f601"}.fa-mars-double:before{content:"\f227"}.fa-child-dress:before{content:"\e59c"}.fa-users-between-lines:before{content:"\e591"}.fa-lungs-virus:before{content:"\e067"}.fa-face-grin-tears:before,.fa-grin-tears:before{content:"\f588"}.fa-phone:before{content:"\f095"}.fa-calendar-times:before,.fa-calendar-xmark:before{content:"\f273"}.fa-child-reaching:before{content:"\e59d"}.fa-head-side-virus:before{content:"\e064"}.fa-user-cog:before,.fa-user-gear:before{content:"\f4fe"}.fa-arrow-up-1-9:before,.fa-sort-numeric-up:before{content:"\f163"}.fa-door-closed:before{content:"\f52a"}.fa-shield-virus:before{content:"\e06c"}.fa-dice-six:before{content:"\f526"}.fa-mosquito-net:before{content:"\e52c"}.fa-bridge-water:before{content:"\e4ce"}.fa-person-booth:before{content:"\f756"}.fa-text-width:before{content:"\f035"}.fa-hat-wizard:before{content:"\f6e8"}.fa-pen-fancy:before{content:"\f5ac"}.fa-digging:before,.fa-person-digging:before{content:"\f85e"}.fa-trash:before{content:"\f1f8"}.fa-gauge-simple-med:before,.fa-gauge-simple:before,.fa-tachometer-average:before{content:"\f629"}.fa-book-medical:before{content:"\f7e6"}.fa-poo:before{content:"\f2fe"}.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-cubes:before{content:"\f1b3"}.fa-divide:before{content:"\f529"}.fa-tenge-sign:before,.fa-tenge:before{content:"\f7d7"}.fa-headphones:before{content:"\f025"}.fa-hands-holding:before{content:"\f4c2"}.fa-hands-clapping:before{content:"\e1a8"}.fa-republican:before{content:"\f75e"}.fa-arrow-left:before{content:"\f060"}.fa-person-circle-xmark:before{content:"\e543"}.fa-ruler:before{content:"\f545"}.fa-align-left:before{content:"\f036"}.fa-dice-d6:before{content:"\f6d1"}.fa-restroom:before{content:"\f7bd"}.fa-j:before{content:"\4a"}.fa-users-viewfinder:before{content:"\e595"}.fa-file-video:before{content:"\f1c8"}.fa-external-link-alt:before,.fa-up-right-from-square:before{content:"\f35d"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-file-pdf:before{content:"\f1c1"}.fa-bible:before,.fa-book-bible:before{content:"\f647"}.fa-o:before{content:"\4f"}.fa-medkit:before,.fa-suitcase-medical:before{content:"\f0fa"}.fa-user-secret:before{content:"\f21b"}.fa-otter:before{content:"\f700"}.fa-female:before,.fa-person-dress:before{content:"\f182"}.fa-comment-dollar:before{content:"\f651"}.fa-briefcase-clock:before,.fa-business-time:before{content:"\f64a"}.fa-table-cells-large:before,.fa-th-large:before{content:"\f009"}.fa-book-tanakh:before,.fa-tanakh:before{content:"\f827"}.fa-phone-volume:before,.fa-volume-control-phone:before{content:"\f2a0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-clipboard-user:before{content:"\f7f3"}.fa-child:before{content:"\f1ae"}.fa-lira-sign:before{content:"\f195"}.fa-satellite:before{content:"\f7bf"}.fa-plane-lock:before{content:"\e558"}.fa-tag:before{content:"\f02b"}.fa-comment:before{content:"\f075"}.fa-birthday-cake:before,.fa-cake-candles:before,.fa-cake:before{content:"\f1fd"}.fa-envelope:before{content:"\f0e0"}.fa-angle-double-up:before,.fa-angles-up:before{content:"\f102"}.fa-paperclip:before{content:"\f0c6"}.fa-arrow-right-to-city:before{content:"\e4b3"}.fa-ribbon:before{content:"\f4d6"}.fa-lungs:before{content:"\f604"}.fa-arrow-up-9-1:before,.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-litecoin-sign:before{content:"\e1d3"}.fa-border-none:before{content:"\f850"}.fa-circle-nodes:before{content:"\e4e2"}.fa-parachute-box:before{content:"\f4cd"}.fa-indent:before{content:"\f03c"}.fa-truck-field-un:before{content:"\e58e"}.fa-hourglass-empty:before,.fa-hourglass:before{content:"\f254"}.fa-mountain:before{content:"\f6fc"}.fa-user-doctor:before,.fa-user-md:before{content:"\f0f0"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-cloud-meatball:before{content:"\f73b"}.fa-camera-alt:before,.fa-camera:before{content:"\f030"}.fa-square-virus:before{content:"\e578"}.fa-meteor:before{content:"\f753"}.fa-car-on:before{content:"\e4dd"}.fa-sleigh:before{content:"\f7cc"}.fa-arrow-down-1-9:before,.fa-sort-numeric-asc:before,.fa-sort-numeric-down:before{content:"\f162"}.fa-hand-holding-droplet:before,.fa-hand-holding-water:before{content:"\f4c1"}.fa-water:before{content:"\f773"}.fa-calendar-check:before{content:"\f274"}.fa-braille:before{content:"\f2a1"}.fa-prescription-bottle-alt:before,.fa-prescription-bottle-medical:before{content:"\f486"}.fa-landmark:before{content:"\f66f"}.fa-truck:before{content:"\f0d1"}.fa-crosshairs:before{content:"\f05b"}.fa-person-cane:before{content:"\e53c"}.fa-tent:before{content:"\e57d"}.fa-vest-patches:before{content:"\e086"}.fa-check-double:before{content:"\f560"}.fa-arrow-down-a-z:before,.fa-sort-alpha-asc:before,.fa-sort-alpha-down:before{content:"\f15d"}.fa-money-bill-wheat:before{content:"\e52a"}.fa-cookie:before{content:"\f563"}.fa-arrow-left-rotate:before,.fa-arrow-rotate-back:before,.fa-arrow-rotate-backward:before,.fa-arrow-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"}.fa-face-grin-squint-tears:before,.fa-grin-squint-tears:before{content:"\f586"}.fa-dumbbell:before{content:"\f44b"}.fa-list-alt:before,.fa-rectangle-list:before{content:"\f022"}.fa-tarp-droplet:before{content:"\e57c"}.fa-house-medical-circle-check:before{content:"\e511"}.fa-person-skiing-nordic:before,.fa-skiing-nordic:before{content:"\f7ca"}.fa-calendar-plus:before{content:"\f271"}.fa-plane-arrival:before{content:"\f5af"}.fa-arrow-alt-circle-left:before,.fa-circle-left:before{content:"\f359"}.fa-subway:before,.fa-train-subway:before{content:"\f239"}.fa-chart-gantt:before{content:"\e0e4"}.fa-indian-rupee-sign:before,.fa-indian-rupee:before,.fa-inr:before{content:"\e1bc"}.fa-crop-alt:before,.fa-crop-simple:before{content:"\f565"}.fa-money-bill-1:before,.fa-money-bill-alt:before{content:"\f3d1"}.fa-left-long:before,.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-dna:before{content:"\f471"}.fa-virus-slash:before{content:"\e075"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-chess:before{content:"\f439"}.fa-arrow-left-long:before,.fa-long-arrow-left:before{content:"\f177"}.fa-plug-circle-check:before{content:"\e55c"}.fa-street-view:before{content:"\f21d"}.fa-franc-sign:before{content:"\e18f"}.fa-volume-off:before{content:"\f026"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before,.fa-hands-american-sign-language-interpreting:before,.fa-hands-asl-interpreting:before{content:"\f2a3"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-droplet-slash:before,.fa-tint-slash:before{content:"\f5c7"}.fa-mosque:before{content:"\f678"}.fa-mosquito:before{content:"\e52b"}.fa-star-of-david:before{content:"\f69a"}.fa-person-military-rifle:before{content:"\e54b"}.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}.fa-vials:before{content:"\f493"}.fa-plug-circle-plus:before{content:"\e55f"}.fa-place-of-worship:before{content:"\f67f"}.fa-grip-vertical:before{content:"\f58e"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-u:before{content:"\55"}.fa-square-root-alt:before,.fa-square-root-variable:before{content:"\f698"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-backward-step:before,.fa-step-backward:before{content:"\f048"}.fa-pallet:before{content:"\f482"}.fa-faucet:before{content:"\e005"}.fa-baseball-bat-ball:before{content:"\f432"}.fa-s:before{content:"\53"}.fa-timeline:before{content:"\e29c"}.fa-keyboard:before{content:"\f11c"}.fa-caret-down:before{content:"\f0d7"}.fa-clinic-medical:before,.fa-house-chimney-medical:before{content:"\f7f2"}.fa-temperature-3:before,.fa-temperature-three-quarters:before,.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-mobile-android-alt:before,.fa-mobile-screen:before{content:"\f3cf"}.fa-plane-up:before{content:"\e22d"}.fa-piggy-bank:before{content:"\f4d3"}.fa-battery-3:before,.fa-battery-half:before{content:"\f242"}.fa-mountain-city:before{content:"\e52e"}.fa-coins:before{content:"\f51e"}.fa-khanda:before{content:"\f66d"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-folder-tree:before{content:"\f802"}.fa-network-wired:before{content:"\f6ff"}.fa-map-pin:before{content:"\f276"}.fa-hamsa:before{content:"\f665"}.fa-cent-sign:before{content:"\e3f5"}.fa-flask:before{content:"\f0c3"}.fa-person-pregnant:before{content:"\e31e"}.fa-wand-sparkles:before{content:"\f72b"}.fa-ellipsis-v:before,.fa-ellipsis-vertical:before{content:"\f142"}.fa-ticket:before{content:"\f145"}.fa-power-off:before{content:"\f011"}.fa-long-arrow-alt-right:before,.fa-right-long:before{content:"\f30b"}.fa-flag-usa:before{content:"\f74d"}.fa-laptop-file:before{content:"\e51d"}.fa-teletype:before,.fa-tty:before{content:"\f1e4"}.fa-diagram-next:before{content:"\e476"}.fa-person-rifle:before{content:"\e54e"}.fa-house-medical-circle-exclamation:before{content:"\e512"}.fa-closed-captioning:before{content:"\f20a"}.fa-hiking:before,.fa-person-hiking:before{content:"\f6ec"}.fa-venus-double:before{content:"\f226"}.fa-images:before{content:"\f302"}.fa-calculator:before{content:"\f1ec"}.fa-people-pulling:before{content:"\e535"}.fa-n:before{content:"\4e"}.fa-cable-car:before,.fa-tram:before{content:"\f7da"}.fa-cloud-rain:before{content:"\f73d"}.fa-building-circle-xmark:before{content:"\e4d4"}.fa-ship:before{content:"\f21a"}.fa-arrows-down-to-line:before{content:"\e4b8"}.fa-download:before{content:"\f019"}.fa-face-grin:before,.fa-grin:before{content:"\f580"}.fa-backspace:before,.fa-delete-left:before{content:"\f55a"}.fa-eye-dropper-empty:before,.fa-eye-dropper:before,.fa-eyedropper:before{content:"\f1fb"}.fa-file-circle-check:before{content:"\e5a0"}.fa-forward:before{content:"\f04e"}.fa-mobile-android:before,.fa-mobile-phone:before,.fa-mobile:before{content:"\f3ce"}.fa-face-meh:before,.fa-meh:before{content:"\f11a"}.fa-align-center:before{content:"\f037"}.fa-book-dead:before,.fa-book-skull:before{content:"\f6b7"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-heart-circle-exclamation:before{content:"\e4fe"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-calendar-week:before{content:"\f784"}.fa-laptop-medical:before{content:"\f812"}.fa-b:before{content:"\42"}.fa-file-medical:before{content:"\f477"}.fa-dice-one:before{content:"\f525"}.fa-kiwi-bird:before{content:"\f535"}.fa-arrow-right-arrow-left:before,.fa-exchange:before{content:"\f0ec"}.fa-redo-alt:before,.fa-rotate-forward:before,.fa-rotate-right:before{content:"\f2f9"}.fa-cutlery:before,.fa-utensils:before{content:"\f2e7"}.fa-arrow-up-wide-short:before,.fa-sort-amount-up:before{content:"\f161"}.fa-mill-sign:before{content:"\e1ed"}.fa-bowl-rice:before{content:"\e2eb"}.fa-skull:before{content:"\f54c"}.fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"}.fa-truck-pickup:before{content:"\f63c"}.fa-long-arrow-alt-up:before,.fa-up-long:before{content:"\f30c"}.fa-stop:before{content:"\f04d"}.fa-code-merge:before{content:"\f387"}.fa-upload:before{content:"\f093"}.fa-hurricane:before{content:"\f751"}.fa-mound:before{content:"\e52d"}.fa-toilet-portable:before{content:"\e583"}.fa-compact-disc:before{content:"\f51f"}.fa-file-arrow-down:before,.fa-file-download:before{content:"\f56d"}.fa-caravan:before{content:"\f8ff"}.fa-shield-cat:before{content:"\e572"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-glass-water:before{content:"\e4f4"}.fa-oil-well:before{content:"\e532"}.fa-vault:before{content:"\e2c5"}.fa-mars:before{content:"\f222"}.fa-toilet:before{content:"\f7d8"}.fa-plane-circle-xmark:before{content:"\e557"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen-sign:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble-sign:before,.fa-ruble:before{content:"\f158"}.fa-sun:before{content:"\f185"}.fa-guitar:before{content:"\f7a6"}.fa-face-laugh-wink:before,.fa-laugh-wink:before{content:"\f59c"}.fa-horse-head:before{content:"\f7ab"}.fa-bore-hole:before{content:"\e4c3"}.fa-industry:before{content:"\f275"}.fa-arrow-alt-circle-down:before,.fa-circle-down:before{content:"\f358"}.fa-arrows-turn-to-dots:before{content:"\e4c1"}.fa-florin-sign:before{content:"\e184"}.fa-arrow-down-short-wide:before,.fa-sort-amount-desc:before,.fa-sort-amount-down-alt:before{content:"\f884"}.fa-less-than:before{content:"\3c"}.fa-angle-down:before{content:"\f107"}.fa-car-tunnel:before{content:"\e4de"}.fa-head-side-cough:before{content:"\e061"}.fa-grip-lines:before{content:"\f7a4"}.fa-thumbs-down:before{content:"\f165"}.fa-user-lock:before{content:"\f502"}.fa-arrow-right-long:before,.fa-long-arrow-right:before{content:"\f178"}.fa-anchor-circle-xmark:before{content:"\e4ac"}.fa-ellipsis-h:before,.fa-ellipsis:before{content:"\f141"}.fa-chess-pawn:before{content:"\f443"}.fa-first-aid:before,.fa-kit-medical:before{content:"\f479"}.fa-person-through-window:before{content:"\e5a9"}.fa-toolbox:before{content:"\f552"}.fa-hands-holding-circle:before{content:"\e4fb"}.fa-bug:before{content:"\f188"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-hand-holding-hand:before{content:"\e4f7"}.fa-book-open-reader:before,.fa-book-reader:before{content:"\f5da"}.fa-mountain-sun:before{content:"\e52f"}.fa-arrows-left-right-to-line:before{content:"\e4ba"}.fa-dice-d20:before{content:"\f6cf"}.fa-truck-droplet:before{content:"\e58c"}.fa-file-circle-xmark:before{content:"\e5a1"}.fa-temperature-arrow-up:before,.fa-temperature-up:before{content:"\e040"}.fa-medal:before{content:"\f5a2"}.fa-bed:before{content:"\f236"}.fa-h-square:before,.fa-square-h:before{content:"\f0fd"}.fa-podcast:before{content:"\f2ce"}.fa-temperature-4:before,.fa-temperature-full:before,.fa-thermometer-4:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-bell:before{content:"\f0f3"}.fa-superscript:before{content:"\f12b"}.fa-plug-circle-xmark:before{content:"\e560"}.fa-star-of-life:before{content:"\f621"}.fa-phone-slash:before{content:"\f3dd"}.fa-paint-roller:before{content:"\f5aa"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-file:before{content:"\f15b"}.fa-greater-than:before{content:"\3e"}.fa-person-swimming:before,.fa-swimmer:before{content:"\f5c4"}.fa-arrow-down:before{content:"\f063"}.fa-droplet:before,.fa-tint:before{content:"\f043"}.fa-eraser:before{content:"\f12d"}.fa-earth-america:before,.fa-earth-americas:before,.fa-earth:before,.fa-globe-americas:before{content:"\f57d"}.fa-person-burst:before{content:"\e53b"}.fa-dove:before{content:"\f4ba"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-socks:before{content:"\f696"}.fa-inbox:before{content:"\f01c"}.fa-section:before{content:"\e447"}.fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"}.fa-envelope-open-text:before{content:"\f658"}.fa-hospital-alt:before,.fa-hospital-wide:before,.fa-hospital:before{content:"\f0f8"}.fa-wine-bottle:before{content:"\f72f"}.fa-chess-rook:before{content:"\f447"}.fa-bars-staggered:before,.fa-reorder:before,.fa-stream:before{content:"\f550"}.fa-dharmachakra:before{content:"\f655"}.fa-hotdog:before{content:"\f80f"}.fa-blind:before,.fa-person-walking-with-cane:before{content:"\f29d"}.fa-drum:before{content:"\f569"}.fa-ice-cream:before{content:"\f810"}.fa-heart-circle-bolt:before{content:"\e4fc"}.fa-fax:before{content:"\f1ac"}.fa-paragraph:before{content:"\f1dd"}.fa-check-to-slot:before,.fa-vote-yea:before{content:"\f772"}.fa-star-half:before{content:"\f089"}.fa-boxes-alt:before,.fa-boxes-stacked:before,.fa-boxes:before{content:"\f468"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-assistive-listening-systems:before,.fa-ear-listen:before{content:"\f2a2"}.fa-tree-city:before{content:"\e587"}.fa-play:before{content:"\f04b"}.fa-font:before{content:"\f031"}.fa-table-cells-row-lock:before{content:"\e67a"}.fa-rupiah-sign:before{content:"\e23d"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-ping-pong-paddle-ball:before,.fa-table-tennis-paddle-ball:before,.fa-table-tennis:before{content:"\f45d"}.fa-diagnoses:before,.fa-person-dots-from-line:before{content:"\f470"}.fa-trash-can-arrow-up:before,.fa-trash-restore-alt:before{content:"\f82a"}.fa-naira-sign:before{content:"\e1f6"}.fa-cart-arrow-down:before{content:"\f218"}.fa-walkie-talkie:before{content:"\f8ef"}.fa-file-edit:before,.fa-file-pen:before{content:"\f31c"}.fa-receipt:before{content:"\f543"}.fa-pen-square:before,.fa-pencil-square:before,.fa-square-pen:before{content:"\f14b"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-person-circle-exclamation:before{content:"\e53f"}.fa-chevron-down:before{content:"\f078"}.fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-skull-crossbones:before{content:"\f714"}.fa-code-compare:before{content:"\e13a"}.fa-list-dots:before,.fa-list-ul:before{content:"\f0ca"}.fa-school-lock:before{content:"\e56f"}.fa-tower-cell:before{content:"\e585"}.fa-down-long:before,.fa-long-arrow-alt-down:before{content:"\f309"}.fa-ranking-star:before{content:"\e561"}.fa-chess-king:before{content:"\f43f"}.fa-person-harassing:before{content:"\e549"}.fa-brazilian-real-sign:before{content:"\e46c"}.fa-landmark-alt:before,.fa-landmark-dome:before{content:"\f752"}.fa-arrow-up:before{content:"\f062"}.fa-television:before,.fa-tv-alt:before,.fa-tv:before{content:"\f26c"}.fa-shrimp:before{content:"\e448"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-jug-detergent:before{content:"\e519"}.fa-circle-user:before,.fa-user-circle:before{content:"\f2bd"}.fa-user-shield:before{content:"\f505"}.fa-wind:before{content:"\f72e"}.fa-car-burst:before,.fa-car-crash:before{content:"\f5e1"}.fa-y:before{content:"\59"}.fa-person-snowboarding:before,.fa-snowboarding:before{content:"\f7ce"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-fish:before{content:"\f578"}.fa-user-graduate:before{content:"\f501"}.fa-adjust:before,.fa-circle-half-stroke:before{content:"\f042"}.fa-clapperboard:before{content:"\e131"}.fa-circle-radiation:before,.fa-radiation-alt:before{content:"\f7ba"}.fa-baseball-ball:before,.fa-baseball:before{content:"\f433"}.fa-jet-fighter-up:before{content:"\e518"}.fa-diagram-project:before,.fa-project-diagram:before{content:"\f542"}.fa-copy:before{content:"\f0c5"}.fa-volume-mute:before,.fa-volume-times:before,.fa-volume-xmark:before{content:"\f6a9"}.fa-hand-sparkles:before{content:"\e05d"}.fa-grip-horizontal:before,.fa-grip:before{content:"\f58d"}.fa-share-from-square:before,.fa-share-square:before{content:"\f14d"}.fa-child-combatant:before,.fa-child-rifle:before{content:"\e4e0"}.fa-gun:before{content:"\e19b"}.fa-phone-square:before,.fa-square-phone:before{content:"\f098"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-expand:before{content:"\f065"}.fa-computer:before{content:"\e4e5"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-arrows-up-down-left-right:before,.fa-arrows:before{content:"\f047"}.fa-chalkboard-teacher:before,.fa-chalkboard-user:before{content:"\f51c"}.fa-peso-sign:before{content:"\e222"}.fa-building-shield:before{content:"\e4d8"}.fa-baby:before{content:"\f77c"}.fa-users-line:before{content:"\e592"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-tractor:before{content:"\f722"}.fa-trash-arrow-up:before,.fa-trash-restore:before{content:"\f829"}.fa-arrow-down-up-lock:before{content:"\e4b0"}.fa-lines-leaning:before{content:"\e51e"}.fa-ruler-combined:before{content:"\f546"}.fa-copyright:before{content:"\f1f9"}.fa-equals:before{content:"\3d"}.fa-blender:before{content:"\f517"}.fa-teeth:before{content:"\f62e"}.fa-ils:before,.fa-shekel-sign:before,.fa-shekel:before,.fa-sheqel-sign:before,.fa-sheqel:before{content:"\f20b"}.fa-map:before{content:"\f279"}.fa-rocket:before{content:"\f135"}.fa-photo-film:before,.fa-photo-video:before{content:"\f87c"}.fa-folder-minus:before{content:"\f65d"}.fa-store:before{content:"\f54e"}.fa-arrow-trend-up:before{content:"\e098"}.fa-plug-circle-minus:before{content:"\e55e"}.fa-sign-hanging:before,.fa-sign:before{content:"\f4d9"}.fa-bezier-curve:before{content:"\f55b"}.fa-bell-slash:before{content:"\f1f6"}.fa-tablet-android:before,.fa-tablet:before{content:"\f3fb"}.fa-school-flag:before{content:"\e56e"}.fa-fill:before{content:"\f575"}.fa-angle-up:before{content:"\f106"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-holly-berry:before{content:"\f7aa"}.fa-chevron-left:before{content:"\f053"}.fa-bacteria:before{content:"\e059"}.fa-hand-lizard:before{content:"\f258"}.fa-notdef:before{content:"\e1fe"}.fa-disease:before{content:"\f7fa"}.fa-briefcase-medical:before{content:"\f469"}.fa-genderless:before{content:"\f22d"}.fa-chevron-right:before{content:"\f054"}.fa-retweet:before{content:"\f079"}.fa-car-alt:before,.fa-car-rear:before{content:"\f5de"}.fa-pump-soap:before{content:"\e06b"}.fa-video-slash:before{content:"\f4e2"}.fa-battery-2:before,.fa-battery-quarter:before{content:"\f243"}.fa-radio:before{content:"\f8d7"}.fa-baby-carriage:before,.fa-carriage-baby:before{content:"\f77d"}.fa-traffic-light:before{content:"\f637"}.fa-thermometer:before{content:"\f491"}.fa-vr-cardboard:before{content:"\f729"}.fa-hand-middle-finger:before{content:"\f806"}.fa-percent:before,.fa-percentage:before{content:"\25"}.fa-truck-moving:before{content:"\f4df"}.fa-glass-water-droplet:before{content:"\e4f5"}.fa-display:before{content:"\e163"}.fa-face-smile:before,.fa-smile:before{content:"\f118"}.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}.fa-trophy:before{content:"\f091"}.fa-person-praying:before,.fa-pray:before{content:"\f683"}.fa-hammer:before{content:"\f6e3"}.fa-hand-peace:before{content:"\f25b"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-spinner:before{content:"\f110"}.fa-robot:before{content:"\f544"}.fa-peace:before{content:"\f67c"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-warehouse:before{content:"\f494"}.fa-arrow-up-right-dots:before{content:"\e4b7"}.fa-splotch:before{content:"\f5bc"}.fa-face-grin-hearts:before,.fa-grin-hearts:before{content:"\f584"}.fa-dice-four:before{content:"\f524"}.fa-sim-card:before{content:"\f7c4"}.fa-transgender-alt:before,.fa-transgender:before{content:"\f225"}.fa-mercury:before{content:"\f223"}.fa-arrow-turn-down:before,.fa-level-down:before{content:"\f149"}.fa-person-falling-burst:before{content:"\e547"}.fa-award:before{content:"\f559"}.fa-ticket-alt:before,.fa-ticket-simple:before{content:"\f3ff"}.fa-building:before{content:"\f1ad"}.fa-angle-double-left:before,.fa-angles-left:before{content:"\f100"}.fa-qrcode:before{content:"\f029"}.fa-clock-rotate-left:before,.fa-history:before{content:"\f1da"}.fa-face-grin-beam-sweat:before,.fa-grin-beam-sweat:before{content:"\f583"}.fa-arrow-right-from-file:before,.fa-file-export:before{content:"\f56e"}.fa-shield-blank:before,.fa-shield:before{content:"\f132"}.fa-arrow-up-short-wide:before,.fa-sort-amount-up-alt:before{content:"\f885"}.fa-house-medical:before{content:"\e3b2"}.fa-golf-ball-tee:before,.fa-golf-ball:before{content:"\f450"}.fa-chevron-circle-left:before,.fa-circle-chevron-left:before{content:"\f137"}.fa-house-chimney-window:before{content:"\e00d"}.fa-pen-nib:before{content:"\f5ad"}.fa-tent-arrow-turn-left:before{content:"\e580"}.fa-tents:before{content:"\e582"}.fa-magic:before,.fa-wand-magic:before{content:"\f0d0"}.fa-dog:before{content:"\f6d3"}.fa-carrot:before{content:"\f787"}.fa-moon:before{content:"\f186"}.fa-wine-glass-alt:before,.fa-wine-glass-empty:before{content:"\f5ce"}.fa-cheese:before{content:"\f7ef"}.fa-yin-yang:before{content:"\f6ad"}.fa-music:before{content:"\f001"}.fa-code-commit:before{content:"\f386"}.fa-temperature-low:before{content:"\f76b"}.fa-biking:before,.fa-person-biking:before{content:"\f84a"}.fa-broom:before{content:"\f51a"}.fa-shield-heart:before{content:"\e574"}.fa-gopuram:before{content:"\f664"}.fa-earth-oceania:before,.fa-globe-oceania:before{content:"\e47b"}.fa-square-xmark:before,.fa-times-square:before,.fa-xmark-square:before{content:"\f2d3"}.fa-hashtag:before{content:"\23"}.fa-expand-alt:before,.fa-up-right-and-down-left-from-center:before{content:"\f424"}.fa-oil-can:before{content:"\f613"}.fa-t:before{content:"\54"}.fa-hippo:before{content:"\f6ed"}.fa-chart-column:before{content:"\e0e3"}.fa-infinity:before{content:"\f534"}.fa-vial-circle-check:before{content:"\e596"}.fa-person-arrow-down-to-line:before{content:"\e538"}.fa-voicemail:before{content:"\f897"}.fa-fan:before{content:"\f863"}.fa-person-walking-luggage:before{content:"\e554"}.fa-arrows-alt-v:before,.fa-up-down:before{content:"\f338"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-calendar:before{content:"\f133"}.fa-trailer:before{content:"\e041"}.fa-bahai:before,.fa-haykal:before{content:"\f666"}.fa-sd-card:before{content:"\f7c2"}.fa-dragon:before{content:"\f6d5"}.fa-shoe-prints:before{content:"\f54b"}.fa-circle-plus:before,.fa-plus-circle:before{content:"\f055"}.fa-face-grin-tongue-wink:before,.fa-grin-tongue-wink:before{content:"\f58b"}.fa-hand-holding:before{content:"\f4bd"}.fa-plug-circle-exclamation:before{content:"\e55d"}.fa-chain-broken:before,.fa-chain-slash:before,.fa-link-slash:before,.fa-unlink:before{content:"\f127"}.fa-clone:before{content:"\f24d"}.fa-person-walking-arrow-loop-left:before{content:"\e551"}.fa-arrow-up-z-a:before,.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-fire-alt:before,.fa-fire-flame-curved:before{content:"\f7e4"}.fa-tornado:before{content:"\f76f"}.fa-file-circle-plus:before{content:"\e494"}.fa-book-quran:before,.fa-quran:before{content:"\f687"}.fa-anchor:before{content:"\f13d"}.fa-border-all:before{content:"\f84c"}.fa-angry:before,.fa-face-angry:before{content:"\f556"}.fa-cookie-bite:before{content:"\f564"}.fa-arrow-trend-down:before{content:"\e097"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-draw-polygon:before{content:"\f5ee"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-gauge-simple-high:before,.fa-tachometer-fast:before,.fa-tachometer:before{content:"\f62a"}.fa-shower:before{content:"\f2cc"}.fa-desktop-alt:before,.fa-desktop:before{content:"\f390"}.fa-m:before{content:"\4d"}.fa-table-list:before,.fa-th-list:before{content:"\f00b"}.fa-comment-sms:before,.fa-sms:before{content:"\f7cd"}.fa-book:before{content:"\f02d"}.fa-user-plus:before{content:"\f234"}.fa-check:before{content:"\f00c"}.fa-battery-4:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-house-circle-check:before{content:"\e509"}.fa-angle-left:before{content:"\f104"}.fa-diagram-successor:before{content:"\e47a"}.fa-truck-arrow-right:before{content:"\e58b"}.fa-arrows-split-up-and-left:before{content:"\e4bc"}.fa-fist-raised:before,.fa-hand-fist:before{content:"\f6de"}.fa-cloud-moon:before{content:"\f6c3"}.fa-briefcase:before{content:"\f0b1"}.fa-person-falling:before{content:"\e546"}.fa-image-portrait:before,.fa-portrait:before{content:"\f3e0"}.fa-user-tag:before{content:"\f507"}.fa-rug:before{content:"\e569"}.fa-earth-europe:before,.fa-globe-europe:before{content:"\f7a2"}.fa-cart-flatbed-suitcase:before,.fa-luggage-cart:before{content:"\f59d"}.fa-rectangle-times:before,.fa-rectangle-xmark:before,.fa-times-rectangle:before,.fa-window-close:before{content:"\f410"}.fa-baht-sign:before{content:"\e0ac"}.fa-book-open:before{content:"\f518"}.fa-book-journal-whills:before,.fa-journal-whills:before{content:"\f66a"}.fa-handcuffs:before{content:"\e4f8"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-database:before{content:"\f1c0"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-bottle-droplet:before{content:"\e4c4"}.fa-mask-face:before{content:"\e1d7"}.fa-hill-rockslide:before{content:"\e508"}.fa-exchange-alt:before,.fa-right-left:before{content:"\f362"}.fa-paper-plane:before{content:"\f1d8"}.fa-road-circle-exclamation:before{content:"\e565"}.fa-dungeon:before{content:"\f6d9"}.fa-align-right:before{content:"\f038"}.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-life-ring:before{content:"\f1cd"}.fa-hands:before,.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-calendar-day:before{content:"\f783"}.fa-ladder-water:before,.fa-swimming-pool:before,.fa-water-ladder:before{content:"\f5c5"}.fa-arrows-up-down:before,.fa-arrows-v:before{content:"\f07d"}.fa-face-grimace:before,.fa-grimace:before{content:"\f57f"}.fa-wheelchair-alt:before,.fa-wheelchair-move:before{content:"\e2ce"}.fa-level-down-alt:before,.fa-turn-down:before{content:"\f3be"}.fa-person-walking-arrow-right:before{content:"\e552"}.fa-envelope-square:before,.fa-square-envelope:before{content:"\f199"}.fa-dice:before{content:"\f522"}.fa-bowling-ball:before{content:"\f436"}.fa-brain:before{content:"\f5dc"}.fa-band-aid:before,.fa-bandage:before{content:"\f462"}.fa-calendar-minus:before{content:"\f272"}.fa-circle-xmark:before,.fa-times-circle:before,.fa-xmark-circle:before{content:"\f057"}.fa-gifts:before{content:"\f79c"}.fa-hotel:before{content:"\f594"}.fa-earth-asia:before,.fa-globe-asia:before{content:"\f57e"}.fa-id-card-alt:before,.fa-id-card-clip:before{content:"\f47f"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}.fa-thumbs-up:before{content:"\f164"}.fa-user-clock:before{content:"\f4fd"}.fa-allergies:before,.fa-hand-dots:before{content:"\f461"}.fa-file-invoice:before{content:"\f570"}.fa-window-minimize:before{content:"\f2d1"}.fa-coffee:before,.fa-mug-saucer:before{content:"\f0f4"}.fa-brush:before{content:"\f55d"}.fa-mask:before{content:"\f6fa"}.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-ruler-vertical:before{content:"\f548"}.fa-user-alt:before,.fa-user-large:before{content:"\f406"}.fa-train-tram:before{content:"\e5b4"}.fa-user-nurse:before{content:"\f82f"}.fa-syringe:before{content:"\f48e"}.fa-cloud-sun:before{content:"\f6c4"}.fa-stopwatch-20:before{content:"\e06f"}.fa-square-full:before{content:"\f45c"}.fa-magnet:before{content:"\f076"}.fa-jar:before{content:"\e516"}.fa-note-sticky:before,.fa-sticky-note:before{content:"\f249"}.fa-bug-slash:before{content:"\e490"}.fa-arrow-up-from-water-pump:before{content:"\e4b6"}.fa-bone:before{content:"\f5d7"}.fa-table-cells-row-unlock:before{content:"\e691"}.fa-user-injured:before{content:"\f728"}.fa-face-sad-tear:before,.fa-sad-tear:before{content:"\f5b4"}.fa-plane:before{content:"\f072"}.fa-tent-arrows-down:before{content:"\e581"}.fa-exclamation:before{content:"\21"}.fa-arrows-spin:before{content:"\e4bb"}.fa-print:before{content:"\f02f"}.fa-try:before,.fa-turkish-lira-sign:before,.fa-turkish-lira:before{content:"\e2bb"}.fa-dollar-sign:before,.fa-dollar:before,.fa-usd:before{content:"\24"}.fa-x:before{content:"\58"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-users-cog:before,.fa-users-gear:before{content:"\f509"}.fa-person-military-pointing:before{content:"\e54a"}.fa-bank:before,.fa-building-columns:before,.fa-institution:before,.fa-museum:before,.fa-university:before{content:"\f19c"}.fa-umbrella:before{content:"\f0e9"}.fa-trowel:before{content:"\e589"}.fa-d:before{content:"\44"}.fa-stapler:before{content:"\e5af"}.fa-masks-theater:before,.fa-theater-masks:before{content:"\f630"}.fa-kip-sign:before{content:"\e1c4"}.fa-hand-point-left:before{content:"\f0a5"}.fa-handshake-alt:before,.fa-handshake-simple:before{content:"\f4c6"}.fa-fighter-jet:before,.fa-jet-fighter:before{content:"\f0fb"}.fa-share-alt-square:before,.fa-square-share-nodes:before{content:"\f1e1"}.fa-barcode:before{content:"\f02a"}.fa-plus-minus:before{content:"\e43c"}.fa-video-camera:before,.fa-video:before{content:"\f03d"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-person-circle-check:before{content:"\e53e"}.fa-level-up-alt:before,.fa-turn-up:before{content:"\f3bf"}.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:Font Awesome\ 6 Brands;font-style:normal;font-weight:400;font-display:block;src:url(/_next/static/media/fa-brands-400.60e5c9d3.woff2) format("woff2"),url(/_next/static/media/fa-brands-400.13428122.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero:before{content:"\f3d0"}.fa-hooli:before{content:"\f427"}.fa-yelp:before{content:"\f1e9"}.fa-cc-visa:before{content:"\f1f0"}.fa-lastfm:before{content:"\f202"}.fa-shopware:before{content:"\f5b5"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-aws:before{content:"\f375"}.fa-redhat:before{content:"\f7bc"}.fa-yoast:before{content:"\f2b1"}.fa-cloudflare:before{content:"\e07d"}.fa-ups:before{content:"\f7e0"}.fa-pixiv:before{content:"\e640"}.fa-wpexplorer:before{content:"\f2de"}.fa-dyalog:before{content:"\f399"}.fa-bity:before{content:"\f37a"}.fa-stackpath:before{content:"\f842"}.fa-buysellads:before{content:"\f20d"}.fa-first-order:before{content:"\f2b0"}.fa-modx:before{content:"\f285"}.fa-guilded:before{content:"\e07e"}.fa-vnv:before{content:"\f40b"}.fa-js-square:before,.fa-square-js:before{content:"\f3b9"}.fa-microsoft:before{content:"\f3ca"}.fa-qq:before{content:"\f1d6"}.fa-orcid:before{content:"\f8d2"}.fa-java:before{content:"\f4e4"}.fa-invision:before{content:"\f7b0"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-centercode:before{content:"\f380"}.fa-glide-g:before{content:"\f2a6"}.fa-drupal:before{content:"\f1a9"}.fa-jxl:before{content:"\e67b"}.fa-dart-lang:before{content:"\e693"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-unity:before{content:"\e049"}.fa-whmcs:before{content:"\f40d"}.fa-rocketchat:before{content:"\f3e8"}.fa-vk:before{content:"\f189"}.fa-untappd:before{content:"\f405"}.fa-mailchimp:before{content:"\f59e"}.fa-css3-alt:before{content:"\f38b"}.fa-reddit-square:before,.fa-square-reddit:before{content:"\f1a2"}.fa-vimeo-v:before{content:"\f27d"}.fa-contao:before{content:"\f26d"}.fa-square-font-awesome:before{content:"\e5ad"}.fa-deskpro:before{content:"\f38f"}.fa-brave:before{content:"\e63c"}.fa-sistrix:before{content:"\f3ee"}.fa-instagram-square:before,.fa-square-instagram:before{content:"\e055"}.fa-battle-net:before{content:"\f835"}.fa-the-red-yeti:before{content:"\f69d"}.fa-hacker-news-square:before,.fa-square-hacker-news:before{content:"\f3af"}.fa-edge:before{content:"\f282"}.fa-threads:before{content:"\e618"}.fa-napster:before{content:"\f3d2"}.fa-snapchat-square:before,.fa-square-snapchat:before{content:"\f2ad"}.fa-google-plus-g:before{content:"\f0d5"}.fa-artstation:before{content:"\f77a"}.fa-markdown:before{content:"\f60f"}.fa-sourcetree:before{content:"\f7d3"}.fa-google-plus:before{content:"\f2b3"}.fa-diaspora:before{content:"\f791"}.fa-foursquare:before{content:"\f180"}.fa-stack-overflow:before{content:"\f16c"}.fa-github-alt:before{content:"\f113"}.fa-phoenix-squadron:before{content:"\f511"}.fa-pagelines:before{content:"\f18c"}.fa-algolia:before{content:"\f36c"}.fa-red-river:before{content:"\f3e3"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-safari:before{content:"\f267"}.fa-google:before{content:"\f1a0"}.fa-font-awesome-alt:before,.fa-square-font-awesome-stroke:before{content:"\f35c"}.fa-atlassian:before{content:"\f77b"}.fa-linkedin-in:before{content:"\f0e1"}.fa-digital-ocean:before{content:"\f391"}.fa-nimblr:before{content:"\f5a8"}.fa-chromecast:before{content:"\f838"}.fa-evernote:before{content:"\f839"}.fa-hacker-news:before{content:"\f1d4"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-adversal:before{content:"\f36a"}.fa-creative-commons:before{content:"\f25e"}.fa-watchman-monitoring:before{content:"\e087"}.fa-fonticons:before{content:"\f280"}.fa-weixin:before{content:"\f1d7"}.fa-shirtsinbulk:before{content:"\f214"}.fa-codepen:before{content:"\f1cb"}.fa-git-alt:before{content:"\f841"}.fa-lyft:before{content:"\f3c3"}.fa-rev:before{content:"\f5b2"}.fa-windows:before{content:"\f17a"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-square-viadeo:before,.fa-viadeo-square:before{content:"\f2aa"}.fa-meetup:before{content:"\f2e0"}.fa-centos:before{content:"\f789"}.fa-adn:before{content:"\f170"}.fa-cloudsmith:before{content:"\f384"}.fa-opensuse:before{content:"\e62b"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-dribbble-square:before,.fa-square-dribbble:before{content:"\f397"}.fa-codiepie:before{content:"\f284"}.fa-node:before{content:"\f419"}.fa-mix:before{content:"\f3cb"}.fa-steam:before{content:"\f1b6"}.fa-cc-apple-pay:before{content:"\f416"}.fa-scribd:before{content:"\f28a"}.fa-debian:before{content:"\e60b"}.fa-openid:before{content:"\f19b"}.fa-instalod:before{content:"\e081"}.fa-expeditedssl:before{content:"\f23e"}.fa-sellcast:before{content:"\f2da"}.fa-square-twitter:before,.fa-twitter-square:before{content:"\f081"}.fa-r-project:before{content:"\f4f7"}.fa-delicious:before{content:"\f1a5"}.fa-freebsd:before{content:"\f3a4"}.fa-vuejs:before{content:"\f41f"}.fa-accusoft:before{content:"\f369"}.fa-ioxhost:before{content:"\f208"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-app-store:before{content:"\f36f"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-itunes-note:before{content:"\f3b5"}.fa-golang:before{content:"\e40f"}.fa-kickstarter:before,.fa-square-kickstarter:before{content:"\f3bb"}.fa-grav:before{content:"\f2d6"}.fa-weibo:before{content:"\f18a"}.fa-uncharted:before{content:"\e084"}.fa-firstdraft:before{content:"\f3a1"}.fa-square-youtube:before,.fa-youtube-square:before{content:"\f431"}.fa-wikipedia-w:before{content:"\f266"}.fa-rendact:before,.fa-wpressr:before{content:"\f3e4"}.fa-angellist:before{content:"\f209"}.fa-galactic-republic:before{content:"\f50c"}.fa-nfc-directional:before{content:"\e530"}.fa-skype:before{content:"\f17e"}.fa-joget:before{content:"\f3b7"}.fa-fedora:before{content:"\f798"}.fa-stripe-s:before{content:"\f42a"}.fa-meta:before{content:"\e49b"}.fa-laravel:before{content:"\f3bd"}.fa-hotjar:before{content:"\f3b1"}.fa-bluetooth-b:before{content:"\f294"}.fa-square-letterboxd:before{content:"\e62e"}.fa-sticker-mule:before{content:"\f3f7"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-hips:before{content:"\f452"}.fa-behance:before{content:"\f1b4"}.fa-reddit:before{content:"\f1a1"}.fa-discord:before{content:"\f392"}.fa-chrome:before{content:"\f268"}.fa-app-store-ios:before{content:"\f370"}.fa-cc-discover:before{content:"\f1f2"}.fa-wpbeginner:before{content:"\f297"}.fa-confluence:before{content:"\f78d"}.fa-shoelace:before{content:"\e60c"}.fa-mdb:before{content:"\f8ca"}.fa-dochub:before{content:"\f394"}.fa-accessible-icon:before{content:"\f368"}.fa-ebay:before{content:"\f4f4"}.fa-amazon:before{content:"\f270"}.fa-unsplash:before{content:"\e07c"}.fa-yarn:before{content:"\f7e3"}.fa-square-steam:before,.fa-steam-square:before{content:"\f1b7"}.fa-500px:before{content:"\f26e"}.fa-square-vimeo:before,.fa-vimeo-square:before{content:"\f194"}.fa-asymmetrik:before{content:"\f372"}.fa-font-awesome-flag:before,.fa-font-awesome-logo-full:before,.fa-font-awesome:before{content:"\f2b4"}.fa-gratipay:before{content:"\f184"}.fa-apple:before{content:"\f179"}.fa-hive:before{content:"\e07f"}.fa-gitkraken:before{content:"\f3a6"}.fa-keybase:before{content:"\f4f5"}.fa-apple-pay:before{content:"\f415"}.fa-padlet:before{content:"\e4a0"}.fa-amazon-pay:before{content:"\f42c"}.fa-github-square:before,.fa-square-github:before{content:"\f092"}.fa-stumbleupon:before{content:"\f1a4"}.fa-fedex:before{content:"\f797"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-shopify:before{content:"\e057"}.fa-neos:before{content:"\f612"}.fa-square-threads:before{content:"\e619"}.fa-hackerrank:before{content:"\f5f7"}.fa-researchgate:before{content:"\f4f8"}.fa-swift:before{content:"\f8e1"}.fa-angular:before{content:"\f420"}.fa-speakap:before{content:"\f3f3"}.fa-angrycreative:before{content:"\f36e"}.fa-y-combinator:before{content:"\f23b"}.fa-empire:before{content:"\f1d1"}.fa-envira:before{content:"\f299"}.fa-google-scholar:before{content:"\e63b"}.fa-gitlab-square:before,.fa-square-gitlab:before{content:"\e5ae"}.fa-studiovinari:before{content:"\f3f8"}.fa-pied-piper:before{content:"\f2ae"}.fa-wordpress:before{content:"\f19a"}.fa-product-hunt:before{content:"\f288"}.fa-firefox:before{content:"\f269"}.fa-linode:before{content:"\f2b8"}.fa-goodreads:before{content:"\f3a8"}.fa-odnoklassniki-square:before,.fa-square-odnoklassniki:before{content:"\f264"}.fa-jsfiddle:before{content:"\f1cc"}.fa-sith:before{content:"\f512"}.fa-themeisle:before{content:"\f2b2"}.fa-page4:before{content:"\f3d7"}.fa-hashnode:before{content:"\e499"}.fa-react:before{content:"\f41b"}.fa-cc-paypal:before{content:"\f1f4"}.fa-squarespace:before{content:"\f5be"}.fa-cc-stripe:before{content:"\f1f5"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-bitcoin:before{content:"\f379"}.fa-keycdn:before{content:"\f3ba"}.fa-opera:before{content:"\f26a"}.fa-itch-io:before{content:"\f83a"}.fa-umbraco:before{content:"\f8e8"}.fa-galactic-senate:before{content:"\f50d"}.fa-ubuntu:before{content:"\f7df"}.fa-draft2digital:before{content:"\f396"}.fa-stripe:before{content:"\f429"}.fa-houzz:before{content:"\f27c"}.fa-gg:before{content:"\f260"}.fa-dhl:before{content:"\f790"}.fa-pinterest-square:before,.fa-square-pinterest:before{content:"\f0d3"}.fa-xing:before{content:"\f168"}.fa-blackberry:before{content:"\f37b"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-playstation:before{content:"\f3df"}.fa-quinscape:before{content:"\f459"}.fa-less:before{content:"\f41d"}.fa-blogger-b:before{content:"\f37d"}.fa-opencart:before{content:"\f23d"}.fa-vine:before{content:"\f1ca"}.fa-signal-messenger:before{content:"\e663"}.fa-paypal:before{content:"\f1ed"}.fa-gitlab:before{content:"\f296"}.fa-typo3:before{content:"\f42b"}.fa-reddit-alien:before{content:"\f281"}.fa-yahoo:before{content:"\f19e"}.fa-dailymotion:before{content:"\e052"}.fa-affiliatetheme:before{content:"\f36b"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-bootstrap:before{content:"\f836"}.fa-odnoklassniki:before{content:"\f263"}.fa-nfc-symbol:before{content:"\e531"}.fa-mintbit:before{content:"\e62f"}.fa-ethereum:before{content:"\f42e"}.fa-speaker-deck:before{content:"\f83c"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-patreon:before{content:"\f3d9"}.fa-avianex:before{content:"\f374"}.fa-ello:before{content:"\f5f1"}.fa-gofore:before{content:"\f3a7"}.fa-bimobject:before{content:"\f378"}.fa-brave-reverse:before{content:"\e63d"}.fa-facebook-f:before{content:"\f39e"}.fa-google-plus-square:before,.fa-square-google-plus:before{content:"\f0d4"}.fa-web-awesome:before{content:"\e682"}.fa-mandalorian:before{content:"\f50f"}.fa-first-order-alt:before{content:"\f50a"}.fa-osi:before{content:"\f41a"}.fa-google-wallet:before{content:"\f1ee"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-periscope:before{content:"\f3da"}.fa-fulcrum:before{content:"\f50b"}.fa-cloudscale:before{content:"\f383"}.fa-forumbee:before{content:"\f211"}.fa-mizuni:before{content:"\f3cc"}.fa-schlix:before{content:"\f3ea"}.fa-square-xing:before,.fa-xing-square:before{content:"\f169"}.fa-bandcamp:before{content:"\f2d5"}.fa-wpforms:before{content:"\f298"}.fa-cloudversify:before{content:"\f385"}.fa-usps:before{content:"\f7e1"}.fa-megaport:before{content:"\f5a3"}.fa-magento:before{content:"\f3c4"}.fa-spotify:before{content:"\f1bc"}.fa-optin-monster:before{content:"\f23c"}.fa-fly:before{content:"\f417"}.fa-aviato:before{content:"\f421"}.fa-itunes:before{content:"\f3b4"}.fa-cuttlefish:before{content:"\f38c"}.fa-blogger:before{content:"\f37c"}.fa-flickr:before{content:"\f16e"}.fa-viber:before{content:"\f409"}.fa-soundcloud:before{content:"\f1be"}.fa-digg:before{content:"\f1a6"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-letterboxd:before{content:"\e62d"}.fa-symfony:before{content:"\f83d"}.fa-maxcdn:before{content:"\f136"}.fa-etsy:before{content:"\f2d7"}.fa-facebook-messenger:before{content:"\f39f"}.fa-audible:before{content:"\f373"}.fa-think-peaks:before{content:"\f731"}.fa-bilibili:before{content:"\e3d9"}.fa-erlang:before{content:"\f39d"}.fa-x-twitter:before{content:"\e61b"}.fa-cotton-bureau:before{content:"\f89e"}.fa-dashcube:before{content:"\f210"}.fa-42-group:before,.fa-innosoft:before{content:"\e080"}.fa-stack-exchange:before{content:"\f18d"}.fa-elementor:before{content:"\f430"}.fa-pied-piper-square:before,.fa-square-pied-piper:before{content:"\e01e"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-palfed:before{content:"\f3d8"}.fa-superpowers:before{content:"\f2dd"}.fa-resolving:before{content:"\f3e7"}.fa-xbox:before{content:"\f412"}.fa-square-web-awesome-stroke:before{content:"\e684"}.fa-searchengin:before{content:"\f3eb"}.fa-tiktok:before{content:"\e07b"}.fa-facebook-square:before,.fa-square-facebook:before{content:"\f082"}.fa-renren:before{content:"\f18b"}.fa-linux:before{content:"\f17c"}.fa-glide:before{content:"\f2a5"}.fa-linkedin:before{content:"\f08c"}.fa-hubspot:before{content:"\f3b2"}.fa-deploydog:before{content:"\f38e"}.fa-twitch:before{content:"\f1e8"}.fa-flutter:before{content:"\e694"}.fa-ravelry:before{content:"\f2d9"}.fa-mixer:before{content:"\e056"}.fa-lastfm-square:before,.fa-square-lastfm:before{content:"\f203"}.fa-vimeo:before{content:"\f40a"}.fa-mendeley:before{content:"\f7b3"}.fa-uniregistry:before{content:"\f404"}.fa-figma:before{content:"\f799"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-dropbox:before{content:"\f16b"}.fa-instagram:before{content:"\f16d"}.fa-cmplid:before{content:"\e360"}.fa-upwork:before{content:"\e641"}.fa-facebook:before{content:"\f09a"}.fa-gripfire:before{content:"\f3ac"}.fa-jedi-order:before{content:"\f50e"}.fa-uikit:before{content:"\f403"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-phabricator:before{content:"\f3db"}.fa-ussunnah:before{content:"\f407"}.fa-earlybirds:before{content:"\f39a"}.fa-trade-federation:before{content:"\f513"}.fa-autoprefixer:before{content:"\f41c"}.fa-whatsapp:before{content:"\f232"}.fa-square-upwork:before{content:"\e67c"}.fa-slideshare:before{content:"\f1e7"}.fa-google-play:before{content:"\f3ab"}.fa-viadeo:before{content:"\f2a9"}.fa-line:before{content:"\f3c0"}.fa-google-drive:before{content:"\f3aa"}.fa-servicestack:before{content:"\f3ec"}.fa-simplybuilt:before{content:"\f215"}.fa-bitbucket:before{content:"\f171"}.fa-imdb:before{content:"\f2d8"}.fa-deezer:before{content:"\e077"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-jira:before{content:"\f7b1"}.fa-docker:before{content:"\f395"}.fa-screenpal:before{content:"\e570"}.fa-bluetooth:before{content:"\f293"}.fa-gitter:before{content:"\f426"}.fa-d-and-d:before{content:"\f38d"}.fa-microblog:before{content:"\e01a"}.fa-cc-diners-club:before{content:"\f24c"}.fa-gg-circle:before{content:"\f261"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-yandex:before{content:"\f413"}.fa-readme:before{content:"\f4d5"}.fa-html5:before{content:"\f13b"}.fa-sellsy:before{content:"\f213"}.fa-square-web-awesome:before{content:"\e683"}.fa-sass:before{content:"\f41e"}.fa-wirsindhandwerk:before,.fa-wsh:before{content:"\e2d0"}.fa-buromobelexperte:before{content:"\f37f"}.fa-salesforce:before{content:"\f83b"}.fa-octopus-deploy:before{content:"\e082"}.fa-medapps:before{content:"\f3c6"}.fa-ns8:before{content:"\f3d5"}.fa-pinterest-p:before{content:"\f231"}.fa-apper:before{content:"\f371"}.fa-fort-awesome:before{content:"\f286"}.fa-waze:before{content:"\f83f"}.fa-bluesky:before{content:"\e671"}.fa-cc-jcb:before{content:"\f24b"}.fa-snapchat-ghost:before,.fa-snapchat:before{content:"\f2ab"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-rust:before{content:"\e07a"}.fa-wix:before{content:"\f5cf"}.fa-behance-square:before,.fa-square-behance:before{content:"\f1b5"}.fa-supple:before{content:"\f3f9"}.fa-webflow:before{content:"\e65c"}.fa-rebel:before{content:"\f1d0"}.fa-css3:before{content:"\f13c"}.fa-staylinked:before{content:"\f3f5"}.fa-kaggle:before{content:"\f5fa"}.fa-space-awesome:before{content:"\e5ac"}.fa-deviantart:before{content:"\f1bd"}.fa-cpanel:before{content:"\f388"}.fa-goodreads-g:before{content:"\f3a9"}.fa-git-square:before,.fa-square-git:before{content:"\f1d2"}.fa-square-tumblr:before,.fa-tumblr-square:before{content:"\f174"}.fa-trello:before{content:"\f181"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-get-pocket:before{content:"\f265"}.fa-perbyte:before{content:"\e083"}.fa-grunt:before{content:"\f3ad"}.fa-weebly:before{content:"\f5cc"}.fa-connectdevelop:before{content:"\f20e"}.fa-leanpub:before{content:"\f212"}.fa-black-tie:before{content:"\f27e"}.fa-themeco:before{content:"\f5c6"}.fa-python:before{content:"\f3e2"}.fa-android:before{content:"\f17b"}.fa-bots:before{content:"\e340"}.fa-free-code-camp:before{content:"\f2c5"}.fa-hornbill:before{content:"\f592"}.fa-js:before{content:"\f3b8"}.fa-ideal:before{content:"\e013"}.fa-git:before{content:"\f1d3"}.fa-dev:before{content:"\f6cc"}.fa-sketch:before{content:"\f7c6"}.fa-yandex-international:before{content:"\f414"}.fa-cc-amex:before{content:"\f1f3"}.fa-uber:before{content:"\f402"}.fa-github:before{content:"\f09b"}.fa-php:before{content:"\f457"}.fa-alipay:before{content:"\f642"}.fa-youtube:before{content:"\f167"}.fa-skyatlas:before{content:"\f216"}.fa-firefox-browser:before{content:"\e007"}.fa-replyd:before{content:"\f3e6"}.fa-suse:before{content:"\f7d6"}.fa-jenkins:before{content:"\f3b6"}.fa-twitter:before{content:"\f099"}.fa-rockrms:before{content:"\f3e9"}.fa-pinterest:before{content:"\f0d2"}.fa-buffer:before{content:"\f837"}.fa-npm:before{content:"\f3d4"}.fa-yammer:before{content:"\f840"}.fa-btc:before{content:"\f15a"}.fa-dribbble:before{content:"\f17d"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-internet-explorer:before{content:"\f26b"}.fa-stubber:before{content:"\e5c7"}.fa-telegram-plane:before,.fa-telegram:before{content:"\f2c6"}.fa-old-republic:before{content:"\f510"}.fa-odysee:before{content:"\e5c6"}.fa-square-whatsapp:before,.fa-whatsapp-square:before{content:"\f40c"}.fa-node-js:before{content:"\f3d3"}.fa-edge-legacy:before{content:"\e078"}.fa-slack-hash:before,.fa-slack:before{content:"\f198"}.fa-medrt:before{content:"\f3c8"}.fa-usb:before{content:"\f287"}.fa-tumblr:before{content:"\f173"}.fa-vaadin:before{content:"\f408"}.fa-quora:before{content:"\f2c4"}.fa-square-x-twitter:before{content:"\e61a"}.fa-reacteurope:before{content:"\f75d"}.fa-medium-m:before,.fa-medium:before{content:"\f23a"}.fa-amilia:before{content:"\f36d"}.fa-mixcloud:before{content:"\f289"}.fa-flipboard:before{content:"\f44d"}.fa-viacoin:before{content:"\f237"}.fa-critical-role:before{content:"\f6c9"}.fa-sitrox:before{content:"\e44a"}.fa-discourse:before{content:"\f393"}.fa-joomla:before{content:"\f1aa"}.fa-mastodon:before{content:"\f4f6"}.fa-airbnb:before{content:"\f834"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-buy-n-large:before{content:"\f8a6"}.fa-gulp:before{content:"\f3ae"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-strava:before{content:"\f428"}.fa-ember:before{content:"\f423"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-teamspeak:before{content:"\f4f9"}.fa-pushed:before{content:"\f3e1"}.fa-wordpress-simple:before{content:"\f411"}.fa-nutritionix:before{content:"\f3d6"}.fa-wodu:before{content:"\e088"}.fa-google-pay:before{content:"\e079"}.fa-intercom:before{content:"\f7af"}.fa-zhihu:before{content:"\f63f"}.fa-korvue:before{content:"\f42f"}.fa-pix:before{content:"\e43a"}.fa-steam-symbol:before{content:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:Font Awesome\ 6 Free;font-style:normal;font-weight:400;font-display:block;src:url(/_next/static/media/fa-regular-400.6f7d0aec.woff2) format("woff2"),url(/_next/static/media/fa-regular-400.d151c40a.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:Font Awesome\ 6 Free;font-style:normal;font-weight:900;font-display:block;src:url(/_next/static/media/fa-solid-900.cece584e.woff2) format("woff2"),url(/_next/static/media/fa-solid-900.bd6c2137.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:Font Awesome\ 5 Brands;font-display:block;font-weight:400;src:url(/_next/static/media/fa-brands-400.60e5c9d3.woff2) format("woff2"),url(/_next/static/media/fa-brands-400.13428122.ttf) format("truetype")}@font-face{font-family:Font Awesome\ 5 Free;font-display:block;font-weight:900;src:url(/_next/static/media/fa-solid-900.cece584e.woff2) format("woff2"),url(/_next/static/media/fa-solid-900.bd6c2137.ttf) format("truetype")}@font-face{font-family:Font Awesome\ 5 Free;font-display:block;font-weight:400;src:url(/_next/static/media/fa-regular-400.6f7d0aec.woff2) format("woff2"),url(/_next/static/media/fa-regular-400.d151c40a.ttf) format("truetype")}@font-face{font-family:FontAwesome;font-display:block;src:url(/_next/static/media/fa-solid-900.cece584e.woff2) format("woff2"),url(/_next/static/media/fa-solid-900.bd6c2137.ttf) format("truetype")}@font-face{font-family:FontAwesome;font-display:block;src:url(/_next/static/media/fa-brands-400.60e5c9d3.woff2) format("woff2"),url(/_next/static/media/fa-brands-400.13428122.ttf) format("truetype")}@font-face{font-family:FontAwesome;font-display:block;src:url(/_next/static/media/fa-regular-400.6f7d0aec.woff2) format("woff2"),url(/_next/static/media/fa-regular-400.d151c40a.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:FontAwesome;font-display:block;src:url(/_next/static/media/fa-v4compatibility.e43d1602.woff2) format("woff2"),url(/_next/static/media/fa-v4compatibility.9b501f80.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
+/*!
+ Theme: a11y-light
+ Author: @ericwbailey
+ Maintainer: @ericwbailey
+
+ Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
+*/.hljs{background:#fefefe;color:#545454}.hljs-comment,.hljs-quote{color:#696969}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#d91e18}.hljs-attribute,.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#aa5d00}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:green}.hljs-section,.hljs-title{color:#007faa}.hljs-keyword,.hljs-selector-tag{color:#7928a1}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}:root{--secondary:#364156;--primary:#011638;--highlight:#ff7816;--text-header:var(--primary);--text-main-headers:var(--highlight);--text-links:#007bff;--text-footer:var(--highlight);--bg-main:#fff;--bg-dots:var(--highlight);--bg-lesson:#fff;--nav-buttons:var(--highlight);--nav-buttons-text:#fff;--corner-active:var(--highlight);--corner-inactive:#f4f4f4;--icons:var(--highlight);--footer-icons:var(--highlight);--emphasized-bg:#dce8ff;--emphasized-border:#aab6d2}.footer{padding:50px 15px;background-color:var(--primary);justify-content:center;color:var(--text-footer)}.footer,.socials{width:100%;display:flex;align-items:center}.socials{max-width:900px;margin:0;padding:0}.social{display:inline-block;list-style:none;margin-right:40px}.social img:hover{opacity:.4}.social img{transition:opacity .25s;width:30px}.terms{font-size:10px}.terms p{margin:3px}.footer a{color:inherit;text-decoration:underline}.social svg{transition:opacity .25s}.social svg:hover{opacity:.4}
\ No newline at end of file
diff --git a/_next/static/media/fa-brands-400.13428122.ttf b/_next/static/media/fa-brands-400.13428122.ttf
new file mode 100644
index 0000000..08362f3
Binary files /dev/null and b/_next/static/media/fa-brands-400.13428122.ttf differ
diff --git a/_next/static/media/fa-brands-400.60e5c9d3.woff2 b/_next/static/media/fa-brands-400.60e5c9d3.woff2
new file mode 100644
index 0000000..d84512f
Binary files /dev/null and b/_next/static/media/fa-brands-400.60e5c9d3.woff2 differ
diff --git a/_next/static/media/fa-regular-400.6f7d0aec.woff2 b/_next/static/media/fa-regular-400.6f7d0aec.woff2
new file mode 100644
index 0000000..452b49c
Binary files /dev/null and b/_next/static/media/fa-regular-400.6f7d0aec.woff2 differ
diff --git a/_next/static/media/fa-regular-400.d151c40a.ttf b/_next/static/media/fa-regular-400.d151c40a.ttf
new file mode 100644
index 0000000..7f9b53c
Binary files /dev/null and b/_next/static/media/fa-regular-400.d151c40a.ttf differ
diff --git a/_next/static/media/fa-solid-900.bd6c2137.ttf b/_next/static/media/fa-solid-900.bd6c2137.ttf
new file mode 100644
index 0000000..e7e2ecf
Binary files /dev/null and b/_next/static/media/fa-solid-900.bd6c2137.ttf differ
diff --git a/_next/static/media/fa-solid-900.cece584e.woff2 b/_next/static/media/fa-solid-900.cece584e.woff2
new file mode 100644
index 0000000..fec1fae
Binary files /dev/null and b/_next/static/media/fa-solid-900.cece584e.woff2 differ
diff --git a/_next/static/media/fa-v4compatibility.9b501f80.ttf b/_next/static/media/fa-v4compatibility.9b501f80.ttf
new file mode 100644
index 0000000..577b7a0
Binary files /dev/null and b/_next/static/media/fa-v4compatibility.9b501f80.ttf differ
diff --git a/_next/static/media/fa-v4compatibility.e43d1602.woff2 b/_next/static/media/fa-v4compatibility.e43d1602.woff2
new file mode 100644
index 0000000..7393168
Binary files /dev/null and b/_next/static/media/fa-v4compatibility.e43d1602.woff2 differ
diff --git a/images/apple-touch-icon.png b/images/apple-touch-icon.png
new file mode 100644
index 0000000..a7e25cd
Binary files /dev/null and b/images/apple-touch-icon.png differ
diff --git a/images/author.jpg b/images/author.jpg
new file mode 100644
index 0000000..d0cb8dc
Binary files /dev/null and b/images/author.jpg differ
diff --git a/images/course-icon.png b/images/course-icon.png
new file mode 100644
index 0000000..74e63ac
Binary files /dev/null and b/images/course-icon.png differ
diff --git a/images/favicon-16x16.png b/images/favicon-16x16.png
new file mode 100644
index 0000000..3a62f79
Binary files /dev/null and b/images/favicon-16x16.png differ
diff --git a/images/favicon-32x32.png b/images/favicon-32x32.png
new file mode 100644
index 0000000..cd515f0
Binary files /dev/null and b/images/favicon-32x32.png differ
diff --git a/images/favicon.ico b/images/favicon.ico
new file mode 100644
index 0000000..4cc285f
Binary files /dev/null and b/images/favicon.ico differ
diff --git a/images/order-page-layout.webp b/images/order-page-layout.webp
new file mode 100644
index 0000000..59b67fc
Binary files /dev/null and b/images/order-page-layout.webp differ
diff --git a/images/social-share-cover.jpg b/images/social-share-cover.jpg
new file mode 100644
index 0000000..4925d33
Binary files /dev/null and b/images/social-share-cover.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b6454f0
--- /dev/null
+++ b/index.html
@@ -0,0 +1 @@
+Complete Intro to React Error Boundaries – Complete Intro to React Error Boundaries
+
Frequently there are errors with APIs with malformed or otherwise weird data. Let's be defensive about this because we still want to use this API but we can't control when we get errors. We're going to use a feature called componentDidCatch to handle this. This is something you can't do with hooks so if you needed this sort of functionality you'd have to use a class component.
+
This will also catch 404s on our API if someone give it an invalid ID!
+
A component can only catch errors in its children, so that's important to keep in mind. It cannot catch its own errors. Let's go make a wrapper to use on PastOrdersRoute. Make a new file called ErrorBoundary.jsx
+
This is also the first time I'm going to be showing you what was the old way of writing components, called class components. All React code used to be written this way but while it's not deprecated it is explicitly not recommended by the React team. Previous to this version of the Complete Intro to React I still taught class components as part of the course. In the past year, I kept track and I wrote class components zero times. And as such it is time to retire teaching them as part of an intro course. However, with error boundaries it is the only way to write them, so we will do a brief intro to them so we can learn them. In reality, I would likely just use react-error-boundary and never have to write a class component at all!
+
A class component is really similar to a function component (which is what we have been writing) but have a few key differences.
+
+You cannot use any hooks with class components (useState, useEffect, etc.)
+Every class component has a render() function. It works mostly the same as a function component.
+Instead of the useState hook you'll use this.state which is an object that contains all state for that component.
+To change state, you'll use a this.setState({ key: "value" }) function. This allows you to change state like your setKey hook would have.
+Instead of useEffect, you use lifecycle methods. componentDidMount, componentDidUpdate, componentWillUnmount, etc. To read more about them, go here .
+Instead of a props parameter being passed into the function, you'll use this.props.
+This is enough here. You shouldn't be authoring class components anymore except for error boundaries. But you may encounter them in legacy React codebases.
+
+
import { Component } from "react" ;
+import { Link } from "@tanstack/react-router" ;
+
+class ErrorBoundary extends Component {
+ state = { hasError : false };
+ static getDerivedStateFromError (return { hasError : true };
+ }
+ componentDidCatch (error, info ) {
+ console .error ("ErrorBoundary caught an error" , error, info);
+ }
+ render (if (this .state .hasError ) {
+ return (
+ <div className ="error-boundary" >
+ <h2 > Uh oh!</h2 >
+ <p >
+ There was an error with this listing. <Link to ="/" > Click here</Link > {" "}
+ to back to the home page.
+ </p >
+ </div > return this .props .children ;
+ }
+}
+
+export default ErrorBoundary ;
+
+Now anything that is a child of this component will have errors caught here. Think of this like a catch block from try/catch.
+A static method is one that can be called on the constructor. You'd call this method like this: ErrorBoundary.getDerivedStateFromError(error). This method must be static.
+If you want to call an error logging service, componentDidCatch would be an amazing place to do that. I can recommend Sentry and TrackJS .
+this.props.children is any child component inside of the component. e.g. if someone renders <MyComponent><h1>hi</h1></MyComponent>, the <h1>hi</h1> is consider the the "children". This works in function components too.Because we just return children if there's no error, the ErrorBoundary component doesn't render anything itself if there are no errors.
+
+
Let's go make PastOrderRoute use it in case the API throws an error.
+
+import ErrorBoundary from "../ErrorBoundary" ;
+
+
+export const Route = createLazyFileRoute ("/past" )({
+ component : ErrorBoundaryWrappedPastOrderRoutes ,
+});
+
+
+function ErrorBoundaryWrappedPastOrderRoutes (return (
+ <ErrorBoundary >
+ <PastOrdersRoute />
+ </ErrorBoundary >
+Now this is totally self contained. No one rendering PastOrderRoute has to know that it has its own error boundary. I'll let you decide if you like this pattern or if you would have preferred doing this in App.js at the Router level. Differing opinions exist.
+We totally could have made ErrorBoundary a bit more flexible and made it able to accept a component to display in cases of errors. In general I recommend the "WET" code rule (as opposed to DRY , lol): Write Everything Twice (or I even prefer Write Everything Thrice). In this case, we have one use case for this component, so I won't spend the extra time to make it flexible. If I used it again, I'd make it work for both of those use cases, but not every use case. On the third or fourth time, I'd then go back and invest the time to make it flexible.
+
+
Now, if you want to, go add a throw new Error("lol"); in your render function for the PastOrderRoute to see it work!
+
+🏁 Click here to see the state of the project up until now: 12-error-boundaries
+
+
Portals – Complete Intro to React Portals
+
What if you are rendering a page and you want to render something in another part of the page at the same time? Think like you have a contextual right navigation and you have a page that wants to render into the contextual nav. We could use something like context to do that and that would be totally acceptable. But there's another cool way called a portal to do this as well. It even lets us render outside our app totally, like we're about to do.
+
We're going to do a modal or a "popover". I think these are bad user experiences but it's a perfect use case for a portal so we're going to do it! In our case, because we want the modal to render in front of everything, we need the div that the modal renders into to be first in the DOM. So let's go make a div that does that. Open your index.html file and put this in there.
+
+<div id="modal" ></div>
+By default this will have nothing in it, but once we render our modal it render inside this div instead of root. Make a new file in src called Modal.jsx
+
+import { useEffect, useRef } from "react" ;
+import { createPortal } from "react-dom" ;
+
+const Modal = ({ children } ) => {
+ const elRef = useRef (null );
+ if (!elRef.current ) {
+ elRef.current = document .createElement ("div" );
+ }
+
+ useEffect (() => {
+ const modalRoot = document .getElementById ("modal" );
+ modalRoot.appendChild (elRef.current );
+ return () => modalRoot.removeChild (elRef.current );
+ }, []);
+
+ return createPortal (<div > {children}</div > current );
+};
+
+export default Modal ;
+
+This uses a ref. A ref is a reference to something that need to be exactly the same between renders. A hook would get regenerated / recreated so we need a ref because it'll create a div and then it hand back the same div every render. It's important that it's the same div because it'll be the one we use to render the portal.
+We're using createPortal to render into this new modal div we're chosen for our modal. But this could be a contextual nav or any other DOM div we want.
+We use the returned function on the effect to clean up when this Modal is unmounted from the DOM. Otherwise we'd leak memory.
+
+
Before we use our Modal, we'll need to make another API call function get a past order. In our example here, we're going to make it so you can click on one of the rows in our past orders page to see what was in the order. In src/api, add a file called getPastOrder.js (no s) and add this.
+
export default async function getPastOrder (order ) {
+ const response = await fetch (`/api/past-order/${order} ` );
+ const data = await response.json ();
+ return data;
+}
+Cool, let's go use this to render our Modal now. Open past.lazy.jsx. Make the order.order_id value a button and add an onClick event so clicking it will open the Modal:
+
<td>
+ <button onClick ={() => setFocusedOrder(order.order_id)}>
+ {order.order_id}
+ </button > <td > {order.date}</td > <td > {order.time}</td > Then render the modal if we have a focusedOrder:
+
+import getPastOrder from "../api/getPastOrder" ;
+import Modal from "../Modal" ;
+
+const intl = new Intl .NumberFormat ("en-US" , {
+ style : "currency" ,
+ currency : "USD" ,
+});
+
+
+const [focusedOrder, setFocusedOrder] = useState ();
+
+const { isLoading : isLoadingPastOrder, data : pastOrderData } = useQuery ({
+ queryKey : ["past-order" , focusedOrder],
+ queryFn : () => getPastOrder (focusedOrder),
+ enabled : !!focusedOrder,
+ staleTime : 24 * 60 * 60 * 1000 ,
+});
+
+
+{
+ focusedOrder ? (
+ <Modal >
+ <h2 > Order #{focusedOrder}</h2 >
+ {!isLoadingPastOrder ? (
+ <table >
+ <thead >
+ <tr >
+ <td > Image</td >
+ <td > Name</td >
+ <td > Size</td >
+ <td > Quantity</td >
+ <td > Price</td >
+ <td > Total</td >
+ </tr >
+ </thead >
+ <tbody >
+ {pastOrderData.orderItems.map((pizza) => (
+ <tr key ={ `${pizza.pizzaTypeId }_ ${pizza.size }`}>
+ <td >
+ <img src ={pizza.image} alt ={pizza.name} />
+ </td >
+ <td > {pizza.name}</td >
+ <td > {pizza.size}</td >
+ <td > {pizza.quantity}</td >
+ <td > {intl.format(pizza.price)}</td >
+ <td > {intl.format(pizza.total)}</td >
+ </tr >
+ ))}
+ </tbody >
+ </table >
+ ) : (
+ <p > Loading …</p >
+ )}
+ <button onClick ={() => setFocusedOrder()}>Close</button >
+ </Modal > null ;
+}
+
+We're using React Query again here. We're using the enabled key to only make this request when the user has set a focusedOrder. If there's no focusedOrder, then it won't make the request. !! is the same as "not not". It makes a number like 5 be true and a number like 0 or undefined be false.
+We set the staleTime to day. These orders shouldn't change very frequently.
+If there's no focusedOrder, we don't render the Modal, which means the portal is unused.
+If there is a focusedOrder, we render the modal and show a loading indicator that we're loading the rest of the info.
+When a user clicks Close, we set the focusedOrder to be undefined again which causes the Modal to unrender.
+
+
That's it!
+
+🏁 Click here to see the state of the project up until now: 11-modals
+
+
Uncontrolled Forms – Complete Intro to React Uncontrolled Forms
+
We are now going to do a contact page for our site. As part of that, we will accept a name, email, and message from our users and submit it our backend. Like all good backends, ours will log it to the console and then ignore it.
+
We are going to see two new concepts here: how to do a post with TanStack Query (which they call a mutation) and how to do uncontrolled forms with React. Let's start with our API query. In src/api, create a file called postContact.js and put this in there.
+
export default async function postContact (name, email, message ) {
+ const response = await fetch ("/api/contact" , {
+ method : "POST" ,
+ headers : {
+ "Content-Type" : "application/json" ,
+ },
+ body : JSON .stringify ({ name, email, message }),
+ });
+
+ if (!response.ok ) {
+ throw new Error ("Network response was not ok" );
+ }
+
+ return response.json ();
+}
+Create a new link to our page in index.lazy.jsx
+
+<li>
+ <Link to ="/contact" > Contact</Link > Create a new route called contact.lazy.jsx in src/routes
+
import { createLazyFileRoute } from "@tanstack/react-router" ;
+import { useMutation } from "@tanstack/react-query" ;
+import postContact from "../api/postContact" ;
+
+export const Route = createLazyFileRoute ("/contact" )({
+ component : ContactRoute ,
+});
+
+function ContactRoute (const mutation = useMutation ({
+ mutationFn : function (e ) {
+ e.preventDefault ();
+ const formData = new FormData (e.target );
+ return postContact (
+ formData.get ("name" ),
+ formData.get ("email" ),
+ formData.get ("message" )
+ );
+ },
+ });
+
+ return (
+ <div className ="contact" >
+ <h2 > Contact</h2 >
+ {mutation.isSuccess ? (
+ <h3 > Submitted!</h3 >
+ ) : (
+ <form onSubmit ={mutation.mutate} >
+ <input name ="name" placeholder ="Name" />
+ <input type ="email" name ="email" placeholder ="Email" />
+ <textarea placeholder ="Message" name ="message" > </textarea >
+ <button > Submit</button >
+ </form >
+ )}
+ </div >
+We are using a mutation from TanStack React Query. It works very similar to normal gets except this one sends information to the API instead of gets it.
+Notice we're using isSuccess to show or hide the form. Once the mutation has successfully been submitted, we just want to show them that and then hide the form.
+Notice we're not using state or useState at all here. We're using an "uncontrolled" form which just means we're letting the DOM manage the state. Only on a submit event are we reading from the DOM using the FormData API. We use that to submit to our API the contact data.
+There's also isError and isIdle, we just didn't use them from TanStack Query.
+Also notice in the dev tools for TanStack Query the mutations (it's in another tab.)
+
+
Try it! You'll notice in the logs of where-ever your API is running that it logs out the contact info.
+
+🏁 Click here to see the state of the project up until now: 13-uncontrolled-forms
+
+
Context – Complete Intro to React Context
+
Let's make a cart indicator on the top right of the page. Create a file called Header.jsx and put this in there.
+
export default function Header (return (
+ <nav >
+ <h1 className ="logo" > Padre Gino's Pizza</h1 >
+ <div className ="nav-cart" >
+ 🛒<span className ="nav-cart-number" > 5</span >
+ </div >
+ </nav > Now let's use that in App.jsx
+
+import Header from "./Header" ;
+
+
+<Header /> Right now this will always show 5 but we want that number in .nav-cart-number to reflect how many items we have in our cart. How would we do that? We could move all of cart and its hooks to App.jsx and pass it into both Header and Order. In an app this small, that could be the right choice. But let's look at another way to do it, context.
+
Context is for app-level state. This is state that exists for your entire app. The currently logged in user would be a good example of this. You wouldn't want the user to exist in just the page level because once you navigate to another page, all state of the previous page is destroyed. You'd want that user info to persist between pages, and thus context is a good thing for that. Context allows you to keep a global state for your app. We're going to use it for the shopping cart which actually makes good sense: if a user navigates to another page, you'd want to keep their shopping cart between loads. This is a good way to think about when you may want to use context: if you want that stage to persist between pages.
+
So let's make it work. Make a file called contexts.jsx. It's not a component so I tend to not capitalize it. The React docs do capitalize it. Up to you.
+
import { createContext } from "react" ;
+
+export const CartContext = createContext ([[], function (That's it. Pretty simple. It's called contexts with an s because if you had other contexts (like a UserContext) you could put those all in the same file. The [[], function () {}] isn't strictly necessary; it's a default value your context would use if no context provider is there (which should never happen.) This really only ends up being useful for TypeScript types – the type you give here is what TypeScript will use to validate it. In theory it could be helpful for testing too. The reason for the weird value is that it's a React hook: an array where the first value is an array (like our cart is) and the second value is a function (the setCart function).
+
Okay, let's go put it in App.jsx.
+
+import { StrictMode , useState } from "react" ;
+import { CartContext } from "./contexts" ;
+
+
+const App = (const cartHook = useState ([]);
+ return (
+ <StrictMode >
+ <CartContext.Provider value ={cartHook} >
+ <div >
+ <Header />
+ <Order />
+ <PizzaOfTheDay />
+ </div >
+ </CartContext.Provider >
+ </StrictMode > We're creating a hook (notice we are not destructuring) and passing that in as the value. The Provider makes that context available only inside of its children. In theory you could have multiple providers from the same context but honestly I've never had a reason to do it.
+
Alright, let's go make Order.jsx work now.
+
+import { useState, useEffect, useContext } from "react" ;
+import { CartContext } from "./contexts" ;
+
+const [cart, setCart] = useContext (CartContext );
+That's it! Everything else works the same. In our case we're just using a hook directly from context, but you can put anything in context; it doesn't have to be a hook.
+
Let's go use it in our Header now too.
+
+import { useContext } from "react" ;
+import { CartContext } from "./contexts" ;
+
+
+const [cart] = useContext (CartContext );
+
+
+🛒<span className="nav-cart-number" >{cart.length }</span>
+That's it! We don't need the setCart function so we don't import that. Otherwise all looks pretty normal!
+
So that's context. It's super useful for stuff like this where we don't want to "prop drill" our state everywhere. Since cart is now being held at the App level, we definitely could have just said <Header cart={cart} /> and called it a day, and in this specific use case I would have. But now imagine if Header was super deeply nested and you had to pass that state down a lot of children components – it gets messy quickly. This is what we call prop drilling. React's explicit data flow is a feature, not a bug. It makes where data came from and where data is going very readable. But it can make your code verbose in a non-helpful way, and context is an escape hatch for that. In general, use context sparingly and only where it's really inconvenient to just do it the normal way of using props.
+
+🏁 Click here to see the state of the project up until now: 08-context
+
+
Custom Hooks – Complete Intro to React Custom Hooks
+
One thing that's pretty special about hooks is their composability. You can use hooks to make other hooks! People tend to call these custom hooks. There are even people who go as far to say "never make an API request in a component, always do it in a hook." I don't know if I'm as hardcore as that but I see the logic in it. If you make a custom hook for those sorts of things they become individually testable and do a good job to separate your display of data and your logic to acquire data. I'm more in the camp of make custom hooks for either complicated logic or reusable logic, but for simple cases it's okay to keep things simple.
+
Okay, so we want to add a "Pizza of the Day" banner at the bottom of our page. This necessitates calling a special API to get the pizza of the day (which should change every day based on your computer's time.) Let's first write the component that's going to use it.
+
Make a file called PizzaOfTheDay.jsx
+
import { usePizzaOfTheDay } from "./usePizzaOfTheDay" ;
+
+
+const intl = new Intl .NumberFormat ("en-US" , {
+ style : "currency" ,
+ currency : "USD" ,
+});
+
+const PizzaOfTheDay = (const pizzaOfTheDay = usePizzaOfTheDay ();
+
+ if (!pizzaOfTheDay) {
+ return <div > Loading...</div > return (
+ <div className ="pizza-of-the-day" >
+ <h2 > Pizza of the Day</h2 >
+ <div >
+ <div className ="pizza-of-the-day-info" >
+ <h3 > {pizzaOfTheDay.name}</h3 >
+ <p > {pizzaOfTheDay.description}</p >
+ <p className ="pizza-of-the-day-price" >
+ From: <span > {intl.format(pizzaOfTheDay.sizes.S)}</span >
+ </p >
+ </div >
+ <img
+ className ="pizza-of-the-day-image"
+ src ={pizzaOfTheDay.image}
+ alt ={pizzaOfTheDay.name}
+ />
+ </div >
+ </div > export default PizzaOfTheDay ;
+
+The cool part here is the usePizzaOfTheDay(). We now just get to rely on that this going to provide us with the pizza of the day from within the black box of the hook working.
+
+
Okay, let's go make the hook! Make a file called usePizzaOfTheDay.jsx (you could call this .js instead of jsx but in a React project I just use JSX for all "React-y" things)
+
import { useState, useEffect } from "react" ;
+
+export const usePizzaOfTheDay = (const [pizzaOfTheDay, setPizzaOfTheDay] = useState (null );
+
+ useEffect (() => {
+ async function fetchPizzaOfTheDay (const response = await fetch ("/api/pizza-of-the-day" );
+ const data = await response.json ();
+ setPizzaOfTheDay (data);
+ }
+
+ fetchPizzaOfTheDay ();
+ }, []);
+
+ return pizzaOfTheDay;
+};
+
+This looks like what you'd see at the top of a component, right? Now it's just encapsulated as a hook which makes it easy to test by itself! 🎉
+We can use useState, useEffect, or any hook we want here! We can even use other custom hooks!
+
+
Lastly, let's go add this to App.jsx so our component renders.
+
+import PizzaOfTheDay from "./PizzaOfTheDay" ;
+
+
+<PizzaOfTheDay /> You should now see the new component which uses our new hook at the bottom!
+
Let's add one more fun debugging technique made especially for custom hooks. Put this in usePizzaOfTheDay.jsx:
+
+import { useState, useEffect, useDebugValue } from "react" ;
+
+
+useDebugValue (pizzaOfTheDay ? `${pizzaOfTheDay.name} ` : "Loading..." );
+Now open your React Dev Tools and inspect our PizzaOfTheDay component. You'll see our debug value there. This is helpful when you have lots of custom hooks and in particular lots of reused custom hooks that have differing values. It can help at a glance to discern which hook has which data inside of it.
+
+🏁 Click here to see the state of the project up until now: 06-custom-hooks
+
+
Dev Tools – Complete Intro to React React has some really great tools to enhance your developer experience. We'll go over a few of them here.
+
NODE_ENV=development
+
React already has a lot of developer conveniences built into it out of the box. What's better is that they automatically strip it out when you compile your code for production.
+
So how do you get the debugging conveniences then? Well, if you're using Vite.js, it will compile your development server with an environment variable of NODE_ENV=development and then when you run vite build it will automatically change that to NODE_ENV=production which is how all the extra weight gets stripped out.
+
Why is it important that we strip the debug stuff out? The dev bundle of React is quite a bit bigger and quite a bit slower than the production build. Make sure you're compiling with the correct environmental variables or your users will suffer.
+
Strict Mode
+
React has a new strict mode. If you wrap your app in <StrictMode></StrictMode> it will give you additional warnings about things you shouldn't be doing. I'm not teaching you anything that would strip warnings from StrictMode but it's good to keep your team in line and not using legacy features or things that will be soon be deprecated.
+
Be aware that StrictMode continually double-renders your components and will run effects twice. It does this catch subtle bugs where your app will change between renders when it's not meant to. It can be helpful, but to be honest, once you learn to write React the correct way you'll nearly never hit that sort of bug.
+
Dev Tools
+
React has wonderful dev tools that the core team maintains. They're available for both Chromium-based browsers and Firefox. They let you do several things like explore your React app like a DOM tree, modify state and props on the fly to test things out, tease out performance problems, and programmatically manipulate components. Definitely worth downloading now. See here for links.
+
Effects – Complete Intro to React Effects
+
We have enough of an app to start making some API requests now. We want the app to request an initial set of pizzaTypes on initial load of the page. So let's make that happen using a special hook called useEffect. useEffect allows you to say do a render of this component first so the user can see something then as soon as the render is done, then do something (the something here being an effect). In our case, we want the user to see our UI first then we want to make a request to the API so we can initialize a list of pizzas.
+
+Make sure you have both your Vite dev server running and your API server running. Both.
+
+
Let's refactor Order.jsx
+
+import { useEffect, useState } from "react" ;
+import Pizza from "./Pizza" ;
+
+
+
+const intl = new Intl .NumberFormat ("en-US" , {
+ style : "currency" ,
+ currency : "USD" ,
+});
+
+
+const [pizzaTypes, setPizzaTypes] = useState ([]);
+const [loading, setLoading] = useState (true );
+
+let price, selectedPizza;
+if (!loading) {
+ selectedPizza = pizzaTypes.find ((pizza ) => pizzaType === pizza.id );
+ price = intl.format (
+ selectedPizza.sizes ? selectedPizza.sizes [pizzaSize] : ""
+ );
+}
+
+useEffect (() => {
+ fetchPizzaTypes ();
+}, []);
+
+async function fetchPizzaTypes (await new Promise ((resolve ) => setTimeout (resolve, 3000 ));
+
+ const pizzasRes = await fetch ("/api/pizzas" );
+ const pizzasJson = await pizzasRes.json ();
+ setPizzaTypes (pizzasJson);
+ setLoading (false );
+}
+
+
+{
+ pizzaTypes.map ((pizza ) => (
+ <option key ={pizza.id} value ={pizza.id} >
+ {pizza.name}
+ </option >
+We put all the logic for fetching pizza types in an async function to make it more readable. You can't make the function provided to useEffect async.
+the [] at the end of the useEffect is where you declare your data dependencies. React wants to know when to run that effect again. You don't give it data dependencies, it assumes any time any hook changes that you should run the effect again. This is bad because that would mean any time setPizzaTypes gets called it'd re-run render and all the hooks again. See a problem there? It'd run infinitely since fetchPizzaTypes calls setPizzaTypes.
+You can instead provide which hooks to watch for changes for. In our case, we actually only want it to run once, on creation of the component, and then to not run that effect again. (we'll do searching later via clicking the submit button) You can accomplish this only-run-on-creation by providing an empty array.
+We're using a loading flag to only display data once it's ready. We'll use TanStack Query in a bit to make this code look cleaner. But this is how you do conditional showing/hiding of components in React.
+The key portion is an interesting one. When React renders arrays of things, it doesn't know the difference between something is new and something is just being re-ordered in the array (think like changing the sorting of a results list, like price high-to-low and then priced low-to-high). Because of this, if you don't tell React how to handle those situations, it just tears it all down and re-renders everything anew. This can cause unnecessary slowness on devices. This is what key is for. Key tells React "this is a simple identifier of what this component is". If React sees you just moved a key to a different order, it will keep the component tree. So key here is to associate the key to something unique about that component. 99/100 this is a database ID of some variety. Don't use the index of the array as that just isn't right unless the array is literally is never going to change order.
+
+
Updating the Selected Pizza & Price
+
When a pizza is selected, we need to update the selected pizza and price. First, let's format the price after the selectedPizza state is updated:
+
if (!loading){
+ selectedPizza = pizzaTypes.find ((pizza ) => pizzaType === pizza.id )
+ price = intl.format (selectedPizza.sizes [pizzaSize])
+ }
+When the application loads, we don't have our data yet. So we only want to render a selected pizza and price once we are done loading. Add a condition to the JSX to show "Loading..." initially, and then the selected pizza once we are done loading. Add the condition before the closing </form> tag:
+
...
+ {
+ loading ? (
+ <h3 > Loading...</h3 > <div className ="order-pizza" >
+ <Pizza
+ name ={selectedPizza.name}
+ description ={selectedPizza.description}
+ image ={selectedPizza.image}
+ />
+ <p > {price}</p >
+ </div >
+🏁 Click here to see the state of the project up until now: 05-effects
+
+
Handling User Inputs – Complete Intro to React Handling User Input
+
So now we want to be able to handle the user's cart and submitting our order. Let's go add what we need to Order.jsx
+
+import Cart from "./Cart" ;
+
+
+const [cart, setCart] = useState ([]);
+
+
+<form
+ onSubmit ={(e) => {
+ e.preventDefault();
+ setCart([...cart, { pizza: selectedPizza, size: pizzaSize, price }]);
+ }}
+>
+ […]
+</form > <h2 > LOADING …</h2 > <Cart cart ={cart} /> So now we're using an onSubmit to handle the adding to cart. Awesome! Then we're passing that into Cart to have a nice display.
+
Let's make the cart. Make a file called Cart.jsx and add
+
const intl = new Intl .NumberFormat ("en-US" , {
+ style : "currency" ,
+ currency : "USD" ,
+});
+
+export default function Cart ({ cart, checkout } ) {
+ let total = 0 ;
+ for (let i = 0 ; i < cart.length ; i++) {
+ const current = cart[i];
+ total += current.pizza .sizes [current.size ];
+ }
+ return (
+ <div className ="cart" >
+ <h2 > Cart</h2 >
+ <ul >
+ {cart.map((item, index) => (
+ <li key ={index} >
+ <span className ="size" > {item.size}</span > –
+ <span className ="type" > {item.pizza.name}</span > –
+ <span className ="price" > {item.price}</span >
+ </li >
+ ))}
+ </ul >
+ <p > Total: {intl.format(total)}</p >
+ <button onClick ={checkout} > Checkout</button >
+ </div >
+Normally doing key this way is a bad idea, but we wouldn't reorganize this list, nor care if it rerendered anyway, so it gets a pass.
+
+
Now we have a nice shopping cart experience. So how do actually checkout on the server? Let's do that! We probably want to do it as the Order level. It already has the Cart and we can just leave the Cart as a dumb display component. We can just pass a function to call into the Cart component and call it and run the function at the Order level.
+
+async function checkout (setLoading (true );
+
+ await fetch ("/api/order" , {
+ method : "POST" ,
+ headers : {
+ "Content-Type" : "application/json" ,
+ },
+ body : JSON .stringify ({
+ cart,
+ }),
+ });
+
+ setCart ([]);
+ setLoading (false );
+}
+
+
+<Cart checkout={checkout} cart={cart} />;
+Now we can pass that checkout function in and whenever someone clicks inside the form, it will run the checkout function from the Order components. We're doing a simple loading animation, doing a fetch, and then clearing the status once we're all done. Not too bad!
+
+🏁 Click here to see the state of the project up until now: 07-handling-forms
+
+
Hooks – Complete Intro to React Hooks
+
Okay, so now we want to make it so people can add pizzas to their order. We need a little form that allows them to select the pizza and the size. Create a new file called Order.jsx and add the following:
+
import Pizza from "./Pizza" ;
+
+export default function Order (const pizzaType = "pepperoni" ;
+ const pizzaSize = "M" ;
+ return (
+ <div className ="order" >
+ <h2 > Create Order</h2 >
+ <form >
+ <div >
+ <div >
+ <label htmlFor ="pizza-type" > Pizza Type</label >
+ <select name ="pizza-type" value ={pizzaType} >
+ <option value ="pepperoni" > The Pepperoni Pizza</option >
+ <option value ="hawaiian" > The Hawaiian Pizza</option >
+ <option value ="big_meat" > The Big Meat Pizza</option >
+ </select >
+ </div >
+ <div >
+ <label htmlFor ="pizza-size" > Pizza Size</label >
+ <div >
+ <span >
+ <input
+ checked ={pizzaSize === "S" }
+ type ="radio"
+ name ="pizza-size"
+ value ="S"
+ id ="pizza-s"
+ />
+ <label htmlFor ="pizza-s" > Small</label >
+ </span >
+ <span >
+ <input
+ checked ={pizzaSize === "M" }
+ type ="radio"
+ name ="pizza-size"
+ value ="M"
+ id ="pizza-m"
+ />
+ <label htmlFor ="pizza-m" > Medium</label >
+ </span >
+ <span >
+ <input
+ checked ={pizzaSize === "L" }
+ type ="radio"
+ name ="pizza-size"
+ value ="L"
+ id ="pizza-l"
+ />
+ <label htmlFor ="pizza-l" > Large</label >
+ </span >
+ </div >
+ </div >
+ <button type ="submit" > Add to Cart</button >
+ </div >
+ <div className ="order-pizza" >
+ <Pizza
+ name ="Pepperoni"
+ description ="Mozzarella Cheese, Pepperoni"
+ image ="/public/pizzas/pepperoni.webp"
+ />
+ <p > $13.37</p >
+ </div >
+ </form >
+ </div > Now add it to your App.jsx:
+
+import Order from "./Order" ;
+
+
+<Order />
+🚨 You'll have some errors in the console, that's okay.
+
+
Now navigate to http://localhost:5173/ and see that you have two inputs, one for the pizza type and a set of radio buttons for the size. Try and select something with the inputs. You'll see that you can't modify them. Why? Let's think about how React works: when you interact with the inputs, React detects that a DOM event happens. When that happens, React thinks something may have changed so it runs a re-render. Providing your render functions are fast, this is a very quick operation. It then diffs what's currently there and what its render pass came up with. It then updates the minimum amount of DOM necessary.
+
+In the recorded course, the layout is vertical because the order-pizza DIV was in the wrong place. Use the markup above. The layout should look like this:
+
+
+
Notice we're using className instead of class on the HTML element for CSS classes. This is because class is a reserved word in JS and JSX is still just JS. So instead they opted to use className which is the name of the JS API for interacting with class names.
+
Like className, htmlFor is used because for is a reserved word in JS.
+
So if we type in our input and it re-renders, what gets out in the select or radio button tags? Well, its value is tied to pizzaType and pizzaSize and nothing changed those, so they remain the same. In other words, two way data binding is not free in React. I say this is a feature because it makes you explicit on how you handle your data. Let's go make it work.
+
+import { useState } from "react" ;
+
+
+const [pizzaType, setPizzaType] = useState ("pepperoni" );
+const [pizzaSize, setPizzaSize] = useState ("medium" );
+
+
+<select
+ onChange ={(e) => setPizzaType(e.target.value)}
+ name="pizza-type"
+ value={pizzaType}
+>
+ […]
+</select > (e ) => setPizzaSize (e.target .value )}
+
+This is called a hook. Other frameworks like Vue have adopted it as well.
+A hook called such (in my head) because it's a hook that gets caught every time the render function gets called. Because the hooks get called in the same order every single time, they'll always point to the same piece of state. Because of that they can be stateful: you can keep pieces of mutable state using hooks and then modify them later using their provided updater functions.
+An absolutely key concept for you to grasp is hooks rely on this strict ordering. As such, do not put hooks inside if statements or loops . If you do, you'll have insane bugs that involve useState returning the wrong state . If you see useState returning the wrong piece of state, this is likely what you did. Every hook must run every time in the same order.
+The argument given to useState is the default value. In our case, we could give it "" as our default value to make the user have to select something first but in our case we want to default to pepperoni pizza and medium size.
+useState returns to us an array with two things in it: the current value of that state and a function to update that state. We're using a feature of JavaScript called destructuring to get both of those things out of the array.We use the setPizzaType / setPizzaSize function in the onChange attribute of the input. Every time the input is typed into, it's going to call that functions which call setPizzaType and setPizzaSize with what has been typed into the input or what has been selected or what has been clicked on. When setPizzaType and setPizzaSize are called, React knows that its state has been modified and kicks off a re-render.
+You can make your own custom hooks; useState is just one of many.
+Historically, React has been written using classes with state being on the instance of the component. This is still a supported pattern in React. We'll see how to do it later.
+We could have put an onChange handler on each of the radio buttons. However event bubbling works the same in React as it does in the normal DOM and we could put it directly on the div that encapsulates all the radio buttons and just have to do it once.
+You can use useState as many times as you need for various pieces of state! Again, this is why ordering is important because React relies on useState to be called in strictly the same order every time so it can give you the same piece of state.
+Similar to above. We're using onChange because it makes it more accessible.
+
+
+I'm showing you how to do a "controlled form" in that we're using hooks to control each part of the form. In reality, it'd be better to leave these uncontrolled (aka don't set the value) and wrap the whole thing in a form. Then we can listen for submit events and use that event to gather info off the form. This is less code and less burdensome to write. If you have a standard form sort of thing to write, do that as an uncontrolled form. If you need to do dynamic validation, react to a user typing a la typeahead (functionality that provides real-time suggestions), or something of the ilk, then a controlled input is perfect, otherwise stick to uncontrolled.
+Also what's new in React is called a "form action" that is considered unstable. In the future you will just add <form action="blah">[…]</form> and a form action will handle the entire form for you.
+
+
Another side note: event bubbling in React works just like you would expect. In theory you can have mega event handler in React but the lint rules and React's dev tools get noisy about it if you do it that way so I tend to just follow their recommendation.
+
+<div onChange={(e ) => setPizzaSize (e.target .value )}>[…]</div>
+
+🏁 Click here to see the state of the project up until now: 04-hooks
+
+
JSX – Complete Intro to React JSX
+
So far we've been writing React without JSX, something that I don't know anyone that actually does with their apps. Everyone uses JSX. I've shown you the createElement way so you'll understand what JSX is actually doing. It doesn't do hardly anything. It just makes your code a bit more readable.
+
If I write React.createElement("h1", { id: "main-title" }, "My Website");, what am I actually trying to have rendered out? <h1 id="main-title">My Website</h1>, right? What JSX tries to do is to shortcut this translation layer in your brain so you can just write what you mean.
+
Make a new file called Pizza.jsx.
+
+Make sure you call it .jsx and not .js. Vite won't do JSX transpilation if it's not named with a JSX file extension.
+
+
const Pizza = (props ) => {
+ return (
+ <div className ="pizza" >
+ <h1 > {props.name}</h1 >
+ <p > {props.description}</p >
+ </div > export default Pizza ;
+I don't know about you, but I find this far more readable. And if it feels uncomfortable to you to introduce HTML into your JavaScript, I invite you to give it a shot until the end of the workshop. By then it should feel a bit more comfortable. And you can always go back to the old way.
+
However, now you know what JSX is doing for you. It's just translating those HTML tags into React.createElement calls. That's it. Really. No more magic here. JSX does nothing else. Many people who learn React don't learn this.
+
Notice the strange {props.name} syntax: this is how you output JavaScript expressions in JSX. An expression is anything that can be the right side of an assignment operator in JavaScript, e.g. const x = <anything that can go here>. If you take away the {} it will literally output props.name to the DOM.
+
+Notice we don't have to do import React from 'react' here like we used to. The latest version of JSX handles that for you so you only need to explicitly import the React package when you need to use something from it; otherwise feel free to do JSX without having to import React!
+
+
ESLint
+
Let's fix our ESLint as JSX adds new twists and turns we need help with. Please install
+
npm i -D eslint-plugin-react@7.37.1
+Then in your eslint.config.mjs
+
+import reactPlugin from "eslint-plugin-react" ;
+
+
+{
+ ...reactPlugin.configs .flat .recommended ,
+ settings : {
+ react : {
+ version : "detect" ,
+ },
+ },
+},
+reactPlugin.configs .flat ["jsx-runtime" ],
+
+
+files : ["**/*.js" , "**/*.jsx" ],
+
+
+rules : {
+ "react/no-unescaped-entities" : "off" ,
+ "react/prop-types" : "off" ,
+},
+You can also copy fill config from the repo .
+
We have to add two configs, one to allow ESLint to understand React and add some basic React rules, and one to modernize it as React 17 changed a bit how ESLint interacts with React.
+
We're also turning off two rules that I don't find particularly useful: unescaped entities (which make you change things like ' into &apos) and prop types which no one has used in a decade at this point. Otherwise we should be good to go.
+
Back to JSX
+
So now JSX is demystified a bit, let's go convert App.js.
+
+
+import { createRoot } from "react-dom/client" ;
+import Pizza from "./Pizza" ;
+
+
+
+const App = (return (
+ <div >
+ <h1 > Padre Gino's Pizza – Order Now</h1 >
+ <Pizza name ="Pepperoni" description ="Mozzarella Cheese, Pepperoni" />
+ <Pizza
+ name ="The Hawaiian Pizza"
+ description ="Sliced Ham, Pineapple, Mozzarella Cheese"
+ />
+ <Pizza
+ name ="The Big Meat Pizza"
+ description ="Bacon, Pepperoni, Italian Sausage, Chorizo Sausage"
+ />
+ </div > const container = document .getElementById ("root" );
+const root = createRoot (container);
+root.render (<App /> Also head over to index.html and change the script tag
+
<script type ="module" src ="./src/App.jsx" > </script >
+Notice we have Pizza as a component. Notice that the P in Pizza is capitalized. It must be. If you make it lowercase, it will try to have pizza as a web component and not a React component.
+
We now pass props down as we add attributes to an HTML tag. Pretty cool.
+
You can test your app by running npm run dev and opening the URL shown in the terminal. It's typically http://localhost:5173/
+
The API / Image Server
+
For this course we will use a little Fastify server I built for you. It's in the api directory. We are going to use Vite.js to proxy to this API server. This is a useful trick to do for local development if you have a separate frontend in a backend. Normally you'd have something like NGINX routing traffic to separate frontend and backend servers. For now we'll just use Vite.
+
+Note: This means you'll need to have TWO terminal windows running. One terminal for the API server (which you won't have to touch once it's running). The other terminal is is our Vite server for our web app.
+
+
Add this to you vite.config.js
+
+export default defineConfig ({
+ server : {
+ proxy : {
+ "/api" : {
+ target : "http://localhost:3000" ,
+ changeOrigin : true ,
+ },
+ "/public" : {
+ target : "http://localhost:3000" ,
+ changeOrigin : true ,
+ },
+ },
+ },
+ plugins : [react ()],
+});
+Run the API Server
+
Open a new terminal and navigate to the api directory. Note that this server is outside your project directory. You'll need to install the dependencies with npm install. After that, you can start the server by running npm run dev. You need both servers running at the same time. Your Vite server will intercept api and public calls and reroute them to your API server!
+
Now let's add images to our Pizza.
+
+<img src={props.image } alt={props.name } />
+Now in App.jsx
+
+image={"/public/pizzas/pepperoni.webp" }
+
+
+image={"/public/pizzas/hawaiian.webp" }
+
+
+image={"/public/pizzas/big_meat.webp" }
+And now you should have images!
+
+🏁 Click here to see the state of the project up until now: 03-jsx
+
+
TanStack Query – Complete Intro to React Tanstack Query
+
Let's make make a past orders page. Create a new file, past.lazy.jsx. If your Vite server is already running, it will automatically stub it out for you! Pretty cool developer experience from TanStack.
+
Now let's install our next tool, TanStack (React) Query .
+
npm i @tanstack/react-query@5.59.13
+npm i -D @tanstack/react-query-devtools@5.59.13 @tanstack/eslint-plugin-query@5.59.7
+React Query makes doing async API calls so much easier. So much easier / better, that I almost never use useEffect anymore like we did for the pizzas list or for the pizza of the day. The code is cleaner, easier to read, better cached, and less bug prone. In short, it's just better. It's good for you to know how to use effects, but as you go forward just use TanStack Query for API calls.
+
Let's get started. Let's start by adding their ESLint config to ours. They have some useful rules in there. In eslint.config.mjs
+
+import pluginQuery from "@tanstack/eslint-plugin-query" ;
+
+
+...pluginQuery.configs ["flat/recommended" ],
+This will add a few rules to your ESLint that are specific to React Query. I have found these helpful, and more importantly, not annoying, so I tend to add them every time.
+
Let's also add the dev tools, like we did for the router. In src/routes/__root.jsx:
+
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools" ;
+
+
+<ReactQueryDevtools /> Finally, we need to add the QueryClient. In App.jsx, add:
+
+import { QueryClient , QueryClientProvider } from "@tanstack/react-query" ;
+
+
+const queryClient = new QueryClient ()
+
+
+<QueryClientProvider client={queryClient}>
+ <RouterProvider router ={router} /> QueryClientProvider >
+Now in the bottom right of your window you'll see a 🏝️. Click on that and we'll open the dev tools. We haven't used the dev tools yet so it'll be empty.
+
So react-query makes interacting with APIs very simple and makes it easy to read. You just read a hook and it'll either give you a isLoading status or the data. Once the data comes back, it'll refresh the component with the data. So let's start by writing our very simple fetch call. Create a folder called api inside of src and create getPastOrders.js and put
+
export default async function getPastOrders (page ) {
+ const response = await fetch (`/api/past-orders?page=${page} ` );
+ const data = await response.json ();
+ return data;
+}
+Very simple request to an API that returns data. That's it!
+
Let's now go make past.lazy.jsx.
+
import { useState } from "react" ;
+import { useQuery } from "@tanstack/react-query" ;
+import { createLazyFileRoute } from "@tanstack/react-router" ;
+import getPastOrders from "../api/getPastOrders" ;
+
+export const Route = createLazyFileRoute ("/past" )({
+ component : PastOrdersRoute ,
+});
+
+function PastOrdersRoute (const [page, setPage] = useState (1 );
+ const { isLoading, data } = useQuery ({
+ queryKey : ["past-orders" , page],
+ queryFn : () => getPastOrders (page),
+ staleTime : 30000 ,
+ });
+ if (isLoading) {
+ return (
+ <div className ="past-orders" >
+ <h2 > LOADING …</h2 >
+ </div > return (
+ <div className ="past-orders" >
+ <table >
+ <thead >
+ <tr >
+ <td > ID</td >
+ <td > Date</td >
+ <td > Time</td >
+ </tr >
+ </thead >
+ <tbody >
+ {data.map((order) => (
+ <tr key ={order.order_id} >
+ <td > {order.order_id}</td >
+ <td > {order.date}</td >
+ <td > {order.time}</td >
+ </tr >
+ ))}
+ </tbody >
+ </table >
+ <div className ="pages" >
+ <button disabled ={page <= 1} onClick ={() => setPage(page - 1)}>
+ Previous
+ </button >
+ <div > {page}</div >
+ <button disabled ={data.length < 10 } onClick ={() => setPage(page + 1)}>
+ Next
+ </button >
+ </div >
+ </div >
+We're using hooks to track the page we're on.
+We're using the useQuery hook to make API calls and we provide it the queryFn of how to go fetch that data.
+We're giving it keys which act as cache keys. We're giving past-orders as the key but it could be any unique key to this page. Then we give it the page. What's cool about this is that while we will request the page 1 the first time we request it, the second time we request page 1 it'll see it'll see that we already have this in cache and not request it. How cool is is that? That used to require so much logic to handle it and now React Query just does it for you.
+Now open the dev tools. You can see all the pages being loaded in. Pretty cool, right?
+Try taking out page from the query key. It'll yell at you. This is the ESLint config we pulled in from Tanstack Query. Because we're using that page in the request, we need to use it as a caching key. If you depend on a variable to make a request, it should be apart of the caching key.
+We're giving it a staleTime of 30 seconds (30,000 milliseconds). This allows someone using the page to browse around a bit and not bombard the API too much but the page won't ever be too stale. If you omit staleTime, it will refetch every time.
+
+
That's it! React Query is both simple to use and super flexible to handle a tough problem. It's one of my favorite libraries for React.
+
+🏁 Click here to see the state of the project up until now: 10-query
+
+
TanStack Router – Complete Intro to React Tanstack Router
+
So now we have arrived to the point where we want multiple pages in our app. We need some sort of router tool to accomplish that. We could just work with the browser's history API to do it but there so many ways to get it wrong, plus we are spoiled for choice when it comes to great React routing libraries.
+
Historically I have taught react-router as part of this course. It has been around for a long time and is well tested. Nearly every version of this course uses it (there was a brief while where it was Reach Router, but that has since been merged back into React Router.) It is a great tool and it underpins Remix, a great full-stack React framework. Remix and React Router are actually merging and will eventually be the same thing. v8 of this course use React Router if you want to learn more about it from me.
+
TanStack Router
+
Today we are going to be using TanStack Router , another amazing router. Why the switch? Two reasons:
+
+This is a client-side focused course, and TanStack Router is made for client-side use cases. React Router and Remix have shifted a lot of focus to a more full-stack experience (though they do still work client-side only).
+In Intermediate React we will be covering more full-stack use cases, in which I will using Next.js to show off those features.
+
+
So, suffice to say, you have a lot of good choices. I'm a fan of TanStack Router and I think it's a great tool for you to get started with. Let's dive in.
+
Let's start by installing it.
+
npm install @tanstack/react-router@1.65.0
+npm install -D @tanstack/router-plugin@1.65.0 @tanstack/router-devtools@1.65.0
+We need to install the router and then we'll be using its code generation tool as well as its dev tools (which are dev-only, hence the -D). Let's add it first to our vite.config.js.
+
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite" ;
+
+
+plugins : [TanStackRouterVite (), react ()],
+TanStack Router works by file-based conventions. You create routes in a specific way and TanStack Router will automatically glue it together for you. It does this by creating a file called routeTree.gen.ts. Even though this isn't a TypeScript project, the fact that this is TypeScript means that VS Code can read the types from your routes and help you with suggestions and intelligent errors. I would suggest adding this file to your .gitignore as well since it will get autogenerated with every build. Okay, so let's go make the files we need.
+
Create a routes directory in your src directory. Let's make a __root.jsx file in there. This file will be the base template used for every route. Most of this will come from App.jsx
+
import { useState } from "react" ;
+import { createRootRoute, Outlet } from "@tanstack/react-router" ;
+import { TanStackRouterDevtools } from "@tanstack/router-devtools" ;
+import PizzaOfTheDay from "../PizzaOfTheDay" ;
+import Header from "../Header" ;
+import { CartContext } from "../contexts" ;
+
+export const Route = createRootRoute ({
+ component : () => {
+ const cartHook = useState ([]);
+ return (
+ <>
+ <CartContext.Provider value ={cartHook} >
+ <div >
+ <Header />
+ <Outlet />
+ <PizzaOfTheDay />
+ </div >
+ </CartContext.Provider >
+ <TanStackRouterDevtools />
+ </>
+We added an <Outlet/> instead of our Order component. Now we can swap in new routes there! Notice that the Header will always be there as will the PizzaOfTheDay.
+We added TanStack's excellent dev tools. We'll take a look at them in a bit, but they're in the bottom left, you can click on them once your app loads.
+<> and </> are for when you want to render two sibling components (our context and our dev tools) but don't want to add a random div there. React requires you only return one top level component and we can do that with <> and </>
+
Great, let's go modify App.jsx now
+
+
+import { RouterProvider , createRouter } from "@tanstack/react-router" ;
+import { routeTree } from "./routeTree.gen" ;
+
+const router = createRouter ({ routeTree });
+
+
+const App = (return (
+ <StrictMode >
+ <RouterProvider router ={router} />
+ </StrictMode > This just imports the generated routeTree and then makes use of it in the project. This file really only should be used for rendering the file. Everything else should likely live in __root.jsx.
+
Okay, move Order.jsx from the base directory and into routes. If it asks, say yes to update paths. Rename it to order.lazy.jsx Let's modify it now to make it a route.
+
+import { createLazyFileRoute } from "@tanstack/react-router" ;
+
+
+import { CartContext } from "../contexts" ;
+import Cart from "../Cart" ;
+import Pizza from "../Pizza" ;
+
+export const Route = createLazyFileRoute ("/order" )({
+ component : Order ,
+});
+
+function Order (
+Here we're making a new route. We define what URL it's at, /order, and what component to render, Order.
+We're making it lazy. It will now code split this for us and lazy-load our route for us. This really helps in large apps. In this tiny app it probably actually slows us down because adding 1KB to an app doesn't slow it down, but an extra round trip does. When you do lazy loading, please measure if it's helping. In any case, this is how you do it.
+
+
That's it! This used to be so hard to code split. In some of my old classes we had to go through some serious work to get it work but now this is all it takes! Pretty cool.
+
Let's add a home page! Make a file called index.lazy.jsx in the routes folder.
+
import { createLazyFileRoute, Link } from "@tanstack/react-router" ;
+
+export const Route = createLazyFileRoute ("/" )({
+ component : Index ,
+});
+
+function Index (return (
+ <div className ="index" >
+ <div className ="index-brand" >
+ <h1 > Padre Gino's</h1 >
+ <p > Pizza & Art at a location near you</p >
+ </div >
+ <ul >
+ <li >
+ <Link to ="/order" > Order</Link >
+ </li >
+ <li >
+ <Link to ="/past" > Past Orders</Link >
+ </li >
+ </ul >
+ </div >
+Nothing new here except maybe the links. These link components make it easy for TanStack Router to control the browser history so definitely use them.
+
+
Lastly let's modify Header to be able to link back to the home page.
+
+import { Link } from "@tanstack/react-router" ;
+
+
+<Link to ={ "/"}>
+ <h1 className ="logo" > Padre Gino's Pizza</h1 >
+</Link > This should all work now. Open your app and see if it loads.
+
+Notice you get a little flash before it loads. It's lazy-loading your route. If this was a real app, we'd make a more pleasant loading experience. I'll leave that as an exercise for you to do.
+So, let's talk about the cart. Go to the order page, add a bunch of stuff to cart, and head back to the home page. Notice there's still stuff in our cart! Head back to the order page and see it's still there. That's because __root.jsx (where our cart state lives) never gets un-rendered. If this just lived in Cart.jsx or order.lazy.jsx, it'd be blown away whenever you navigate away. Why? Because when the component gets un-rendered, it loses all of its state. This is one of the reasons Context can be super powerful.
+Take a gander at the dev tools being rendered in the bottom left (don't worry, it gets stripped out automatically in production.) Click into and peruse around. Lots of cool stuff here for free.
+
+
You did it! That's how easy routing has become. It's come so far from the early days of React.
+
+🏁 Click here to see the state of the project up until now: 09-routing
+
+
Components – Complete Intro to React Now that we've done that, let's separate this out from a script tag on the DOM to its own script file (best practice.)
+
Modify your code in App.js so it looks like:
+
const Pizza = (return React .createElement ("div" , {}, [
+ React .createElement ("h1" , {}, "The Pepperoni Pizza" ),
+ React .createElement ("p" , {}, "Mozzarella Cheese, Pepperoni" ),
+ ]);
+};
+
+const App = (return React .createElement ("div" , {}, [
+ React .createElement ("h1" , {}, "Pixel Perfect Pizzas" ),
+ React .createElement (Pizza ),
+ React .createElement (Pizza ),
+ React .createElement (Pizza ),
+ ]);
+};
+
+const container = document .getElementById ("root" );
+const root = ReactDOM .createRoot (container);
+root.render (React .createElement (App ));
+
+🚨 You will be seeing a console warning Warning: Each child in a list should have a unique "key" prop. in your browser console. React's dev warnings are trying to help your code run faster. Basically, React tries to keep track of components that are swapped in order. In a list, it does that by you giving it a unique key it can track. If it sees two things have swapped, it'll just move the components instead of re-rendering.
+
+
+To make an element have multiple children, just pass it an array of elements.
+We created a second new component, the Pizza component. This component represents one pizza. When you have distinct ideas represented as markup, that's a good idea to separate that it into a component like we did here.
+Since we have a new Pizza component, we can use it multiple times! We just use multiple calls to React.createElement.
+In createElement, the last two parameters are optional. Since Pizza has no props or children (it could, we just didn't make it use them yet) we can just leave them off.
+
+
Okay so we can have multiple pizzas but it's not a useful component yet since not all pizza will be a pepperoni pizza. Let's make it a bit more complicated.
+
const Pizza = (props ) => {
+ return React .createElement ("div" , {}, [
+ React .createElement ("h1" , {}, props.name ),
+ React .createElement ("p" , {}, props.description ),
+ ]);
+};
+
+const App = (return React .createElement ("div" , {}, [
+ React .createElement ("h1" , {}, "Pixel Perfect Pizzas" ),
+ React .createElement (Pizza , {
+ name : "The Pepperoni Pizza" ,
+ description : "Mozzarella Cheese, Pepperoni" ,
+ }),
+ React .createElement (Pizza , {
+ name : "The Hawaiian Pizza" ,
+ description : "Sliced Ham, Pineapple, Mozzarella Cheese" ,
+ }),
+ React .createElement (Pizza , {
+ name : "The Big Meat Pizza" ,
+ description : "Bacon, Pepperoni, Italian Sausage, Chorizo Sausage" ,
+ }),
+ ]);
+};
+
+const container = document .getElementById ("root" );
+const root = ReactDOM .createRoot (container);
+root.render (React .createElement (App ));
+Now we have a more flexible component that accepts props from its parent. Props are variables that a parent (App) passes to its children (the instances of Pizza.) Now each one can be different! Now that is far more useful than it was since this Pizza component can represent not just a pepperoni, but any Pizza. This is the power of React! We can make multiple, re-usable components. We can then use these components to build larger components, which in turn make up yet-larger components. This is how React apps are made!
+
+🏁 Click here to see the state of the project up until now: 01-no-frills-react
+
+
React without a Build Step – Complete Intro to React Let's start by writing pure React. No compile step. No JSX. No Babel. No Webpack or Vite. Just some JavaScript on a page.
+
Let's start your project. Create your project directory inside the repo. I'm going to call mine padre-ginos since we're going to be building a pizza ordering system throughout this course. Open that directory in VS Code or your editor of choice. Create an index.html and add this markup:
+
<!DOCTYPE html >
+<html lang ="en" >
+ <head >
+ <meta charset ="UTF-8" />
+ <meta name ="viewport" content ="width=device-width, initial-scale=1.0" />
+ <title > Padre Gino's</title >
+ </head >
+
+ <body >
+ <div id ="root" > not rendered</div >
+ <script src ="https://unpkg.com/react@18.3.1/umd/react.development.js" > </script >
+ <script src ="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" > </script >
+ <script src ="./src/App.js" > </script >
+ </body >
+</html >
+Let's run this. We could open it directly in our browser but I like using serve . Run npx serve and open http://localhost:3000/ in your browser.
+
+Pretty standard HTML5 document. If this is confusing, I teach another course called Intro to Web Dev that can help you out.
+We're adding a root div. We'll render our React app here in a sec. It doesn't have to be called root, just a common practice.
+We have two script tags.
+The first is the React library. This library is the interface of how to interact with React; all the methods (except one) will be via this library. It contains no way of rendering itself though; it's just the API.
+The second library is the rendering layer. Since we're rendering to the browser, we're using React DOM. There are other React libraries like React Native, React Unity, React Babylon.js, React Email, React Figma, React Blessed, and others. You need both script tags. The order is not important.
+
+
+The last script tag is where we're going to put our code. You don't typically do this but I wanted to start as simple as possible. This script tag must come after the other two.
+
+
+If you want to add some CSS right now, click here to get the stylesheet for this course. Make a file called styles.css and paste the previous file there. Then add a link tag to your html file <link rel="stylesheet" href="./style.css" />. We'll be linking to a CSS file located at /api/pubic/styles.css a little later in the course, but before we do that, we need to do some configuration (during the Vite lesson).
+
+
Make a new directory called src and a new file called App.js in that directory and put this in there.
+
const App = (return React .createElement (
+ "div" ,
+ {},
+ React .createElement ("h1" , {}, "Pixel Perfect Pizzas" )
+ );
+};
+
+const container = document .getElementById ("root" );
+const root = ReactDOM .createRoot (container);
+root.render (React .createElement (App ));
+This is about the simplest React app you can build.
+
+The first thing we do is make our own component, App. React is all about making components. And then taking those components and making more components out of those.
+There are two types of components, function components and class components. This is a function component. We'll see class components shortly.
+A function component must return markup (which is what React.createElement generates.)
+These component render functions have to be fast. This function is going to be called a lot. It's a hot code path.
+Inside of the render function, you cannot modify any sort of state. Put in functional terms, this function must be pure. You don't know how or when the function will be called so it can't modify any ambient state.
+React.createElement creates one instance of some component. If you pass it a string , it will create a DOM tag with that as the string. We used h1 and div, those tags are output to the DOM. If we put x-custom-date-picker, it'll output that (so web components are possible too.)The second empty object (you can put null too) is attributes we're passing to the tag or component. Whatever we put in this will be output to the element (like id or style.)
+First we're using document.getElementById to grab an existing div out of the HTML document. Then we take that element (which we called container) and pass that into ReactDOM.createRoot. This is how we signal to React where we want it to render our app. Note later we can root.render again to change what the root of our React app looks like (I rarely need to do that.)
+Notice we're using React.createElement with App as a parameter to root.render. We need an instance of App to render out. App is a class of components and we need to render one instance of a class. That's what React.createElement does: it makes an instance of a class. An analogy is that App as a class of components is like Honda has a line of cars called Civics. It's a whole line of cars with various different options and parameters. An instance of a Civic would be one individual car. It's a concrete instance of the Civic car line.
+
+
+ReactDOM.createRoot is a new API as of React v18. The old ReactDOM.render is still available (and deprecated) but it'll render your app in "legacy" mode which won't use all the fun new features packed into React v18.
+
+
Basic React Tests – Complete Intro to React Let's write our first test for Pizza.jsx. In general, here's my methodology for testing React:
+
+Try to test functionality, not implementation. Make your tests interact with components as a user would, not as a developer would. This means you're trying to do more to think of things like "what would a user see" or "if a user clicks a button a modal comes up" rather than "make sure this state is correct" or "ensure this library is called". This isn't a rule; sometimes you need to test those things too for assurance the app is working correctly. Use your best judgment.
+Every UI I've ever worked on changes a lot. Try to not unnecessarily spin your wheels on things that aren't important and are likely to change.
+In general when I encounter a bug that is important for me to go back and fix, I'll write a test that would have caught that bug. Actually what I'll do is before I fix it, I'll write the test that fails. That way I fix it I'll know I won't regress back there.
+Ask yourself what's important about your app and spend your time testing that. Ask yourself "if a user couldn't do X then the app is worthless" sort of questions and test those more thoroughly. If a user can't change themes then it's probably not the end of the world (a11y is important) so you can spend less time testing that but if a user can't log in then the app is worthless. Test that.
+Delete tests on a regular basis. Tests have a shelf life.
+Fix or delete flaky tests. Bad tests are worse than no tests.
+
+
Okay, create a new file called Pizza.test.jsx. This naming convention is just habit. Pizza.spec.jsx is common too. But as long as it's in the __tests__ directory it doesn't much matter what you call it.
+
import { render } from "@testing-library/react" ;
+import { expect, test } from "vitest" ;
+import Pizza from "../Pizza" ;
+
+test ("alt text renders on image" , async () => {
+ const name = "My Favorite Pizza" ;
+ const src = "https://picsum.photos/200" ;
+ const screen = render (
+ <Pizza name ={name} description ="super cool pizza" image ={src} /> const img = screen.getByRole ("img" );
+ expect (img.src ).toBe (src);
+ expect (img.alt ).toBe (name);
+});
+This is your most basic test. It renders a React component, and then starts running assertions on it. Here we're asserting that our pizza image ends up with the correct alt text on it. Not the most useful test but a good start for us seeing how to assert something. I could see this being useful if we had bugs that occasionally alt text wasn't showing up.
+
We're using getByRole here to grab the image on the page. In general React Testing Library wants you to adopt a user-centric mindset of how you're asserting things on the page. In this case we're trying to find an image which is something a user would see. Contrast that with using a CSS selector to select the image (which you can do, it's just frowned upon) which is very implementation-centric (a user doesn't know nor care about CSS classes.)
+
Let's add another test to make sure that we have a default image if pizza isn't passed an image.
+
+🚨 This doesn't work yet. That's intentional.
+
+
test ("to have default image if none is provided" , async () => {
+ const screen = render (
+ <Pizza name ={ "Cool Pizza "} description ="super cool pizza" /> const img = screen.getByRole ("img" );
+ expect (img.src ).not .toBe ("" );
+});
+Well, first thing it is going to complain about is that we don't clean up after ourselves after each test. React Testing Library requires us to.
+
+import { render, cleanup } from "@testing-library/react" ;
+import { afterEach, expect, test } from "vitest" ;
+afterEach (cleanup);
+The test still doesn't pass? Oh, that's because it caught a bug! If you don't give it a image, it just breaks. That's not a good user experience. Let's go fix it in Pizza.jsx.
+
+src={props.image ? props.image : "https://picsum.photos/200" }
+Now it works!
+
Bam! Some easy React testing there for you.
+
Browser Tests – Complete Intro to React
+🚨 This is experimental and very likely to change in the future. Consider this a sneak peak into what is coming, not what to do today.
+
+
Vitest is beginning to support more deeply browser-based testing. To those of us that have been around long enough to remember Selenium, this may strike fear deep int your heart. But fear not! Browser-based testing tools have come so far along since then that it's both fast and reliable, in particular thanks to the Microsoft project Playwright .
+
However this is still early days. I'm going to show you how to set it up but be warned that this prone to change as they're still actively working on it!
+
So first let's install the libraries we need.
+
npm i -D @vitest/browser@2.1.3 playwright@1.48.0 vitest-browser-react@0.0.1
+You can see that the vitest-browser-react library is still 0.0.1 as of writing so be extra aware it's likely to have changed by the time you read this.
+
Okay, so now we want to write browser based tests. But we have also have a bunch of existing Node.js-based tests. Some our already-existing Node.js based tests won't work in the browser. But no worries, Vitest/Vite has a tool just for this, workspaces. It's actually made to handle monorepos, but it will work here just as well. Make a file called vitest.workspace.js (you don't normally need this as your Vite config is normally enough.)
+
import { defineWorkspace } from "vitest/config" ;
+
+export default defineWorkspace ([
+ {
+ extends : "./vite.config.js" ,
+ test : {
+ include : ["**/*.node.test.{js,jsx}" ],
+ name : "happy-dom" ,
+ environment : "happy-dom" ,
+ },
+ },
+ {
+ extends : "./vite.config.js" ,
+ test : {
+ setupFiles : ["vitest-browser-react" ],
+ include : ["**/*.browser.test.{js,jsx}" ],
+ name : "browser" ,
+ browser : {
+ provider : "playwright" ,
+ enabled : true ,
+ name : "firefox" ,
+ },
+ },
+ },
+]);
+Now delete the test items from your vite.config.js file.
+
This is a test-only config for Vite (and therefore Vitest.) Now if a test ends in .node.test.jsx it will run through the happy-dom based environment and if it ends in .browser.test.jsx it will run in our new browser-based environment with Playwright. Let's go rename our tests to reflect that.
+
+Cart.browser.test.jsx
+contact.lazy.node.test.jsx
+Pizza.node.test.jsx
+usePizzaOfTheDay.node.test.jsx
+
+
Snapshotting works in the browser so that one works okay. Anything using vitest-fetch-mock is Node.js only so for those we need to mark them as node. We're going to make a new Pizza file so let's leave that one. And our custom hook test mocks fetch so that one is Node only.
+
Okay, now create a Pizza.browser.test.jsx
+
import { render } from "vitest-browser-react" ;
+import { expect, test } from "vitest" ;
+import Pizza from "../Pizza" ;
+
+test ("alt text renders on image" , async () => {
+ const name = "My Favorite Pizza" ;
+ const src = "https://picsum.photos/200" ;
+ const screen = render (
+ <Pizza name ={name} description ="super cool pizza" image ={src} /> const img = await screen.getByRole ("img" );
+
+ await expect.element (img).toBeInTheDocument ();
+ await expect.element (img).toHaveAttribute ("src" , src);
+ await expect.element (img).toHaveAttribute ("alt" , name);
+});
+
+render will take a React component and render it in a vacuum. You can then poke and prod it as you need to test it.A big part of what Playwright and vitest-browser-react want you to do is not test implementation details but to test actual user experiences. Don't test the internal state of a React component but do test what users will see and experience. As such, a lot of we'll be testing will be around roles, attributes, etc.
+@testing-library has a good doc on why they choose to test this way.In general, vitest-browser-react aims to be a drop in replacement for @testing-library/react.
+
+
Looks really similar, right? Alright, let's run it. npm run test. You should see the same Vitest UI but now some of the tests are actually running in the browser.
+
+It will likely prompt you to run a command like npx playwright install. You'll install local copies of browsers to able to run them super fast.
+
+
Cool, right? And really fast! Let's do one more. Let's make a Header.jsx test. We're going to test that the cart number is correct. Remember when Facebook notification numbers were always wrong? We're going to make sure that doesn't happen with our cart indicator. In your Header.jsx file:
+
data-testid="cart-number"
+Now make a Header.browser.test.jsx
+
import { render } from "vitest-browser-react" ;
+import { expect, test } from "vitest" ;
+import Header from "../Header" ;
+import {
+ RouterProvider ,
+ createRouter,
+ createRootRoute,
+} from "@tanstack/react-router" ;
+import { CartContext } from "../contexts" ;
+
+test ("correctly renders a header with a zero cart count" , async () => {
+ const rootRoute = createRootRoute ({
+ component : () => (
+ <CartContext.Provider value ={[[]]} >
+ <Header />
+ </CartContext.Provider > const router = createRouter ({ routeTree : rootRoute });
+ const screen = render (<RouterProvider router ={router} > </RouterProvider > const itemsInCart = await screen.getByTestId ("cart-number" );
+
+ await expect.element (itemsInCart).toBeInTheDocument ();
+ await expect.element (itemsInCart).toHaveTextContent ("0" );
+});
+
+test ("correctly renders a header with a three cart count" , async () => {
+ const rootRoute = createRootRoute ({
+ component : () => (
+ <CartContext.Provider
+ value ={[[{ pizza: 1 }, { pizza: 2 }, { pizza: 3 }]]}
+ >
+ <Header />
+ </CartContext.Provider > const router = createRouter ({ routeTree : rootRoute });
+ const screen = render (<RouterProvider router ={router} > </RouterProvider > const itemsInCart = await screen.getByTestId ("cart-number" );
+
+ await expect.element (itemsInCart).toBeInTheDocument ();
+ await expect.element (itemsInCart).toHaveTextContent ("3" );
+});
+We do have to bend over a bit backwards to make sure TanStack Router is happy, hence all the making of root routes. Remember also that our cart gets its cart from context so we have to pass it in that way. Beyond that, it works very similar!
+
Again, these are early days for browser-based testing with Vite so proceed in your professional settings with caution. However the future is bright with Playwright!
+
+🏁 Click here to see the state of the project up until now: 14-testing
+
+
v8 – Complete Intro to React One last very cool trick that Vitest has built into it: v8 . v8 uses Chrome's builtin test coverage tool which tells you how much of your code that you're covering with tests. Via an interactive viewer you can see what lines are and aren't covered. This used to be annoying to set up by Vitest just does it for you.
+
Run the following
+
npm i -D @vitest/coverage-v8
+
+You can also use Istanbul if you want to. npm i -D @vitest/coverage-istanbul will get you the package. But I'd say v8 is the superior tool.
+
+
Now add this to your vite.config.js
+
coverage : {
+ reporter : ["text" , "json" , "html" ],
+},
+Add the following command to your npm scripts: "coverage": "vitest --coverage" and go ahead run npm run coverage and open the following file in your browser: open coverage/index.html.
+
Here you can see the files we've written tests for. One file, postContact is missing two lines of coverage (click on the file name to see that): it's the line of reading back from the cache. It's a file we didn't write a test for but it got covered via our test for the contact page. It's missing a test to cover error cases which could be important. What if our contact API is down? This tool helps you look through your code and see what your tests aren't covering. Some of those could be fine and not worth the effort writing a test for. Others you'll look at and say "oh my god we need to cover that with tests yesterday."
+
Lastly, add coverage/ to your .gitignore since this shouldn't be checked in.
+
Istanbul
+
v8 use Chrome's built-in code coverage capabilities to run your tests which makes it significantly faster and outputs it in a way that all of Istanbul tools work with it. You can tell Vitest to use Istanbul but unless you have a very specific reason to, just use v8.
+
Snapshot Testing – Complete Intro to React I'm not a fan of seeking 100% test coverage. I think it's a fool's errand and a waste of time. I'd rather you write five tests that cover the most important five lines of your code than see you write one test for five less-important pieces of UI code.
+
But let's show you an easy way to cheat and get there! Let's talk about snapshot testing.
+
Snapshot tests are low confidence, low cost ways of writing tests. With more-or-less a single line of code you can assert: this code doesn't break, and it isn't changing over time.
+
Let's test Cart.jsx. It's a pretty stable component that doesn't do a lot and we don't expect it to change a lot if at all. A low cost, low confidence test could fit here. Make a file called Cart.test.jsx
+
import { expect, test } from "vitest" ;
+import { render } from "@testing-library/react" ;
+import Cart from "../Cart" ;
+
+test ("snapshot with nothing in cart" , () => {
+ const { asFragment } = render (<Cart cart ={[]} /> expect (asFragment ()).toMatchSnapshot ();
+});
+Run this to see Vitest say it created a snapshot. Go look now at Cart.test.jsx.snap in the src/__tests__/__snapshots__ to see what it created. You can see it's just rendering out what it would look like. Now if you modify Cart.jsx it will fail the test. As you can see, it's a quick gut check to make sure your changes don't have cascading problems. If I modify App.jsx and it causes this to fail it means I can catch it and validate quickly. Some people don't find it useful. I'm not entirely sold on it to be honest; at most these should be used very sparingly. This could be useful if you have a component that you expect to never change and it would be a problem if it did. Maybe a footer? I don't know. I never write these.
+
Let's add some pizzas and see how it does.
+
test ("snapshot with some stuff in cart" , () => {
+ const { asFragment } = render (
+ <Cart
+ cart ={[
+ {
+ pizza: {
+ id: "pepperoni ",
+ name: "The Pepperoni Pizza ",
+ category: "Classic ",
+ description: "Mozzarella Cheese , Pepperoni ",
+ image: "/public /pizzas /pepperoni.webp ",
+ sizes: {
+ S: 9.75 ,
+ M: 12.5 ,
+ L: 15.25 ,
+ },
+ },
+ size: "M ",
+ price: "$12.50 ",
+ },
+ {
+ pizza: {
+ id: "ckn_pesto ",
+ name: "The Chicken Pesto Pizza ",
+ category: "Chicken ",
+ description:
+ "Chicken , Tomatoes , Red Peppers , Spinach , Garlic , Pesto Sauce ",
+ image: "/public /pizzas /ckn_pesto.webp ",
+ sizes: {
+ S: 12.75 ,
+ M: 16.75 ,
+ L: 20.75 ,
+ },
+ },
+ size: "L ",
+ price: "$20.75 ",
+ },
+ {
+ pizza: {
+ id: "bbq_ckn ",
+ name: "The Barbecue Chicken Pizza ",
+ category: "Chicken ",
+ description:
+ "Barbecued Chicken , Red Peppers , Green Peppers , Tomatoes , Red Onions , Barbecue Sauce ",
+ image: "/public /pizzas /bbq_ckn.webp ",
+ sizes: {
+ S: 12.75 ,
+ M: 16.75 ,
+ L: 20.75 ,
+ },
+ },
+ size: "S ",
+ price: "$12.75 ",
+ },
+ ]}
+ /> expect (asFragment ()).toMatchSnapshot ();
+});
+This works, and now you can stick with this, but here's a problem. If you look at your snapshot, it's rendering Pizza components as well. Now if you modify Pizza.jsx (that has its own tests already) your Cart.jsx test is going to fail. This is misleading, nothing is wrong or different with Cart.jsx. In a previous version of this class I show you how to accomplish this with react-test-renderer. However the folks at @testing-lib think shallow rendering is more harmful than helpful (I like, 75% agree) so we'll leave it out. Click here to see me teach this previously. It's 95% the same, just uses Jest instead of Vitest.
+
Update your snapshots by either running npm run test -- -u or you can use the watcher to do it with either u to update all at once or do i one-by-one.
+
You should commit snapshot files to git.
+
I'll leave it up to you how much you value these tests. I think they have a very limited place in UI testing but it's pretty low level of help. Frequently they become more noise than help. In any case, keep them in your toolbox, some times they can be helpful.
+
+As a side note, one place I saw some use for snapshot tests (as they can track any object shape over time, not just React components) was in the backend in API response shapes. We'd write a snapshot test that this API response is always going to look like this and it should fail the test if it breaks. This makes it very intentional every time you modify the API response (since your API clients are likely relying on it being a certain shape.) Furthermore, it means the frontend devs can use these snapshot files to see what the API response is going to look like. Niche, but it was helpful on the one project I worked on that had it.
+
+
Testing Custom Hooks – Complete Intro to React Let's say we needs tests for our custom hook, usePizzaOfTheDay. Testing custom hooks is a bit of a trick because they are inherently tied to the internal workings of React: they can't be called outside of a component. So how we do we get around that? We fake a component! Make a file called usePizzaOfTheDay.test.jsx in our __tests__ directory.
+
import { expect, test, vi } from "vitest" ;
+import { render } from "@testing-library/react" ;
+import createFetchMock from "vitest-fetch-mock" ;
+import { usePizzaOfTheDay } from "../usePizzaOfTheDay" ;
+
+const fetchMocker = createFetchMock (vi);
+fetchMocker.enableMocks ();
+
+const testPizza = {
+ id : "calabrese" ,
+ name : "The Calabrese Pizza" ,
+ category : "Supreme" ,
+ description :
+ "Salami, Pancetta, Tomatoes, Red Onions, Friggitello Peppers, Garlic" ,
+ image : "/public/pizzas/calabrese.webp" ,
+ sizes : { S : 12.25 , M : 16.25 , L : 20.25 },
+};
+
+function getPizzaOfTheDay (let pizza;
+
+ function TestComponent (usePizzaOfTheDay ();
+ return null ;
+ }
+
+ render (<TestComponent /> return pizza;
+}
+
+test ("gives null when first called" , async () => {
+ fetch.mockResponseOnce (JSON .stringify (testPizza));
+ const pizza = getPizzaOfTheDay ();
+ expect (pizza).toBeNull ();
+});
+It's a little weird to implement a fake component to test something (we're dangerously close to the line of testing implementation details) but this is essentially library code and we want to assure ourselves this code works if we use it frequently in our code base.
+
We can make this better though. Let's rewrite our test to look like this:
+
import { renderHook } from "@testing-library/react" ;
+
+test ("to be null on initial load" , async () => {
+ fetch.mockResponseOnce (JSON .stringify (testPizza));
+ const { result } = renderHook (() => usePizzaOfTheDay ("" ));
+ expect (result.current ).toBeNull ();
+});
+Here the helper renderHook abstracts away that oddity we had to do to get that hook tested. But rest assured it's doing essentially the same thing: creating a component under the hood that's running the hook lifecycle methods appropriately for you.
+
Let's add a test to make sure it does the right thing with the API response and calls the right API
+
import { renderHook, waitFor } from "@testing-library/react" ;
+
+test ("to call the API and give back the pizza of the day" , async () => {
+ fetch.mockResponseOnce (JSON .stringify (testPizza));
+ const { result } = renderHook (() => usePizzaOfTheDay ("" ));
+ await waitFor (() => {
+ expect (result.current ).toEqual (testPizza);
+ });
+ expect (fetchMocker).toBeCalledWith ("/api/pizza-of-the-day" );
+});
+
+waitFor is a handy trick where you need to wait for React to settle. You give it a body that throws errors until it's true. expect when it doesn't work throws an error so that's how this works.
+Once it resolves to true, it passes the test and moves on. If it fails like 20 times (that's configurable) it will then fail the test.
+Some people this is too into the implementation details and I half agree. However it is useful from the perspective that this hook needs to work in a certain way and it has an expectation of an API to call which does affect user behavior so it could be useful. If this was truly our codebase, I'd just test the PizzaOfTheDay component and call it good. But if we used this hook in lots of places, I'd probably a test just for it.
+
+
Testing User Interaction – Complete Intro to React Let's test the Contact page. It has a nice, simple user interaction. User puts their information in, we submit to the API, and we show them a submitted header. Let's test all of that.
+
First we need a helper function, vitest-fetch-mock. We don't need it because Vitest can do it, but I think it just makes things easier.
+
npm i -D vitest-fetch-mock@0.3.0
+And now let's write the code
+
import { render } from "@testing-library/react" ;
+import { expect, test, vi } from "vitest" ;
+import createFetchMock from "vitest-fetch-mock" ;
+import { QueryClientProvider , QueryClient } from "@tanstack/react-query" ;
+import { Route } from "../routes/contact.lazy" ;
+
+const queryClient = new QueryClient ();
+
+const fetchMocker = createFetchMock (vi);
+fetchMocker.enableMocks ();
+
+test ("can submit contact form" , async () => {
+ fetchMocker.mockResponse (JSON .stringify ({ status : "ok" }));
+ const screen = render (
+ <QueryClientProvider client ={queryClient} >
+ <Route.options.component />
+ </QueryClientProvider > const nameInput = screen.getByPlaceholderText ("Name" );
+ const emailInput = screen.getByPlaceholderText ("Email" );
+ const msgTextArea = screen.getByPlaceholderText ("Message" );
+
+ const testData = {
+ name : "Brian" ,
+ email : "test@example.com" ,
+ message : "This is a test message" ,
+ };
+
+ nameInput.value = testData.name ;
+ emailInput.value = testData.email ;
+ msgTextArea.value = testData.message ;
+
+ const btn = screen.getByRole ("button" );
+
+ btn.click ();
+
+ const h3 = await screen.findByRole ("heading" , { level : 3 });
+
+ expect (h3.innerText ).toContain ("Submitted" );
+
+ const requests = fetchMocker.requests ();
+ expect (requests.length ).toBe (1 );
+ expect (requests[0 ].url ).toBe ("/api/contact" );
+ expect (fetchMocker).toHaveBeenCalledWith ("/api/contact" , {
+ body : JSON .stringify (testData),
+ headers : {
+ "Content-Type" : "application/json" ,
+ },
+ method : "POST" ,
+ });
+});
+
+We need to wrap React Query with a query provider always or it doesn't work. In this case we can just make that part of the initial render.
+You can pre-populate React Query with a valid cache and then test if your app uses that correctly. Totally valid way to test. In this case we want to make sure our endpoint is being posted to correctly (to make sure we record a contact)so we aren't doing that.
+vi is Vitest's spy library, similar to sinon.vitest-fetch-mock is just a nice layer on top of vi. We could just use vi directly.
+Notice we can just call click and it does all the things we'd expect. Cool, right?
+We then make some assertions that our h3 shows up correctly, that our API was called once, and that it was submitted to our API the way we expect it to. This may seem a bit implementation-oriented, and it is, but typically in a larger app we'd have a library for calling our API and we'd test that individually but we don't here so we're wrapping it all together.
+
+
Vitest UI – Complete Intro to React Another fun little tool let's you use is Vitest UI . It allows you to see and manage all your tests from the web browser. Let's add it.
+
npm i -D @vitest/ui@2.1.3
+And in your package.json
+
+"test:ui" : "vitest --ui"
+Now from the command line run npm run test:ui and it should pop up your browser with the Vitest UI open. Super convenient, particularly in places you need to run individual tests repeatedly and you don't have the VS Code extension. The module graph is a cool visualization as well.
+
Vitest – Complete Intro to React This is meant to be a very brief treatise on how to do testing on React applications. This will be a brief intro on how to set up Vitest tests for the application we just created. For more information about Vite, Vitest, and testing in general, check out the Build Tools & Testing Learning Path .
+
Testing with Vitest
+
Vitest is a test runner made by the fine folks who make Vite (as well as Vue.) The idea behind Vitest is that you already have a complete build pipeline for making an app, why should that pipeline be any different for test? It shouldn't; you want your testing environment to look as much like your app environment as possible.
+
They designed it to be a drop-in replacement for Jest which is what I have taught for this course since the beginning. Jest is great and still a very viable tool to use for testing, even with Vite. We're just going to use Vitest because 1. we don't have to do any more configuration and 2. 100% of what you will learn in here is going to be useful if you use Jest. Win-win. If you want to learn Jest specifically, take a look at Intermediate React v4's testing section.
+
+Fun side note: Jest is now an OpenJS project and no longer directly under Facebook .
+
+
While Vitest is not using Jasmine directly, its APIs mimic Jasmine APIs (just like Jest.)
+
Let's get going. Run npm install -D vitest@2.1.3 @testing-library/react@16.0.1 happy-dom@15.7.4.
+
@testing-library/react, formerly called react-testing-library, is a tool that has a bunch of convenience features that make testing React significantly easier and is now the recommended way of testing React, supplanting Enzyme . Previous versions of this course teach Enzyme if you'd like to see that (though I wouldn't recommend it unless you have to.)
+
We need to tell Vitest that we need a browser-like environment which it will fulfill via the happy-dom package. happy-dom is a lot like jsdom but smaller, doesn't do 100% of what the browser does, and is much, much faster.
+
Next go into your src directory and create a folder called __tests__. Notice that's double underscores on both sides. Why double? They borrowed it from Python where double underscores ("dunders" as I've heard them called) mean something magic happens (in essence it means the name itself has significance and something is looking for that path name exactly.) In this case, Vitest assumes all JS files in here are tests.
+
Let's go add an npm script. In your package.json.
+
"test" : "vitest"
+
+Fun trick: if you call it test, npm lets you run that command as just npm t.
+
+
This command lets you run Jest in an interactive mode where it will re-run tests selectively as you save them. This lets you get instant feedback if your test is working or not. This is probably my favorite feature of Vitest.
+
Okay, one little configuration to add to your vite.config.js.
+
+test : {
+ environment : "happy-dom" ,
+},
+Now that we've got that going, let's go write a test.
+
Code Formatting – Complete Intro to React Prettier
+
It's important to keep quality high when writing code. Or at least that's how I sell ESLint and Prettier to my co-workers. In reality I'm super lazy and want the machine to do as much work as possible so I can focus more on architecture and problem-solving and less on syntax and style. While there are many tools that can help you keep code quality high, these two I consider core to my workflow.
+
Prettier is an amazing tool from the brain of James Long . James, like many of us, was sick of having to constantly worry about the style of his code: where to stick indents, how many, when to break lines, etc etc. Coming from languages like Go, Reason, or Elm where all that is just taken care of by the tooling for the language, this quickly wears. James did something about it and made a tool to take care of it: Prettier.
+
Prettier is a really fancy pretty printer. It takes the code you write, breaks it down in to an abstract syntax tree (AST) which is just a representation of your code. It then takes that AST, throws away all of your code style you made and prints it back out using a predefined style. While this sounds a little scary, it's actually really cool. Since you no longer have control of the style of your code, you no longer have to think about it at all. Your code is always consistent, as is the code from the rest of your team. No more bikeshedding!! As I like to put it: if your brain is a processor, you get to free up the thread of your brain that worries about code styles and readability: it just happens for you. Don't like semicolons? Don't write them! It puts them in for you. I love Prettier.
+
Need to tool around a bit with it before you trust it? Go here . You can see how it works.
+
Let's go integrate this into our project. It's pretty easy (since I'm a dad now, I'm legally obligated to make this joke.)
+
Either install Prettier globally npm install --global prettier or replace when I run prettier with (from the root of your project) npx prettier. From there, run prettier src/App.js. This will output the formatted version of your file. If you want to actually write the file, run prettier --write src/App.js. Go check src/App.js and see it has been reformatted a bit. I will say for non-JSX React, prettier makes your code less readable. Luckily Prettier supports JSX! We'll get to that shortly.
+
Prettier has a few configurations but it's mostly meant to be a tool everyone uses and doesn't argue/bikeshed about the various code style rules. Here they are . I just use it as is since I'm lazy. Prettier can also understand flow and TypeScript .
+
Prettier is great to use with Visual Studio Code . Just download this extension . Pro tip: set it to only run Prettier when it detects a Prettier config file. Makes it so you never have to turn it off. In order to do that, set prettier.requireConfig to true and editor.formatOnSave to true.
+
So that our tool can know this is a Prettier project, we're going to create a file called .prettierrc and put {} in it. This lets everyone know this is a Prettier project that uses the default configuration. You can put other configs here if you hold strong formatting opinions.
+
npm scripts
+
So it can be painful to try to remember the various CLI commands to run on your project. You can put CLI commands into it and then run the name of the tag and it'll run that script. Let's go see how that works. Put the following into your package.json.
+
First run npm install -D prettier@3.3.3 -D means it's for development only.
+
"scripts" : {
+ "format" : "prettier --write \"src/**/*.{js,jsx}\""
+} ,
+Now you can run npm run format and it will run that command. This means we don't have to remember that mess of a command and just have to remember format. Nice, right? We'll be leaning on this a lot during this course.
+
+Note the @3.3.3 portion. For the purposes of making this course not break in the future, I have you install the exact version of packages I used when I made this course. As is natural, packages change and progress over time and I can't anticipate how that will happen. So I'd suggest you use the same packages I do as you do this course (even if npm yells at you for security vulnerabilites). As soon as you're done with the course, feel free to go update the versions to the latest and see if anything breaks.
+
+
Git – Complete Intro to React Git
+
Git is a critical part of any project and probably something many of you are already familiar with. Install Git if you don't already have it installed. Then initialize your project as a git repo with git init in the root of your project (VSCode and any other number of tools can do this as well.)
+
If you haven't already, create a .gitignore at the root of your project to ignore the stuff we don't want to commit. Go ahead and put this in there:
+
node_modules
+dist/
+.env
+.DS_Store
+coverage/
+.vscode/
+This will make it so these things won't get added to our repo. If you want more Git instruction, please check out the courses from ThePrimeagen and Nina Zakharenko on Frontend Masters.
+
ESLint – Complete Intro to React ESLint
+
On top of Prettier which takes of all the formatting, you may want to enforce some code styles which pertain more to usage: for example you may want to force people to never use with which is valid JS but ill advised to use. ESLint comes into play here. It will lint for these problems.
+
First of all, run npm install -D eslint@9.9.1 eslint-config-prettier@9.1.0 globals@15.9.0 to install ESLint in your project development dependencies. Then you may configure it.
+
There are dozens of preset configs for ESLint and you're welcome to use any one of them. The Airbnb config is very popular, as is the standard config (both of which I taught in previous versions of this class). I'm going to use a looser one for this class: the recommended JS config from ESLint. Let's create an eslint.config.mjs file to start linting our project.
+
+We're using .mjs (module JS) because we want to use import/export for modules instead of require.
+
+
Add this to the eslint.config.mjs file:
+
import js from "@eslint/js" ;
+import globals from "globals" ;
+import prettier from "eslint-config-prettier" ;
+
+
+export default [
+ js.configs .recommended ,
+ {
+ files : ["**/*.js" ],
+ languageOptions : {
+ globals : { ...globals.browser , ...globals.node },
+ parserOptions : {
+ ecmaFeatures : {
+ jsx : true ,
+ },
+ },
+ },
+ },
+ prettier,
+];
+
+ESLint changed a lot with version 9. In previous versions of this course we used the JSON version of configuration which is no longer supported. You have to do their newer "flat" version of config (honestly it is better.)
+The /** @type {import('eslint').Linter.Config[]} */ is a VS Code / TypeScript trick to be able to do auto-completions on the config object. Super helpful to have the types available right in VS Code. It's not required.
+globals is a package that is just a big JSON file of what's available in each environment. We're going to be in Node.js and Browser environments so we grabbed those two. If I was being a bit more discerning I'd carefully only apply browser configs to browser files and Node configs to Node.js files.The config objects are applied in order. We did ESLint's JS config first, and then our custom one so we can overwrite it where we want to, and then the Prettier one should always come last as all it does is turn off rules that Prettier itself does; it doesn't add anything.
+
+
This is a combination of the recommended configs of ESLint and Prettier. This will lint for both normal JS stuff as well as JSX stuff. Let's add ESLint to our scripts:
+
"lint" : "eslint" ,
+Run npm run eslint now and you should see we have a few errors.
+
+🚨 ESLint will have a bunch of errors right now. Ignore them; we'll fix them in a sec.
+
+
Worth adding three things here:
+
+With npm scripts, you can pass additional parameters to the command if you want. Just add a -- and then put whatever else you want to tack on after that. For example, if I wanted to get the debug output from ESLint, I could run npm run lint -- --debug which would translate to eslint --debug.
+We can use our fix trick this way: npm run lint -- --fix.
+We're going to use both JS and JSX.
+
+
ESLint is a cinch to get working with Visual Studio Code . Just download the extension .
+
oxlint and Biome
+
Two projects to watch going forward here: Biome (formerly called Rome) and oxlint . Both are written in Rust and designed to be faster than ESLint (which is written in JavaScript). ESLint at huge scale can be a bit slow and these two projects aim to fix that bottleneck. I'd still say it's early days on these projects and 99% of the time ESLint is fast enough. Still, good to keep an eye on both of the projects. Eventually both projects aim to replace Prettier as well.
+
npm – Complete Intro to React npm
+
npm does not stand for Node.js Package Manager. It is, however, the package manager for Node.js (they don't say what it stands for). It also has all the packages in the front end scene. npm makes a command line tool, called npm as well. npm allows you to bring in code from the npm registry which is a bunch of open source modules that people have written so you can use them in your project. Whenever you run npm install react (don't do this yet), it will install the latest version of React from the registry.
+
In order to start an npm project, run npm init -y at the root of your project. If you don't have Node.js installed, please go install that too . When you run npm init it'll ask you a bunch of questions. If you don't know the answer or don't care, just hit enter. You can always modify package.json later. This will allow us to get started installing and saving packages.
+
pnpm
+
Another option here is to use pnpm . pnpm is a newer package manager that makes different tradeoffs than npm, notably how it chooses to organize the node_modules directory. npm maintains a flat file structure and installs everything flat whereas pnpm does more symlinking. Both are fine, feel free to choose what works for you. I'll be using npm because it's easier for students to use.
+
Vite – Complete Intro to React Vite
+
The build tool we are going to be using today is called Vite . Vite (pronounced "veet", meaning quick in French) is a tool put out by the Vue team that ultimately ends up wrapping Rollup which does the actual bundling. The end result is a tool that is both easy to use and produces a great end result.
+
+Fun fact: there's a new project being developed called Rolldown which is written in Rust and aims to replace Rollup.
+
+
Our end result that we want from a build tool is that
+
+We can separate files out for code organization and have a tool stitch them together for us
+We can include external, third-party libraries from npm (like React!)
+The tool will optimize the code for us by minifying and other optimizing techniques
+
+
Previous versions of this course used Parcel , another tool near-and-dear to my heart. It is still an amazing tool and one I recommend you check out. We ended up moving to Vite because the React community has selected it as the tool-of-choice for the moment and this course aims to give you the community norms of React. Even older versions of this course previously taught Webpack .
+
First, let's install the things we need for Vite.
+
npm install -D vite@5.4.2 @vitejs/plugin-react@4.3.1
+The former is the tool itself and the latter is all the React specific features we will need. Now that we have those installed, we need to modify our index.html just a little bit.
+
+<script type ="module" src ="./src/App.js" > </script >
+We need to add module to the script tag so that the browser knows it's working with modern browser technology that allows you in development mode to use modules directly. Instead of having to reload the whole bundle every time, your browser can just reload the JS that has changed. It allows the browser to crawl the dependency graph itself which means Vite can run lightning fast in dev mode. It will still package it up for production so we can support a range of browsers.
+
Next, let's make our config file. Make a file in the root of your project called vite.config.js and stick this in there:
+
import { defineConfig } from "vite" ;
+import react from "@vitejs/plugin-react" ;
+
+export default defineConfig ({
+ plugins : [react ()],
+});
+By default, Vite will look for the index.html file in the root directory and treat it as the head of a source graph. It'll crawl all your HTML, CSS, and JavaScript you link to from there and create your project for you. We don't have to do any more configuration than that. Vite will take care of the rest.
+
Okay, let's actually install React to our project.
+
npm install react@18.3.1 react-dom@18.3.1
+
+We did not include the -D because React is not a development tool, it's a production dependency
+React and ReactDOM are versioned together so you can assume those versions will always be the same
+
+
Finally, head to App.js and modify the following
+
+import React from "react" ;
+import { createRoot } from "react-dom/client" ;
+
+
+const root = createRoot (container);
+Now let's set up our scripts to start Vite. In package.json, put:
+
+"dev" : "vite" ,
+"build" : "vite build" ,
+"preview" : "vite preview"
+Be sure to also add "type: module" to your package.json. Vite has deprecated support for Common.js and now requires you to use ESM style modules.
+
+Note: you will get a warning from Vite like Files in the public directory are served at the root path. Instead of /public/style.css, use /style.css. – ignore this, we'll fix it in a bit.
+
+
dev will start the development server, typically on http://localhost:5173/ . build will prepare static files to be deployed (to somewhere like GitHub Pages, Vercel, Netlify, AWS S3, etc.) preview lets you preview your production build locally.
+
+Note that we've changed domains here. By default Vite uses localhost:5173. Fun fact, 5173 sort of spells VITE if you make the 5 its Roman Numeral version, V.
+
+
Alternatives
+
There are a myriad of fantastic developer tools out there available. We chose Vite because the industry has been using it for a while but I have zero problem with you selecting other tools. Just trying to expose everyone to great tools.
+
In particular, esbuild is a wonderful tool to take a look at as well.
+
+🏁 Click here to see the state of the project up until now: 02-tools .
+
+
Intro – Complete Intro to React
+🚨 You do not need to watch/read previous versions of this course. This is just the ninth revision of the course.
+
+
Hello! And welcome to the Complete Intro to React, version 9. In this course you will go from not knowing anything about React to being job ready. This course teaches all the core concepts of React aiming to be the most useful. You will learn React from a first-principles methodology – we will start with no build tools or anything like that, just vanilla JavaScript and React. Over time we add tools like Vite, JSX, ESLint, Prettier, etc. so you can learn how to construct your own stack from scratch. I will teach a few ecosystem tools as well, testing, and what's coming soon for React.
+
Who is this course for?
+
You! This course is for anyone looking to get started in React or deepen their expertise in it. No experience is necessary. However, I guarantee anyone who is interested in React will learn something in here. This probably shouldn't be your first programming or JavaScript course, but beyond that, it should be comfortable for anyone. We do use some Node.js to run our little API and for the build tools but no real Node.js experience is necessary, I'll give you the commands necessary to run it.
+
Who am I?
+
+
My name is Brian Holt and I've been writing React for a long time. I shipped Reddit's first React code in 2014.
+
+
+
I went on to write React at a variety of large companies and it's been my goto tool for over a decade at this point. It's safe to say it's been a defining feature in my career.
+
I currently work as a staff product manager at Neon working on developer tools and developer experience. I loved working on dev tools and dev experiences so much that I ended up working in tools and strategy. Previous to Neon, I've worked at Snowflake, Microsoft, LinkedIn, Netflix, Reddit, and some other startups. I've done everything from VP of product to dev rel to staff engineering tech lead.
+
When I'm not working or teaching, you'll find me hanging out with my wife, son, and my soon-to-arrive daughter! I've lived the past six years in Seattle but I'm currently moving to Sacramento to get a bit more sun and to live close to amazing snowboarding in Tahoe! 🏂 I also enjoy hazy IPAs, Islay Scotches, road cycling, and playing Dota 2 poorly.
+
Please catch up with me on social media! Be aware that I'm awful at responding to DMs!!
+
+
Where to File Issues
+
I write these courses and take care to not make mistakes. However when teaching over ten hours of material, mistakes are inevitable, both here in the grammar and in the course with the material. However I (and the wonderful team at Frontend Masters) are constantly correcting the mistakes so that those of you that come later get the best product possible. If you find a mistake we'd love to fix it. The best way to do this is to open a pull request or file an issue on the GitHub repo . While I'm always happy to chat and give advice on social media, I can't be tech support for everyone. And if you file it on GitHub, those who come later can Google the same answer you got.
+
How the repo works
+
There are two repos for this class: the website you're currently on and the example projects . To get set up, clone or download the projects repo:
+
git clone https://github.com/btholt/citr-v9-project.git
+Every step of this project will have a folder that will be a snapshot of where the project is at that step. If you get stuck, want to copy/paste some long bit of code you don't feel like writing, or just want to walk through the code at that point, please do! The primary goal of this is for you to learn so as long as you're learning there's no cheating!
+
The naming format will be XX-<name of the lesson> so you can get a rough idea of order and which lesson the step is coming from. In each snapshot you'll have to run npm install again since they are another whole copy of the project.
+
We're going to be starting from scratch, but you'll need the repo downloaded because there's an api directory that will be used later in the course.
+
+And one last request! Please star this repo . It helps the course be more discoverable and with my fragile ego.
+
+
My Setup – Complete Intro to React Node.js
+
You'll need to have a Node.js version installed, and preferably something after v20.16. I wrote this course with 20.16 but it should be fairly future-proof.
+
I use fnm to manage my Node.js versions (similar to nvm).
+
I think this course would work with recent versions of bun or deno but it's untested. Beware if you decide go down this path.
+
Tools FAQ
+
What tools are your using?
+
+Visual Studio Code – I used to work at Microsoft on VS Code so it's no surprise that I'll be using it in this course. We'll also be using a few extensions that I'll call out as we get there.
+Firefox – I want more than Chromium to exist so I support Firefox where I can. Feel free to use any browser; it won't matter in this course.
+Terminal.app – I used to use iTerm2 and Hyper but in the end I appreciate how fast the default terminal is.
+
+
What <font/theme/extension> are you using?
+
+Visual Studio Code
+Dark+ Theme – It comes installed by default but it's not the default theme anymore. I'm so used to it that I can't switch.
+MonoLisa font – I like fonts and I look at it all day so I was okay paying for it. I have ligatures enabled which is why you might see strange glyphs. If you want ligatures but don't want to pay, the linked ligature article has a few. I like Cascadia Code from Microsoft.vscode-icons – Lots of neat icons for VS Code and it's free.
+
+Terminal
+zsh – It comes with macOS now and I'm way too lazy to switch back to bash.
+Dracula theme – I like the pastels. I would use it in VS Code too if Dark+ wasn't ingrained in my blood.Starship Prompt – Very cool prompt that's just pretty. Also shows you what sort of project you're in which is occasionally usefulCaskaydiaCove Nerd Font – This works with Starship prompt to give you the JS logos and all those extra glyphs. It's based on Cascadia Code.
+
+
+
Form Actions – Complete Intro to React Form Actions
+
Okay, so let's actually upgrade our app to be React 19.
+
+🚨 Pay attention here, as you need to figure out which version of React to install.
+
+
Go here and look at the versions of React published on npm. If you see that React 19 is still in canary/rc/next (which are all the same) then you can run npm i react@rc react-dom@rc. You'll get a lot of warnings about things not matching versions in your command-line, that's totally okay.
+
If React 19 is latest, then run npm install react@19 react-dom@19 and then follow these instructions. Be extra cautious because things may have changed!!
+
Okay, let's talk form actions. A lot of web interfaces is just handling form inputs, and so the React team decided to make it easier to do that. It's actually really similar to what we've done already, just a little less boilerplate. Open your contact.lazy.jsx and let's modify this page to use a form action.
+
mutationFn : function (formData ) {
+
+
+ return postContact (
+ formData.get ("name" ),
+ formData.get ("email" ),
+ formData.get ("message" ),
+ );
+},
+
+
+<form action ={mutation.mutate} > That's it! It really is just a convenience function to make handling for submits even easier to do. There's nothing wrong with what we had either, and that will continue to work as-is too.
+
Let's go convert order.lazy.jsx too
+
+function addToCart (setCart ([...cart, { pizza : selectedPizza, size : pizzaSize, price }]);
+}
+
+<form action={addToCart}>[…]</form>;
+Same as above. But here's what cool if you're using something like Next.js or Remix: we can use the 'use server' directive here and make this a server action. Something like
+
function addToCart (formData ) {
+ "use server" ;
+ sql (`INSERT INTO cart (user_id, pizza_type, size) VALUES ($1, $2)` , [
+ formData.pizza_type ,
+ formData.size ,
+ ]);
+}
+Since it's on the server, we can now safely insert into our database, directly from inside our React component. React/Next.js will handle all the details of handling the execution of that on server. Pretty cool, right? We'll talk more about this in Intermediate React v6.
+
Let's do one more cool trick here. There's a new hook called useFormData that lets children components see if they're inside of a form being submitted without having to pass lots of data around.
+
In contact.lazy.jsx
+
+import { useFormStatus } from "react-dom" ;
+
+
+<ContactInput name ="name" type ="text" placeholder ="Name" /> <ContactInput name ="email" type ="email" placeholder ="Email" /> function ContactInput (props ) {
+ const { pending } = useFormStatus ();
+ return (
+ <input
+ disabled ={pending}
+ name ={props.name}
+ type ={props.type}
+ placeholder ={props.placeholder}
+ />
+This is a silly example, but imagine you had really complicated inputs that had a design system, tool tips, and all sorts of other UIs. This is common in large React codebases. This could be really useful for that.
+As a side note, if I have really small components like ContactInput, I'll just stick in the same file like we did here. It can be a useful pattern. Some people are purists and demand one file, one component. I am not a purist.
+We didn't do the button or the text area just for brevity's sake but you could.
+Since we're local, this pending state will be super short. But you will notice the background flash gray. That's the disabled state.
+
+
And that's form actions!
+
+🏁 Click here to see the state of the project up until now: 15-form-actions
+
+
React 19 – Complete Intro to React React 19
+
This course has been centered on version 18.3. The nice thing about React is that while they do make breaking changes, they are usually fairly intentional about it and do so sparingly. In other words, what you learned today will still be useful five years from now. You could take the version of the course I taught five years ago and still be pretty up to date on how to write React. In other words, despite the fact that React 19 is imminent (or perhaps even out by the time you read this), there's no need to panic. All the stuff they are adding will just complement what you have learned and not change it.
+
Do keep an eye out for version 6 of my Intermediate React course. We will cover a lot of the React 19 features in that course.
+
So, given React 19 is about out, and we know 95% of what is going to be in it, we are going to cover a few features so that you can be prepared for it. Do remember, we are going to use the React 19 release candidate, which means while conceptually that are very unlikely to change big concepts, they may tweak the precise API of how it works. Just be aware that it may change a bit.
+
First thing, let's discuss a few features that are cool but not worth us spending a lot of time writing code for. Then we'll cover a few that we'll actually add code to our app for.
+
'use client' and 'use server'
+
Let's start with one of the bigger shifts in React. We will cover this extensively in Intermediate React so if you are curious, check that course out when it comes out. Essentially we can indicate to React "hey, only run this component on the server" or likewise, "hey, only render this client side". Why would you do that?
+
For server components, we can do things like reference server-side secrets, query databases, call private APIs, or other things that we want data for our client side app but we can't query client-side without risking leaking secrets or DDOS. All of the logic will be executed server-side and then the finished component will be sent down to the client. Pretty cool, right?
+
They're even taking it step further with taintUniqueValue and taintObjectReference. These allow a developer to say "hey, this is super sensitive information, make sure this never is sent to the client". You would use this with like an API key, a database connection string, or some other secret that you wouldn't want to accidentally leak. I love this because what if a developer changes a 'use server' directive to a 'use client' directive? They may not notice and send it to production accidentally, causing a data breach. With the concept of taint, you can make sure that never happens.
+
'use client' is the opposite – something that would never make sense to render server-side. Think like a highly interactive component like a text editor or a maps widget or something like that – it's meant to be a client-side experience so you better off just passing all the down to the client immediately and let them do the rendering. Keep in mind that you don't need to use this directive unless you are doing server-side rendering. By default it will still do client-side rendering.
+
Putting stuff in the head
+
Imagine you want your React component to add <link>, <meta>, <title> or other HTML pages in the doc. Right now you either need to use a portal or you need something like react-helmet to do that. With React 19, you just need to render the tag and it will automatically stick it in the header.
+
const MyPizza = (<div >
+ <h1 > I love pizza</h1 >
+ <title > 🍕 Brian Loves Pizza 🍕</title >
+ </div > Now whenever MyPizza gets rendered it will change the title of the doc (which what shows up in browser tab).
+
preload and preconnect
+
Two pretty helpful functions to help give hints to the browser of what it may want to start loading in the background. If you are not familiar with the concepts, head here to read more, but long story short it's for things like images, fonts, scripts, stylesheets, etc. You can let the browser know "hey, we're likely to going to need load these soon, can you either preconnect to this URL to get ready to download it or just go ahead and preload it?" This will allow your user to have more instantaneous experiences since they won't need to wait for these things to load when required. Keep in mind these are hints though and the browser can ignore them. A good of example of this could be that your phone is in low-power mode, it may ignore those hints as it wants to save battery.
+
const EnterConfirmation = (preload ("https://example.com/text-editor.js" , { as : "script" });
+ return (
+ <div >
+ <a href ="/text-editor" > Click here to open the text editor</a >
+ </div > Custom components (aka web components)
+
It's always been possible, in theory, to use web components with React, but it's been a huge pain in the butt, involving refs and other careful planning to make sure you don't accidentally un-render and re-render it. Suffice to say, it was possible but impractical.
+
Now with React 19 it will just handle all of that caretaking of the custom elements for you, just treat it like any other normal tag and React will do all the babysitting for you. It's certainly a big step in making custom elements that work across Angular, React, Svelte, etc. but who knows, we've been talking about custom elements my whole career (seriously, I remember seeing a Polymer talk at the first Fluent conf I went to) and it still isn't here yet.
+
More stuff!
+
Click here to read the official React 19 blog post if you want to read more. Lots of cool stuff coming!!
+
React Compiler – Complete Intro to React React Compiler
+
We didn't talk much at all about performance hacks with React but there are a few. Generally speaking, React is in its "unoptimized" state is fast enough and adding these performance hacks on top make shave a millisecond here or there off, but in general aren't worth doing unless it's a big gain because it makes it harder to code with.
+
Specifically I'm talking about useMemo and useCallback . These two tools allow you to control when React will re-render your app. If you're rendering a massive spreadsheet and it's not changing frequently but its parent is, you can use useMemo to say "hey, this doesn't need to re-render unless this condition is true". This only really helps when it's a big thing like this. I don't even teach this in this course because you use it very infrequently and some newer devs get tempted to use it all the time. It will make it hard later to understand why some things are rendering and some aren't. It makes bugs harder to find.
+
Enter React Compiler (formerly known as React Forget). The React team at Facebook is basically going to do these optimizations for you. It's going to detect "hey, this component shouldn't ever change, I'm going to put useMemo on it for you." I love this as it's free performance with zero thought on behalf of the developer. It's pretty conservative about when it does this, so it should work without a hitch.
+
+If you do ever hit a case where it is memoizing something and you don't want it do, you can stick "use no memo"; at the top of a file and the React Compiler will skip it.
+
+
So let's run the checker on the app.
+
npx react-compiler-healthcheck@beta
+Our app is good to go! You can run this on your codebase too and see if it will work on your code.
+
Let's go ahead and install the plugin.
+
+npm i -D babel-plugin-react-compiler@beta --force
+Now add this to your vite.config.js
+
+react ({
+ babel : {
+ plugins : [
+ [
+ "babel-plugin-react-compiler" ,
+ {
+ target : "19" ,
+ },
+ ],
+ ],
+ },
+}),
+Now let's run your app! If everything is done right, you will notice nothing . It will look no different. But open your React dev tools and look through your components. You should see lots of components have "Memo ✨" next to them. These are the components the React Compiler was able to automatically optimize for you.
+
And that's it! Over time this will get lots better. The React team is saying this is safe to try on your codebase today, so you might try it and see if it works for you. I know they'd love feedback on their GitHub repo.
+
If you want to learn more, I'd strongly suggest Lauren Tan's talk from React Conf 2024 . She was/is the eng manager over React Compiler.
+
+🏁 Click here to see the state of the project up until now: 17-react-compiler
+
+
use and Suspense – Complete Intro to React use and Suspense
+
We've been talking about React Suspense for a long time, and technically still we are not suppose to use it directly. But we React 19 we will get some blessed ways to start using it. (Some libraries already use it.)
+
The idea behind Suspense is that a React component can start rendering and then suspend itself if all its data hasn't loaded yet. This is cool because your code reads really well: it basically looks like you're assuming the data is already there, and React takes care of getting it behind the scene.
+
This is what the idea of the new use hook is from React. You say use(myPromise) and the React component will only render once myPromise has rendered.
+
Luckily TanStack Query already has a few ways of doing this, so we're going to use that. But just know that use works with any promise, not just TanStack Query.
+
First open App.jsx, we have to enable the experimental support for this in TanStack Query (you may not need to this in the future.)
+
+const queryClient = new QueryClient ({
+ defaultOptions : {
+ queries : {
+ experimental_prefetchInRender : true ,
+ },
+ },
+});
+Now in past.lazy.jsx, we need to do some refactoring.
+
import { Suspense , useState, use } from "react" ;
+
+
+function ErrorBoundaryWrappedPastOrderRoutes (const [page, setPage] = useState (1 );
+ const loadedPromise = useQuery ({
+ queryKey : ["past-orders" , page],
+ queryFn : () => getPastOrders (page),
+ staleTime : 30000 ,
+ }).promise ;
+ return (
+ <ErrorBoundary >
+ <Suspense
+ fallback ={
+ <div className ="past-orders" >
+ <h2 > Loading Past Orders …</h2 >
+ </div >
+ }
+ >
+ <PastOrdersRoute
+ loadedPromise ={loadedPromise}
+ page ={page}
+ setPage ={setPage}
+ />
+ </Suspense >
+ </ErrorBoundary > const data = use (loadedPromise);
+
+
+We use Suspense to tell React where to pause rendering until everything in it has resolved. If you have several things that suspend, this won't render until they all complete.
+fallback tells it what to render while it's suspended
+We need to query inside the parent component (and thus keep track of the page too) because the promise needs to exist outside of the component that is getting suspended. Otherwise it'd be freshly called every single your component rendered. Similar to error boundaries.
+We shoved everything in our error boundary wrapping component. This should probably be renamed.
+Again, we're using TanStack Query's support for this, but it could be any promise. TanStack Query just made it easy.
+TanStack Query has several other ways of doing Suspense . We just wanted to try the use hook.
+use has a few other uses. Check it out in the docs.Unlike most hooks, use, can be used in conditionals and for loops. Kinda weird given most of the rules around hooks, but still true.
+
+
+🏁 Click here to see the state of the project up until now: 16-use
+
+
Congrats – Complete Intro to React Congratulations!! You did it!
+
This is a lot of material to take in, so congrats on sticking with it. Hopefully it was fun and maybe made you support your local pizzeria along the way!
+
You are now fully equipped to write React professionally. Everything you learned here is 95%+ of what you would need to write React at any tech company. The last 5% is what I'll teach you in Intermediate React v6 which has more to do with server-side React and advance performance techniques. But for now, this is almost all you need to know!
+
So what should you do from here?
+
+Intermediate React v5 is still very relevant! Take this course and learn more about Tailwind, server-side rendering, more hooks, Redux, and a bunch of there cool things. I'll update this when the new Intermediate React v6 comes out.Follow the rest of the Frontend Masters React Learning Path .
+Build your own app!! I cannot stress how important it is with concepts like this to just build. Take the dumbest idea in your head and make it. Nothing can replace experience!
+An e-commerce website to sell single socks so you can match unmatched socks
+An AI prompt text editor
+A music app that lets you add Spotify, Apple Music, and Tidal songs to it.
+A client to let you read Thread, X, and Bluesky in the same app.
+
+
+Learn Next.js , Remix/React-Router (soon those will be the same thing) or some other way of doing React on the server
+Learn React + Tailwind
+
+
There are lots of way to go with this and they're all fun! I hope you enjoyed the course and I look forward to hopefully getting to teach with you again soon!
+
![\"Order](\"/images/order-page-layout.webp\")
![\"Brian](\"/images/social-share-cover.jpg\")
