var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),x=(n,a)=>{for(var s in a)t(n,s,{get:a[s],enumerable:!0})},c=(n,a,s,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of v(a))!y.call(n,l)&&l!==s&&t(n,l,{get:()=>a[l],enumerable:!(r=h(a,l))||r.enumerable});return n};var g=(n,a,s)=>(s=n!=null?m(u(n)):{},c(a||!n||!n.__esModule?t(s,"default",{value:n,enumerable:!0}):s,n)),N=n=>c(t({},"__esModule",{value:!0}),n);var d=f((w,i)=>{i.exports=_jsx_runtime});var E={};x(E,{default:()=>b,frontmatter:()=>k});var e=g(d()),k=void 0;function p(n){let a={code:"code",pre:"pre",span:"span",...n.components},{Accordion:s,Icon:r,LaunchEditor:l}=a;return s||o("Accordion",!0),r||o("Icon",!0),l||o("LaunchEditor",!0),(0,e.jsxs)(s,{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":"3,4,5,6,7,8,9,10,11,12,13,14,15,19,20,24,25,29,30","data-add":"21,26,31","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-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"}),"'",` `]}),(0,e.jsx)(a.span,{className:"codeblock-line","data-line-number":"2","data-diff-line-number":"2",children:` `}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"3","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:"/*"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"4","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:" \u{1F428} Look at the SM, MD and LG screen sizes in the Figma design."}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"5","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:" Pay close attention to the **spacing between and around elements**, as well as the logo tiles size."}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"6","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:" "}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"7","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:" Implement those breakpoint changes throughout the design."}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"8","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:"*/"}),` `]}),(0,e.jsx)(a.span,{className:"codeblock-line","data-line-number":"9","data-remove":!0,"data-diff-line-number":"2",children:` `}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"10","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:"/*"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"11","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:" \u{1F4B0} Make sure you use Figma's Dev Mode and hover over all the things!"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"12","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:" To help a bit, I've put a little \u{1F440} emoji before every element "}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"13","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:" that needs change."}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"14","data-remove":!0,"data-diff-line-number":"2",children:[(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:"*/"}),` `]}),(0,e.jsx)(a.span,{className:"codeblock-line","data-line-number":"15","data-remove":!0,"data-diff-line-number":"2",children:` `}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"16","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"}),"() {",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"17","data-diff-line-number":"4",children:[" ",(0,e.jsx)(a.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"18","data-diff-line-number":"5",children:[" <",(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 min-h-screen place-items-center px-4 py-16"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"19","data-remove":!0,"data-diff-line-number":"5",children:[" ",(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"{"}),(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:"/* \u{1F440} */"}),(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(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(--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 place-items-center gap-12"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"21","data-add":!0,"data-diff-line-number":"6",children:[" <",(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 place-items-center gap-12 sm:gap-16"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"22","data-diff-line-number":"7",children:[" <",(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:"flex max-w-md flex-col items-center text-center"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"23","data-diff-line-number":"8",children:[" <",(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"}),'"'," />",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"24","data-remove":!0,"data-diff-line-number":"8",children:[" ",(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"{"}),(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:"/* \u{1F440} */"}),(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"25","data-remove":!0,"data-diff-line-number":"8",children:[" <",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"h1"})," ",(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:"sm:text-4.5xl lg:text-5.5xl mt-6 text-4xl font-medium md:text-5xl"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"26","data-add":!0,"data-diff-line-number":"9",children:[" <",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"h1"})," ",(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:"sm:text-4.5xl lg:text-5.5xl mt-6 text-4xl font-medium md:mt-8 md:text-5xl"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"27","data-diff-line-number":"10",children:[" The <",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"span"})," ",(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:"text-highlight"}),'"',">Epic Stack",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"28","data-diff-line-number":"11",children:[" ",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"29","data-remove":!0,"data-diff-line-number":"11",children:[" ",(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"{"}),(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:"/* \u{1F440} */"}),(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"30","data-remove":!0,"data-diff-line-number":"11",children:[" <",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"p"})," ",(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:"mt-4 text-slate-600 sm:text-lg md:text-xl"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"31","data-add":!0,"data-diff-line-number":"12",children:[" <",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"p"})," ",(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:"mt-4 text-slate-600 sm:text-lg md:mt-6 md:text-xl"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"32","data-diff-line-number":"13",children:[" Check the",(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"{"}),"'",(0,e.jsx)(a.span,{style:{color:"var(--base0B)"},children:" "}),"'",(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"33","data-diff-line-number":"14",children:[" <",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"a"})," ",(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:"text-black underline"}),'"'," ",(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:"#"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"34","data-diff-line-number":"15",children:[" Getting Started",` `]})]})}),(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/03.responsive-design/02.problem.responsive-spacing/src/App.tsx",line:1,children:(0,e.jsx)("span",{title:"03.responsive-design/02.problem.responsive-spacing/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/03.responsive-design/02.problem.responsive-spacing/src/App.tsx",syncTo:{file:"/myapp/workshop-content/exercises/03.responsive-design/02.solution.responsive-spacing/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)(r,{name:"ArrowLeft",title:"Copy app 2 file to app 1"})})}),(0,e.jsx)(l,{file:"/myapp/workshop-content/exercises/03.responsive-design/02.solution.responsive-spacing/src/App.tsx",syncTo:{file:"/myapp/workshop-content/exercises/03.responsive-design/02.problem.responsive-spacing/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)(r,{name:"ArrowRight",title:"Copy app 1 file to app 2"})})})]}),(0,e.jsx)(l,{file:"/myapp/workshop-content/exercises/03.responsive-design/02.solution.responsive-spacing/src/App.tsx",line:1,children:(0,e.jsx)("span",{title:"03.responsive-design/02.solution.responsive-spacing/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"})})]})]}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)(a.pre,{"data-filename":"src/App.tsx","data-start":"33","data-remove":"36,37,41,44","data-add":"38,45","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":"33","data-diff-line-number":"33",children:[" ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"guide"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"file"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"for"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"how"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"to"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"get"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"your"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"project"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"off"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"the"})," ",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"ground"}),(0,e.jsx)(a.span,{style:{color:"var(--base0E)"},children:"!"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"34","data-diff-line-number":"34",children:[" ",(0,e.jsx)(a.span,{style:{color:"var(--base0E)"},children:""}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"35","data-diff-line-number":"35",children:[" ",(0,e.jsx)(a.span,{style:{color:"var(--base0E)"},children:""}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"36","data-remove":!0,"data-diff-line-number":"35",children:[" {",(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:"/* \u{1F440} */"}),"}",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"37","data-remove":!0,"data-diff-line-number":"35",children:[" <",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"ul"})," ",(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:"flex max-w-3xl flex-wrap justify-center gap-2"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"38","data-add":!0,"data-diff-line-number":"36",children:[" <",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"ul"})," ",(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:"flex max-w-3xl flex-wrap justify-center gap-2 sm:gap-4"}),'"',">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"39","data-diff-line-number":"37",children:[" ",(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:"=>"})," (",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"40","data-diff-line-number":"38",children:[" <",(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:"}"}),">",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"41","data-remove":!0,"data-diff-line-number":"38",children:[" ",(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"{"}),(0,e.jsx)(a.span,{style:{color:"var(--base03)"},children:"/* \u{1F440} */"}),(0,e.jsx)(a.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"42","data-diff-line-number":"39",children:[" <",(0,e.jsx)(a.span,{style:{color:"var(--base08)"},children:"a"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"43","data-diff-line-number":"40",children:[" ",(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:"}"}),` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"44","data-remove":!0,"data-diff-line-number":"40",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:"bg-highlight/[7%] grid size-20 place-items-center rounded-2xl p-4"}),'"',` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"45","data-add":!0,"data-diff-line-number":"41",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:"bg-highlight/[7%] grid size-20 place-items-center rounded-2xl p-4 sm:size-24"}),'"',` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"46","data-diff-line-number":"42",children:[" >",` `]}),(0,e.jsxs)(a.span,{className:"codeblock-line","data-line-number":"47","data-diff-line-number":"43",children:[" <",(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.jsxs)(a.span,{className:"codeblock-line","data-line-number":"48","data-diff-line-number":"44",children:[" ",` `]})]})}),(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/03.responsive-design/02.problem.responsive-spacing/src/App.tsx",line:33,children:(0,e.jsx)("span",{title:"03.responsive-design/02.problem.responsive-spacing/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/03.responsive-design/02.problem.responsive-spacing/src/App.tsx",syncTo:{file:"/myapp/workshop-content/exercises/03.responsive-design/02.solution.responsive-spacing/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)(r,{name:"ArrowLeft",title:"Copy app 2 file to app 1"})})}),(0,e.jsx)(l,{file:"/myapp/workshop-content/exercises/03.responsive-design/02.solution.responsive-spacing/src/App.tsx",syncTo:{file:"/myapp/workshop-content/exercises/03.responsive-design/02.problem.responsive-spacing/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)(r,{name:"ArrowRight",title:"Copy app 1 file to app 2"})})})]}),(0,e.jsx)(l,{file:"/myapp/workshop-content/exercises/03.responsive-design/02.solution.responsive-spacing/src/App.tsx",line:17,children:(0,e.jsx)("span",{title:"03.responsive-design/02.solution.responsive-spacing/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 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(E);})(); ;return Component;

03. Responsive design/02. Responsive Spacing (🏁 solution)

Responsive Spacing