var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),k=(l,e)=>{for(var n in e)s(l,n,{get:e[n],enumerable:!0})},d=(l,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of u(e))!f.call(l,r)&&r!==n&&s(l,r,{get:()=>e[r],enumerable:!(t=h(e,r))||t.enumerable});return l};var N=(l,e,n)=>(n=l!=null?m(v(l)):{},d(e||!l||!l.__esModule?s(n,"default",{value:l,enumerable:!0}):n,l)),g=l=>d(s({},"__esModule",{value:!0}),l);var i=y((D,o)=>{o.exports=_jsx_runtime});var E={};k(E,{default:()=>p,frontmatter:()=>x});var a=N(i()),x=void 0;function b(l){let e={code:"code",pre:"pre",span:"span",...l.components},{Accordion:n,Icon:t,LaunchEditor:r}=e;return n||c("Accordion",!0),t||c("Icon",!0),r||c("LaunchEditor",!0),(0,a.jsx)(n,{title:"src/App.tsx",variant:"changed",children:(0,a.jsxs)("div",{className:"relative",children:[(0,a.jsx)(e.pre,{"data-filename":"src/App.tsx","data-start":"2","data-remove":"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,44,45,46,47,48,49","data-add":"50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72","data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"2","data-diff-line-number":"2",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3","data-diff-line-number":"3",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"export"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"default"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"App"}),"() {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4","data-diff-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5","data-remove":!0,"data-diff-line-number":"4",children:[" <>",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6","data-remove":!0,"data-diff-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/*"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" \u{1F428} We need to wrap our entire markup inside two container divs."}),` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"8","data-remove":!0,"data-diff-line-number":"4",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" The first one is the full-page container. It needs to:"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" - have at minimum the full screen height (min-h-screen) "}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" - centers its children with a grid (grid place-items-center)"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" - handle horizontal and verticall padding (see Figma)"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"14","data-remove":!0,"data-diff-line-number":"4",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15","data-remove":!0,"data-diff-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/*"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" \u{1F428} Inside of that, wrap the entire markup in another 'div'. "}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" This is our layout container, a common parent to both"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"18","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" the logo list and the text content. "}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"19","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" "}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"20","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" It needs to:"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"21","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" - be a grid (grid) that contains two children (cells)"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"22","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" - have a gap (gap-12)"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"23","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" - center its children (place-items-center)"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"24","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"25","data-remove":!0,"data-diff-line-number":"4",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"26","data-remove":!0,"data-diff-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* "}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"27","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" \u{1F428} Wrap the Logo, h1 and paragraph in a common parent 'div'."}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"28","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" It will become one of the two grid cells in our layout. "}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"29","data-remove":!0,"data-diff-line-number":"4",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"30","data-remove":!0,"data-diff-line-number":"4",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"EpicStackLogo"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"className"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"size-20"}),'"'," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"31","data-remove":!0,"data-diff-line-number":"4",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"h1"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"32","data-remove":!0,"data-diff-line-number":"4",children:[" The <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"span"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"className"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"text-highlight"}),'"',">Epic Stack",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"33","data-remove":!0,"data-diff-line-number":"4",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"34","data-remove":!0,"data-diff-line-number":"4",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"p"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"35","data-remove":!0,"data-diff-line-number":"4",children:[" Check the <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"a"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"href"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"#"}),'"',">Getting Started guide file for how to get your",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"36","data-remove":!0,"data-diff-line-number":"4",children:[" project off the ground!",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"37","data-remove":!0,"data-diff-line-number":"4",children:[" ",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"38","data-remove":!0,"data-diff-line-number":"4",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"39","data-remove":!0,"data-diff-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* Logo list */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"40","data-remove":!0,"data-diff-line-number":"4",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"ul"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"41","data-remove":!0,"data-diff-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"logos"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"map"}),"((",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"logo"}),") ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"42","data-remove":!0,"data-diff-line-number":"4",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"li"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"key"}),(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:"logo"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"href"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"43","data-remove":!0,"data-diff-line-number":"4",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"a"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"href"}),(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:"logo"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"href"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"44","data-remove":!0,"data-diff-line-number":"4",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"img"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"src"}),(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:"logo"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"src"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"alt"}),(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:"logo"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"alt"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"className"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"w-16"}),'"'," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"45","data-remove":!0,"data-diff-line-number":"4",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"46","data-remove":!0,"data-diff-line-number":"4",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"47","data-remove":!0,"data-diff-line-number":"4",children:[" ))",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"48","data-remove":!0,"data-diff-line-number":"4",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"49","data-remove":!0,"data-diff-line-number":"4",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"50","data-add":!0,"data-diff-line-number":"5",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"className"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"grid min-h-screen place-items-center px-4 py-16"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"51","data-add":!0,"data-diff-line-number":"6",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"className"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"grid place-items-center gap-12"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"52","data-add":!0,"data-diff-line-number":"7",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"53","data-add":!0,"data-diff-line-number":"8",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"EpicStackLogo"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"className"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"size-20"}),'"'," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"54","data-add":!0,"data-diff-line-number":"9",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"h1"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"55","data-add":!0,"data-diff-line-number":"10",children:[" The <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"span"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"className"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"text-highlight"}),'"',">Epic Stack",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"56","data-add":!0,"data-diff-line-number":"11",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"57","data-add":!0,"data-diff-line-number":"12",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"p"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"58","data-add":!0,"data-diff-line-number":"13",children:[" Check the <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"a"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"href"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"#"}),'"',">Getting Started guide file for how to get",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"59","data-add":!0,"data-diff-line-number":"14",children:[" your project off the ground!",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"60","data-add":!0,"data-diff-line-number":"15",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"61","data-add":!0,"data-diff-line-number":"16",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"62","data-add":!0,"data-diff-line-number":"17",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"ul"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"63","data-add":!0,"data-diff-line-number":"18",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"logos"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"map"}),"((",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"logo"}),") ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"64","data-add":!0,"data-diff-line-number":"19",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"li"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"key"}),(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:"logo"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"href"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"65","data-add":!0,"data-diff-line-number":"20",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"a"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"href"}),(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:"logo"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"href"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"66","data-add":!0,"data-diff-line-number":"21",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"img"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"src"}),(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:"logo"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"src"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"alt"}),(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:"logo"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"alt"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"className"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"w-16"}),'"'," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"67","data-add":!0,"data-diff-line-number":"22",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"68","data-add":!0,"data-diff-line-number":"23",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"69","data-add":!0,"data-diff-line-number":"24",children:[" ))",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"70","data-add":!0,"data-diff-line-number":"25",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"71","data-add":!0,"data-diff-line-number":"26",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"72","data-add":!0,"data-diff-line-number":"27",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"73","data-diff-line-number":"28",children:[" )",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"74","data-diff-line-number":"29",children:["}",` `]})]})}),(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/02.mobile-first/01.problem.structural-layout/src/App.tsx",line:2,children:(0,a.jsx)("span",{title:"02.mobile-first/01.problem.structural-layout/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,a.jsxs)("div",{className:"display-alt-down flex gap-2",children:[(0,a.jsx)(r,{file:"/myapp/workshop-content/exercises/02.mobile-first/01.problem.structural-layout/src/App.tsx",syncTo:{file:"/myapp/workshop-content/exercises/02.mobile-first/01.solution.structural-layout/src/App.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/02.mobile-first/01.solution.structural-layout/src/App.tsx",syncTo:{file:"/myapp/workshop-content/exercises/02.mobile-first/01.problem.structural-layout/src/App.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/02.mobile-first/01.solution.structural-layout/src/App.tsx",line:2,children:(0,a.jsx)("span",{title:"02.mobile-first/01.solution.structural-layout/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"})})]})]})})}function p(l={}){let{wrapper:e}=l.components||{};return e?(0,a.jsx)(e,{...l,children:(0,a.jsx)(b,{...l})}):b(l)}function c(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(E);})(); ;return Component;

02. Mobile-First/01. Structural Layout (🏁 solution)

Structural Layout