P395:[{"_410":83,"_411":87,"_412":413},"app1","app2","diffCode","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(r,a)=>()=>(a||r((a={exports:{}}).exports,a),a.exports),g=(r,a)=>{for(var l in a)s(r,l,{get:a[l],enumerable:!0})},o=(r,a,l,t)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let n of m(a))!y.call(r,n)&&n!==l&&s(r,n,{get:()=>a[n],enumerable:!(t=u(a,n))||t.enumerable});return r};var x=(r,a,l)=>(l=r!=null?h(f(r)):{},o(a||!r||!r.__esModule?s(l,\"default\",{value:r,enumerable:!0}):l,r)),k=r=>o(s({},\"__esModule\",{value:!0}),r);var c=v((_,i)=>{i.exports=_jsx_runtime});var w={};g(w,{default:()=>b,frontmatter:()=>N});var e=x(c()),N=void 0;function p(r){let a={code:\"code\",pre:\"pre\",span:\"span\",...r.components},{Accordion:l,Icon:t,LaunchEditor:n}=a;return l||d(\"Accordion\",!0),t||d(\"Icon\",!0),n||d(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l,{title:\"app/hooks/use-intersection-observer.ts\",variant:\"added\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/hooks/use-intersection-observer.ts\",\"data-start\":\"0\",\"data-add\":\"0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"0\",\"data-add\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useEffect\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useIntersectionObserver\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" <\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"T\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"extends\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Element\"}),\">(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ref\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"RefObject\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"T\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0C)\"},children:\"null\"}),\">,\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"onIntersect\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0C)\"},children:\"void\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"options\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?:\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"IntersectionObserverInit\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useEffect\"}),\"(() \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"observer\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"IntersectionObserver\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"entries\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"entries\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"forEach\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"entry\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"entry\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isIntersecting\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"onIntersect\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\t})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t\t}, \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"options\"}),\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentRef\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ref\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"current\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentRef\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"observer\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"observe\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentRef\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\t}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentRef\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"observer\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"unobserve\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentRef\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t}, [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ref\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"onIntersect\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"options\"}),\"])\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/hooks/use-intersection-observer.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/hooks/use-intersection-observer.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/hooks/use-intersection-observer.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/hooks/use-intersection-observer.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/hooks/use-intersection-observer.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/hooks/use-intersection-observer.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})}),`\n`,(0,e.jsxs)(l,{title:\"app/routes/_landing.products.$productId.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"9\",\"data-remove\":\"12,18\",\"data-add\":\"13,19\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-diff-line-number\":\"9\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Minus\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-diff-line-number\":\"10\",children:[\"} \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"lucide-react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-diff-line-number\":\"11\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useState\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-remove\":!0,\"data-diff-line-number\":\"11\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Link\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Link\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useSearchParams\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-diff-line-number\":\"13\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ProductCard\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/components/product-card.js\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"14\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"15\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getProductById\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-diff-line-number\":\"16\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getRelatedProducts\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-remove\":!0,\"data-diff-line-number\":\"16\",children:[\"} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/domain/products.server.ts\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"} \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/domain/products.server.js\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"18\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"19\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getMetaFromMatches\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-diff-line-number\":\"20\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getMetaTitle\"}),\",\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:9,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:9,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"32\",\"data-remove\":\"35\",\"data-add\":\"36\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-diff-line-number\":\"32\",children:[\"\t]\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-diff-line-number\":\"33\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-diff-line-number\":\"34\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-remove\":!0,\"data-diff-line-number\":\"34\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"loader\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" ({ \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\" }\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"LoaderArgs\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"loader\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" ({ \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"request\"}),\" }\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"LoaderArgs\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-diff-line-number\":\"36\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"productId\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"params\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-diff-line-number\":\"37\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getProductById\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"productId\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-diff-line-number\":\"38\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"relatedProducts\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getRelatedProducts\"}),\"(\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:32,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:33,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"40\",\"data-add\":\"43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,74,75,76,77,78\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-diff-line-number\":\"40\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\"?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"category\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-diff-line-number\":\"41\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\"?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-diff-line-number\":\"42\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"43\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"uniqueSizes\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Array\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"from\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Set\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\"?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"variations\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" []),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"45\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-add\":!0,\"data-diff-line-number\":\"46\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"uniqueColors\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Array\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"from\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"47\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Set\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\"?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"variations\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" []),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"48\",children:[\"\t)\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-add\":!0,\"data-diff-line-number\":\"49\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-add\":!0,\"data-diff-line-number\":\"50\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"url\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"URL\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"request\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"url\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-add\":!0,\"data-diff-line-number\":\"51\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"url\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-add\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Get the selected size and color from the search params\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-add\":!0,\"data-diff-line-number\":\"53\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedSize\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"size\"}),\"'\",\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" \",\"''\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-add\":!0,\"data-diff-line-number\":\"54\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedColor\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"color\"}),\"'\",\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" \",\"''\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-add\":!0,\"data-diff-line-number\":\"55\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Determine available sizes for the currently selected color\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-add\":!0,\"data-diff-line-number\":\"56\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"availableSizes\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedColor\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-add\":!0,\"data-diff-line-number\":\"57\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\"?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"variations\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-add\":!0,\"data-diff-line-number\":\"58\",children:[\"\t\t\t\t.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"filter\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedColor\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-add\":!0,\"data-diff-line-number\":\"59\",children:[\"\t\t\t\t.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" []\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-add\":!0,\"data-diff-line-number\":\"60\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"uniqueSizes\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-add\":!0,\"data-diff-line-number\":\"61\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Determine available colors for the currently selected size\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-add\":!0,\"data-diff-line-number\":\"62\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"availableColors\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedSize\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-add\":!0,\"data-diff-line-number\":\"63\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\"?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"variations\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-add\":!0,\"data-diff-line-number\":\"64\",children:[\"\t\t\t\t.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"filter\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedSize\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-add\":!0,\"data-diff-line-number\":\"65\",children:[\"\t\t\t\t.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" []\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-add\":!0,\"data-diff-line-number\":\"66\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"uniqueColors\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-add\":!0,\"data-diff-line-number\":\"67\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-add\":!0,\"data-diff-line-number\":\"68\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedVariation\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\"?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"variations\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"find\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-add\":!0,\"data-diff-line-number\":\"69\",children:[\"\t\t(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedSize\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedColor\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-add\":!0,\"data-diff-line-number\":\"70\",children:[\"\t)\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"71\",\"data-diff-line-number\":\"71\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"72\",\"data-diff-line-number\":\"72\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"73\",\"data-diff-line-number\":\"73\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"74\",\"data-add\":!0,\"data-diff-line-number\":\"74\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"uniqueSizes\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"75\",\"data-add\":!0,\"data-diff-line-number\":\"75\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"uniqueColors\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"76\",\"data-add\":!0,\"data-diff-line-number\":\"76\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"availableSizes\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"77\",\"data-add\":!0,\"data-diff-line-number\":\"77\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"availableColors\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"78\",\"data-add\":!0,\"data-diff-line-number\":\"78\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedVariation\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"79\",\"data-diff-line-number\":\"79\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"relatedProducts\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"80\",\"data-diff-line-number\":\"80\",children:[\"\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"81\",\"data-diff-line-number\":\"81\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:40,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:41,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"50\",\"data-remove\":\"53,54,55,68\",\"data-add\":\"56,57,58,59,60,61,62,63,64,65,69,70\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-diff-line-number\":\"50\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"ProductDetailPage\"}),\"({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-diff-line-number\":\"51\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-diff-line-number\":\"52\",children:[\"}\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ComponentProps\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"relatedProducts\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedSize\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",\"''\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedColor\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",\"''\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-add\":!0,\"data-diff-line-number\":\"53\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-add\":!0,\"data-diff-line-number\":\"54\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-add\":!0,\"data-diff-line-number\":\"55\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedVariation\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-add\":!0,\"data-diff-line-number\":\"56\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"uniqueColors\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-add\":!0,\"data-diff-line-number\":\"57\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"uniqueSizes\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-add\":!0,\"data-diff-line-number\":\"58\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"availableColors\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-add\":!0,\"data-diff-line-number\":\"59\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"availableSizes\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-add\":!0,\"data-diff-line-number\":\"60\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"relatedProducts\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-add\":!0,\"data-diff-line-number\":\"61\",children:[\"\t} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-add\":!0,\"data-diff-line-number\":\"62\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setSearchParams\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useSearchParams\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-diff-line-number\":\"63\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setQuantity\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-diff-line-number\":\"64\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"activeImage\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setActiveImage\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-remove\":!0,\"data-diff-line-number\":\"64\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-add\":!0,\"data-diff-line-number\":\"65\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedSize\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"size\"}),\"'\",\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" \",\"''\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-add\":!0,\"data-diff-line-number\":\"66\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedColor\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"color\"}),\"'\",\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" \",\"''\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"71\",\"data-diff-line-number\":\"67\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"!\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"72\",\"data-diff-line-number\":\"68\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"73\",\"data-diff-line-number\":\"69\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"flex min-h-screen items-center justify-center bg-stone-50 dark:bg-gray-900\"}),'\"',\">\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:50,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:84,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"83\",\"data-add\":\"86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"83\",\"data-diff-line-number\":\"83\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"alert\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Added to cart!\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"84\",\"data-diff-line-number\":\"84\",children:[\"\t}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"85\",\"data-diff-line-number\":\"85\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"86\",\"data-add\":!0,\"data-diff-line-number\":\"86\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"handleSizeChange\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"87\",\"data-add\":!0,\"data-diff-line-number\":\"87\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setSearchParams\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"prev\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"88\",\"data-add\":!0,\"data-diff-line-number\":\"88\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"URLSearchParams\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"prev\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"89\",\"data-add\":!0,\"data-diff-line-number\":\"89\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedSize\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"90\",\"data-add\":!0,\"data-diff-line-number\":\"90\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"delete\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"size\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"91\",\"data-add\":!0,\"data-diff-line-number\":\"91\",children:[\"\t\t\t} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"else\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"92\",\"data-add\":!0,\"data-diff-line-number\":\"92\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"set\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"size\"}),\"'\",\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"93\",\"data-add\":!0,\"data-diff-line-number\":\"93\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"94\",\"data-add\":!0,\"data-diff-line-number\":\"94\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"color\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"95\",\"data-add\":!0,\"data-diff-line-number\":\"95\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// If the selected color is not available for the new size, remove it\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"96\",\"data-add\":!0,\"data-diff-line-number\":\"96\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"noQuantityForColor\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"97\",\"data-add\":!0,\"data-diff-line-number\":\"97\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"98\",\"data-add\":!0,\"data-diff-line-number\":\"98\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"variations\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"some\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"99\",\"data-add\":!0,\"data-diff-line-number\":\"99\",children:[\"\t\t\t\t\t(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"100\",\"data-add\":!0,\"data-diff-line-number\":\"100\",children:[\"\t\t\t\t)\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"101\",\"data-add\":!0,\"data-diff-line-number\":\"101\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"102\",\"data-add\":!0,\"data-diff-line-number\":\"102\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"noQuantityForColor\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"103\",\"data-add\":!0,\"data-diff-line-number\":\"103\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"delete\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"color\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"104\",\"data-add\":!0,\"data-diff-line-number\":\"104\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"105\",\"data-add\":!0,\"data-diff-line-number\":\"105\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"106\",\"data-add\":!0,\"data-diff-line-number\":\"106\",children:[\"\t\t})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"107\",\"data-add\":!0,\"data-diff-line-number\":\"107\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setQuantity\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"108\",\"data-add\":!0,\"data-diff-line-number\":\"108\",children:[\"\t}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"109\",\"data-add\":!0,\"data-diff-line-number\":\"109\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"110\",\"data-add\":!0,\"data-diff-line-number\":\"110\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"handleColorChange\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"111\",\"data-add\":!0,\"data-diff-line-number\":\"111\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setSearchParams\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"prev\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"112\",\"data-add\":!0,\"data-diff-line-number\":\"112\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"URLSearchParams\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"prev\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"113\",\"data-add\":!0,\"data-diff-line-number\":\"113\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedColor\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"114\",\"data-add\":!0,\"data-diff-line-number\":\"114\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"delete\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"color\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"115\",\"data-add\":!0,\"data-diff-line-number\":\"115\",children:[\"\t\t\t} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"else\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"116\",\"data-add\":!0,\"data-diff-line-number\":\"116\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"set\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"color\"}),\"'\",\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"117\",\"data-add\":!0,\"data-diff-line-number\":\"117\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"118\",\"data-add\":!0,\"data-diff-line-number\":\"118\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"size\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"119\",\"data-add\":!0,\"data-diff-line-number\":\"119\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// If the selected size is not available for the new color, remove it\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"120\",\"data-add\":!0,\"data-diff-line-number\":\"120\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"noQuantityForSize\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"121\",\"data-add\":!0,\"data-diff-line-number\":\"121\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"122\",\"data-add\":!0,\"data-diff-line-number\":\"122\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"variations\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"some\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"123\",\"data-add\":!0,\"data-diff-line-number\":\"123\",children:[\"\t\t\t\t\t(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"v\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"124\",\"data-add\":!0,\"data-diff-line-number\":\"124\",children:[\"\t\t\t\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"125\",\"data-add\":!0,\"data-diff-line-number\":\"125\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"noQuantityForSize\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"126\",\"data-add\":!0,\"data-diff-line-number\":\"126\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"delete\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"size\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"127\",\"data-add\":!0,\"data-diff-line-number\":\"127\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"128\",\"data-add\":!0,\"data-diff-line-number\":\"128\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"newParams\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"129\",\"data-add\":!0,\"data-diff-line-number\":\"129\",children:[\"\t\t})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"130\",\"data-add\":!0,\"data-diff-line-number\":\"130\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setQuantity\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"131\",\"data-add\":!0,\"data-diff-line-number\":\"131\",children:[\"\t}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"132\",\"data-add\":!0,\"data-diff-line-number\":\"132\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"133\",\"data-diff-line-number\":\"133\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Mock additional images for gallery\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"134\",\"data-diff-line-number\":\"134\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"productImages\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" [\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"135\",\"data-diff-line-number\":\"135\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"imageUrl\"}),\",\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:83,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:125,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"179\",\"data-remove\":\"182,186,187\",\"data-add\":\"183,188,189,190,191\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"179\",\"data-diff-line-number\":\"179\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Size\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"180\",\"data-diff-line-number\":\"180\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"181\",\"data-diff-line-number\":\"181\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"grid grid-cols-6 gap-3\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"182\",\"data-remove\":!0,\"data-diff-line-number\":\"181\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* {product.sizes.map((size) => (\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"183\",\"data-add\":!0,\"data-diff-line-number\":\"182\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t{uniqueSizes.map((size) => (\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"184\",\"data-diff-line-number\":\"183\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t setSelectedSize(size)}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"187\",\"data-remove\":!0,\"data-diff-line-number\":\"184\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\tclassName={`rounded-lg border px-4 py-3 text-center transition-colors duration-200 ${\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"188\",\"data-add\":!0,\"data-diff-line-number\":\"185\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\tdisabled={!availableSizes.includes(size)}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"189\",\"data-add\":!0,\"data-diff-line-number\":\"186\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\ttitle={!availableSizes.includes(size) ? 'Out of stock' : ''}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"190\",\"data-add\":!0,\"data-diff-line-number\":\"187\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\tonClick={handleSizeChange(size)}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"191\",\"data-add\":!0,\"data-diff-line-number\":\"188\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\tclassName={`rounded-lg border px-4 py-3 text-center transition-colors duration-200 disabled:opacity-20 ${\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"192\",\"data-diff-line-number\":\"189\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\t\tselectedSize === size\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"193\",\"data-diff-line-number\":\"190\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\t\t\t? 'border-amber-500 bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"194\",\"data-diff-line-number\":\"191\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\t\t\t: 'border-gray-300 text-gray-700 hover:border-amber-300 dark:border-gray-600 dark:text-gray-300 dark:hover:border-amber-700'\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:179,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:268,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"191\",\"data-remove\":\"194\",\"data-add\":\"195\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"191\",\"data-diff-line-number\":\"191\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"192\",\"data-diff-line-number\":\"192\",children:[\"\t\t\t\t\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"size\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"193\",\"data-diff-line-number\":\"193\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"194\",\"data-remove\":!0,\"data-diff-line-number\":\"193\",children:[\"\t\t\t\t\t\t\t\t))} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"*/\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"195\",\"data-add\":!0,\"data-diff-line-number\":\"194\",children:[\"\t\t\t\t\t\t\t\t))}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"196\",\"data-diff-line-number\":\"195\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"197\",\"data-diff-line-number\":\"196\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:191,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:282,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"200\",\"data-remove\":\"203,204,209,210\",\"data-add\":\"205,206,211,212,213,214,215,216\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"200\",\"data-diff-line-number\":\"200\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h3\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mb-4 text-lg font-medium text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"201\",\"data-diff-line-number\":\"201\",children:[\"\t\t\t\t\t\t\t\tColor\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"202\",\"data-diff-line-number\":\"202\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"203\",\"data-remove\":!0,\"data-diff-line-number\":\"202\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"flex space-x-3\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"204\",\"data-remove\":!0,\"data-diff-line-number\":\"202\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* {product.colors.map((color) => (\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"205\",\"data-add\":!0,\"data-diff-line-number\":\"203\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'\t\t\t\t\t\t\t

'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"206\",\"data-add\":!0,\"data-diff-line-number\":\"204\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t{uniqueColors.map((color) => (\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"207\",\"data-diff-line-number\":\"205\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t setSelectedColor(color)}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"210\",\"data-remove\":!0,\"data-diff-line-number\":\"206\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\tclassName={`rounded-lg border px-4 py-2 transition-colors duration-200 ${\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"211\",\"data-add\":!0,\"data-diff-line-number\":\"207\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\tdisabled={!availableColors.includes(color)}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"212\",\"data-add\":!0,\"data-diff-line-number\":\"208\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\ttitle={\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"213\",\"data-add\":!0,\"data-diff-line-number\":\"209\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\t\t!availableColors.includes(color) ? 'Out of stock' : ''\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"214\",\"data-add\":!0,\"data-diff-line-number\":\"210\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\t}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"215\",\"data-add\":!0,\"data-diff-line-number\":\"211\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\tonClick={handleColorChange(color)}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"216\",\"data-add\":!0,\"data-diff-line-number\":\"212\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\tclassName={`rounded-lg border px-4 py-2 transition-colors duration-200 disabled:opacity-20 ${\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"217\",\"data-diff-line-number\":\"213\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\t\tselectedColor === color\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"218\",\"data-diff-line-number\":\"214\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\t\t\t? 'border-amber-500 bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"219\",\"data-diff-line-number\":\"215\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t\t\t\t\t\t\t\t: 'border-gray-300 text-gray-700 hover:border-amber-300 dark:border-gray-600 dark:text-gray-300 dark:hover:border-amber-700'\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:200,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:291,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"213\",\"data-remove\":\"216\",\"data-add\":\"217,222\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"213\",\"data-diff-line-number\":\"213\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"214\",\"data-diff-line-number\":\"214\",children:[\"\t\t\t\t\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"color\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"215\",\"data-diff-line-number\":\"215\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"216\",\"data-remove\":!0,\"data-diff-line-number\":\"215\",children:[\"\t\t\t\t\t\t\t\t))} \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"*/\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"217\",\"data-add\":!0,\"data-diff-line-number\":\"216\",children:[\"\t\t\t\t\t\t\t\t))}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"218\",\"data-diff-line-number\":\"217\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"219\",\"data-diff-line-number\":\"218\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"220\",\"data-diff-line-number\":\"219\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"221\",\"data-diff-line-number\":\"220\",children:[\"\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* Quantity */\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"222\",\"data-add\":!0,\"data-diff-line-number\":\"221\",children:[\"\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedVariation\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"223\",\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"224\",\"data-diff-line-number\":\"223\",children:[\"\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h3\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mb-4 text-lg font-medium text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"225\",\"data-diff-line-number\":\"224\",children:[\"\t\t\t\t\t\t\t\t\tQuantity\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:213,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:308,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"226\",\"data-remove\":\"229\",\"data-add\":\"230,231\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"226\",\"data-diff-line-number\":\"226\",children:[\"\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"flex items-center rounded-lg border border-gray-300 dark:border-gray-600\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"227\",\"data-diff-line-number\":\"227\",children:[\"\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"button\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"228\",\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"() \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setQuantity\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Math\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"max\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"-\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\"))\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"229\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"p-2 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"230\",\"data-add\":!0,\"data-diff-line-number\":\"229\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"disabled\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"231\",\"data-add\":!0,\"data-diff-line-number\":\"230\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"p-2 transition-colors duration-200 hover:bg-gray-100 disabled:opacity-20 disabled:hover:bg-transparent dark:hover:bg-gray-700\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"232\",\"data-diff-line-number\":\"231\",children:[\"\t\t\t\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"233\",\"data-diff-line-number\":\"232\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Minus\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"h-4 w-4\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"234\",\"data-diff-line-number\":\"233\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:226,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:322,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products.$productId.tsx\",\"data-start\":\"235\",\"data-remove\":\"238\",\"data-add\":\"239,240,247,253,254,255\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"235\",\"data-diff-line-number\":\"235\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"236\",\"data-diff-line-number\":\"236\",children:[\"\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"button\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"237\",\"data-diff-line-number\":\"237\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"() \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setQuantity\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\")\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"238\",\"data-remove\":!0,\"data-diff-line-number\":\"237\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"p-2 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"239\",\"data-add\":!0,\"data-diff-line-number\":\"238\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"disabled\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedVariation\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"240\",\"data-add\":!0,\"data-diff-line-number\":\"239\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"p-2 transition-colors duration-200 hover:bg-gray-100 disabled:opacity-20 disabled:hover:bg-transparent dark:hover:bg-gray-700\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"241\",\"data-diff-line-number\":\"240\",children:[\"\t\t\t\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"242\",\"data-diff-line-number\":\"241\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Plus\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"h-4 w-4\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"243\",\"data-diff-line-number\":\"242\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"244\",\"data-diff-line-number\":\"243\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"245\",\"data-diff-line-number\":\"244\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"246\",\"data-diff-line-number\":\"245\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"247\",\"data-add\":!0,\"data-diff-line-number\":\"246\",children:[\"\t\t\t\t\t\t) : \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"248\",\"data-diff-line-number\":\"247\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"249\",\"data-diff-line-number\":\"248\",children:[\"\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* Add to Cart */\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"250\",\"data-diff-line-number\":\"249\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"flex space-x-4\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"251\",\"data-diff-line-number\":\"250\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"button\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"252\",\"data-diff-line-number\":\"251\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"handleAddToCart\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"253\",\"data-add\":!0,\"data-diff-line-number\":\"252\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"disabled\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"254\",\"data-add\":!0,\"data-diff-line-number\":\"253\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"!\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedVariation\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedVariation\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"quantity\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"255\",\"data-add\":!0,\"data-diff-line-number\":\"254\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"256\",\"data-diff-line-number\":\"255\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"flex-1 rounded-lg bg-amber-600 px-6 py-4 font-medium text-white transition-colors duration-300 hover:bg-amber-700 hover:shadow-lg\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"257\",\"data-diff-line-number\":\"256\",children:[\"\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"258\",\"data-diff-line-number\":\"257\",children:[\"\t\t\t\t\t\t\t\tAdd to Cart\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",line:235,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products.$productId.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",line:332,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products.$productId.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})]}),`\n`,(0,e.jsxs)(l,{title:\"app/routes/_landing.products._index/route.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"1\",\"data-remove\":\"2\",\"data-add\":\"3\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Filter\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Grid\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"List\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"lucide-react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useState\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useState\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useRef\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useSearchParams\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useNavigation\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ProductCard\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/components/product-card.js\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getAllBrands\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/domain/brand.server.js\"}),\"'\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"8\",\"data-add\":\"11\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-diff-line-number\":\"8\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"extractProductFiltersFromSearchParams\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-diff-line-number\":\"9\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getProducts\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-diff-line-number\":\"10\",children:[\"} \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/domain/products.server.js\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useIntersectionObserver\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/hooks/use-intersection-observer.js\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-diff-line-number\":\"12\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-diff-line-number\":\"13\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getMetaFromMatches\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-diff-line-number\":\"14\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getMetaTitle\"}),\",\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",line:8,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:8,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"15\",\"data-add\":\"18\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"15\",children:[\"} \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/utils/metadata.js\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"16\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Route\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./+types/route\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-diff-line-number\":\"17\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ProductFilters\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./product-filters\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useInfiniteProductFetcher\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./use-infinite-product-fetcher\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"19\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"20\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"meta\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"MetaFunction\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" ({ \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"matches\"}),\" }) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"21\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"rootMeta\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getMetaFromMatches\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"matches\"}),\", \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"root\"}),\"'\",\")\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",line:15,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:16,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"49\",\"data-remove\":\"60\",\"data-add\":\"52,53,54,56,61,62,63,64\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-diff-line-number\":\"49\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"ProductsPage\"}),\"({ \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),\" }\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ComponentProps\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-diff-line-number\":\"50\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setSearchParams\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useSearchParams\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-diff-line-number\":\"51\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"navigation\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useNavigation\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-add\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} use the useInfiniteProductFetcher returned properties to fetch infinite data\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-add\":!0,\"data-diff-line-number\":\"53\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loadMoreProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"allProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-add\":!0,\"data-diff-line-number\":\"54\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useInfiniteProductFetcher\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-diff-line-number\":\"55\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isPageLoading\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"navigation\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"!==\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"idle\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-add\":!0,\"data-diff-line-number\":\"56\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4A3} We won't be needing this when we finish pagination\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-diff-line-number\":\"57\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-diff-line-number\":\"58\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"viewMode\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setViewMode\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"<\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"grid\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"list\"}),\"'\",\">(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"grid\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-diff-line-number\":\"59\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"showFilters\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setShowFilters\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-remove\":!0,\"data-diff-line-number\":\"59\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-add\":!0,\"data-diff-line-number\":\"60\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"observerRef\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useRef\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"HTMLDivElement\"}),\">(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-add\":!0,\"data-diff-line-number\":\"61\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} use the useIntersectionObserver to call a load of more products when end of screen is reached\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-add\":!0,\"data-diff-line-number\":\"62\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} pass in loadMoreProducts instead of the arrow function\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-add\":!0,\"data-diff-line-number\":\"63\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useIntersectionObserver\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"observerRef\"}),\", () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-diff-line-number\":\"64\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-diff-line-number\":\"65\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"min-h-screen bg-stone-50 dark:bg-gray-900\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-diff-line-number\":\"66\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* Header */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",line:49,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:51,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"66\",\"data-add\":\"69\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-diff-line-number\":\"66\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-diff-line-number\":\"67\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mt-2 text-gray-600 dark:text-gray-300\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-diff-line-number\":\"68\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"totalCount\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" products total (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-add\":!0,\"data-diff-line-number\":\"69\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F428} use the allProducts variable instead of products to show the number of allProducts */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-diff-line-number\":\"70\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\".length\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" shown)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"71\",\"data-diff-line-number\":\"71\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"72\",\"data-diff-line-number\":\"72\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",line:66,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:75,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]}),(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/route.tsx\",\"data-start\":\"144\",\"data-remove\":\"147,148,149,150,151,159\",\"data-add\":\"152,153,154,155,156,160,161,162,163,164,165,166,167,168,173,174,175,176,177,178,179,180,181,182,183,184,185,188,189,190,191,192,193,194,195,196\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"144\",\"data-diff-line-number\":\"144\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"145\",\"data-diff-line-number\":\"145\",children:[\"\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* Products Grid/List */\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"146\",\"data-diff-line-number\":\"146\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"flex-1\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"147\",\"data-remove\":!0,\"data-diff-line-number\":\"146\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"viewMode\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"grid\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"148\",\"data-remove\":!0,\"data-diff-line-number\":\"146\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"149\",\"data-remove\":!0,\"data-diff-line-number\":\"146\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"150\",\"data-remove\":!0,\"data-diff-line-number\":\"146\",children:[\"\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ProductCard\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"key\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"product\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"151\",\"data-remove\":!0,\"data-diff-line-number\":\"146\",children:[\"\t\t\t\t\t\t\t\t))\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"152\",\"data-add\":!0,\"data-diff-line-number\":\"147\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F428} we should show a loading UI when needed */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"153\",\"data-add\":!0,\"data-diff-line-number\":\"148\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F4B0} use isPageLoading */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"154\",\"data-add\":!0,\"data-diff-line-number\":\"149\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"155\",\"data-add\":!0,\"data-diff-line-number\":\"150\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mb-4 text-center text-gray-500 dark:text-gray-400\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"156\",\"data-add\":!0,\"data-diff-line-number\":\"151\",children:[\"\t\t\t\t\t\t\t\tLoading...\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"157\",\"data-diff-line-number\":\"152\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"158\",\"data-diff-line-number\":\"153\",children:[\"\t\t\t\t\t\t) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"159\",\"data-remove\":!0,\"data-diff-line-number\":\"153\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"space-y-6\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"160\",\"data-add\":!0,\"data-diff-line-number\":\"154\",children:[\"\t\t\t\t\t\t\t<>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"161\",\"data-add\":!0,\"data-diff-line-number\":\"155\",children:[\"\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"162\",\"data-add\":!0,\"data-diff-line-number\":\"156\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"163\",\"data-add\":!0,\"data-diff-line-number\":\"157\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"viewMode\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"grid\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"164\",\"data-add\":!0,\"data-diff-line-number\":\"158\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"165\",\"data-add\":!0,\"data-diff-line-number\":\"159\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"space-y-6\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"166\",\"data-add\":!0,\"data-diff-line-number\":\"160\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"167\",\"data-add\":!0,\"data-diff-line-number\":\"161\",children:[\"\t\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"168\",\"data-add\":!0,\"data-diff-line-number\":\"162\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F428} we should use allProducts instead of products to show all fetched products */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"169\",\"data-diff-line-number\":\"163\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"170\",\"data-diff-line-number\":\"164\",children:[\"\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ProductCard\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"key\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"product\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"171\",\"data-diff-line-number\":\"165\",children:[\"\t\t\t\t\t\t\t\t\t))\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"172\",\"data-diff-line-number\":\"166\",children:[\"\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"173\",\"data-add\":!0,\"data-diff-line-number\":\"167\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"174\",\"data-add\":!0,\"data-diff-line-number\":\"168\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* Intersection observer target */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"175\",\"data-add\":!0,\"data-diff-line-number\":\"169\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"176\",\"data-add\":!0,\"data-diff-line-number\":\"170\",children:[\"\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"ref\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"observerRef\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mt-8 flex justify-center\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"177\",\"data-add\":!0,\"data-diff-line-number\":\"171\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"178\",\"data-add\":!0,\"data-diff-line-number\":\"172\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-center text-gray-500 dark:text-gray-400\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"179\",\"data-add\":!0,\"data-diff-line-number\":\"173\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"inline-block h-6 w-6 animate-spin rounded-full border-2 border-amber-600 border-t-transparent\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"180\",\"data-add\":!0,\"data-diff-line-number\":\"174\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mt-2\"}),'\"',\">Loading more products...\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"181\",\"data-add\":!0,\"data-diff-line-number\":\"175\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"182\",\"data-add\":!0,\"data-diff-line-number\":\"176\",children:[\"\t\t\t\t\t\t\t\t\t\t) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"183\",\"data-add\":!0,\"data-diff-line-number\":\"177\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"h-4 w-full\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"184\",\"data-add\":!0,\"data-diff-line-number\":\"178\",children:[\"\t\t\t\t\t\t\t\t\t\t)\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"185\",\"data-add\":!0,\"data-diff-line-number\":\"179\",children:[\"\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"186\",\"data-diff-line-number\":\"180\",children:[\"\t\t\t\t\t\t\t\t)\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"187\",\"data-diff-line-number\":\"181\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"188\",\"data-add\":!0,\"data-diff-line-number\":\"182\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* End of results message */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"189\",\"data-add\":!0,\"data-diff-line-number\":\"183\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"!\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"allProducts\"}),\".length \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"190\",\"data-add\":!0,\"data-diff-line-number\":\"184\",children:[\"\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mt-8 text-center text-gray-500 dark:text-gray-400\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"191\",\"data-add\":!0,\"data-diff-line-number\":\"185\",children:[\"\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">You've reached the end of the product list!\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"192\",\"data-add\":!0,\"data-diff-line-number\":\"186\",children:[\"\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"193\",\"data-add\":!0,\"data-diff-line-number\":\"187\",children:[\"\t\t\t\t\t\t\t\t)\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"194\",\"data-add\":!0,\"data-diff-line-number\":\"188\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"195\",\"data-add\":!0,\"data-diff-line-number\":\"189\",children:[\"\t\t\t\t\t\t)}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"196\",\"data-add\":!0,\"data-diff-line-number\":\"190\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/** \\u{1F428} we should use allProducts instead of products to show no products found */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"197\",\"data-diff-line-number\":\"191\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\".length \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"198\",\"data-diff-line-number\":\"192\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"py-16 text-center\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"199\",\"data-diff-line-number\":\"193\",children:[\"\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"mb-4 text-gray-400 dark:text-gray-600\"}),'\"',\">\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",line:144,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/route.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",line:154,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/route.tsx\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})]}),`\n`,(0,e.jsx)(l,{title:\"app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",variant:\"added\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",\"data-start\":\"0\",\"data-add\":\"0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"0\",\"data-add\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useState\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useEffect\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useCallback\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useFetcher\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useSearchParams\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"href\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} use this to type the route\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Route\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./+types/route\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useInfiniteProductFetcher\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} we want to type the loader data to be the type of the returned loader data of the products listing page\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Route.ComponentProps['loaderData']\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0C)\"},children:\"any\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we are fetching from the same loader, so we can type this fetcher with the same type as loader-data\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useFetcher\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0C)\"},children:\"any\"}),\">({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's define a fetcher key for this fetch\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} key should be infinite-product-fetcher\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we are extracting the initial data we fetched and then we will load more from the server\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loaderData\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"allProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setAllProducts\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentPage\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setCurrentPage\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setHasMore\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setIsLoadingMore\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useSearchParams\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useEffect\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} whenever we change the filters we should start from the beginning again\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"resetStateOnLoaderRefire\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} whenever we reset the URL and the loader returns new products, we want to reset the state to the initial values\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setAllProducts(products)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setCurrentPage(pagination.page)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"28\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setHasMore(pagination.hasMore)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:[\"\t\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\t[\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"pagination\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[\"\t)\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useEffect\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} whenever we load the new products we want to append them to the existing array\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setNewlyLoadedProducts\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we want to make sure that the fetcher has returned some data and it's defined, and it is idle and we were loading more products\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we append the newly loaded products to the existing array\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setAllProducts((prev) => [...prev, ...(fetcher.data.? ??[])])\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we update the current page\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"41\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setCurrentPage(fetcher.data.?)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"42\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we update the hasMore flag\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"43\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setHasMore(fetcher.data.?)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we set isLoadingMore to false\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setIsLoadingMore(false)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-add\":!0,\"data-diff-line-number\":\"46\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"47\",children:[\"\t\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"48\",children:[\"\t\t[\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"data\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\"],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-add\":!0,\"data-diff-line-number\":\"49\",children:[\"\t)\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-add\":!0,\"data-diff-line-number\":\"50\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-add\":!0,\"data-diff-line-number\":\"51\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loadMoreProducts\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useCallback\"}),\"(() \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-add\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} we want to create the new search params so we can submit that to the loader so it gives us the next page of results\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-add\":!0,\"data-diff-line-number\":\"53\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we set the flag to true\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-add\":!0,\"data-diff-line-number\":\"54\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// setIsLoadingMore(true)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-add\":!0,\"data-diff-line-number\":\"55\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} we use the current page to create the next page\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-add\":!0,\"data-diff-line-number\":\"56\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// const nextPage = currentPage + 1\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-add\":!0,\"data-diff-line-number\":\"57\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Create URL params for the fetch\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-add\":!0,\"data-diff-line-number\":\"58\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// const params = new URLSearchParams(searchParams)\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-add\":!0,\"data-diff-line-number\":\"59\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// params.set('page', nextPage.toString())\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-add\":!0,\"data-diff-line-number\":\"60\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} finally we want to load the next page using the fetcher\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-add\":!0,\"data-diff-line-number\":\"61\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} use the `load` function and call the /products page in a type-safe manner (href function) and append the search params\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-add\":!0,\"data-diff-line-number\":\"62\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// \\u{1F4B0} + \"?\" + params.toString()'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-add\":!0,\"data-diff-line-number\":\"63\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} don't forget to remove this ignore hook, it's going to be invalid once you implement this!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-add\":!0,\"data-diff-line-number\":\"64\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// eslint-disable-next-line react-hooks/exhaustive-deps\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-add\":!0,\"data-diff-line-number\":\"65\",children:[\"\t}, [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"currentPage\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\"])\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-add\":!0,\"data-diff-line-number\":\"66\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-add\":!0,\"data-diff-line-number\":\"67\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"fetcher\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"loadMoreProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"allProducts\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hasMore\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isLoadingMore\"}),\" }\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-add\":!0,\"data-diff-line-number\":\"68\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/03.solution.filtering-and-pagination/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(n,{file:\"/myapp/workshop-content/exercises/03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/04.problem.infinite-fetching-with-fetchers/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})})]})}function b(r={}){let{wrapper:a}=r.components||{};return a?(0,e.jsx)(a,{...r,children:(0,e.jsx)(p,{...r})}):p(r)}function d(r,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(w);})();\n;return Component;"]