P514:[{"_526":127,"_527":131,"_528":529},"app1","app2","diffCode","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),g=(n,a)=>{for(var r in a)s(n,r,{get:a[r],enumerable:!0})},d=(n,a,r,t)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let l of u(a))!y.call(n,l)&&l!==r&&s(n,l,{get:()=>a[l],enumerable:!(t=h(a,l))||t.enumerable});return n};var k=(n,a,r)=>(r=n!=null?m(v(n)):{},d(a||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),N=n=>d(s({},\"__esModule\",{value:!0}),n);var i=f((D,c)=>{c.exports=_jsx_runtime});var E={};g(E,{default:()=>p,frontmatter:()=>x});var e=k(i()),x=void 0;function b(n){let a={code:\"code\",pre:\"pre\",span:\"span\",...n.components},{Accordion:r,Icon:t,LaunchEditor:l}=a;return r||o(\"Accordion\",!0),t||o(\"Icon\",!0),l||o(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r,{title:\"src/app.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/app.tsx\",\"data-start\":\"1\",\"data-remove\":\"1,5\",\"data-add\":\"2,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\":\"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:\"MainMenu\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./main-menu.js\"}),\"'\",`\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:\"TicTacToe\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./tic-tac-toe.js\"}),\"'\",`\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:\"App\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"MainMenu\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"TicTacToe\"}),\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-diff-line-number\":\"5\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/app.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"04.debugging/03.problem.breakpoints/src/app.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)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/app.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/app.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/app.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/app.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/app.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"04.debugging/03.solution.breakpoints/src/app.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)(r,{title:\"src/main-menu.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/main-menu.tsx\",\"data-start\":\"39\",\"data-remove\":\"46,47,48,49,50,51,52,53,54,55,56,57,58,59\",\"data-add\":\"42\",\"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\":\"39\",\"data-diff-line-number\":\"39\",children:[\"\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\" \",(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:\"item\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"url\"}),(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\":\"40\",children:[\"\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\":\"41\",\"data-diff-line-number\":\"41\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"to\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"item\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"url\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"42\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"end\"}),(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(--base09)\"},children:\"true\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-diff-line-number\":\"43\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--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\":\"44\",\"data-diff-line-number\":\"44\",children:[\"\t\t\t\t\t\t\t\t[\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"px-2 py-1 hover:text-blue-600 hover:underline\"}),\"'\",\",\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// You will be adding a Conditional breakpoint on this line.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// But before you do, there's a slight problem. Conditions can only access\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// variable from the current scope (the `className` function), and our `item`\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// lives in the parent scope.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Reference the `item` here to be used in the condition for the breakpoint.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} item && isActive\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Next, right-click on the gutter to the left of this line and choose\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// the \\\"Add Conditional Breakpoint...\\\" option. Enter `item.title === 'Dashboard'`\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// as the condition for the breakpoint.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"59\",\"data-remove\":!0,\"data-diff-line-number\":\"45\",children:[\"\t\t\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Finally, run the main menu test suite in the debug mode to see what's wrong.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"60\",\"data-diff-line-number\":\"46\",children:[\"\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:\"font-bold text-black\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"text-gray-600\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"61\",\"data-diff-line-number\":\"47\",children:[\"\t\t\t\t\t\t\t\t].\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"join\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"62\",\"data-diff-line-number\":\"48\",children:[\"\t\t\t\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/main-menu.tsx\",line:39,children:(0,e.jsx)(\"span\",{title:\"04.debugging/03.problem.breakpoints/src/main-menu.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)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/main-menu.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/main-menu.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/main-menu.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/main-menu.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/main-menu.tsx\",line:39,children:(0,e.jsx)(\"span\",{title:\"04.debugging/03.solution.breakpoints/src/main-menu.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)(r,{title:\"src/tic-tac-toe.browser.test.tsx\",variant:\"added\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/tic-tac-toe.browser.test.tsx\",\"data-start\":\"0\",\"data-add\":\"0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"0\",\"data-add\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"@vitest/browser/context\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"render\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"vitest-browser-react\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"TicTacToe\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./tic-tac-toe\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"test\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"places cross marks in a horizontal line\"}),\"'\",\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" () \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"render\"}),\"(<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"TicTacToe\"}),\" />)\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getByRole\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"button\"}),\"'\",\", { name: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"left middle\"}),\"'\",\" }).\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"click\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"debugger\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getByRole\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"button\"}),\"'\",\", { name: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"middle\"}),\"'\",\", exact: \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\" }).\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"click\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"debugger\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getByRole\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"button\"}),\"'\",\", { name: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"right middle\"}),\"'\",\" }).\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"click\"}),\"()\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"debugger\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"squares\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getByRole\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"button\"}),\"'\",\").\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"elements\"}),\"().\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"slice\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"3\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"6\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"expect\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"squares\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"element\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"element\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"textContent\"}),\")).\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"toEqual\"}),\"([\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\\u2717\"}),\"'\",\", \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\\u2717\"}),\"'\",\", \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\\u2717\"}),\"'\",\"])\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"})\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/tic-tac-toe.browser.test.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/tic-tac-toe.browser.test.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/tic-tac-toe.browser.test.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/tic-tac-toe.browser.test.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/tic-tac-toe.browser.test.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"04.debugging/03.solution.breakpoints/src/tic-tac-toe.browser.test.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)(r,{title:\"src/tic-tac-toe.tsx\",variant:\"added\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/tic-tac-toe.tsx\",\"data-start\":\"0\",\"data-add\":\"0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43\",\"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\":\"0\",\"data-add\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"useState\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"TicTacToe\"}),\"() {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"4\",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:\"grid grid-cols-3 grid-rows-3\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"aria-label\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"top left\"}),'\"',\" \",(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:\"border-t-0 border-l-0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"aria-label\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"top middle\"}),'\"',\" \",(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:\"border-t-0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"aria-label\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"top right\"}),'\"',\" \",(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:\"border-t-0 border-r-0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"aria-label\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"left middle\"}),'\"',\" \",(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:\"border-l-0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"aria-label\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"middle\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"aria-label\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"right middle\"}),'\"',\" \",(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:\"border-b-0 border-l-0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"aria-label\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"bottom left\"}),'\"',\" \",(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:\"border-r-0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"aria-label\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"bottom middle\"}),'\"',\" \",(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:\"border-b-0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"aria-label\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"bottom right\"}),'\"',\" \",(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:\"border-r-0 border-b-0\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"Button\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Omit\"}),\"<\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"DetailedHTMLProps\"}),\"<\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"ButtonHTMLAttributes\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"HTMLButtonElement\"}),\">,\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"HTMLButtonElement\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t>,\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"children\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"onClick\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t>,\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selected\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"setSelected\"}),\"] \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"28\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"text\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selected\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"\\u2717\"}),\"'\",\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"''\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"button\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"[\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\t\t\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"size-16 border border-slate-400 text-4xl text-blue-500 hover:bg-slate-200\"}),\"'\",\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t\t\t]\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:[\"\t\t\t\t.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"concat\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"className\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" \",\"''\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\t\t\t.\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"join\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\" \"}),\"'\",\")\",(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\":\"38\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"() \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"setSelected\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"!\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"selected\"}),\")\",(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\":\"39\",children:[\"\t\t>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"text\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"41\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"42\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"43\",children:[\"}\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/tic-tac-toe.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/tic-tac-toe.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/tic-tac-toe.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/04.debugging/03.problem.breakpoints/src/tic-tac-toe.tsx\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(l,{file:\"/myapp/workshop-content/exercises/04.debugging/03.solution.breakpoints/src/tic-tac-toe.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"04.debugging/03.solution.breakpoints/src/tic-tac-toe.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 p(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(b,{...n})}):b(n)}function o(n,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return N(E);})();\n;return Component;"]