(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3239],{447:(e,l,r)=>{"use strict";r.d(l,{A:()=>s});let s=(0,r(61831).A)("RotateCcw",[["path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"1357e3"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}]])},3239:(e,l,r)=>{"use strict";r.r(l),r.d(l,{default:()=>C});var s=r(95751),o=r(88655),a=r(9637),t=r(22419),c=r(42520),i=r(63832),n=r(447),d=r(5100),u=r(97820),p=r(24847),_=r.n(p);let h=[{label:"red",value:"hsl(348deg 100% 60%)"},{label:"yellow",value:"hsl(50deg 100% 55%)"},{label:"blue",value:"hsl(235deg 100% 65%)"}],C=function(){let e=o.useId(),[l,r]=o.useState("idle"),[p,C]=o.useState(0);o.useEffect(()=>{if("playing"!==l)return;let e=window.setInterval(()=>{C(e=>e+1)},1e3);return()=>{window.clearInterval(e)}},[l]);let x=h[p%h.length];return(0,s.jsxs)(u.A,{as:"section",className:_().wrapper,children:[(0,s.jsx)("ul",{className:_().colorsWrapper,children:h.map((l,r)=>{let o=l.value===x.value;return(0,s.jsxs)("li",{className:_().color,children:[o&&(0,s.jsx)(t.P.div,{layoutId:"".concat(e,"-selected-color-outline"),className:_().selectedColorOutline}),(0,s.jsx)("div",{className:(0,a.A)(_().colorBox,o&&_().selectedColorBox),style:{backgroundColor:l.value},children:(0,s.jsx)(d.A,{children:l.label})})]},r)})}),(0,s.jsxs)("div",{className:_().timeWrapper,children:[(0,s.jsxs)("dl",{className:_().timeDisplay,children:[(0,s.jsx)("dt",{children:"Time Elapsed"}),(0,s.jsx)("dd",{children:p})]}),(0,s.jsxs)("div",{className:_().actions,children:[(0,s.jsxs)("button",{onClick:()=>{"playing"===l?r("idle"):(r("playing"),C(p+1))},children:["playing"===l?(0,s.jsx)(c.A,{}):(0,s.jsx)(i.A,{}),(0,s.jsx)(d.A,{children:"playing"===l?"Pause":"Play"})]}),(0,s.jsxs)("button",{onClick:()=>{r("idle"),C(0)},children:[(0,s.jsx)(n.A,{}),(0,s.jsx)(d.A,{children:"Reset"})]})]})]})]})}},24847:e=>{e.exports={wrapper:"CircularColorsDemo_wrapper__L6qji",colorsWrapper:"CircularColorsDemo_colorsWrapper__c_B2_",color:"CircularColorsDemo_color__6SiuI",colorBox:"CircularColorsDemo_colorBox__hXayD",selectedColorBox:"CircularColorsDemo_selectedColorBox__cwOBk",selectedColorOutline:"CircularColorsDemo_selectedColorOutline__MznJe",timeDisplay:"CircularColorsDemo_timeDisplay__53pQd",actions:"CircularColorsDemo_actions__8_oUr"}},9637:(e,l,r)=>{"use strict";r.d(l,{A:()=>s});let s=function(){for(var e,l,r=0,s="",o=arguments.length;r<o;r++)(e=arguments[r])&&(l=function e(l){var r,s,o="";if("string"==typeof l||"number"==typeof l)o+=l;else if("object"==typeof l){if(Array.isArray(l)){var a=l.length;for(r=0;r<a;r++)l[r]&&(s=e(l[r]))&&(o&&(o+=" "),o+=s)}else for(s in l)l[s]&&(o&&(o+=" "),o+=s)}return o}(e))&&(s&&(s+=" "),s+=l);return s}}}]);
//# sourceMappingURL=3239.c57a7adeef04ac5f.js.map