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,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var l in e)t(n,l,{get:e[l],enumerable:!0})},c=(n,e,l,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of v(e))!y.call(n,r)&&r!==l&&t(n,r,{get:()=>e[r],enumerable:!(s=h(e,r))||s.enumerable});return n};var g=(n,e,l)=>(l=n!=null?m(u(n)):{},c(e||!n||!n.__esModule?t(l,"default",{value:n,enumerable:!0}):l,n)),N=n=>c(t({},"__esModule",{value:!0}),n);var d=f((D,i)=>{i.exports=_jsx_runtime});var E={};x(E,{default:()=>b,frontmatter:()=>k});var a=g(d()),k=void 0;function p(n){let e={code:"code",pre:"pre",span:"span",...n.components},{Accordion:l,Icon:s,LaunchEditor:r}=e;return l||o("Accordion",!0),s||o("Icon",!0),r||o("LaunchEditor",!0),(0,a.jsx)(l,{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":"1","data-remove":"3,4,5,6,7,8,9,10,11,12,13,14,21,22,26,27","data-add":"23,28","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":"1","data-diff-line-number":"1",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"import"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"EpicStackLogo"}),", ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"logos"})," } ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"from"})," ","'",(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"./logos/logos"}),"'",` `]}),(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-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/*"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4","data-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" \u{1F428} Look at the SM, MD and LG screen sizes in the Figma design."}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5","data-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" Pay close attention to the **typography**."}),` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"6","data-remove":!0,"data-diff-line-number":"2",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7","data-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" Implement the breakpoint changes you observe throughout the design."}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8","data-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"*/"}),` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"9","data-remove":!0,"data-diff-line-number":"2",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10","data-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/*"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11","data-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" \u{1F4B0} Make sure you use Figma's Dev Mode and hover over all the things!"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12","data-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" To help a bit, I've put a little \u{1F440} emoji before every element "}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13","data-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:" that needs change."}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14","data-remove":!0,"data-diff-line-number":"2",children:[(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"*/"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15","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":"16","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":"17","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":"18","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":"19","data-diff-line-number":"7",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:"flex max-w-md flex-col items-center text-center"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"20","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":"21","data-remove":!0,"data-diff-line-number":"8",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* \u{1F440} */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"22","data-remove":!0,"data-diff-line-number":"8",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"h1"})," ",(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:"mt-6 text-4xl font-medium"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"23","data-add":!0,"data-diff-line-number":"9",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"h1"})," ",(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:"sm:text-4.5xl lg:text-5.5xl mt-6 text-4xl font-medium md:text-5xl"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"24","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":"25","data-diff-line-number":"11",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"26","data-remove":!0,"data-diff-line-number":"11",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* \u{1F440} */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"27","data-remove":!0,"data-diff-line-number":"11",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"p"})," ",(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:"mt-4 text-slate-600"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"28","data-add":!0,"data-diff-line-number":"12",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"p"})," ",(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:"mt-4 text-slate-600 sm:text-lg md:text-xl"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"29","data-diff-line-number":"13",children:[" Check the",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),"'",(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:" "}),"'",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"30","data-diff-line-number":"14",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"a"})," ",(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-black underline"}),'"'," ",(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:"#"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"31","data-diff-line-number":"15",children:[" Getting Started",` `]})]})}),(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/03.responsive-design/01.problem.responsive-typography/src/App.tsx",line:1,children:(0,a.jsx)("span",{title:"03.responsive-design/01.problem.responsive-typography/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/03.responsive-design/01.problem.responsive-typography/src/App.tsx",syncTo:{file:"/myapp/workshop-content/exercises/03.responsive-design/01.solution.responsive-typography/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)(s,{name:"ArrowLeft",title:"Copy app 2 file to app 1"})})}),(0,a.jsx)(r,{file:"/myapp/workshop-content/exercises/03.responsive-design/01.solution.responsive-typography/src/App.tsx",syncTo:{file:"/myapp/workshop-content/exercises/03.responsive-design/01.problem.responsive-typography/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)(s,{name:"ArrowRight",title:"Copy app 1 file to app 2"})})})]}),(0,a.jsx)(r,{file:"/myapp/workshop-content/exercises/03.responsive-design/01.solution.responsive-typography/src/App.tsx",line:1,children:(0,a.jsx)("span",{title:"03.responsive-design/01.solution.responsive-typography/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: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);})(); ;return Component;

03. Responsive design/01. Responsive Typography (🏁 solution)

Responsive Typography