P593:[{"_606":21,"_607":27,"_608":609},"app1","app2","diffCode","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),k=(n,a)=>{for(var r in a)s(n,r,{get:a[r],enumerable:!0})},c=(n,a,r,t)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let l of h(a))!y.call(n,l)&&l!==r&&s(n,l,{get:()=>a[l],enumerable:!(t=u(a,l))||t.enumerable});return n};var g=(n,a,r)=>(r=n!=null?m(f(n)):{},c(a||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),N=n=>c(s({},\"__esModule\",{value:!0}),n);var i=v((j,d)=>{d.exports=_jsx_runtime});var w={};k(w,{default:()=>b,frontmatter:()=>x});var e=g(i()),x=void 0;function p(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\":\"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\",\"data-add\":\"1,2,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49\",\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"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:\"EpicStackLogo\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"logos\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./logos/logos\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"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(--base0E)\"},children:\"default\"}),\" \",(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\":\"4\",\"data-diff-line-number\":\"4\",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\":\"5\",\"data-diff-line-number\":\"5\",children:[\"\t\t<>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">Let's build something epic!\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/*\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F428} 1. Import the { EpicStackLogo } component from the './logos/logos.tsx' file. \"}),`\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(--base03)\"},children:\"\t\t\t\tRender it with a width and height of level 20\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t*/\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsx)(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-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F4B0} You can use the 'size-*' utilities to set an \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\tequal width and height in a single class! \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t*/\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'/* \\u{1F428} 2. Add an `h1` tag that says \"The Epic Stack\" */'}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F428} 3. Add a paragraph that says: \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'\t\t\t\t\"Check the Getting Started guide file for how to get your project off the ground!\"'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'\t\t\t\tThe \"Getting Started\" should be a link. Set the href to \"#\".'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t*/\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/* \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\\u{1F428} 4. Import the { logos } from the './logos/logos.tsx' file.\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t1. Add an `ul` for the logos list.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t2. Iterate over the `logos` array and render an `li` for each logo.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t3. Each `li` should have an `a` with an `href` attribute set to the logo's `href`.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\t\t\t\t4. Inside the `a`, render an `img` with a `src` attribute set to the logo's `src`.\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'\t\t\t\tTo avoid the images being GIANT, let\\'s add a `className` of \"w-16\" to the `img`.'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-remove\":!0,\"data-diff-line-number\":\"5\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\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\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"EpicStackLogo\"}),\" \",(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:\"size-20\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">The Epic Stack\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\t\tCheck the <\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"a\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"href\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#\"}),'\"',\">Getting Started guide file for how to get your\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\t\t\tproject off the ground!\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"ul\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"logos\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"map\"}),\"((\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"logo\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" (\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"14\",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:\"logo\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"href\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"a\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"href\"}),(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:\"logo\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"href\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t\t\t\t\t\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"img\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"src\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"logo\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"src\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"alt\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"logo\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"alt\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(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-16\"}),'\"',\" />\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[\"\t\t\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\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\":\"49\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[\"\t\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-diff-line-number\":\"21\",children:[\"\t\t\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-diff-line-number\":\"22\",children:[\"\t)\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-diff-line-number\":\"23\",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/01.project-setup/01.problem.unstyled-markup/src/App.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/01.problem.unstyled-markup/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/01.project-setup/01.problem.unstyled-markup/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/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/01.project-setup/01.solution.unstyled-markup/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/01.problem.unstyled-markup/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/01.project-setup/01.solution.unstyled-markup/src/App.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/01.solution.unstyled-markup/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/logos/epic-stack.tsx\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/logos/epic-stack.tsx\",\"data-start\":\"1\",\"data-remove\":\"1,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(--base03)\"},children:\"/*\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\\u{1F9DD}\\u200D\\u2640\\uFE0F I've prepared the Epic Stack logo as a React component for you.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\tYou can pass it Tailwind classNames to style it!\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"*/\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"1\",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:\"EpicStackLogo\"}),\"({ \",(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\":\"7\",\"data-diff-line-number\":\"2\",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\":\"8\",\"data-diff-line-number\":\"3\",children:[\"\t\t<\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"svg\"}),`\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/01.project-setup/01.problem.unstyled-markup/src/logos/epic-stack.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/01.problem.unstyled-markup/src/logos/epic-stack.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/01.project-setup/01.problem.unstyled-markup/src/logos/epic-stack.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/src/logos/epic-stack.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/01.project-setup/01.solution.unstyled-markup/src/logos/epic-stack.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/01.problem.unstyled-markup/src/logos/epic-stack.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/01.project-setup/01.solution.unstyled-markup/src/logos/epic-stack.tsx\",line:1,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/01.solution.unstyled-markup/src/logos/epic-stack.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/logos/logos.ts\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"src/logos/logos.ts\",\"data-start\":\"22\",\"data-remove\":\"25,26,27,28\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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\":\"22\",\"data-diff-line-number\":\"22\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-diff-line-number\":\"23\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"EpicStackLogo\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"./epic-stack\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-diff-line-number\":\"24\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"/*\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\t\\u{1F9DD}\\u200D\\u2640\\uFE0F I've prepared this list of Epic Stack logos, \"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"\tso you can display them on the page design.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-remove\":!0,\"data-diff-line-number\":\"24\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"*/\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-diff-line-number\":\"25\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"logos\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" [\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-diff-line-number\":\"26\",children:[\"\t{\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-diff-line-number\":\"27\",children:[\"\t\tsrc: \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"remix\"}),\",\",`\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/01.project-setup/01.problem.unstyled-markup/src/logos/logos.ts\",line:22,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/01.problem.unstyled-markup/src/logos/logos.ts\",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/01.project-setup/01.problem.unstyled-markup/src/logos/logos.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/01.solution.unstyled-markup/src/logos/logos.ts\"},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/01.project-setup/01.solution.unstyled-markup/src/logos/logos.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/01.project-setup/01.problem.unstyled-markup/src/logos/logos.ts\"},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/01.project-setup/01.solution.unstyled-markup/src/logos/logos.ts\",line:22,children:(0,e.jsx)(\"span\",{title:\"01.project-setup/01.solution.unstyled-markup/src/logos/logos.ts\",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:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(p,{...n})}):p(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(w);})();\n;return Component;"]