P1027:[{"_1368":183,"_1369":187,"_1370":1371},"app1","app2","diffCode","var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),x=(a,n)=>{for(var r in n)l(a,r,{get:n[r],enumerable:!0})},i=(a,n,r,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let s of h(n))!y.call(a,s)&&s!==r&&l(a,s,{get:()=>n[s],enumerable:!(t=u(n,s))||t.enumerable});return a};var g=(a,n,r)=>(r=a!=null?m(f(a)):{},i(n||!a||!a.__esModule?l(r,\"default\",{value:a,enumerable:!0}):r,a)),N=a=>i(l({},\"__esModule\",{value:!0}),a);var c=v(($,d)=>{d.exports=_jsx_runtime});var _={};x(_,{default:()=>b,frontmatter:()=>k});var e=g(c()),k=void 0;function p(a){let n={code:\"code\",pre:\"pre\",span:\"span\",...a.components},{Accordion:r,Icon:t,LaunchEditor:s}=n;return r||o(\"Accordion\",!0),t||o(\"Icon\",!0),s||o(\"LaunchEditor\",!0),(0,e.jsxs)(r,{title:\"app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",variant:\"changed\",children:[(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(n.pre,{\"data-filename\":\"app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",\"data-start\":\"4\",\"data-remove\":\"7\",\"data-add\":\"8,9,10,11,12,13,18\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(n.code,{children:[(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"ActionFunctionArgs\"}),\",\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"LoaderFunctionArgs\"}),\",\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"6\",children:[\"} \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"@remix-run/node\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"6\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"Form\"}),\", \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"useLoaderData\"}),\" } \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"@remix-run/react\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" {\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"Form\"}),\",\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"useFormAction\"}),\",\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"useLoaderData\"}),\",\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"useNavigation\"}),\",\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"} \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"@remix-run/react\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-diff-line-number\":\"13\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"floatingToolbarClassName\"}),\" } \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"#app/components/floating-toolbar.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"14\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"Button\"}),\" } \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"#app/components/ui/button.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"15\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"Input\"}),\" } \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"#app/components/ui/input.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-diff-line-number\":\"16\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"Label\"}),\" } \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"#app/components/ui/label.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"StatusButton\"}),\" } \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"#app/components/ui/status-button.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"18\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"Textarea\"}),\" } \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"#app/components/ui/textarea.tsx\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"19\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"db\"}),\" } \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"#app/utils/db.server.ts\"}),\"'\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"20\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"invariantResponse\"}),\" } \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"#app/utils/misc.tsx\"}),\"'\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",line:4,children:(0,e.jsx)(\"span\",{title:\"05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.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)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.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)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.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)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",line:4,children:(0,e.jsx)(\"span\",{title:\"05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.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)(n.pre,{\"data-filename\":\"app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",\"data-start\":\"46\",\"data-remove\":\"49\",\"data-add\":\"50,51,52,53,54,55\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(n.code,{children:[(0,e.jsx)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-diff-line-number\":\"46\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-diff-line-number\":\"47\",children:[(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"NoteEdit\"}),\"() {\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-diff-line-number\":\"48\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"data\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"useLoaderData\"}),\"<\",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"typeof\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"loader\"}),\">()\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-remove\":!0,\"data-diff-line-number\":\"48\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} determine whether this form is submitting\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-add\":!0,\"data-diff-line-number\":\"49\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"navigation\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"useNavigation\"}),\"()\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-add\":!0,\"data-diff-line-number\":\"50\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"formAction\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"useFormAction\"}),\"()\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-add\":!0,\"data-diff-line-number\":\"51\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"isSubmitting\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-add\":!0,\"data-diff-line-number\":\"52\",children:[\"\t\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"navigation\"}),\".\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"!==\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"idle\"}),\"'\",\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-add\":!0,\"data-diff-line-number\":\"53\",children:[\"\t\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"navigation\"}),\".\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"formMethod\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"POST\"}),\"'\",\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-add\":!0,\"data-diff-line-number\":\"54\",children:[\"\t\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"navigation\"}),\".\",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"formAction\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"formAction\"}),`\n`]}),(0,e.jsx)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"56\",\"data-diff-line-number\":\"55\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"57\",\"data-diff-line-number\":\"56\",children:[\"\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"58\",\"data-diff-line-number\":\"57\",children:[\"\t\t<\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"Form\"}),`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",line:46,children:(0,e.jsx)(\"span\",{title:\"05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.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)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.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)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.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)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",line:52,children:(0,e.jsx)(\"span\",{title:\"05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.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)(n.pre,{\"data-filename\":\"app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",\"data-start\":\"69\",\"data-remove\":\"72,73,74,75\",\"data-add\":\"76,77,78,79,80,81,82\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(n.code,{children:[(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"69\",\"data-diff-line-number\":\"69\",children:[\"\t\t\t\t<\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"variant\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"destructive\"}),'\"',\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"type\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"reset\"}),'\"',\">\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"70\",\"data-diff-line-number\":\"70\",children:[\"\t\t\t\t\tReset\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"71\",\"data-diff-line-number\":\"71\",children:[\"\t\t\t\t\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"72\",\"data-remove\":!0,\"data-diff-line-number\":\"71\",children:[\"\t\t\t\t{\",(0,e.jsx)(n.span,{style:{color:\"var(--base03)\"},children:\"/* \\u{1F428} disable this button when the form is submitting */\"}),\"}\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"73\",\"data-remove\":!0,\"data-diff-line-number\":\"71\",children:[\"\t\t\t\t{\",(0,e.jsx)(n.span,{style:{color:\"var(--base03)\"},children:\"/* \\u{1F428} display some indicator when the form is submitting */\"}),\"}\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"74\",\"data-remove\":!0,\"data-diff-line-number\":\"71\",children:[\"\t\t\t\t{\",(0,e.jsx)(n.span,{style:{color:\"var(--base03)\"},children:\"/* \\u{1F4AF} you can use the StatusButton which has a status prop */\"}),\"}\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"75\",\"data-remove\":!0,\"data-diff-line-number\":\"71\",children:[\"\t\t\t\t<\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"Button\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"type\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"submit\"}),'\"',\">Submit\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"76\",\"data-add\":!0,\"data-diff-line-number\":\"72\",children:[\"\t\t\t\t<\",(0,e.jsx)(n.span,{style:{color:\"var(--base0A)\"},children:\"StatusButton\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"77\",\"data-add\":!0,\"data-diff-line-number\":\"73\",children:[\"\t\t\t\t\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"type\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"submit\"}),'\"',`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"78\",\"data-add\":!0,\"data-diff-line-number\":\"74\",children:[\"\t\t\t\t\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"disabled\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"isSubmitting\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"79\",\"data-add\":!0,\"data-diff-line-number\":\"75\",children:[\"\t\t\t\t\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0D)\"},children:\"status\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(n.span,{style:{color:\"var(--base08)\"},children:\"isSubmitting\"}),\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"pending\"}),\"'\",\" \",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0B)\"},children:\"idle\"}),\"'\",(0,e.jsx)(n.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"80\",\"data-add\":!0,\"data-diff-line-number\":\"76\",children:[\"\t\t\t\t>\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"81\",\"data-add\":!0,\"data-diff-line-number\":\"77\",children:[\"\t\t\t\t\tSubmit\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"82\",\"data-add\":!0,\"data-diff-line-number\":\"78\",children:[\"\t\t\t\t\",`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"83\",\"data-diff-line-number\":\"79\",children:[\"\t\t\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"84\",\"data-diff-line-number\":\"80\",children:[\"\t\t\",(0,e.jsx)(n.span,{style:{color:\"var(--base0E)\"},children:\"\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"codeblock-line\",\"data-line-number\":\"85\",\"data-diff-line-number\":\"81\",children:[\"\t)\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",line:69,children:(0,e.jsx)(\"span\",{title:\"05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.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)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.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)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/05.scripting/05.problem.pending/app/routes/users+/$username_+/notes.$noteId_.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)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(s,{file:\"/myapp/workshop-content/exercises/05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\",line:80,children:(0,e.jsx)(\"span\",{title:\"05.scripting/05.solution.pending/app/routes/users+/$username_+/notes.$noteId_.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\"})})]})]})]})}function b(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(p,{...a})}):p(a)}function o(a,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return N(_);})();\n;return Component;"]

05. Scripting/05. Pending UI (🏁 solution)

Pending UI