(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[72425],{72425:(e,l,r)=>{"use strict";r.r(l),r.d(l,{default:()=>C});var o=r(87687),s=r(52751),a=r(90785),t=r(59341),c=r(7660),i=r(53740);let n=(0,r(2651).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"}]]);var d=r(42432),u=r(71597),p=r(53555),_=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=s.useId(),[l,r]=s.useState("idle"),[p,C]=s.useState(0);s.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,o.jsxs)(u.A,{as:"section",className:_().wrapper,children:[(0,o.jsx)("ul",{className:_().colorsWrapper,children:h.map((l,r)=>{let s=l.value===x.value;return(0,o.jsxs)("li",{className:_().color,children:[s&&(0,o.jsx)(t.P.div,{layoutId:"".concat(e,"-selected-color-outline"),className:_().selectedColorOutline}),(0,o.jsx)("div",{className:(0,a.A)(_().colorBox,s&&_().selectedColorBox),style:{backgroundColor:l.value},children:(0,o.jsx)(d.A,{children:l.label})})]},r)})}),(0,o.jsxs)("div",{className:_().timeWrapper,children:[(0,o.jsxs)("dl",{className:_().timeDisplay,children:[(0,o.jsx)("dt",{children:"Time Elapsed"}),(0,o.jsx)("dd",{children:p})]}),(0,o.jsxs)("div",{className:_().actions,children:[(0,o.jsxs)("button",{onClick:()=>{"playing"===l?r("idle"):(r("playing"),C(p+1))},children:["playing"===l?(0,o.jsx)(c.A,{}):(0,o.jsx)(i.A,{}),(0,o.jsx)(d.A,{children:"playing"===l?"Pause":"Play"})]}),(0,o.jsxs)("button",{onClick:()=>{r("idle"),C(0)},children:[(0,o.jsx)(n,{}),(0,o.jsx)(d.A,{children:"Reset"})]})]})]})]})}},53555: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"}},90785:(e,l,r)=>{"use strict";r.d(l,{A:()=>o});let o=function(){for(var e,l,r=0,o="",s=arguments.length;r<s;r++)(e=arguments[r])&&(l=function e(l){var r,o,s="";if("string"==typeof l||"number"==typeof l)s+=l;else if("object"==typeof l){if(Array.isArray(l)){var a=l.length;for(r=0;r<a;r++)l[r]&&(o=e(l[r]))&&(s&&(s+=" "),s+=o)}else for(o in l)l[o]&&(s&&(s+=" "),s+=o)}return s}(e))&&(o&&(o+=" "),o+=l);return o}}}]);
//# sourceMappingURL=72425.a2ecc50fc6212ea3.js.map