P266:[{"_278":31,"_279":35,"_280":281},"app1","app2","diffCode","var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(l,a)=>()=>(a||l((a={exports:{}}).exports,a),a.exports),x=(l,a)=>{for(var s in a)o(l,s,{get:a[s],enumerable:!0})},c=(l,a,s,n)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let r of h(a))!y.call(l,r)&&r!==s&&o(l,r,{get:()=>a[r],enumerable:!(n=u(a,r))||n.enumerable});return l};var g=(l,a,s)=>(s=l!=null?m(v(l)):{},c(a||!l||!l.__esModule?o(s,\"default\",{value:l,enumerable:!0}):s,l)),k=l=>c(o({},\"__esModule\",{value:!0}),l);var d=f((A,i)=>{i.exports=_jsx_runtime});var E={};x(E,{default:()=>b,frontmatter:()=>N});var e=g(d()),N=void 0;function p(l){let a={code:\"code\",pre:\"pre\",span:\"span\",...l.components},{Accordion:s,Icon:n,LaunchEditor:r}=a;return s||t(\"Accordion\",!0),n||t(\"Icon\",!0),r||t(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(s,{title:\"package.json\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"package.json\",\"data-start\":\"1\",\"data-remove\":\"2\",\"data-add\":\"3\",\"data-line-numbers\":\"true\",\"data-lang\":\"json\",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:[\"{\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"1\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"exercises_99.upgrade-v7_01.problem.v7\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"exercises_99.upgrade-v7_01.solution.v7\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"3\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"private\"}),'\"',\": \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"version\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"0.0.0\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"5\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"type\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"module\"}),'\"',\",\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/package.json\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/package.json\",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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/package.json\"},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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/package.json\"},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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/package.json\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/package.json\",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\":\"package.json\",\"data-start\":\"20\",\"data-remove\":\"23,24\",\"data-add\":\"25\",\"data-line-numbers\":\"true\",\"data-lang\":\"json\",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\":\"20\",\"data-diff-line-number\":\"20\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"match-sorter\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^8.0.0\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"21\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^19.0.0\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-diff-line-number\":\"22\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-dom\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^19.0.0\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-error-boundary\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^3.1.4\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^7.0.0\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^7.0.0\"}),'\"',\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-diff-line-number\":\"24\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"tailwindcss\"}),'\"',\": \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"^4.0.9\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-diff-line-number\":\"25\",children:[\" },\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-diff-line-number\":\"26\",children:[\" \",'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"devDependencies\"}),'\"',\": {\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/package.json\",line:20,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/package.json\",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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/package.json\"},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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/package.json\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/package.json\"},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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/package.json\",line:20,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/package.json\",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)(s,{title:\"src/components/button.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/components/button.tsx\",\"data-start\":\"1\",\"data-remove\":\"3\",\"data-add\":\"4\",\"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:\"cva\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"VariantProps\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"class-variance-authority\"}),\"'\",`\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:\"ButtonHTMLAttributes\"}),\" } \",(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\":\"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:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"LinkProps\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Link\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"LinkProps\"}),\" } \",(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.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"buttonStyles\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"cva\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-diff-line-number\":\"6\",children:[\"\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"flex items-center justify-center rounded-full font-medium no-underline transition-colors hover:no-underline focus:no-underline\"}),\"'\",\",\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/components/button.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/components/button.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/components/button.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/components/button.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/components/button.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/components/button.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/components/button.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/components/button.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)(s,{title:\"src/error-boundary.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/error-boundary.tsx\",\"data-start\":\"1\",\"data-remove\":\"1,7,8,9,10,11,13,14\",\"data-add\":\"2,3,4,5\",\"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:\"ErrorBoundary\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-error-boundary\"}),\"'\",`\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:\"useRouteError\"}),\" } \",(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.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!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(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"UnknownErrorBoundary\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useRouteError\"}),\"()\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"UnknownErrorBoundary\"}),\"({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"}\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"}) {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-diff-line-number\":\"6\",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\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ErrorBoundary\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"fallbackRender\"}),(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:\"error\"}),\" }) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"7\",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-danger-background text-danger-foreground mt-20 flex h-full flex-col items-center justify-center px-8 py-12\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"8\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\" \",(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-2xl font-bold\"}),'\"',\">Unknown error\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-diff-line-number\":\"9\",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:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-danger-foreground/80 text-sm\"}),'\"',\">\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/error-boundary.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/error-boundary.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/error-boundary.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/error-boundary.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/error-boundary.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/error-boundary.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/error-boundary.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/error-boundary.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\":\"src/error-boundary.tsx\",\"data-start\":\"17\",\"data-remove\":\"20,21,22,23\",\"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\":\"17\",\"data-diff-line-number\":\"17\",children:[\"\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"instanceof\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Error\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"message\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Unknown error\"}),\"'\",\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-diff-line-number\":\"18\",children:[\"\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\":\"19\",\"data-diff-line-number\":\"19\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-remove\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\t\t)}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-remove\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-remove\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-diff-line-number\":\"20\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-diff-line-number\":\"21\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/error-boundary.tsx\",line:17,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/error-boundary.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/error-boundary.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/error-boundary.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/error-boundary.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/error-boundary.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/error-boundary.tsx\",line:13,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/error-boundary.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)(s,{title:\"src/main.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/main.tsx\",\"data-start\":\"1\",\"data-remove\":\"2,5,9,10,11\",\"data-add\":\"3,12\",\"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:\"createRoot\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-dom/client\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"RouterProvider\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"RouterProvider\"}),\" } \",(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-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./styles/index.css\"}),\"'\",`\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(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"UnknownErrorBoundary\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./error-boundary.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"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:\"router\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./routes.tsx\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"createRoot\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getElementById\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\\u{1F9ED}\"}),\"'\",\")\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"!\"}),\").\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"render\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[\"\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"UnknownErrorBoundary\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"RouterProvider\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"router\"}),(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:\"router\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[\"\t,\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"RouterProvider\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"router\"}),(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:\"router\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />,\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-diff-line-number\":\"8\",children:[\")\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/main.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/main.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/main.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/main.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/main.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/main.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/main.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/main.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)(s,{title:\"src/routes/app/layout.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/routes/app/layout.tsx\",\"data-start\":\"1\",\"data-remove\":\"1\",\"data-add\":\"2\",\"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:\"Link\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Outlet\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),\"'\",`\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:\"Link\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Outlet\"}),\" } \",(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\":\"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:\"ButtonLink\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/button.tsx\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"3\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"AppLayout\"}),\"() {\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/layout.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/layout.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/layout.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)(s,{title:\"src/routes/app/marketing/about.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/routes/app/marketing/about.tsx\",\"data-start\":\"1\",\"data-remove\":\"1\",\"data-add\":\"2\",\"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:\"Link\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),\"'\",`\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:\"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\":\"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:\"Icon\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/icon.tsx\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"3\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"AboutRoute\"}),\"() {\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/marketing/about.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/marketing/about.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/marketing/about.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/marketing/about.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/marketing/about.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/marketing/about.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/marketing/about.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/marketing/about.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)(s,{title:\"src/routes/app/marketing/layout.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/routes/app/marketing/layout.tsx\",\"data-start\":\"1\",\"data-remove\":\"1\",\"data-add\":\"2\",\"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:\"Link\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Outlet\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),\"'\",`\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:\"Outlet\"}),\", \",(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.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"MarketingLayout\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:[\"\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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/marketing/layout.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/marketing/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/marketing/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/marketing/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/marketing/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/marketing/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/marketing/layout.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/marketing/layout.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)(s,{title:\"src/routes/app/recipients/$id.edit.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/routes/app/recipients/$id.edit.tsx\",\"data-start\":\"1\",\"data-remove\":\"1\",\"data-add\":\"2\",\"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:\"useParams\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),\"'\",`\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:\"useParams\"}),\" } \",(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\":\"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:\"ButtonLink\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/button.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Icon\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/icon.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"recipients\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/data.ts\"}),\"'\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.edit.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.edit.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.edit.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.edit.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.edit.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.edit.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\":\"src/routes/app/recipients/$id.edit.tsx\",\"data-start\":\"14\",\"data-remove\":\"17\",\"data-add\":\"18,19\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"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:\"w-full overflow-y-auto p-4\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"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:\"relative\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"16\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ButtonLink\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-remove\":!0,\"data-diff-line-number\":\"16\",children:[\"\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:\"/recipients/\"}),\"${\",(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\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\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(--base0B)\"},children:\"..\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"relative\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"path\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"19\",children:[\"\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"icon\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"20\",children:[\"\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"variant\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"borderless\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-diff-line-number\":\"21\",children:[\"\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:\"absolute top-0 right-0\"}),'\"',`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.edit.tsx\",line:14,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.edit.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.edit.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.edit.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.edit.tsx\",line:14,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.edit.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)(s,{title:\"src/routes/app/recipients/$id.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/routes/app/recipients/$id.tsx\",\"data-start\":\"1\",\"data-remove\":\"2,3\",\"data-add\":\"4\",\"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:\"matchSorter\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"match-sorter\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ErrorBoundary\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-error-boundary\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useParams\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useSearchParams\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"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:\"useParams\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useRouteError\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useSearchParams\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"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:\"Button\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ButtonLink\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/button.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"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:\"Icon\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/icon.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"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:\"recipients\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/data.ts\"}),\"'\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.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\":\"src/routes/app/recipients/$id.tsx\",\"data-start\":\"208\",\"data-remove\":\"211,212,213,214,215,220,221\",\"data-add\":\"216,217,218\",\"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\":\"208\",\"data-diff-line-number\":\"208\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"209\",\"data-diff-line-number\":\"209\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"210\",\"data-diff-line-number\":\"210\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"211\",\"data-remove\":!0,\"data-diff-line-number\":\"210\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"RecipientErrorBoundary\"}),\"({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"212\",\"data-remove\":!0,\"data-diff-line-number\":\"210\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"213\",\"data-remove\":!0,\"data-diff-line-number\":\"210\",children:[\"}\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"214\",\"data-remove\":!0,\"data-diff-line-number\":\"210\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"215\",\"data-remove\":!0,\"data-diff-line-number\":\"210\",children:[\"}) {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"216\",\"data-add\":!0,\"data-diff-line-number\":\"211\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"RecipientErrorBoundary\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"217\",\"data-add\":!0,\"data-diff-line-number\":\"212\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useRouteError\"}),\"()\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"218\",\"data-add\":!0,\"data-diff-line-number\":\"213\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"219\",\"data-diff-line-number\":\"214\",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\":\"220\",\"data-remove\":!0,\"data-diff-line-number\":\"214\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ErrorBoundary\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"221\",\"data-remove\":!0,\"data-diff-line-number\":\"214\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"fallbackRender\"}),(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:\"error\"}),\" }) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"222\",\"data-diff-line-number\":\"215\",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:\"container mx-auto mt-4 flex flex-col gap-8 px-8\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"223\",\"data-diff-line-number\":\"216\",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:\"bg-danger-background rounded-sm p-4\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"224\",\"data-diff-line-number\":\"217\",children:[\"\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:\"text-danger-foreground\"}),'\"',\">\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.tsx\",line:208,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.tsx\",line:207,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.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\":\"src/routes/app/recipients/$id.tsx\",\"data-start\":\"223\",\"data-remove\":\"226,227,228,229\",\"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\":\"223\",\"data-diff-line-number\":\"223\",children:[\"\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\":\"224\",\"data-diff-line-number\":\"224\",children:[\"\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\":\"225\",\"data-diff-line-number\":\"225\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"226\",\"data-remove\":!0,\"data-diff-line-number\":\"225\",children:[\"\t\t\t)}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"227\",\"data-remove\":!0,\"data-diff-line-number\":\"225\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\">\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"228\",\"data-remove\":!0,\"data-diff-line-number\":\"225\",children:[\"\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\"}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"229\",\"data-remove\":!0,\"data-diff-line-number\":\"225\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"230\",\"data-diff-line-number\":\"226\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"231\",\"data-diff-line-number\":\"227\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.tsx\",line:223,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/$id.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.tsx\",line:218,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/recipients/$id.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)(s,{title:\"src/routes/app/recipients/layout.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/routes/app/recipients/layout.tsx\",\"data-start\":\"1\",\"data-remove\":\"2\",\"data-add\":\"3\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"clsx\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"clsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Link\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"NavLink\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Outlet\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Link\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"NavLink\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Outlet\"}),\" } \",(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-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:\"ButtonLink\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/button.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Icon\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/icon.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"recipients\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/data.ts\"}),\"'\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.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\":\"src/routes/app/recipients/layout.tsx\",\"data-start\":\"10\",\"data-remove\":\"13,20,21,22,23,27\",\"data-add\":\"14,24,28\",\"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\":\"10\",\"data-diff-line-number\":\"10\",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:\"mb-8 flex items-center justify-between\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-diff-line-number\":\"11\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\" \",(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-4xl font-bold\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-diff-line-number\":\"12\",children:[\"\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\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"12\",children:[\"\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(--base0B)\"},children:\"/recipients\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\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(--base0B)\"},children:\".\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"14\",children:[\"\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:\"text-foreground hover:no-underline focus:no-underline\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"15\",children:[\"\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-diff-line-number\":\"16\",children:[\"\t\t\t\t\t\tRecipients\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-diff-line-number\":\"17\",children:[\"\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"18\",children:[\"\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-remove\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ButtonLink\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-remove\":!0,\"data-diff-line-number\":\"18\",children:[\"\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(--base0B)\"},children:\"/recipients/new\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-remove\":!0,\"data-diff-line-number\":\"18\",children:[\"\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:\"hidden items-center gap-2 md:flex\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ButtonLink\"}),\" \",(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(--base0B)\"},children:\"new\"}),'\"',\" \",(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:\"hidden items-center gap-2 md:flex\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-diff-line-number\":\"20\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Icon\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Plus\"}),'\"',\">Add New Recipient\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-diff-line-number\":\"21\",children:[\"\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"21\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ButtonLink\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"icon\"}),\" \",(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(--base0B)\"},children:\"/recipients/new\"}),'\"',\" \",(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:\"md:hidden\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ButtonLink\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"icon\"}),\" \",(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(--base0B)\"},children:\"new\"}),'\"',\" \",(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:\"md:hidden\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-diff-line-number\":\"23\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Icon\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"Plus\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-diff-line-number\":\"24\",children:[\"\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-diff-line-number\":\"25\",children:[\"\t\t\t\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.tsx\",line:10,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.tsx\",line:10,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.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\":\"src/routes/app/recipients/layout.tsx\",\"data-start\":\"56\",\"data-remove\":\"59,63,64,78\",\"data-add\":\"60,65,66,73,79,80,81,82\",\"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\":\"56\",\"data-diff-line-number\":\"56\",children:[\"\t\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"recipients\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"recipient\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-diff-line-number\":\"57\",children:[\"\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"NavLink\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-diff-line-number\":\"58\",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:\"recipient\"}),\".\",(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\":\"59\",\"data-remove\":!0,\"data-diff-line-number\":\"58\",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:\"/recipients/\"}),\"${\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"recipient\"}),\".\",(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\":\"60\",\"data-add\":!0,\"data-diff-line-number\":\"59\",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(--base08)\"},children:\"recipient\"}),\".\",(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\":\"61\",\"data-diff-line-number\":\"60\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"({ \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isActive\"}),\" }) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-diff-line-number\":\"61\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"clsx\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-remove\":!0,\"data-diff-line-number\":\"61\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hover:bg-background group flex items-center gap-2 overflow-x-auto text-xl\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"64\",\"data-remove\":!0,\"data-diff-line-number\":\"61\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isActive\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"active underline\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"''\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-add\":!0,\"data-diff-line-number\":\"62\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"hover:bg-background flex items-center gap-2 overflow-x-auto text-xl\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-add\":!0,\"data-diff-line-number\":\"63\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isActive\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"underline\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"''\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-diff-line-number\":\"64\",children:[\"\t\t\t\t\t\t\t\t\t\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-diff-line-number\":\"65\",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\":\"69\",\"data-diff-line-number\":\"66\",children:[\"\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(--base08)\"},children:\"e\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-diff-line-number\":\"67\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"e\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"currentTarget\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"closest\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"details\"}),\"'\",\")?.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"removeAttribute\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"open\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"71\",\"data-diff-line-number\":\"68\",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\":\"72\",\"data-diff-line-number\":\"69\",children:[\"\t\t\t\t\t\t\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"73\",\"data-add\":!0,\"data-diff-line-number\":\"70\",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:\"isActive\"}),\" }) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"74\",\"data-diff-line-number\":\"71\",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 gap-1\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"75\",\"data-diff-line-number\":\"72\",children:[\"\t\t\t\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Icon\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"76\",\"data-diff-line-number\":\"73\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"ArrowRight\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"77\",\"data-diff-line-number\":\"74\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"size\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"sm\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"78\",\"data-remove\":!0,\"data-diff-line-number\":\"74\",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:\"opacity-0 transition-opacity group-[.active]:opacity-100\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"79\",\"data-add\":!0,\"data-diff-line-number\":\"75\",children:[\"\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(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"clsx\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"80\",\"data-add\":!0,\"data-diff-line-number\":\"76\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"isActive\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"opacity-100\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"opacity-0\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"81\",\"data-add\":!0,\"data-diff-line-number\":\"77\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"transition-opacity\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"82\",\"data-add\":!0,\"data-diff-line-number\":\"78\",children:[\"\t\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\":\"83\",\"data-diff-line-number\":\"79\",children:[\"\t\t\t\t\t\t\t\t\t\t\t/>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"84\",\"data-diff-line-number\":\"80\",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:\"recipient\"}),\".\",(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\":\"85\",\"data-diff-line-number\":\"81\",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:\"recipient\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"messages\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"some\"}),\"(\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.tsx\",line:56,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.tsx\",line:53,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.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\":\"src/routes/app/recipients/layout.tsx\",\"data-start\":\"84\",\"data-add\":\"87\",\"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\":\"84\",\"data-diff-line-number\":\"84\",children:[\"\t\t\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"/>\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"85\",\"data-diff-line-number\":\"85\",children:[\"\t\t\t\t\t\t\t\t\t\t\t)}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"86\",\"data-diff-line-number\":\"86\",children:[\"\t\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"87\",\"data-add\":!0,\"data-diff-line-number\":\"87\",children:[\"\t\t\t\t\t\t\t\t\t)}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"88\",\"data-diff-line-number\":\"88\",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\":\"89\",\"data-diff-line-number\":\"89\",children:[\"\t\t\t\t\t\t\t))}\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"90\",\"data-diff-line-number\":\"90\",children:[\"\t\t\t\t\t\t\t{\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"recipients\"}),\".length \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" (\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.tsx\",line:84,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/app/recipients/layout.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.tsx\",line:85,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/app/recipients/layout.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)(s,{title:\"src/routes/signup.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/routes/signup.tsx\",\"data-start\":\"1\",\"data-remove\":\"1\",\"data-add\":\"2\",\"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:\"Link\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router-dom\"}),\"'\",`\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:\"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\":\"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:\"Button\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/button.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Icon\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#src/components/icon.tsx\"}),\"'\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/signup.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes/signup.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/signup.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/signup.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/signup.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes/signup.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes/signup.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes/signup.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)(s,{title:\"src/routes.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/routes.tsx\",\"data-start\":\"3\",\"data-add\":\"6\",\"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\":\"3\",\"data-diff-line-number\":\"3\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"createRoutesFromElements\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Route\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"5\",children:[\"} \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},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\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"UnknownErrorBoundary\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./error-boundary.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-diff-line-number\":\"7\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"NotFoundRoute\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./routes/404.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-diff-line-number\":\"8\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"AppLayout\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./routes/app/layout.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-diff-line-number\":\"9\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"AboutRoute\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./routes/app/marketing/about.tsx\"}),\"'\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes.tsx\",line:3,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes.tsx\",line:3,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes.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\":\"src/routes.tsx\",\"data-start\":\"20\",\"data-remove\":\"23,24,25,26,27,34,35,36,42,43,44,45,46,52,53,54,55,56,62,63,64\",\"data-add\":\"28,29,30,31,32,37,38,39,47,48,57,58,65,66,67\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"20\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"21\",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(--base08)\"},children:\"router\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"createBrowserRouter\"}),\"(\",`\n`]}),(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(--base0D)\"},children:\"createRoutesFromElements\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t<>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(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(--base0A)\"},children:\"AppLayout\"}),\" />\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(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(--base0A)\"},children:\"MarketingLayout\"}),\" />\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"index\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(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(--base0A)\"},children:\"HomepageRoute\"}),\" />\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"about\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(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(--base0A)\"},children:\"AboutRoute\"}),\" />\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"ErrorBoundary\"}),(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:\"UnknownErrorBoundary\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(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(--base0D)\"},children:\"Component\"}),(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:\"AppLayout\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Component\"}),(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:\"MarketingLayout\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"index\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Component\"}),(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:\"HomepageRoute\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"about\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Component\"}),(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:\"AboutRoute\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-diff-line-number\":\"28\",children:[\"\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-remove\":!0,\"data-diff-line-number\":\"28\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"recipients\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(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(--base0A)\"},children:\"RecipientsLayout\"}),\" />\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-remove\":!0,\"data-diff-line-number\":\"28\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"index\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(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(--base0A)\"},children:\"RecipientIndexRoute\"}),\" />\",(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\":\"28\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"new\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(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(--base0A)\"},children:\"NewRecipientRoute\"}),\" />\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:[\"\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"recipients\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Component\"}),(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:\"RecipientsLayout\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"index\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Component\"}),(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:\"RecipientIndexRoute\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"new\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Component\"}),(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:\"NewRecipientRoute\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-diff-line-number\":\"32\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\":id\"}),'\"',`\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\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-remove\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"RecipientErrorBoundary\"}),\">\",`\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<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"RecipientRoute\"}),\" />\",`\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\",`\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\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Component\"}),(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:\"RecipientRoute\"}),(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\":\"35\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"ErrorBoundary\"}),(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:\"RecipientErrorBoundary\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-diff-line-number\":\"36\",children:[\"\t\t\t\t\t/>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-diff-line-number\":\"37\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-diff-line-number\":\"38\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\":id/edit\"}),'\"',`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-remove\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-remove\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"RecipientErrorBoundary\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-remove\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"RecipientEditRoute\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-remove\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-remove\":!0,\"data-diff-line-number\":\"38\",children:[\"\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\":\"57\",\"data-add\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Component\"}),(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:\"RecipientEditRoute\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[\"\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"ErrorBoundary\"}),(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:\"RecipientErrorBoundary\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-diff-line-number\":\"41\",children:[\"\t\t\t\t\t/>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-diff-line-number\":\"42\",children:[\"\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-diff-line-number\":\"43\",children:[\"\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-remove\":!0,\"data-diff-line-number\":\"43\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/signup\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),(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(--base0A)\"},children:\"SignupRoute\"}),\" />\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"63\",\"data-remove\":!0,\"data-diff-line-number\":\"43\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(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(--base0D)\"},children:\"element\"}),(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(--base0A)\"},children:\"NotFoundRoute\"}),\" />\",(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\":\"43\",children:[\"\t\t,\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"65\",\"data-add\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/signup\"}),'\"',\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Component\"}),(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:\"SignupRoute\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"66\",\"data-add\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Route\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"path\"}),(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(--base0D)\"},children:\"Component\"}),(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:\"NotFoundRoute\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"67\",\"data-add\":!0,\"data-diff-line-number\":\"46\",children:[\"\t\t,\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"68\",\"data-diff-line-number\":\"47\",children:[\"\t),\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-diff-line-number\":\"48\",children:[\")\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes.tsx\",line:20,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.problem.v7/src/routes.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.problem.v7/src/routes.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)(r,{file:\"/myapp/workshop-content/exercises/99.upgrade-v7/01.solution.v7/src/routes.tsx\",line:21,children:(0,e.jsx)(\"span\",{title:\"99.upgrade-v7/01.solution.v7/src/routes.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(l={}){let{wrapper:a}=l.components||{};return a?(0,e.jsx)(a,{...l,children:(0,e.jsx)(p,{...l})}):p(l)}function t(l,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+l+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(E);})();\n;return Component;"]