P427:[{"_442":63,"_443":67,"_444":445},"app1","app2","diffCode","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(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})},d=(r,a,l,n)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let t of u(a))!f.call(r,t)&&t!==l&&s(r,t,{get:()=>a[t],enumerable:!(n=m(a,t))||n.enumerable});return r};var x=(r,a,l)=>(l=r!=null?h(v(r)):{},d(a||!r||!r.__esModule?s(l,\"default\",{value:r,enumerable:!0}):l,r)),k=r=>d(s({},\"__esModule\",{value:!0}),r);var i=y((_,c)=>{c.exports=_jsx_runtime});var w={};g(w,{default:()=>b,frontmatter:()=>N});var e=x(i()),N=void 0;function p(r){let a={code:\"code\",pre:\"pre\",span:\"span\",...r.components},{Accordion:l,Icon:n,LaunchEditor:t}=a;return l||o(\"Accordion\",!0),n||o(\"Icon\",!0),t||o(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l,{title:\"app/routes/_landing._index/categories-section.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing._index/categories-section.tsx\",\"data-start\":\"1\",\"data-remove\":\"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\",\"data-add\":\"30,31,32,33,34\",\"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:\"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\":\"2\",\"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(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Category\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/domain/category.server.ts\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-diff-line-number\":\"3\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4A3} We don't need these categories anymore! Let's remove them!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"categories\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" [\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t{\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\tname: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Running\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\timageUrl:\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=400\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t{\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\tname: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Casual\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\timageUrl:\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=400\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t{\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\tname: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Athletic\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\timageUrl:\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&w=400\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t{\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\tname: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Formal\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\timageUrl:\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"https://images.pexels.com/photos/1598507/pexels-photo-1598507.jpeg?auto=compress&cs=tinysrgb&w=400\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"]\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Use the categories provided to the component instead of the hardcoded ones\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",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:\"CategoriesSection\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" ({}\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"categories\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Category\"}),\"[] }) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"4\",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:\"CategoriesSection\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" ({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"categories\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"}\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"categories\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Category\"}),\"[]\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"}) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-diff-line-number\":\"9\",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\":\"36\",\"data-diff-line-number\":\"10\",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:\"bg-stone-50 py-32 dark:bg-gray-800\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-diff-line-number\":\"11\",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:\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\"}),'\"',\">\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/categories-section.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/categories-section.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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/categories-section.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/categories-section.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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/categories-section.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/categories-section.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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/categories-section.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/categories-section.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._index/featured-products.section.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing._index/featured-products.section.tsx\",\"data-start\":\"1\",\"data-remove\":\"1,4,5,8,9,15,16,17,18,19\",\"data-add\":\"2,20,21,22\",\"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-remove\":!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:\"ArrowRight\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Star\"}),\" } \",(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-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:\"ArrowRight\"}),\" } \",(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\":\"3\",\"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:\"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\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} You should use the ProductCard component to render each product instead of the JSX\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// that is currently in place\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"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:\"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\":\"7\",\"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(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ProductCardInfo\"}),\" } \",(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.js\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4A3} We Want to remove this file completely and use dynamic info from the DB\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"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:\"products\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"as\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"hardcodedProducts\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"../../../data/products\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"interface\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"FeaturedProductsSectionProps\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-diff-line-number\":\"7\",children:[\"\t\",(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(--base0A)\"},children:\"ProductCardInfo\"}),\"[]\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-diff-line-number\":\"8\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-diff-line-number\":\"9\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"9\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Access the dynamic products here and use them instead of the hardcoded ones\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-remove\":!0,\"data-diff-line-number\":\"9\",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:\"FeaturedProductsSection\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" ({}\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"FeaturedProductsSectionProps\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-remove\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} You get 4 products from the server at this point!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-remove\":!0,\"data-diff-line-number\":\"9\",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:\"hardcodedProducts\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"slice\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"4\"}),\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-remove\":!0,\"data-diff-line-number\":\"9\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"10\",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:\"FeaturedProductsSection\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" ({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"}\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"FeaturedProductsSectionProps\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-diff-line-number\":\"13\",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\":\"24\",\"data-diff-line-number\":\"14\",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:\"bg-white py-32 dark:bg-gray-900\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-diff-line-number\":\"15\",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:\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\"}),'\"',\">\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/featured-products.section.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/featured-products.section.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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/featured-products.section.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/featured-products.section.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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/featured-products.section.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/featured-products.section.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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/featured-products.section.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/featured-products.section.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._index/featured-products.section.tsx\",\"data-start\":\"31\",\"data-remove\":\"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,69,70\",\"data-add\":\"71\",\"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\":\"31\",\"data-diff-line-number\":\"31\",children:[\"\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-4\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-diff-line-number\":\"32\",children:[\"\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\":\"33\",\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Replace this with the ProductCard component that \\u{1F9DD}\\u200D\\u2640\\uFE0F prepared!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Link\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\",(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:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"to\"}),(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(--base0B)\"},children:\"/products/\"}),\"${\",(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:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\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:\"group overflow-hidden rounded-lg bg-stone-50 transition-all duration-300 hover:scale-105 hover:transform hover:shadow-xl dark:bg-gray-800\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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:\"relative overflow-hidden\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"img\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"src\"}),(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:\"imageUrl\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"alt\"}),(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:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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(--base0B)\"},children:\"h-64 w-full object-cover transition-transform duration-500 group-hover:scale-110\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t/>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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:\"absolute top-4 right-4 rounded-full bg-white px-3 py-1 dark:bg-gray-900\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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 space-x-1\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Star\"}),\" \",(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 fill-current text-amber-500\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-sm font-medium text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"reviewScore\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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:\"p-6\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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-2 text-sm font-medium text-amber-600 dark:text-amber-500\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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-2 text-lg font-medium text-gray-900 transition-colors duration-300 group-hover:text-amber-600 dark:text-white dark:group-hover:text-amber-500\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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:\"flex items-center justify-between\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-xl font-bold text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"price\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-sm text-gray-500 dark:text-gray-400\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"reviews\"}),\".length\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" reviews\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"71\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\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\":\"72\",\"data-diff-line-number\":\"35\",children:[\"\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\":\"73\",\"data-diff-line-number\":\"36\",children:[\"\t\t\t\t\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/featured-products.section.tsx\",line:31,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/featured-products.section.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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/featured-products.section.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/featured-products.section.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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/featured-products.section.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/featured-products.section.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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/featured-products.section.tsx\",line:25,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/featured-products.section.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._index/route.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"app/routes/_landing._index/route.tsx\",\"data-start\":\"15\",\"data-remove\":\"18,19,20,21,27,28,29,30,31,38,44,45,46,47\",\"data-add\":\"22,23,24,25,32,39,48,49\",\"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:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"16\",children:`\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:\"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(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-remove\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} You should fetch the data directly from the DB here!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-remove\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Bonus points: Optimize the retrieval of products and categories by fetching them in parallel\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-remove\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} You can use the function \\u{1F9DD}\\u200D\\u2640\\uFE0F prepared for us above called `getProducts`\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-remove\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} take 3 products only via `perPage`\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"18\",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(--base08)\"},children:\"categories\"}),\" }] \",(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(--base0A)\"},children:\"Promise\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"all\"}),\"([\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getProducts\"}),\"({ perPage: \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"3\"}),\" }),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getAllCategories\"}),\"({ perPage: \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"4\"}),\" }),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\t])\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-diff-line-number\":\"22\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} You can use the function \\u{1F9DD}\\u200D\\u2640\\uFE0F prepared for us above called `getAllCategories`\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} take 4 categories only\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} These return just empty arrays, these should return actual data from the DB\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" { products: [], categories: [] }\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"categories\"}),\" }\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-diff-line-number\":\"24\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-diff-line-number\":\"25\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-diff-line-number\":\"26\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's access the data we have sent from the server and use it in the components\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-diff-line-number\":\"27\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} You can access the data directly from the loader as a prop of the component\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-diff-line-number\":\"28\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Try using `loaderData` to access the data\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-remove\":!0,\"data-diff-line-number\":\"28\",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:\"HomePage\"}),\"({}\",(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\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"29\",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:\"HomePage\"}),\"({ \",(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\":\"40\",\"data-diff-line-number\":\"30\",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\":\"41\",\"data-diff-line-number\":\"31\",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:\"bg-stone-50 dark:bg-gray-900\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-diff-line-number\":\"32\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"HeroSection\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-diff-line-number\":\"33\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"FeaturesSection\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\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} Let's pass in the actual categories here! */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"CategoriesSection\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"categories\"}),(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(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\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} Let's pass in the actual products here! */\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"FeaturedProductsSection\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"products\"}),(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(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"CategoriesSection\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"categories\"}),(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:\"loaderData\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"categories\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"FeaturedProductsSection\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"products\"}),(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:\"loaderData\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-diff-line-number\":\"36\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"NewsletterSection\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-diff-line-number\":\"37\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-diff-line-number\":\"38\",children:[\"\t)\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/route.tsx\",line:15,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing._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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._index/route.tsx\",line:15,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing._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.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,13,14\",\"data-add\":\"15\",\"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:\"useParams\"}),\", \",(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-remove\":!0,\"data-diff-line-number\":\"11\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} You should use the ProductCard component to render each product instead of the JSX\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"11\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// that is currently in place\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"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(--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\":\"16\",\"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\":\"17\",\"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\":\"18\",\"data-diff-line-number\":\"15\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getProductById\"}),\",\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:9,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:9,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"22\",\"data-remove\":\"25,26\",\"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\":\"22\",\"data-diff-line-number\":\"22\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getMetaTitle\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-diff-line-number\":\"23\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"constructPrefixedTitle\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-diff-line-number\":\"24\",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\":\"25\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4A3} We will remove this completely by the end\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"../../data/products\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-diff-line-number\":\"25\",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/_landing.products.$productId\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-diff-line-number\":\"26\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-diff-line-number\":\"27\",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)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:22,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:20,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"36\",\"data-remove\":\"39,40,42,43,44,45,46,55,57,58,64,68,74,75\",\"data-add\":\"47,48,49,50,51,52,53,59,60,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\":\"36\",\"data-diff-line-number\":\"36\",children:[\"\t]\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-diff-line-number\":\"37\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-diff-line-number\":\"38\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-remove\":!0,\"data-diff-line-number\":\"38\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} You should fetch the product by its ID in the loader, then fetch related products!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-remove\":!0,\"data-diff-line-number\":\"38\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's actually use the current route params to fetch the product and related products\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-diff-line-number\":\"39\",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\":\"42\",\"data-remove\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} You can use the function \\u{1F9DD}\\u200D\\u2640\\uFE0F prepared for us above called `getProductById`\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-remove\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Don't forget that you have access to the current routes params from above!\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-remove\":!0,\"data-diff-line-number\":\"39\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-remove\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} You can use the function \\u{1F9DD}\\u200D\\u2640\\uFE0F prepared for us above called `getRelatedProducts`\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-remove\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Don't forget, you have the product's category and brand from fetching it above\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"40\",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\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"41\",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\":\"49\",\"data-add\":!0,\"data-diff-line-number\":\"42\",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)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-add\":!0,\"data-diff-line-number\":\"43\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\"?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-add\":!0,\"data-diff-line-number\":\"44\",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\":\"52\",\"data-add\":!0,\"data-diff-line-number\":\"45\",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\":\"53\",\"data-add\":!0,\"data-diff-line-number\":\"46\",children:[\"\t)\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-diff-line-number\":\"47\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-remove\":!0,\"data-diff-line-number\":\"47\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} These return just empty objects/arrays, these should return actual data from the DB\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-diff-line-number\":\"48\",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\":\"57\",\"data-remove\":!0,\"data-diff-line-number\":\"48\",children:[\"\t\tproduct: {},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-remove\":!0,\"data-diff-line-number\":\"48\",children:[\"\t\trelatedProducts: [],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-add\":!0,\"data-diff-line-number\":\"49\",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\":\"60\",\"data-add\":!0,\"data-diff-line-number\":\"50\",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\":\"61\",\"data-diff-line-number\":\"51\",children:[\"\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-diff-line-number\":\"52\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-diff-line-number\":\"53\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-remove\":!0,\"data-diff-line-number\":\"53\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's use the loaderData and swap our hardcoded values with real ones!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-diff-line-number\":\"54\",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\":\"66\",\"data-diff-line-number\":\"55\",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\":\"67\",\"data-diff-line-number\":\"56\",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\":\"68\",\"data-remove\":!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:\"productId\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useParams\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-add\":!0,\"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:\"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\":\"70\",\"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:\"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\":\"71\",\"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:\"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\":\"72\",\"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:\"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\":\"73\",\"data-diff-line-number\":\"61\",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.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"74\",\"data-remove\":!0,\"data-diff-line-number\":\"61\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's replace this with the actual product data from the loader\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"75\",\"data-remove\":!0,\"data-diff-line-number\":\"61\",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(--base08)\"},children:\"products\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"find\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"productId\"}),\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"76\",\"data-diff-line-number\":\"62\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"77\",\"data-diff-line-number\":\"63\",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\":\"78\",\"data-diff-line-number\":\"64\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:36,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:32,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"98\",\"data-remove\":\"101,102,103,104,105,106,107,108\",\"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\":\"98\",\"data-diff-line-number\":\"98\",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)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"99\",\"data-diff-line-number\":\"99\",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)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"100\",\"data-diff-line-number\":\"100\",children:[\"\t]\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"101\",\"data-remove\":!0,\"data-diff-line-number\":\"100\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's access the loaderData and swap this out with actual data!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"102\",\"data-remove\":!0,\"data-diff-line-number\":\"100\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} We are using the hardcoded products data to simulate related products\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"103\",\"data-remove\":!0,\"data-diff-line-number\":\"100\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4A3} Feel free to completely delete this and use the loaderData\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"104\",\"data-remove\":!0,\"data-diff-line-number\":\"100\",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(--base08)\"},children:\"products\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"105\",\"data-remove\":!0,\"data-diff-line-number\":\"100\",children:[\"\t\t.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"filter\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"106\",\"data-remove\":!0,\"data-diff-line-number\":\"100\",children:[\"\t\t\t(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"category\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\" \",(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:\"category\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\" \",(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:\"id\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"107\",\"data-remove\":!0,\"data-diff-line-number\":\"100\",children:[\"\t\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"108\",\"data-remove\":!0,\"data-diff-line-number\":\"100\",children:[\"\t\t.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"slice\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"4\"}),\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"109\",\"data-diff-line-number\":\"101\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"110\",\"data-diff-line-number\":\"102\",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\":\"111\",\"data-diff-line-number\":\"103\",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)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:98,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:90,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"306\",\"data-remove\":\"309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346\",\"data-add\":\"347\",\"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\":\"306\",\"data-diff-line-number\":\"306\",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\":\"307\",\"data-diff-line-number\":\"307\",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:\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"308\",\"data-diff-line-number\":\"308\",children:[\"\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:\"relatedProducts\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"relatedProduct\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"309\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's replace with the ProductCard component\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"310\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Link\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"311\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\",(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:\"relatedProduct\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"312\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"to\"}),(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(--base0B)\"},children:\"/products/\"}),\"${\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"relatedProduct\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\"}`\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"313\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",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(--base0B)\"},children:\"group overflow-hidden rounded-lg bg-white transition-all duration-300 hover:scale-105 hover:transform hover:shadow-xl dark:bg-gray-800\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"314\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"315\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",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:\"relative overflow-hidden\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"316\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"img\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"317\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"src\"}),(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:\"relatedProduct\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"imageUrl\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"318\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"alt\"}),(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:\"relatedProduct\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"319\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",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:\"h-64 w-full object-cover transition-transform duration-500 group-hover:scale-110\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"320\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t/>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"321\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\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:\"absolute top-4 right-4 rounded-full bg-white px-3 py-1 dark:bg-gray-900\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"322\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",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:\"flex items-center space-x-1\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"323\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Star\"}),\" \",(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 fill-current text-amber-500\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"324\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-sm font-medium text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"325\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\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:\"relatedProduct\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"reviewScore\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"326\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"327\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"328\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"329\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"330\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",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:\"p-6\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"331\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\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:\"mb-2 text-sm font-medium text-amber-600 dark:text-amber-500\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"332\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\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:\"relatedProduct\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"333\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"334\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\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-2 text-lg font-medium text-gray-900 transition-colors duration-300 group-hover:text-amber-600 dark:text-white dark:group-hover:text-amber-500\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"335\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\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:\"relatedProduct\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"336\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"337\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\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:\"flex items-center justify-between\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"338\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-xl font-bold text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"339\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\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:\"relatedProduct\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"price\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"340\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"341\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-sm text-gray-500 dark:text-gray-400\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"342\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\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:\"relatedProduct\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"reviews\"}),\".length\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" reviews\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"343\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"344\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"345\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"346\",\"data-remove\":!0,\"data-diff-line-number\":\"308\",children:[\"\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"347\",\"data-add\":!0,\"data-diff-line-number\":\"309\",children:[\"\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:\"relatedProduct\"}),\".\",(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:\"relatedProduct\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"348\",\"data-diff-line-number\":\"310\",children:[\"\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\":\"349\",\"data-diff-line-number\":\"311\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"350\",\"data-diff-line-number\":\"312\",children:[\"\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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:306,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products.$productId.tsx\",line:290,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"1,2,3,4,5\",\"data-add\":\"6,7\",\"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-remove\":!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:\"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(--base08)\"},children:\"Star\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Heart\"}),\" } \",(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\":\"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:\"useMemo\"}),\" } \",(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-remove\":!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:\"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\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} You should use the ProductCard component to render each product instead of the JSX\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// that is currently in place\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"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:\"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\":\"7\",\"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(--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\":\"8\",\"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:\"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\":\"9\",\"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:\"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.ts\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"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:\"getAllCategories\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#app/domain/category.server.ts\"}),\"'\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"13\",\"data-remove\":\"16,17\",\"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\":\"13\",\"data-diff-line-number\":\"13\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"getMetaTitle\"}),\",\",`\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:\"constructPrefixedTitle\"}),\",\",`\n`]}),(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-remove\":!0,\"data-diff-line-number\":\"15\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4A3} we want to completely remove this after we're done\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-remove\":!0,\"data-diff-line-number\":\"15\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"categories\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brands\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"../../../data/products\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"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.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"17\",children:`\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:\"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)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:13,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:9,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"27\",\"data-remove\":\"30,32,33,34,35,42,44,45,46\",\"data-add\":\"36,37,38,39,40,47,48,49,54\",\"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\":\"27\",\"data-diff-line-number\":\"27\",children:[\"\t]\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-diff-line-number\":\"28\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-diff-line-number\":\"29\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-remove\":!0,\"data-diff-line-number\":\"29\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} You should fetch the data directly from the DB here, we need products, brands and categories!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-diff-line-number\":\"30\",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(--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\":\"32\",\"data-remove\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} You can use the functions \\u{1F9DD}\\u200D\\u2640\\uFE0F prepared for us above called `getProducts`,\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-remove\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} `getAllCategories`, and `getAllBrands` to fetch the data.\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-remove\":!0,\"data-diff-line-number\":\"30\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-remove\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Bonus points if you fetch them in parallel!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"31\",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(--base08)\"},children:\"categories\"}),\" }, { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brands\"}),\" }] \",(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(--base0A)\"},children:\"Promise\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"all\"}),\"([\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getProducts\"}),\"(),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getAllCategories\"}),\"(),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getAllBrands\"}),\"(),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t])\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-diff-line-number\":\"36\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-remove\":!0,\"data-diff-line-number\":\"36\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Return them here and replace the empty arrays!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-diff-line-number\":\"37\",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\":\"44\",\"data-remove\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\tproducts: [],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-remove\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\tcategories: [],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-remove\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\tbrands: [],\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"categories\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brands\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-diff-line-number\":\"41\",children:[\"\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-diff-line-number\":\"42\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-diff-line-number\":\"43\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-diff-line-number\":\"44\",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\":\"54\",\"data-add\":!0,\"data-diff-line-number\":\"45\",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(--base08)\"},children:\"categories\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brands\"}),\" } \",(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\":\"55\",\"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:\"selectedCategory\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setSelectedCategory\"}),\"] \",(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:\"All\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-diff-line-number\":\"47\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedBrand\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setBrand\"}),\"] \",(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:\"All\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-diff-line-number\":\"48\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"priceRange\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setPriceRange\"}),\"] \",(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\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"300\"}),\"])\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:27,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:21,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"50\",\"data-remove\":\"53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84\",\"data-add\":\"85\",\"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:[\"\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\":\"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:\"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\":\"52\",\"data-diff-line-number\":\"52\",children:`\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(--base03)\"},children:\"// \\u{1F428} Let's replace these with the actual products for now, we will do filtering later!\"}),`\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(--base03)\"},children:\"// \\u{1F4A3} You can completely remove this useMemo and hardcode it to be the products for now\"}),`\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(--base03)\"},children:\"// \\u{1F4B0} You can just do loaderData.products, this will be completely removed later!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"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:\"filteredProducts\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useMemo\"}),\"(() \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"let\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"filtered\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"filter\"}),\"((\",(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\":\"58\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",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:\"categoryMatch\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedCategory\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"All\"}),\"'\",\" \",(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:\"category\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedCategory\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",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:\"brandMatch\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedBrand\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"All\"}),\"'\",\" \",(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:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedBrand\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",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:\"priceMatch\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"price\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"priceRange\"}),\"[\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\"] \",(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:\"price\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"<=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"priceRange\"}),\"[\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\"]\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",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:\"categoryMatch\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brandMatch\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"priceMatch\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t})\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Sort products\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"filtered\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"sort\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"a\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"b\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"switch\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"sortBy\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"71\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"case\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"price-low\"}),\"'\",\":\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"72\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"a\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"price\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"-\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"b\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"price\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"73\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"case\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"price-high\"}),\"'\",\":\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"74\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"b\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"price\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"-\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"a\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"price\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"75\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"case\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"rating\"}),\"'\",\":\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"76\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"b\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"reviewScore\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"-\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"a\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"reviewScore\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"77\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"case\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"name\"}),\"'\",\":\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"78\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\":\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"79\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"a\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"localeCompare\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"b\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"80\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\t}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"81\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t})\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"82\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"83\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"filtered\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"84\",\"data-remove\":!0,\"data-diff-line-number\":\"52\",children:[\"\t}, [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedCategory\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedBrand\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"priceRange\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"sortBy\"}),\"])\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"85\",\"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:\"filteredProducts\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"products\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"86\",\"data-diff-line-number\":\"54\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"87\",\"data-diff-line-number\":\"55\",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\":\"88\",\"data-diff-line-number\":\"56\",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)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:50,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:44,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"147\",\"data-remove\":\"150,151,153,154,155,159,160,166\",\"data-add\":\"156,157,161,167\",\"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\":\"147\",\"data-diff-line-number\":\"147\",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\":\"148\",\"data-diff-line-number\":\"148\",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:\"space-y-2\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"149\",\"data-diff-line-number\":\"149\",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:\"categories\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"category\"}),\") \",(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\":\"149\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's replace these with the actual category from the backend\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"151\",\"data-remove\":!0,\"data-diff-line-number\":\"149\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} You can just use category.id and category.name here!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"152\",\"data-diff-line-number\":\"150\",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\":\"153\",\"data-remove\":!0,\"data-diff-line-number\":\"150\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(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:\"category\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"154\",\"data-remove\":!0,\"data-diff-line-number\":\"150\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Use category.name\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"155\",\"data-remove\":!0,\"data-diff-line-number\":\"150\",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:\"setSelectedCategory\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"category\"}),\")\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\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\t\t\t\t\",(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:\"category\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"157\",\"data-add\":!0,\"data-diff-line-number\":\"152\",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:\"setSelectedCategory\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"category\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\")\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\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\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:\"{\"}),\"`\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 \"}),\"${\",`\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\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Match with category.name\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"160\",\"data-remove\":!0,\"data-diff-line-number\":\"153\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\t\t\t\t\t\t\t\t\t\t\t\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedCategory\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"category\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"161\",\"data-add\":!0,\"data-diff-line-number\":\"154\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\t\t\t\t\t\t\t\t\t\t\t\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedCategory\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"category\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"162\",\"data-diff-line-number\":\"155\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\t\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:\" \"}),\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"163\",\"data-diff-line-number\":\"156\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\t\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:\" \"}),\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"164\",\"data-diff-line-number\":\"157\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\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\":\"165\",\"data-diff-line-number\":\"158\",children:[\"\t\t\t\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"166\",\"data-remove\":!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(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"category\"}),(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\":\"159\",children:[\"\t\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:\"category\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"168\",\"data-diff-line-number\":\"160\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"169\",\"data-diff-line-number\":\"161\",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\":\"170\",\"data-diff-line-number\":\"162\",children:[\"\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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:147,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:110,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"172\",\"data-remove\":\"175,176,178,179,180,184,185,191\",\"data-add\":\"181,182,186,192\",\"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\":\"172\",\"data-diff-line-number\":\"172\",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\":\"173\",\"data-diff-line-number\":\"173\",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:\"space-y-2\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"174\",\"data-diff-line-number\":\"174\",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:\"brands\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brand\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"175\",\"data-remove\":!0,\"data-diff-line-number\":\"174\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's replace these with the actual new brands from the backend\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"176\",\"data-remove\":!0,\"data-diff-line-number\":\"174\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} You can just use brand.id and brand.name here!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"177\",\"data-diff-line-number\":\"175\",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\":\"178\",\"data-remove\":!0,\"data-diff-line-number\":\"175\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(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:\"brand\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"179\",\"data-remove\":!0,\"data-diff-line-number\":\"175\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Use brand.name\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"180\",\"data-remove\":!0,\"data-diff-line-number\":\"175\",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:\"setBrand\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brand\"}),\")\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"181\",\"data-add\":!0,\"data-diff-line-number\":\"176\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(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:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"id\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"182\",\"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(--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:\"setBrand\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\")\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"183\",\"data-diff-line-number\":\"178\",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(--base0F)\"},children:\"{\"}),\"`\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"block w-full rounded-lg px-3 py-2 text-left transition-colors duration-200 \"}),\"${\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"184\",\"data-remove\":!0,\"data-diff-line-number\":\"178\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} Use brand.name\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"185\",\"data-remove\":!0,\"data-diff-line-number\":\"178\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\t\t\t\t\t\t\t\t\t\t\t\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedBrand\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brand\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"186\",\"data-add\":!0,\"data-diff-line-number\":\"179\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\t\t\t\t\t\t\t\t\t\t\t\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selectedBrand\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"187\",\"data-diff-line-number\":\"180\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\t\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:\" \"}),\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"188\",\"data-diff-line-number\":\"181\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\t\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:\" \"}),\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"189\",\"data-diff-line-number\":\"182\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\t\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\":\"190\",\"data-diff-line-number\":\"183\",children:[\"\t\t\t\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"191\",\"data-remove\":!0,\"data-diff-line-number\":\"183\",children:[\"\t\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:\"brand\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"192\",\"data-add\":!0,\"data-diff-line-number\":\"184\",children:[\"\t\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:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"193\",\"data-diff-line-number\":\"185\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"194\",\"data-diff-line-number\":\"186\",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\":\"195\",\"data-diff-line-number\":\"187\",children:[\"\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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:172,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:131,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\":\"220\",\"data-remove\":\"223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328\",\"data-add\":\"270,329\",\"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\":\"220\",\"data-diff-line-number\":\"220\",children:[\"\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\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"221\",\"data-diff-line-number\":\"221\",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\":\"222\",\"data-diff-line-number\":\"222\",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:\"filteredProducts\"}),\".\",(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\":\"223\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's replace these with the ProductCard again!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"224\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\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\":\"225\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(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:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"226\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",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:\"group overflow-hidden rounded-lg bg-white transition-all duration-300 hover:scale-105 hover:transform hover:shadow-xl dark:bg-gray-800\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"227\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"228\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\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:\"relative overflow-hidden\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"229\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Link\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"to\"}),(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(--base0B)\"},children:\"/products/\"}),\"${\",(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:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"230\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"img\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"231\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"src\"}),(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:\"imageUrl\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"232\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"alt\"}),(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:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"233\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\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:\"h-64 w-full object-cover transition-transform duration-500 group-hover:scale-110\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"234\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t/>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"235\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"236\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(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:\"absolute top-4 right-4 rounded-full bg-white p-2 shadow-lg transition-colors duration-200 hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"237\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Heart\"}),\" \",(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 text-gray-600 dark:text-gray-400\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"238\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"239\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",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:\"absolute top-4 left-4 rounded-full bg-white px-3 py-1 dark:bg-gray-900\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"240\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",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:\"flex items-center space-x-1\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"241\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Star\"}),\" \",(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 fill-current text-amber-500\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"242\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-sm font-medium text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"243\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"reviewScore\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"244\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"245\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"246\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"247\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"248\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\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:\"p-6\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"249\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",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:\"mb-2 text-sm font-medium text-amber-600 dark:text-amber-500\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"250\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"251\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"252\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Link\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"to\"}),(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(--base0B)\"},children:\"/products/\"}),\"${\",(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:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"253\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\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-2 text-lg font-medium text-gray-900 transition-colors duration-300 group-hover:text-amber-600 dark:text-white dark:group-hover:text-amber-500\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"254\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"255\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"256\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"257\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\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:\"mb-4 line-clamp-2 text-sm text-gray-600 dark:text-gray-300\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"258\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"description\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"259\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"260\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",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:\"flex items-center justify-between\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"261\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-xl font-bold text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"262\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"price\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"263\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"264\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-sm text-gray-500 dark:text-gray-400\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"265\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"reviews\"}),\".length\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" reviews\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"266\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"267\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"268\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"269\",\"data-remove\":!0,\"data-diff-line-number\":\"222\",children:[\"\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"270\",\"data-add\":!0,\"data-diff-line-number\":\"223\",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\":\"271\",\"data-diff-line-number\":\"224\",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\":\"272\",\"data-diff-line-number\":\"225\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"273\",\"data-diff-line-number\":\"226\",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\":\"274\",\"data-diff-line-number\":\"227\",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\":\"275\",\"data-diff-line-number\":\"228\",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:\"filteredProducts\"}),\".\",(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\":\"276\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Let's replace these with the ProductCard again!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"277\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\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\":\"278\",\"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:\"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:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"279\",\"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:\"overflow-hidden rounded-lg bg-white transition-shadow duration-300 hover:shadow-lg dark:bg-gray-800\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"280\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"281\",\"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(--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 flex-col md:flex-row\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"282\",\"data-remove\":!0,\"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(--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:\"relative overflow-hidden md:w-64\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"283\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Link\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"to\"}),(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(--base0B)\"},children:\"/products/\"}),\"${\",(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:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"284\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"img\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"285\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"src\"}),(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:\"imageUrl\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"286\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"alt\"}),(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:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"287\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\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:\"h-48 w-full object-cover transition-transform duration-300 hover:scale-105 md:h-full\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"288\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t/>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"289\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"290\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"291\",\"data-remove\":!0,\"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(--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 p-6\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"292\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",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:\"flex items-start justify-between\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"293\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\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:\"flex-1\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"294\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\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:\"mb-2 text-sm font-medium text-amber-600 dark:text-amber-500\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"295\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"brand\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"296\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"297\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Link\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"to\"}),(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(--base0B)\"},children:\"/products/\"}),\"${\",(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:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"298\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\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-2 text-xl font-medium text-gray-900 transition-colors duration-300 hover:text-amber-600 dark:text-white dark:hover:text-amber-500\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"299\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"300\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"301\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"302\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\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:\"mb-4 text-gray-600 dark:text-gray-300\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"303\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"description\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"304\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"305\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\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:\"mb-4 flex items-center space-x-4\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"306\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\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:\"flex items-center space-x-1\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"307\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Star\"}),\" \",(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 fill-current text-amber-500\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"308\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-sm font-medium text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"309\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"reviewScore\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"310\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"311\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\" \",(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-sm text-gray-500 dark:text-gray-400\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"312\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"reviews\"}),\".length\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" reviews)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"313\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"314\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"315\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"316\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"317\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\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:\"ml-6 text-right\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"318\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\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:\"mb-4 text-2xl font-bold text-gray-900 dark:text-white\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"319\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\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:\"product\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"price\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"320\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"321\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(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:\"rounded-full bg-gray-100 p-2 transition-colors duration-200 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"322\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Heart\"}),\" \",(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-5 w-5 text-gray-600 dark:text-gray-400\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"323\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"324\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"325\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"326\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"327\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"328\",\"data-remove\":!0,\"data-diff-line-number\":\"228\",children:[\"\t\t\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"329\",\"data-add\":!0,\"data-diff-line-number\":\"229\",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\":\"330\",\"data-diff-line-number\":\"230\",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\":\"331\",\"data-diff-line-number\":\"231\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"332\",\"data-diff-line-number\":\"232\",children:[\"\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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:220,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.problem.fetching-with-loaders/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)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/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)(n,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.problem.fetching-with-loaders/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)(n,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/03.data-fetching/01.solution.fetching-with-loaders/app/routes/_landing.products._index/route.tsx\",line:175,children:(0,e.jsx)(\"span\",{title:\"03.data-fetching/01.solution.fetching-with-loaders/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\"})})]})]})]})]})}function b(r={}){let{wrapper:a}=r.components||{};return a?(0,e.jsx)(a,{...r,children:(0,e.jsx)(p,{...r})}):p(r)}function o(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;"]