P372:[{"_384":21,"_385":27,"_386":387},"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,v=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var t in e)s(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of h(e))!v.call(n,l)&&l!==t&&s(n,l,{get:()=>e[l],enumerable:!(r=u(e,l))||r.enumerable});return n};var N=(n,e,t)=>(t=n!=null?m(f(n)):{},i(e||!n||!n.__esModule?s(t,\"default\",{value:n,enumerable:!0}):t,n)),x=n=>i(s({},\"__esModule\",{value:!0}),n);var o=y((D,c)=>{c.exports=_jsx_runtime});var w={};k(w,{default:()=>p,frontmatter:()=>g});var a=N(o()),g=void 0;function b(n){let e={code:\"code\",pre:\"pre\",span:\"span\",...n.components},{Accordion:t,Icon:r,LaunchEditor:l}=e;return t||d(\"Accordion\",!0),r||d(\"Icon\",!0),l||d(\"LaunchEditor\",!0),(0,a.jsx)(t,{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\",\"data-add\":\"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\",\"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:\"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:\"ColorDesignTokens\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-diff-line-number\":\"2\",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\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\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\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",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} Replace the paragraph below with the responsive UI */\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">Build the Figma design here...\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\t<\",(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:\"py-6 sm:py-12\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\t\t<\",(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:\"mx-auto max-w-4xl p-6 sm:p-8\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\t\t\t<\",(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:\"rounded border border-black p-6 sm:p-8\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t\t\t\t<\",(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:\"text-xs font-semibold uppercase tracking-widest\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t\t\t\t\t\tSpecial Deal\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"\t\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:[\"\t\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"h2\"}),\" \",(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-1 text-2xl font-semibold sm:text-3xl\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[\"\t\t\t\t\t\tOpportunity of a lifetime\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t\t\t\t<\",(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\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\t\t\t\tLorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t\t\t\t\t\tsint dicta quas explicabo rem quisquam consectetur aperiam facere\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t\t\t\t\t\ttemporibus aut. Voluptatibus minus nesciunt qui voluptas fugiat\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"\t\t\t\t\t\tvoluptate repudiandae error asperiores.\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:[\"\t\t\t\t\t\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-add\":!0,\"data-diff-line-number\":\"19\",children:[\"\t\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"a\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-add\":!0,\"data-diff-line-number\":\"20\",children:[\"\t\t\t\t\t\t\",(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:\"#\"}),'\"',`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-add\":!0,\"data-diff-line-number\":\"21\",children:[\"\t\t\t\t\t\t\",(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 inline-block rounded bg-black px-4 py-2 text-sm font-medium text-white\"}),'\"',`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-add\":!0,\"data-diff-line-number\":\"22\",children:[\"\t\t\t\t\t>\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-add\":!0,\"data-diff-line-number\":\"23\",children:[\"\t\t\t\t\t\tLearn more\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-add\":!0,\"data-diff-line-number\":\"24\",children:[\"\t\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"25\",children:[\"\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"26\",children:[\"\t\t\t\t<\",(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:\"mt-6 grid gap-6 sm:mt-8 sm:grid-cols-2 sm:gap-8\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"27\",children:[\"\t\t\t\t\t<\",(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 rounded bg-gray-100 px-8 py-12\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"28\",children:[\"\t\t\t\t\t\t<\",(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-sm font-medium uppercase tracking-widest text-black/60\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:[\"\t\t\t\t\t\t\tConversion rate\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[\"\t\t\t\t\t\t<\",(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-4xl font-black text-black sm:text-6xl\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:[\"\t\t\t\t\t\t\t9.86%\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-add\":!0,\"data-diff-line-number\":\"33\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-add\":!0,\"data-diff-line-number\":\"34\",children:[\"\t\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"35\",children:[\"\t\t\t\t\t<\",(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 rounded bg-gray-100 px-8 py-12\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"36\",children:[\"\t\t\t\t\t\t<\",(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-sm font-medium uppercase tracking-widest text-black/60\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"37\",children:[\"\t\t\t\t\t\t\tcustomers\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"38\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"39\",children:[\"\t\t\t\t\t\t<\",(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-4xl font-black text-black sm:text-6xl\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"40\",children:[\"\t\t\t\t\t\t\t1M+\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"41\",children:[\"\t\t\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"42\",children:[\"\t\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-add\":!0,\"data-diff-line-number\":\"43\",children:[\"\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"44\",children:[\"\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-diff-line-number\":\"45\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-diff-line-number\":\"46\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-diff-line-number\":\"47\",children:[\"}\",`\n`]})]})}),(0,a.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,a.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/App.tsx\",line:1,children:(0,a.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.problem.design-implementation/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)(l,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.solution.design-implementation/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)(r,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,a.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.solution.design-implementation/src/App.tsx\",syncTo:{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.problem.design-implementation/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)(r,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,a.jsx)(l,{file:\"/myapp/workshop-content/exercises/01.figma-to-tailwind/01.solution.design-implementation/src/App.tsx\",line:1,children:(0,a.jsx)(\"span\",{title:\"01.figma-to-tailwind/01.solution.design-implementation/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(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(b,{...n})}):b(n)}function d(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(w);})();\n;return Component;"]