P1248:[{"_1631":255,"_1632":259,"_1633":1634},"app1","app2","diffCode","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var l in e)s(n,l,{get:e[l],enumerable:!0})},c=(n,e,l,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!y.call(n,r)&&r!==l&&s(n,r,{get:()=>e[r],enumerable:!(t=m(e,r))||t.enumerable});return n};var k=(n,e,l)=>(l=n!=null?h(v(n)):{},c(e||!n||!n.__esModule?s(l,\"default\",{value:n,enumerable:!0}):l,n)),N=n=>c(s({},\"__esModule\",{value:!0}),n);var i=f((D,d)=>{d.exports=_jsx_runtime});var E={};x(E,{default:()=>b,frontmatter:()=>g});var a=k(i()),g=void 0;function p(n){let e={code:\"code\",pre:\"pre\",span:\"span\",...n.components},{Accordion:l,Icon:t,LaunchEditor:r}=e;return l||o(\"Accordion\",!0),t||o(\"Icon\",!0),r||o(\"LaunchEditor\",!0),(0,a.jsx)(l,{title:\"index.tsx\",variant:\"changed\",children:(0,a.jsxs)(\"div\",{className:\"relative\",children:[(0,a.jsx)(e.pre,{\"data-filename\":\"index.tsx\",\"data-start\":\"6\",\"data-remove\":\"9,10,11,12,13,14,15,16\",\"data-add\":\"17,18,19,20,21,22,23,24,25,26\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"6\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-diff-line-number\":\"7\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-diff-line-number\":\"8\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"form\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"action\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"logFormData\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:'/* \\u{1F428} add a label \"Account Type\" */'}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/* \\u{1F428} add a select with the following options:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"8\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t- admin\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-remove\":!0,\"data-diff-line-number\":\"8\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t- teacher\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"8\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t- parent\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"8\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t- student\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"8\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t */\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-remove\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:'/* \\u{1F4AF} make the first option be \"--Please select an option--\" with a value of an empty string */'}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"label\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"htmlFor\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"accountTypeSelection\"}),'\"',\">Account Type:\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"select\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"id\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"accountTypeSelection\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"accountType\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"option\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"\"',\">--Please select an option--\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"option\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"admin\"}),'\"',\">Admin\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"option\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"teacher\"}),'\"',\">Teacher\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"option\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"parent\"}),'\"',\">Parent\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"option\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"student\"}),'\"',\">Student\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-diff-line-number\":\"19\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-diff-line-number\":\"20\",children:[\"\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"label\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"htmlFor\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"usernameInput\"}),'\"',\">Username:\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-diff-line-number\":\"21\",children:[\"\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"id\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"usernameInput\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"username\"}),'\"',\" />\",`\n`]})]})}),(0,a.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,a.jsx)(r,{file:\"/myapp/workshop-content/exercises/08.inputs/02.problem.select/index.tsx\",line:6,children:(0,a.jsx)(\"span\",{title:\"08.inputs/02.problem.select/index.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,a.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,a.jsx)(r,{file:\"/myapp/workshop-content/exercises/08.inputs/02.problem.select/index.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/08.inputs/02.solution.select/index.tsx\"},children:(0,a.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,a.jsx)(t,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,a.jsx)(r,{file:\"/myapp/workshop-content/exercises/08.inputs/02.solution.select/index.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/08.inputs/02.problem.select/index.tsx\"},children:(0,a.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,a.jsx)(t,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,a.jsx)(r,{file:\"/myapp/workshop-content/exercises/08.inputs/02.solution.select/index.tsx\",line:6,children:(0,a.jsx)(\"span\",{title:\"08.inputs/02.solution.select/index.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(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(p,{...n})}):p(n)}function o(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return N(E);})();\n;return Component;"]

08. Inputs/02. Select (🏁 solution)

Select