1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[930],{1067:(e,t,l)=>{"use strict";l.d(t,{A:()=>d});var a=l(91238),s=l(49062),r=l(31564);async function n(e,t,l,a){let{purchase:s}=await (0,r.d)({email:e,couponId:t,productIds:l?[l]:[],sendEmail:!1});s&&!s.error?(await fetch("/api/auth/session?update"),a({status:"success",redeemedPurchase:s})):a({status:"failed",error:s.message})}var i=l(39439),o=l(64351);let d=e=>{let{userEmail:t,bulkCouponId:l,onSuccess:r,disabled:d,productId:c,children:u}=e,[h,p]=s.useState(!1);return(0,a.jsx)(i.Button,{"data-self-redeem-button":"",isLoading:h,disabled:d||!t,onClick:()=>{t&&(p(!0),n(t,l,c,e=>{"success"===e.status?r(e.redeemedPurchase):(console.log(e.error),e.error.startsWith("already-purchased-")?o.Ay.error("You have already redeemed a seat for yourself. Please contact support if you are having trouble accessing it."):o.Ay.error("We were unable to redeem a seat for this account. If the issue persists, please reach out to support.")),p(!1)}))},children:u||"Claim one seat for yourself"})}},16150:(e,t,l)=>{"use strict";l.d(t,{T:()=>n});var a=l(91238),s=l(49062),r=l(47633);let n=e=>{let{handlePlay:t,canShowVideo:l,muxPlayerRef:n}=e;return{p:e=>{let{children:i}=e,o=s.Children.toArray(i).map((e,s)=>{if("string"==typeof e){let i=e.match(/(\d+:\d+)/);if(i){let o=i[1],d=e.split(i[0])[0],c=e.split(i[0])[1];return(0,a.jsxs)("span",{children:[d.replace("[",""),l?(0,a.jsx)("button",{"data-timestamp":"",className:"after:content-[' '] inline-block underline after:inline-block",onClick:()=>{n.current&&(n.current.currentTime=(0,r.D8)(o),t(),window.scrollTo({top:0}))},children:o}):o,c.replace("]","")]},s)}}return e});return(0,a.jsx)("p",{children:o})}}}},47633:(e,t,l)=>{"use strict";t.D8=function(e){for(var t=e.split(":"),l=0,a=1;t.length>0;)l+=a*parseInt(t.pop(),10),a*=60;return l};l(33202)},63623:(e,t,l)=>{"use strict";l.d(t,{E:()=>c});var a=l(91238);l(49062);var s=l(52234),r=l(47633),n=l(5545),i=l(51503),o=l(16150),d=l(77564);let c=e=>{let{transcript:t,withTitle:l=!0,className:c,canShowVideo:u=!1}=e,{handlePlay:h,canShowVideo:p,muxPlayerRef:m}=(0,i.fK)(),x=(0,o.T)({handlePlay:h,canShowVideo:u||p,muxPlayerRef:m});return t?(0,a.jsxs)("div",{"data-video-transcript":"",children:[l&&(0,a.jsx)("h2",{"data-title":"",children:"Transcript"}),(0,a.jsx)("div",{"data-transcript":"",className:(0,d.cn)(c),children:"string"==typeof t?(0,a.jsx)(n.$,{components:x,children:t}):(0,a.jsx)(s.RK,{value:t,components:{marks:{timestamp:e=>{let{value:t}=e,{timestamp:l}=t;return p?(0,a.jsx)("button",{"data-timestamp":"",onClick:()=>{p&&m.current&&(m.current.currentTime=(0,r.D8)(l),h(),window.scrollTo({top:80}))},children:l}):l}}}})})]}):null}},70930:(e,t,l)=>{"use strict";l.d(t,{A:()=>eV});var a=l(91238),s=l(49062),r=l(48979),n=l(51503),i=l(68057),o=l(11230),d=l.n(o),c=({condition:e,fallback:t,children:l,...a})=>e?s.createElement(s.Suspense,{fallback:t,...a},l):s.createElement(s.Fragment,null,t),u=s.lazy(()=>l.e(1500).then(l.bind(l,51500))),h=e=>{let{style:t,className:l,onIntersection:a,placeholder:r}=e,n=s.useRef(null),i=((e,t)=>
1{let[l,a]=(0,s.useState)(!1);return(0,s.useEffect)(()=>{if("function"==typeof IntersectionObserver){let l=new IntersectionObserver(([e])=>{a(e.isIntersecting)},t);return e.current&&l.observe(e.current),()=>{l.disconnect()}}},[e,t]),l})(n);return(0,s.useEffect)(()=>{i&&a&&a()},[i,a]),s.createElement(s.Fragment,null,s.createElement("mux-player",{ref:n,"data-mux-player-react-lazy-placeholder":!0,placeholder:null!=r?r:"",style:{"--mux-player-react-lazy-placeholder":r?`url('${r}');`:"",...t},className:l||"",nohotkeys:!0,"aria-hidden":!0,tabIndex:-1},s.createElement("div",{"data-mux-player-react-lazy-placeholder-overlay":!0})),s.createElement("style",null,` 2 mux-player[data-mux-player-react-lazy-placeholder] { 3 aspect-ratio: 16/9; 4 display: block; 5 background-color: var(--media-background-color, #000); 6 width: 100%; 7 position: relative; 8 background-image: var(--mux-player-react-lazy-placeholder); 9 background-repeat: no-repeat; 10 background-size: var(--media-object-fit, contain); 11 background-position: var(--media-object-position, 50% 50%); 12 --controls: none; 13 --controls-backdrop-color: rgba(0, 0, 0, 0.6); 14 } 15 mux-player [data-mux-player-react-lazy-placeholder-overlay] { 16 position: absolute; 17 inset: 0; 18 background-color: var(--controls-backdrop-color); 19 } 20 `))},p={VIEWPORT:"viewport"},m=s.forwardRef((e,t)=>{let{loading:l=p.VIEWPORT,...a}=e,r=(()=>{let[e,t]=(0,s.useState)(!1);return(0,s.useEffect)(()=>{"undefined"!=typeof window&&t(!0)},[]),e})(),[n,i]=(0,s.useState)(()=>l!==p.VIEWPORT);return s.createElement(c,{condition:r&&n,fallback:s.createElement(h,{style:a.style,className:a.className,placeholder:a.placeholder,onIntersection:()=>i(!0)})},s.createElement(u,{...a,ref:t}))}),x=l(88456),g=l(87210),v=l(73258),j=l(39439),y=l(45734),f=l(5545),b=l(52793),w=l.n(b),k=l(9236),N=l.n(k),T=l(1342),C=l(37873),_=l(2099),S=l(52358);let I=(0,l(58859).UU)({projectId:"i1a93n76",dataset:"production",useCdn:!0,apiVersion:"2021-10-19"});var A=l(52234),R=l(95434),L=l(47315),E=l.n(L),P=l(64811),F=l.n(P),Q=l(90667),z=l(65221),$=l(88645),D=l(1067),K=l(4162),O=l(19982),M=l(7618),W=l(95178),B=l(33248),U=l.n(B),q=l(89186),V=l(88866),Z=l(63689),Y=l(31833),G=l(7611),H=l(51769),J=l(23727);let X=e=>{let{children:t,dismissable:l=!0,...s}=e,{setDisplayOverlay:r}=(0,n.fK)(),{lesson:i,module:o}=(0,g.Qf)();return(0,a.jsxs)("div",{"data-video-overlay-wrapper":"",id:"video-overlay",children:[l&&(0,a.jsxs)(G.$n,{"data-dismiss":"",variant:"ghost",onClick:()=>{(0,_.u)("dismissed video overlay",{lesson:i.slug,module:o.slug.current,moduleType:o.moduleType,lessonType:i._type}),r(!1)},children:["Dismiss ",(0,a.jsx)(T.A,{"aria-hidden":"true"})]}),(0,a.jsx)("div",{"data-content":"",...s,children:t})]})},ee=e=>{let{children:t}=e,{module:l,lesson:s}=(0,g.Qf)(),{subscriber:r,loadingSubscriber:n}=(0,$.TZ)(),{cta:i}=l,o="true"===J.env.NEXT_PUBLIC_TUTORIALS_EMAIL_NOT_REQUIRED,d=(null==i?void 0:i.expiresAt)&&new Date(i.expiresAt),{data:c,status:u}=(0,z.I)(["exercise-free-tutorial",s.slug,l.slug.current],async()=>I.fetch("\n *[_type == 'cta' && slug.current == \"subscribe\"][0]{\n body\n }\n ").then(e=>e.body),{enabled:o});return!i&&!o||d&&d<new Date&&!o?t:(0,a.jsxs)("div",{"data-video-overlay-with-cta":"",children:[(0,a.jsx)("div",{"data-content":"",children:t}),!o||n||(null==r?void 0:r.id)?(null==i?void 0:i.body)?(0,a.jsx)("div",{"data-cta":"",children:"string"==typeof i.body?(0,a.jsx)(f.$,{children:i.body}):(0,a.jsx)(A.RK,{value:i.body,components:(0,q.R)({loadingIndicator:(0,a.jsx)(V.A,{})})})}):null:(0,a.jsxs)("div",{"data-cta":"",children:["loading"===u&&(0,a.jsx)(V.A,{}),c?(0,a.jsx)(a.Fragment,{children:"string"==typeof c?(0,a.jsx)(f.$,{children:c}):(0,a.jsx)(A.RK,{value:c,components:(0,q.R)({loadingIndicator:(0,a.jsx)(V.A,{})})})}):(0,a.jsx)("p",{children:(0,a.jsx)(O.A,{children:"Be the first to know when the next course is released."})}),(0,a.jsx)(ed,{actionLabel:"Subscribe"})]})]})},et=s.forwardRef((e,t)=>
20{let{setCompletedLessonCount:l,nextSection:s,nextExercise:r,completedLessonCount:i}=e,o=R.g.progress.add.useMutation(),{nextExercise:d,path:c,handlePlay:u,handleContinue:h,nextPathBuilder:p}=(0,n.fK)(),{lesson:m,module:x,section:v}=(0,g.Qf)(),j=(0,y.useRouter)(),f=(0,Y.hD)(),b=null==f?void 0:f.lessons.find(e=>e.slug===j.query.lesson&&e.lessonCompleted),w=o.isLoading||o.isSuccess;return(0,a.jsx)(G.$n,{"data-action":"continue",ref:t,onMouseOver:()=>{w||(null==f?void 0:f.moduleCompleted)||b||l(e=>e+1)},onMouseOut:()=>{w||(null==f?void 0:f.moduleCompleted)||b||l(e=>e-1)},disabled:w,onClick:()=>{(0,_.u)("clicked complete",{lesson:j.query.lesson,module:x.slug.current,location:"exercise",moduleType:x.moduleType,lessonType:m._type}),b?h({router:j,module:x,nextExercise:r||d,handlePlay:u,path:c,section:s||v,nextPathBuilder:p}):o.mutate({lessonSlug:j.query.lesson},{onSettled:(e,t,l,a)=>{h({router:j,module:x,nextExercise:r||d,handlePlay:u,path:c,section:s||v,nextPathBuilder:p})}})},children:o.isLoading||o.isSuccess?(0,a.jsx)(V.A,{className:"w-7 h-7 inline-block"}):(0,a.jsx)("span",{children:b?"Continue â":"Complete & Continue â"})})}),el=()=>{let{nextExercise:e,handlePlay:t,setDisplayOverlay:l}=(0,n.fK)(),{lesson:r,module:i}=(0,g.Qf)(),o=(0,y.useRouter)(),{image:d}=i,c=(0,Y.hD)(),[u,h]=s.useState((null==c?void 0:c.completedLessonCount)||0),p=(0,K.useSession)();return(0,a.jsx)(X,{"data-video-overlay":"default",children:(0,a.jsxs)(ee,{children:[d&&(0,a.jsx)(N(),{"data-image":"",src:d,alt:"","aria-hidden":"true",width:220,height:220,priority:!0}),(0,a.jsx)("p",{"data-title":"",children:(0,a.jsxs)(O.A,{children:[(0,a.jsx)("span",{"data-byline":"",children:"Up next:"})," ",null==e?void 0:e.title]})}),c&&"authenticated"===p.status&&(0,a.jsxs)("div",{"data-progress":"",children:[(0,a.jsx)(G.ke,{value:u/(null==c?void 0:c.lessonCount)*100,className:"h-2"}),(0,a.jsxs)("div",{"data-lessons-completed":"",children:[u," / ",null==c?void 0:c.lessonCount," lessons completed"]})]}),(0,a.jsxs)("div",{"data-actions":"",children:[(0,a.jsx)(et,{completedLessonCount:u,setCompletedLessonCount:h}),(0,a.jsxs)("div",{children:[(0,a.jsxs)(G.$n,{"data-action":"replay",variant:"ghost",onClick:()=>{(0,_.u)("clicked replay",{lesson:r.slug,module:i.slug.current,location:"exercise",moduleType:i.moduleType,lessonType:r._type}),l(!1),t()},children:[(0,a.jsx)("span",{"data-icon":"","aria-hidden":"true",children:"âº"})," ",(0,a.jsx)("span",{children:"Replay Video"})]}),"solution"===r._type&&(0,a.jsxs)(E(),{"data-action":"try-again",href:o.asPath.replace("solution","exercise"),children:[(0,a.jsx)(C.A,{"data-icon":"","aria-hidden":"true"}),"Back to Exercise"]})]})]}),"unauthenticated"===p.status&&(0,a.jsxs)("div",{"data-login":!0,children:[(0,a.jsx)(E(),{href:"/login",children:"Log in"})," to track your progress."]})]})})},ea=()=>{var e;let{path:t,handlePlay:l,handlePlayFromBeginning:s,setDisplayOverlay:r,moduleCertificateRenderer:i}=(0,n.fK)(),{module:o,section:d,lesson:c}=(0,g.Qf)(),u=(0,y.useRouter)(),h=R.g.progress.add.useMutation(),p="".concat("https://www.epicweb.dev").concat(t,"/").concat(o.slug.current),m="".concat(o.title," ").concat(o.moduleType," by @").concat((null==o||null==(e=o.author)?void 0:e.twitterHandle)||"kentcdodds"),x=(0,Z.a)({module:o,currentSection:d}),v=(0,Y.hD)(),f=(0,K.useSession)(),b=null==v?void 0:v.moduleCompleted,w=!!(i&&i());return(0,a.jsx)(X,{"data-video-overlay":"finished",children:(0,a.jsxs)(ee,{children:[(0,a.jsxs)("h2",{children:[(0,a.jsx)("span",{children:b?"Congratulations!":""})," ",(0,a.jsx)(O.A,{children:x?"You've finished all currently available lessons in this workshop. We'll keep you posted when next section is released!":b?"You've finished \"".concat(o.title,'" ').concat(o.moduleType,"."):'This was the last lesson from "'.concat(o.title,'" ').concat(o.moduleType,". ").concat(w?"Finish all lessons to earn a certificate!":"")})]}),v&&"authenticated"===f.status&&(0,a.jsx)(a.Fragment,{children:b&&i?i():(0,a.jsxs)("div",{"data-progress":"",children:[(0,a.jsx)(G.ke,{value:v.percentComplete,className:"h-2"}),(0,a.jsxs)("div",{"data-lessons-completed":"",children:[v.completedLessonCount," /"," ",null==v?void 0:v.lessonCount," lessons completed"]})]})}),(0,a.jsx)("p",{"data-title":"",children:"Share with your friends"}),(0,a.jsxs)("div",{"data-share-actions":"",children:[(0,a.jsx)(j.Twitter,{link:p,message:m,"data-action":"share",children:"Twitter"}),(0,a.jsx)(j.LinkedIn,{link:p,message:m,"data-action":"share",children:"LinkedIn"})]}),(0,a.jsxs)("div",{"data-actions":"",children:[(0,a.jsxs)(G.$n,{"data-action":"replay",variant:"ghost",onClick:()=>{(0,_.u)("clicked replay",{lesson:c.slug,module:o.slug.current,location:"exercise",moduleType:
20o.moduleType,lessonType:c._type}),r(!1),l()},children:[(0,a.jsx)("span",{"aria-hidden":"true",children:"âº"})," ",(0,a.jsx)("span",{children:"Replay"})]}),(0,a.jsx)(G.$n,{"data-action":"restart",variant:"ghost",onClick:()=>{(0,_.u)("clicked complete",{lesson:u.query.lesson,module:o.slug.current,location:"exercise",moduleType:o.moduleType,lessonType:c._type}),h.mutate({lessonSlug:u.query.lesson},{onSettled:(e,a,r,n)=>{s({router:u,module:o,section:d,path:t,handlePlay:l})}})},children:"Play from beginning"})]})]})})},es=e=>{let{product:t}=e,{lesson:l,module:s}=(0,g.Qf)(),{videoResourceId:r}=(0,x.Pu)(),i="".concat((0,Q.$)(),"/api/video-thumb?videoResourceId=").concat(r),{refetchAbility:o,ability:d}=(0,n.fK)(),{data:c}=(0,z.I)(["exercise-free-tutorial",l.slug,s.slug.current],async()=>I.fetch("\n *[_type == 'cta' && slug.current == \"".concat("tutorial"===s.moduleType?"free-tutorial":"paid-workshop",'"][0]{\n body\n }\n ')).then(e=>e.body),{enabled:"tutorial"===s.moduleType}),u=d.can("view","Team");return(0,a.jsxs)("div",{"data-video-overlay":"blocked",id:"video-overlay",children:[(0,a.jsx)(N(),{"data-thumbnail":"",src:i,fill:!0,alt:"","aria-hidden":"true",priority:!0}),(null==s?void 0:s.moduleType)==="tutorial"?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{"data-subscribe":"",children:(0,a.jsxs)("div",{"data-col":"1",children:[(null==s?void 0:s.image)&&(0,a.jsx)(N(),{"data-image":"",src:s.image,width:190,height:190,alt:s.title}),(0,a.jsx)("h2",{"data-title":"",children:(0,a.jsxs)(O.A,{children:['Level up with "',s.title,'"']})}),(0,a.jsxs)("h3",{"data-subtitle":"",children:["Access all lessons in this ",s.moduleType,"."]}),(0,a.jsx)(ed,{}),(0,a.jsx)("p",{"data-nospam":"",children:"No spam, unsubscribe at any time."})]})}),(0,a.jsx)("div",{"data-col":"2",children:(0,a.jsxs)("div",{"data-markdown":"",children:[(0,a.jsx)("h3",{"data-title":"",children:"This is a free tutorial"}),c&&(0,a.jsx)(A.RK,{value:c})]})})]}):t?(0,a.jsx)("div",{"data-buy":"",children:u?(0,a.jsx)(en,{product:t}):(0,a.jsx)(er,{product:t.upgradableTo?t.upgradableTo:t})}):null]})},er=e=>{var t;let{product:l}=e,{ability:s}=(0,n.fK)(),{module:r}=(0,g.Qf)(),i=(null==l||null==(t=l.image)?void 0:t.url)||(null==l?void 0:l.image)||(null==r?void 0:r.image),o=s.can("view","RegionRestriction"),d=(null==l?void 0:l.modules)&&l.modules.filter(e=>{let{moduleType:t}=e;return"workshop"===t||"tutorial"===t}),c=(null==l?void 0:l.modules)&&l.modules.filter(e=>{let{moduleType:t}=e;return"bonus"===t}),{merchantCoupon:u}=(0,W.tb)(),h=(null==c?void 0:c.length)&&!u;return l?(0,a.jsxs)("div",{"data-pricing":"",children:[(0,a.jsxs)("div",{"data-col":"1",children:[i&&(0,a.jsx)(N(),{"data-image":"",src:i,width:200,height:200,alt:"","aria-hidden":"true"}),(0,a.jsx)("h2",{"data-title":"",children:(0,a.jsx)(O.A,{children:o?"Your License is Region Restricted":"Level up your ".concat(r.title)})}),(0,a.jsx)("h3",{"data-description":"",children:(0,a.jsx)(O.A,{children:o?"Your license is restricted to a specific region. You can upgrade to an unrestricted license to view this lesson anywhere.":l.description?(0,a.jsx)(f.$,{"data-markdown":"",children:l.description}):"Get access to all lessons in this workshop."})}),d&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{"data-includes":"",children:["Includes ",d.length>1&&"all"," ",d.length," ",U()("workshop",d.length),h?(0,a.jsxs)("span",{"data-bonus":"",children:[" ","+ ",c.length>1?c.length:""," ",U()("bonus",c.length),":"]}):":"]}),(0,a.jsx)("div",{"data-modules":"",children:(0,a.jsxs)(G.Bc,{delayDuration:0,children:[d.map(e=>{var t,l,s;return(0,a.jsxs)(G.m_,{children:[(0,a.jsx)(G.k$,{asChild:!0,children:(0,a.jsx)(E(),{"data-type":e.moduleType,href:"/".concat("tutorial"===e.moduleType?"tutorials":"workshops","/").concat("string"==typeof e.slug?e.slug:e.slug.current),target:"_blank",children:(null==e||null==(t=e.image)?void 0:t.url)||(null==e?void 0:e.image)?(0,a.jsx)(N(),{src:null!=(s=null==(l=e.image)?void 0:l.url)?s:e.image,alt:"".concat(e.title," workshop"),width:60,height:60}):e.title},e.slug)}),(0,a.jsx)(H.ZI,{className:"text-sm bg-background",children:e.title})]})}),h?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{children:"+"}),c.map(e=>{var t,l,s,r,n,i;return"published"===e.state?(0,a.jsxs)(G.m_,{children:[(0,a.jsx)(G.k$,{asChild:!0,children:(0,a.jsx)(E(),{"data-type":e.moduleType,href:"/bonuses/".concat(e.slug),target:"_blank",children:((null==(t=e.image)?void 0:t.url)||e.image)&&(0,a.jsx)("img",{src:null!=(n=null==(l=e.image)?void 0:l.url)?n:e.image,alt:"".concat(e.title," workshop"),width:60,height:60})},e.slug)}),(0,a.jsx)(H.ZI,{className:"text-sm bg-background",children:e.title})]},e.slug):(0,a.jsxs)(G.m_,{children:[(0,a.jsx)(G.k$,{asChild:!0,children:((null==(s=e.image)?void 0:s.url)||e.image)&&(0,a.jsx)("img",{"data-type":e.moduleType,src:null!=(i=null==(r=e.image)?void 0:r.url)?i:e.image,alt:"".concat(e.title," workshop"),width:60,height:60})}),(0,a.jsx)(H.ZI,{className:"text-sm bg-background",children:e.title})]},e.slug)})]}):null]})})]})]}),(0,a.jsx)("div",{"data-col":"2",children:l&&(0,a.jsx)(a.Fragment,{children:(null==l?void 0:l.active)||(null==l?void 0:l.state)==="active"?(0,a.jsx)(M.vl,{allowPurchase:(null==l?void 0:l.active)||(null==l?void 0:l.state)==="active",product:l,canViewRegionRestriction:o,cancelUrl:window.location.toString()}):(0,a.jsxs)("div",{className:"prose",children:[(0,a.jsx)("h2",{children:"Coming Soon!"}),(0,a.jsx)("p",{children:"This product is currently unavailable."})]})})})]}):null},en=e=>{var t,l,s,r,i,o,d;let{product:c}=e,{refetchAbility:u,inviteTeamPagePath:h="/team"}=(0,n.fK)(),{module:p}=(0,g.Qf)(),{data:m}=(0,K.useSession)(),{data:x,status:v}=R.g.purchases.getPurchaseByProductId.useQuery({productId:null==c?void 0:c.productId});return(0,a.jsxs)("div",{"data-team-purchase":"",children:[(null==p?void 0:p.image)&&(0,a.jsx)(N(),{"data-image":"",src:p.image,width:220,height:220,alt:p.title}),(0,a.jsxs)("h2",{"data-title":"",children:["Level up your ",p.title]}),(0,a.jsx)("h3",{"data-subtitle":"",children:(0,a.jsxs)(O.A,{children:["You've purchased a team license with"," ",null==x||null==(l=x.purchase)||null==(t=l.bulkCoupon)?void 0:t.maxUses," seats and haven't claimed a seat for yourself yet."]})}),(null==x||null==(r=x.purchase)||null==(s=r.bulkCoupon)?void 0:s.id)&&!(null==x?void 0:x.existingPurchase)&&(0,a.jsx)(D.A,{disabled:!!(null==x?void 0:x.existingPurchase),userEmail:null==m||null==(i=m.user)?void 0:i.email,bulkCouponId:null==x||null==(d=x.purchase)||null==(o=d.bulkCoupon)?void 0:o.id,productId:null==c?void 0:c.productId,onSuccess:e=>{e&&u()},children:"Claim one seat for yourself and start learning"}),(0,a.jsx)(E(),{href:h,"data-invite-team":"",children:"Invite your team"})]})},ei=e=>{let{loadingIndicator:t=null}
20=e,{videoResourceId:l}=(0,x.Pu)(),s="".concat("https://www.epicweb.dev","/api/video-thumb?videoResourceId=").concat(l);return(0,a.jsx)(X,{"data-video-overlay":"loading",dismissable:!1,children:(0,a.jsx)("div",{className:"w-full h-full",children:(0,a.jsxs)(a.Fragment,{children:[l&&(0,a.jsx)("img",{"data-image":"",src:s,className:"object-cover h-full w-full",alt:""}),t]})})})},eo=()=>{let{nextSection:e,handlePlay:t,setDisplayOverlay:l}=(0,n.fK)(),{lesson:r,module:i}=(0,g.Qf)(),o=(0,y.useRouter)(),{image:d}=i,c=F()(null==e?void 0:e.lessons),u=(0,Y.hD)(),[h,p]=s.useState((null==u?void 0:u.completedLessonCount)||0),m=(0,K.useSession)();return(0,a.jsx)(X,{"data-video-overlay":"default",children:(0,a.jsxs)(ee,{children:[d&&(0,a.jsx)(N(),{"data-image":"",src:d,alt:"","aria-hidden":"true",width:220,height:220,priority:!0}),(0,a.jsx)("p",{"data-title":"",children:(0,a.jsxs)(O.A,{children:[(0,a.jsx)("span",{"data-byline":"",children:"Up next:"})," ",null==e?void 0:e.title]})}),u&&"authenticated"===m.status&&(0,a.jsxs)("div",{"data-progress":"",children:[(0,a.jsx)(G.ke,{value:h/(null==u?void 0:u.lessonCount)*100,className:"h-2"}),(0,a.jsxs)("div",{"data-lessons-completed":"",children:[h," / ",null==u?void 0:u.lessonCount," lessons completed"]})]}),(0,a.jsxs)("div",{"data-actions":"",children:[(0,a.jsx)(et,{nextSection:e,nextExercise:c,setCompletedLessonCount:p,completedLessonCount:h}),(0,a.jsx)("div",{children:"solution"===r._type&&(0,a.jsxs)(E(),{"data-action":"try-again",href:o.asPath.replace("solution","exercise"),children:[(0,a.jsx)(C.A,{"data-icon":"","aria-hidden":"true"}),"Back to Exercise"]})})]}),"unauthenticated"===m.status&&(0,a.jsxs)("div",{"data-login":!0,children:[(0,a.jsx)(E(),{href:"/login",children:"Log in"})," to track your progress."]})]})})},ed=e=>{let{actionLabel:t="Continue Watching"}=e,{lesson:l,module:s}=(0,g.Qf)(),{refetch:r}=(0,$.TZ)(),n=async(e,t)=>{e&&(t&&(0,S.do)(t),r(),(0,_.u)("subscribed to email list",{lesson:l.slug,module:s.slug.current,location:"exercise",moduleType:s.moduleType,lessonType:l._type}),(0,$.p)())},i={["started_".concat(w()(s.slug.current),"_").concat(s.moduleType).toLowerCase()]:new Date().toISOString().slice(0,10)};return(0,a.jsx)(v.$,{successMessage:"Thanks! You're being redirected...",subscribeApiURL:"/api/skill/subscribe/convertkit",actionLabel:t,fields:i,onSuccess:(e,t)=>n(e,t)})},ec=s.forwardRef((e,t)=>{let{product:l,exerciseOverlayRenderer:s=()=>(0,a.jsx)(el,{}),defaultOverlayRenderer:r=()=>(0,a.jsx)(el,{}),blockedOverlayRenderer:i=()=>(0,a.jsx)(es,{product:l}),finishedSectionOverlayRenderer:o=()=>(0,a.jsx)(eo,{}),loadingIndicator:c}=e,{lesson:u}=(0,g.Qf)(),h="exercise"===u._type,{videoResource:p,loadingVideoResource:v}=(0,x.Pu)(),{muxPlayerProps:j,displayOverlay:y,nextExercise:f,nextExerciseStatus:b,loadingUserStatus:w,nextSection:k,canShowVideo:N}=(0,n.fK)();return(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(W.X_,{children:y?(0,a.jsx)(a.Fragment,{children:"loading"===b?(0,a.jsx)(ei,{loadingIndicator:c}):(0,a.jsx)(a.Fragment,{children:f?(0,a.jsx)(a.Fragment,{children:h?N?s():i():r()}):k?o():(0,a.jsx)(ea,{})})}):(0,a.jsx)("div",{className:d()("relative flex w-full items-center justify-center",{hidden:y}),children:N&&(null==p?void 0:p.muxPlaybackId)?(0,a.jsx)(m,{ref:t,...j,playbackId:null==p?void 0:p.muxPlaybackId,metadata:{video_title:u.title}}):(0,a.jsx)(a.Fragment,{children:w||v?(0,a.jsx)(ei,{loadingIndicator:c}):i()})})})})});var eu=l(87288),eh=l.n(eu),ep=l(25229),em=l(77564);let ex=e=>{let{productName:t,loadingIndicator:l,loadingRenderer:s=e=>(0,a.jsxs)("div",{role:"status",children:[Array(6).fill(0).map((e,t)=>(0,a.jsx)("div",{},t)),(0,a.jsxs)("span",{className:"sr-only",children:["Loading ",e._type]})]}),proCtaRenderer:r=(e,t)=>(0,a.jsxs)("p",{children:["This ",e._type," is part of ",(0,a.jsx)(E(),{href:"/buy",children:t})," ","and can be unlocked immediately after purchase. Already purchased?"," ",(0,a.jsx)(E(),{href:"/login",children:"Log in here."})]}),lessonMDXBody:i,lessonBodyPreview:o,mdxComponents:d={},className:c}=e,{canShowVideo:u,loadingUserStatus:h}=(0,n.fK)(),{lesson:p,module:m}=(0,g.Qf)(),{body:x}=p,v=u?x:eh()(x,3),j=u?i:o;return(0,a.jsxs)("div",{"data-lesson-description":"",children:[(0,a.jsx)("div",{"data-content":"",className:(0,em.cn)(c),"data-content-visible":u.toString(),children:i?(0,a.jsx)(ep.A,{contents:j,components:d}):(0,a.jsx)(A.RK,{value:v,components:(0,q.R)({loadingIndicator:l})})}),!u&&h&&s(p),!u&&!h&&(0,a.jsx)("div",{"data-cta":"",children:"workshop"===m.moduleType?r(p,t):(0,a.jsxs)("p",{children:["Subscribe to unlock this ",p._type,"."]})})]})},eg=()=>{let{lesson:e}=(0,g.Qf)(),{title:t,_type:l}=e;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{"data-lesson-badge":l,children:"exercise"!==l?l:"Problem"}),(0,a.jsx)("h1",{"data-lesson-title":"",children:(0,a.jsx)(O.A,{children:t})})]})};var ev=l(63623),ej=l(29712),ey=l(96629),ef=l(64351);let eb=e=>{let{className:t,children:l}=e;return(0,a.jsx)("div",{"data-lesson-completion-toggle":"",children:l?(0,a.jsx)("form",{className:(0,em.cn)(t),children:l}):(0,a.jsxs)("form",{children:[(0,a.jsx)("p",{"data-title":"",children:"Finished this lesson?"}),(0,a.jsx)(ew,{children:"Mark as complete"})]})})},ew=e=>{let{children:t,className:l}=e,{module:r}=(0,g.Qf)(),n=(0,y.useRouter)().query.lesson,{data:i,status:o,isFetching:d}=R.g.moduleProgress.bySlug.useQuery({slug:r.slug.current}),c=R.g.progress.toggle.useMutation(),u=null==i?void 0:i.lessons.filter(e=>e.lessonCompleted),h=!!(null==u?void 0:u.find(e=>{let{id:t,slug:l}=e;return l===n})),[p,m]=s.useState(h||!1);return s.useEffect(()=>{"success"===o&&m(h)},[o,h]),(0,a.jsxs)("label",{className:l,"data-fetching":d.toString(),children:[(0,a.jsx)("span",{"data-label":"",children:t||"Mark as completed"}),(0,a.jsx)(ey.bL,{disabled:d,onClick:()=>(m(!p),c.mutate({lessonSlug:n},{onError:e=>{m(e=>!e),ef.Ay.error("Error setting lesson progress."),console.debug(e.message)}})),checked:p,children:(0,a.jsx)(ey.zi,{})})]})};var ek=l(74893),eN=l(72051),eT=l(26700),eC=l(42880);let e_=e=>{var t,l,r,n,i,o;let{module:d}=e,[c,u]=s.useState(),h=s.useRef(null),p=[{time:22,value:{href:"/get-started?module=".concat(d.slug.current),label:"Get Started"},duration:8},{time:33,value:{href:"/faq",label:"FAQ",duration:5}},{time:43,value:{}},{time:60,value:{href:(null==d||null==(l=d.workshopApp)||null==(t=l.external)?void 0:t.url)?null==d||null==(n=d.workshopApp)||null==(r=n.external)?void 0:r.url:"",label:"".concat(d.title," (Deployed Workshop App)")}},{time:90,value:{}},{time:117,value:{href:(null==(i=d.github)?void 0:i.repo)?"".concat(d.github.repo,"?tab=readme-ov-file#setup"):"https://github.com/epicweb-dev/full-stack-foundations?tab=readme-ov-file#setup",label:"Setup"}},{time:137,value:{}}];return(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)("div",{className:"relative aspect-video h-full w-full max-w-xl",children:[c&&c.href&&(0,a.jsx)(eN.P.div,{transition:{duration:.3},animate:c?{y:[-10,0],opacity:[0,1]}:{y:[0,-10],opacity:[1,0]},className:"absolute right-3 top-3 z-10",children:(0,a.jsx)(G.$n,{asChild:!0,className:"w-full gap-1 bg-gray-950 text-sm font-semibold text-white shadow-lg shadow-black/30 transition hover:bg-gray-800 hover:underline",size:"sm",children:(0,a.jsxs)(E(),{href:c.href,target:"_blank",children:[c.label," ",(0,a.jsx)(eT.A,{className:"h-4 w-4"})]})})}),(0,a.jsx)(eC.Ay,{onLoadedData:()=>{var e;null==(e=h.current)||e.addCuePoints(p)},onCuePointChange:()=>{var e,t;u(null==(t=h.current)||null==(e=t.activeCuePoint)?void 0:e.value)},metadata:{video_title:"".concat(d.title," - Get Started Video")},ref:h,startTime:19,playbackId:"xSI7201jJf6lumgc9Kxwd5C65Rg8kLa94CcYzifZaL4U",accentColor:"#3b82f6",className:"h-full w-full rounded",poster:function(e){return e?e.includes("kent")?"https://res.cloudinary.com/epic-web/image/upload/v1697795383/workshop-app-video-poster.jpg":e.includes("simon")?"https://res.cloudinary.com/epic-web/image/upload/v1723540723/workshop-app/workshop-app-video-poster-simon.jpg":e.includes("artem")?"https://res.cloudinary.com/epic-web/image/upload/v1723540723/workshop-app/workshop-app-video-poster-artem.jpg":"https://res.cloudinary.com/epic-web/image/upload/v1723540723/workshop-app/workshop-app-video-poster-generic.jpg":"https://res.cloudinary.com/epic-web/image/upload/v1723540723/workshop-app/workshop-app-video-poster-generic.jpg"}(null==d||null==(o=d.instructor)?void 0:o.slug)})]})})},eS=()=>{var e,t,l;let{module:s,lesson:r}=(0,g.Qf)(),{github:n}=s,{data:i,status:o}=ej.i.lessonResources.byLessonSlug.useQuery({slug:r.slug}),d=null==i||null==(e=i.workshopApp)?void 0:e.path,{data:c,status:u}=ej.i.moduleResources.byModuleSlug.useQuery({slug:s.slug.current,moduleType:s.moduleType}),h=c&&c.workshopApp;return(0,a.jsxs)("div",{className:"flex aspect-video flex-col items-center justify-center gap-16 bg-gray-950 py-0 pb-8 text-white dark:bg-black/20 sm:py-10 sm:pb-10",children:[(0,a.jsxs)("div",{className:"flex w-full flex-col items-center gap-8 p-5",children:[(0,a.jsx)(e_,{module:s}),(0,a.jsxs)("div",{className:"flex max-w-lg flex-col items-center space-y-5 text-center",children:[(0,a.jsx)("p",{className:"font-text text-2xl font-bold sm:text-3xl",children:"Stop! \uD83D\uDE05 This is not a video course."}),(0,a.jsxs)("p",{className:"text-lg text-gray-300",children:["This ",s.moduleType," is intended to be worked through by completing hands on exercises in your local development environment. It's not meant for passive consumption."]}),(0,a.jsxs)("div",{className:"flex w-full max-w-xs flex-col space-y-3 pt-2",children:[(0,a.jsx)(G.$n,{asChild:!0,className:"w-full font-semibold",size:"lg",onClick:()=>{(0,_.u)("clicked get started",{lesson:r.slug,module:s.slug.current,location:"exercise",moduleType:s.moduleType,lessonType:r._type})},children:(0,a.jsx)(E(),{target:"_blank",href:"/get-started?module=".concat(s.slug.current),children:"Get Started"})}),d&&(0,a.jsxs)("div",{className:"flex w-full flex-col gap-2",children:[(0,a.jsx)(G.$n,{asChild:!0,variant:"secondary",className:"gap-2",size:"lg",children:(0,a.jsxs)("a",{href:"http://localhost:".concat(null==h||null==(t=h.localhost)?void 0:t.port).concat(d),target:"_blank",onClick:()=>{(0,_.u)("clicked open in workshop app",{lesson:r.slug,module:s.slug.current,location:"exercise",moduleType:s.moduleType,lessonType:r._type})},rel:"noreferrer",children:["Open in Workshop App ",(0,a.jsx)(eT.A,{className:"w-4"})]})}),(null==h||null==(l=h.localhost)?void 0:l.port)&&(0,a.jsxs)("p",{className:"text-sm opacity-60",children:["Must be running on localhost:",h.localhost.port]})]})]}),(null==n?void 0:n.repo)&&(0,a.jsx)("div",{className:"mx-auto flex w-full max-w-lg flex-col space-y-5 pt-4"})]})]}),(0,a.jsx)("div",{className:"flex items-center justify-center gap-3 pt-2",children:(0,a.jsx)(eI,{})})]})},eI=()=>{let{nextExercise:e,path:t,handlePlay:l,muxPlayerRef:s,handleContinue:r}=(0,n.fK)(),{lesson:i,module:o,section:d}=(0,g.Qf)(),c=(0,y.useRouter)();return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(G.$n,{variant:"outline",className:"flex gap-1",onClick:()=>{(0,_.u)("clicked replay",{lesson:i.slug,module:o.slug.current,location:"exercise",moduleType:
20o.moduleType,lessonType:i._type}),c.asPath.endsWith("/exercise")&&(c.push(c.asPath.replace("/exercise","")),s.current&&(s.current.currentTime=0)),l()},children:[(0,a.jsx)("span",{"aria-hidden":"true",children:"âº"})," Replay"]}),e&&(0,a.jsxs)(G.$n,{variant:"secondary",className:"flex gap-1",onClick:()=>{(0,_.u)("clicked continue to solution",{lesson:i.slug,module:null==o?void 0:o.slug.current,location:"exercise",moduleType:o.moduleType,lessonType:i._type}),r({router:c,module:o,nextExercise:e,handlePlay:l,path:t,section:d})},children:["Solution ",(0,a.jsx)("span",{"aria-hidden":"true",children:"â"})]})]})};var eA=l(92338),eR=l(36218);let eL=e=>{let{exercise:t,module:l,loadingIndicator:s,url:r,file:i,repository:o,className:d}=e,{canShowVideo:c,loadingUserStatus:u}=(0,n.fK)();return u?(0,a.jsxs)("div",{"data-github-link":"",role:"status",className:(0,em.cn)(d),children:[s,(0,a.jsx)("span",{className:"sr-only",children:"Loading GitHub link"})]}):c&&r?(0,a.jsx)("div",{"data-github-link":"",className:(0,em.cn)(d),children:(0,a.jsx)("div",{"data-content":"",children:(0,a.jsxs)("a",{onClick:()=>{(0,_.u)("clicked github code link",{lesson:t.slug,module:l.slug.current,moduleType:l.moduleType,lessonType:t._type})},href:r,target:"_blank",rel:"noopener noreferrer",children:[(0,a.jsx)(eR.I,{name:"Github"}),(0,a.jsxs)("div",{children:[o&&(0,a.jsx)("p",{"data-repo":"",children:o}),i&&(0,a.jsxs)("p",{"data-file":"",children:[(0,a.jsx)("span",{children:"/"}),i]})]})]})})}):null};var eE=l(46298),eP=l(77341),eF=l.n(eP),eQ=l(15606),ez=l(58845),e$=l(24345);function eD(e){var t;let{children:l,...r}=e,{"data-buttons":n,"data-filename":i,"data-fullpath":o,"data-nocopy":d,"data-sep":c}=r;return(0,a.jsxs)("div",{className:"group prose relative max-w-none sm:prose-lg",children:[(0,a.jsxs)("div",{className:"absolute right-0 top-2 z-50 m-2 flex items-baseline justify-end gap-4 opacity-0 transition duration-300 ease-in-out focus-within:opacity-100 group-hover:opacity-100",children:[n?(0,a.jsx)(eK,{...r}):null,void 0===d?function(){let[e,t]=s.useState(!1);return s.useEffect(()=>{if(e){let e=setTimeout(()=>t(!1),1500);return()=>clearTimeout(e)}},[e]),(0,a.jsx)("button",{className:(0,eQ.cn)("border-border hover:bg-foreground
20/20 active:bg-foreground/30 text-foreground box-content block rounded border-2 px-2 py-0.5 font-mono text-xs font-semibold outline-none transition duration-300 ease-in-out","w-12 uppercase"),onClick:e=>{var l,a,s;t(!0);let r=(null==(s=e.currentTarget.parentElement)||null==(a=s.parentElement)||null==(l=a.querySelector("pre"))?void 0:l.textContent)||"";navigator.clipboard.writeText(r)},children:e?"copied":"copy"})}():null]}),(0,a.jsx)("pre",{...r,className:(0,eQ.cn)("scrollbar-thumb-scrollbar scrollbar-thin scrollbar-track-foreground/5 scrollbar-thumb-foreground/10",null!=(t=r.className)?t:""),...function(){if(o&&c)if(!i||i.includes(".."))return{"data-filename":function(e,t,l){let[,a]=e.replace(/\\|\//g,null!=t?t:"/").split("".concat("exercises").concat(t));return a}(o,c)};else return{"data-filename":i.replace(/\//g,c)}}(),children:l})]})}function eK(e){let{"data-buttons":t,"data-filename":l,"data-fullpath":s,"data-sep":r,"data-start":n,"data-type":i}=e;if("other"===i||!t||!l||!s)return null;let o=t.split(",");return["problem","solution","playground"].filter(e=>o.includes(e)),(0,a.jsx)("span",{className:"line-through opacity-50",title:"Only supported in Workshop App",children:"Open in editor"})}var eO=l(62497);let eM=e=>{let{className:t,description:l="For the best experience, we highly recommend you use the Epic Web workshop application on your local machine. It allows you to authenticate and work through the material as intended at your own pace.",moduleSlug:s}=e;return(0,a.jsx)("div",{className:(0,eQ.cn)("w-full",t),children:(0,a.jsx)("div",{className:"rounded bg-foreground
20/5 p-5 sm:bg-transparent sm:p-0",children:(0,a.jsxs)("div",{className:"flex flex-col items-start text-left",children:[(0,a.jsxs)("div",{className:"flex items-center gap-4 text-lg font-bold leading-tight sm:text-xl",children:[(0,a.jsx)(eW,{})," ",(0,a.jsx)(E(),{href:"/get-started".concat(s?"?module=".concat(s):""),target:"_blank",className:"hover:underline",children:"Run in Workshop App"})]}),(0,a.jsx)("p",{className:"pt-3 text-sm opacity-75 sm:text-base",children:l}),(0,a.jsx)(G.$n,{asChild:!0,variant:"outline",className:"relative mt-5 text-sm font-semibold shadow-sm transition",size:"sm",children:(0,a.jsx)(E(),{href:"/get-started".concat(s?"?module=".concat(s):""),target:"_blank",children:(0,a.jsx)("span",{className:"drop-shadow-md",children:"Get Started"})})})]})})})},eW=()=>(0,a.jsx)("div",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg border bg-foreground/5 bg-gradient-to-tr from-sky-500 to-indigo-500 shadow-soft-sm",children:(0,a.jsxs)("svg",{className:"h-4 w-4",viewBox:"0 0 14 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,a.jsx)("path",{d:"M6.7 5.3L1.7 0.3C1.3 -0.1 0.7 -0.1 0.3 0.3C-0.1 0.7 -0.1 1.3 0.3 1.7L4.6 6L0.3 10.3C-0.1 10.7 -0.1 11.3 0.3 11.7C0.5 11.9 0.7 12 1 12C1.3 12 1.5 11.9 1.7 11.7L6.7 6.7C7.1 6.3 7.1 5.7 6.7 5.3Z",fill:"white"}),(0,a.jsx)("path",{d:"M14 10H7V12H14V10Z",fill:"white"})]})});var eB=l(45293),eU=l(91051),eq=l(48527);let eV=e=>{var t;let{workshopApp:l,transcript:o,lessonBodySerialized:d,lessonBodyPreviewSerialized:c}=e,u=s.useRef(null),h=(0,y.useRouter)(),{lesson:p,section:m,module:v}=(0,g.Qf)(),{videoResourceId:j,videoResource:f}=(0,x.Pu)(),{title:b,description:w}=p,k=(0,e$.U)({title:b,type:"video",image:(null==f?void 0:f.poster)?f.poster:"".concat("https://www.epicweb.dev","/api/video-thumb?videoResourceId=").concat(j)}),{ogImage:N,description:T}=v,C="".concat(b),_=w||T,S="/".concat(U()(v.moduleType)),{data:I}=(0,K.useSession)(),A=ej.i.progress.add.useMutation(),{data:R,status:L}=ej.i.lessonResources.byLessonSlug.useQuery({slug:p.slug}),E=m?m.lessons&&m.lessons.length:v.lessons&&v.lessons.length,{ability:P,abilityRulesStatus:F}=(()=>{let{data:e,status:t}=ej.i.modules.rules.useQuery({moduleSlug:v.slug.current,moduleType:v.moduleType,lessonSlug:p.slug,isSolution:"solution"===p._type,sectionSlug:null==m?void 0:m.slug});return{ability:(0,eB.g)(e||[]),abilityRulesStatus:t}})(),z=P.can("view","Content"),$=("solution"===p._type||"explainer"===p._type||"lesson"===p._type||"interview"===p._type)&&I,D=z&&("workshop"===v.moduleType||l),{isShowingSiteBanner:M}=(0,eU.Z)();return(0,a.jsx)(n.Nw,{muxPlayerRef:u,exerciseSlug:h.query.lesson,path:S,onModuleEnded:async()=>{A.mutate({lessonSlug:h.query.lesson})},inviteTeamPagePath:"/products/".concat(null==(t=v.product)?void 0:t.slug),children:(0,a.jsxs)(r.A,{meta:{title:C,ogImage:{...k||{url:N}},description:_},navigationClassName:"w-full max-w-none",enableScrollAnimation:!1,globalBannerClassName:"absolute",navigationContainerClassName:"relative",className:"pt-0 sm:pt-0",children:[(0,a.jsx)(i.CourseJsonLd,{courseName:b,description:_||"",provider:{name:"".concat("Kent"," ").concat("C. Dodds"),type:"Person",url:(0,ez.B)()?document.location.href:"https://www.epicweb.dev"}}),(0,a.jsx)(i.ArticleJsonLd,{url:"".concat("https://www.epicweb.dev","/").concat(v.slug.current,"/").concat(p.slug),title:p.title,images:["".concat((0,Q.$)(),"/api/video-thumb?videoResourceId=").concat(j)],datePublished:p._updatedAt||new Date().toISOString(),authorName:"".concat("Kent"," ").concat("C. Dodds"),description:_||""}),(0,a.jsxs)("div",{className:"relative flex flex-grow flex-col lg:flex-row 2xl:h-[calc(100vh-49px)] 2xl:overflow-y-hidden",children:[(0,a.jsx)("div",{className:"relative z-40 hidden w-full lg:block lg:max-w-[330px]",children:(0,a.jsx)(eZ,{module:v,path:S})}),(0,a.jsxs)("main",{className:"relative mx-auto w-full max-w-[1480px] items-start border-gray-200 dark:border-gray-900 2xl:flex 2xl:max-w-none",children:[(0,a.jsxs)("div",{className:"flex flex-col border-gray-200 scrollbar-thin scrollbar-thumb-foreground
20/10 dark:border-gray-800 2xl:relative 2xl:h-[calc(100vh)] 2xl:w-full 2xl:overflow-y-scroll 2xl:border-r",children:[(0,a.jsx)("div",{className:"dark bg-gray-900",children:(0,a.jsx)(ec,{product:null==v?void 0:v.product,ref:u,exerciseOverlayRenderer:()=>(0,a.jsx)(eS,{}),loadingIndicator:(0,a.jsx)(eA.A,{})})}),(0,a.jsxs)("details",{"data-mobile-module-lesson-list":"",children:[(0,a.jsxs)("summary",{children:[(0,a.jsxs)(O.A,{children:[m?"Current section: ".concat(m.title):v.title," ",m?null:eF()(v.moduleType)," "]}),(0,a.jsxs)("span",{"data-byline":"",children:[E||0," exercises"]})]}),(0,a.jsx)(eZ,{className:"block lg:hidden",scrollAreaClassName:"h-[400px]",module:v,path:S})]}),(0,a.jsx)("div",{className:"relative hidden flex-grow border-t border-gray-200 dark:border-gray-900 2xl:block",children:(0,a.jsx)(ev.E,{transcript:o})})]}),(0,a.jsxs)("article",{className:"relative flex-shrink-0 2xl:w-full 2xl:max-w-2xl",children:[(0,a.jsxs)("div",{className:"relative z-10 mx-auto max-w-4xl px-5 py-5 scrollbar-thin scrollbar-thumb-foreground
20/10 lg:py-6 2xl:h-[calc(100vh)] 2xl:w-full 2xl:max-w-2xl 2xl:overflow-y-scroll",children:[(0,a.jsx)(eg,{}),(null==R?void 0:R.github)&&(0,a.jsx)(eL,{exercise:p,loadingIndicator:(0,a.jsx)(eA.A,{}),module:v,url:R.github,repository:"Code"}),D&&!$&&(0,a.jsx)(eM,{moduleSlug:v.slug.current||"",className:"mt-3 rounded-lg border p-5"}),(d||c)&&(0,a.jsx)(ex,{mdxComponents:{pre:eD,Callout:e=>{let{type:t,children:l}=e;return(0,a.jsx)("blockquote",{className:"!border-l-7 rounded-md !border-primary bg-foreground/5 !px-6 py-5 !not-italic prose-p:!mb-0 [&>p]:first-of-type:before:content-['']",children:l})},InlineFile:e=>{let{type:t,file:l}=e;return t||l||null},LinkToApp:e=>{let{to:t}=e;return t},CodeFile:e=>e.file,DiffLink:e=>e.children,Link:e=>e.children},lessonMDXBody:d,lessonBodyPreview:c,productName:v.title,loadingIndicator:(0,a.jsx)(eA.A,{})}),$&&(0,a.jsx)(eb,{}),D&&$&&(0,a.jsx)(eM,{description:"The best way to experience ".concat(v.title," workshop is in accompanying Workshop App."),className:"mt-5 rounded-lg border p-5"})]}),(0,a.jsxs)("div",{className:"relative z-10 block flex-grow 2xl:hidden",children:[(0,a.jsx)(ev.E,{transcript:o}),"tutorial"===v.moduleType&&(0,a.jsx)(eq.d,{resourceIdOrSlug:v._id})]})]})]})]})]})})},eZ=e=>{var t,l;let{module:r,className:n,scrollAreaClassName:i,path:o}=e,d=s.useRef(null),{data:c,status:u}=ej.i.moduleProgress.bySlug.useQuery({slug:r.slug.current}),[h,{height:p}]=(0,ek.A)();return(0,a.jsxs)("div",{className:"sticky top-0 border-r",children:[(0,a.jsx)("div",{ref:h,children:(0,a.jsxs)("div",{className:"relative z-10 flex items-center space-x-3 border-b bg-white px-2 py-3 dark:border-white/5 dark:bg-foreground
20/10 dark:shadow-xl dark:shadow-black/20",children:[r.image&&(0,a.jsx)(N(),{src:r.image,width:75,height:75,alt:r.title}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h3",{className:"text-lg font-semibold leading-tight",children:(0,a.jsx)(E(),{href:"".concat(o,"/").concat(r.slug.current),children:r.title})}),(null==r||null==(t=r.github)?void 0:t.repo)&&(0,a.jsx)(G.$n,{asChild:!0,size:"sm",className:"mt-2 inline-flex h-auto items-center space-x-1 px-1.5 py-1 text-xs font-semibold uppercase leading-none",children:(0,a.jsxs)(E(),{href:(null==r||null==(l=r.github)?void 0:l.repo)+"#setup",target:"_blank",children:[(0,a.jsx)(eR.I,{name:"Github",size:"16"}),(0,a.jsx)("span",{children:"tutorial"===r.moduleType?"Code":"Workshop App"})]})})]})]})}),(0,a.jsxs)(eO.I8.bL,{className:"relative flex flex-col",style:i?{}:{height:"calc(100vh - ".concat(p,"px)")},children:[(0,a.jsx)("div",{className:"pointer-events-none absolute bottom-0 left-0 z-10 h-24 w-full bg-gradient-to-t from-background to-transparent","aria-hidden":!0}),(0,a.jsx)(eO.I8.LM,{className:(0,eQ.cn)("flex-grow pb-[48px]",n,i),ref:d,children:(0,a.jsxs)(eE.bL,{module:r,numberFormatter:(e,t,l)=>0===t||t===l-1?"".concat(e+1):"".concat(t,".").concat(e),resourcesRenderer:e=>(0,a.jsx)(a.Fragment,{children:("exercise"===e||"solution"===e)&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(eE.FW,{className:"text-sm font-medium [&>a[data-active='true']]:border-orange-400 [&>a[data-active='true']]:bg-white/5 [&>a]:flex [&>a]:border-l-2 [&>a]:border-transparent",children:"Problem"}),(0,a.jsx)(eE.FW,{path:"exercise",className:"text-sm font-medium [&>a[data-active='true']]:border-indigo-400 [&>a[data-active='true']]:bg-purple-500 [&>a[data-active='true']]:bg-white/5 [&>a]:flex [&>a]:border-l-2 [&>a]:border-transparent",children:"Exercise"}),(0,a.jsx)(eE.FW,{path:"solution",className:"text-sm font-medium [&>a[data-active='true']]:border-cyan-400 [&>a[data-active='true']]:bg-teal-500 [&>a[data-active='true']]:bg-white/5 [&>a]:flex [&>a]:border-l-2 [&>a]:border-transparent",children:"Solution"})]})}),children:[(0,a.jsx)(eE.Z_,{className:"space-y-0 [&_[data-state]]:animate-none",children:"loading"===u?(0,a.jsx)(G.EA,{className:"h-14 rounded-none bg-gradient-to-br from-gray-200 to-white opacity-100 dark:from-gray-700 dark:to-gray-800 dark:opacity-40"}):(0,a.jsx)(eE.wn,{className:"border-b font-semibold leading-tight transition data-[state]:rounded-none data-[state='closed']:opacity-75 data-[state='closed']:hover:opacity-100 [&>[data-check-icon]]:w-3.5 [&>[data-check-icon]]:text-emerald-500 [&>[data-check-icon]]:opacity-100 dark:[&>[data-check-icon]]:text-emerald-300 [&>[data-progress]]:h-[2px] [&>[data-progress]]:bg-emerald-500 dark:[&>[data-progress]]:bg-gray-700",children:(0,a.jsx)(eE.w6,{className:"py-0",children:(0,a.jsx)(eE.Nk,{className:'font-semibold transition before:hidden data-[active="true"]:bg-white data-[active="true"]:opacity-100 data-[active="true"]:shadow-lg data-[active="true"]:shadow-gray-500/10 dark:data-[active="true"]:bg-gray-800/60 dark:data-[active="true"]:shadow-black/10 [&_[data-check-icon]]:w-3.5 [&_[data-check-icon]]:text-emerald-500 dark:[&_[data-check-icon]]:text-emerald-300 [&_[data-item]:has(span)]:items-center [&_[data-item]>div]:leading-tight [&_[data-item]>div]:opacity-90 [&_[data-item]>div]:transition hover:[&_[data-item]>div]:opacity-100 [&_[data-item]]:min-h-[44px] [&_[data-item]]:items-center [&_[data-lock-icon]]:w-3.5 [&_[data-lock-icon]]:text-gray-400 dark:[&_[data-lock-icon]]:text-gray-500',scrollContainerRef:d,children:(0,a.jsx)(eE.EC,{})})})})}),(0,a.jsx)(eE.w6,{className:"py-0",children:(0,a.jsx)(eE.Nk,{className:'font-semibold transition before:hidden data-[active="true"]:bg-white data-[active="true"]:opacity-100 data-[active="true"]:shadow-lg data-[active="true"]:shadow-gray-500/10 dark:data-[active="true"]:bg-gray-800/60 dark:data-[active="true"]:shadow-black/10 [&_[data-check-icon]]:w-3.5 [&_[data-check-icon]]:text-blue-500 dark:[&_[data-check-icon]]:text-blue-300 [&_[data-item]:has(span)]:items-center [&_[data-item]>div]:leading-tight [&_[data-item]>div]:opacity-90 [&_[data-item]>div]:transition hover:[&_[data-item]>div]:opacity-100 [&_[data-item]]:min-h-[44px] [&_[data-item]]:items-center [&_[data-lock-icon]]:w-3.5 [&_[data-lock-icon]]:text-gray-400 dark:[&_[data-lock-icon]]:text-gray-500'})})]})}),(0,a.jsx)(G.$H,{}),(0,a.jsx)(eO.I8.OK,{})]})]})}},74893:(e,t,l)=>{"use strict";l.d(t,{A:()=>i});var a=l(49062),s=l(98159),r=s.Bd?a.useLayoutEffect:a.useEffect,n={x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0};let i=s.Bd&&void 0!==window.ResizeObserver?function(){var e=(0,a.useState)(null),t=e[0],l=e[1],s=(0,a.useState)(n),i=s[0],o=s[1],d=(0,a.useMemo)(function(){return new window.ResizeObserver(function(e){if(e[0]){var t=e[0].contentRect;
20o({x:t.x,y:t.y,width:t.width,height:t.height,top:t.top,left:t.left,bottom:t.bottom,right:t.right})}})},[]);return r(function(){if(t)return d.observe(t),function(){d.disconnect()}},[t]),[l,i]}:function(){return[s.lQ,n]}},77564:(e,t,l)=>{"use strict";l.d(t,{cn:()=>r});var a=l(96342),s=l(42433);function r(){for(var e=arguments.length,t=Array(e),l=0;l<e;l++)t[l]=arguments[l];return(0,s.Q)((0,a.$)(t))}},87288:(e,t,l)=>{var a=l(24813),s=l(80544);e.exports=function(e,t,l){return e&&e.length?a(e,0,(t=l||void 0===t?1:s(t))<0?0:t):[]}}}]); 21//# sourceMappingURL=930-134e6fc49c3fae59.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.