(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[95627],{34603:(e,l,r)=>{"use strict";r.d(l,{A:()=>s});let s=(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"}]])},95627:(e,l,r)=>{"use strict";r.r(l),r.d(l,{default:()=>C});var s=r(87687),o=r(52751),a=r(90785),t=r(59341),c=r(7660),i=r(53740),n=r(34603),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=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"})]})]})]})]})}},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:()=>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=95627.6e2058587c037993.js.map