(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4516],{84516:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return f}});var n=i(22678),a=i(48564),o=i(2267),r=i(18007),l=i(53304),s=i(85893),c=i(93967),h=i.n(c),u=i(67294),d=i(70131),p=i(17531),m=i.n(p),f=function(e){(0,r._)(InteractiveEmojiBelt,e);var t=(0,l._)(InteractiveEmojiBelt);function InteractiveEmojiBelt(e){var i;return(0,a._)(this,InteractiveEmojiBelt),(i=t.call(this,e)).handleClick=function(e){i.emoji=e.target.innerText;for(var t=i.amount[Math.floor(Math.random()*i.amount.length)],a=0;a<t;a++)i.createParticle(e);requestAnimationFrame(i.loop.bind((0,n._)(i)))},i.ftux=function(){var e;if(null===(e=window)||void 0===e?void 0:e.matchMedia("(prefers-reduced-motion: no-preference)").matches){i.emoji="\uD83D\uDE0D";for(var t=0;t<5;t++)i.createParticle(event)}requestAnimationFrame(i.loop.bind((0,n._)(i)))},i.particlesRef=u.createRef(),i.heartEmojiRef=u.createRef(),i.particles=[],i.height=document.documentElement.clientHeight,i.sizes=[35,45,55],i.amount=[3,4,5],i.emoji="",i.handleClick=i.handleClick.bind((0,n._)(i)),i.ftux=i.ftux.bind((0,n._)(i)),i.loop(),i}return(0,o._)(InteractiveEmojiBelt,[{key:"loop",value:function(){this.updateParticles(),this.particles.length?requestAnimationFrame(this.loop.bind(this)):cancelAnimationFrame(this.loop.bind(this))}},{key:"createParticle",value:function(e){var t=this.sizes[Math.floor(Math.random()*this.sizes.length)],i=360*Math.random(),n=-t/2+200,a=e?e.target.getBoundingClientRect().x-this.particlesRef.current.getBoundingClientRect().x+16-t/2:this.heartEmojiRef.current.getBoundingClientRect().x-this.particlesRef.current.getBoundingClientRect().x+16-t/2,o=document.createElement("span");o.innerHTML=this.emoji,o.classList.add("absolute","leading-none"),o.setAttribute("style","\n        font-size: ".concat(t,"px;\n        top: ").concat(n,"px;\n        left: ").concat(a,"px;\n        transform: rotate(").concat(i,"deg);\n      ")),this.particlesRef.current.appendChild(o),this.particles.push({element:o,size:t,speedHorz:5*Math.random(),speedUp:30*Math.random(),spinVal:i,spinSpeed:10*Math.random()*(.5>=Math.random()?-1:1),top:n,left:a,direction:.5>=Math.random()?-1:1})}},{key:"updateParticles",value:function(){var e=this;this.particles.forEach(function(t){t.left=t.left-t.speedHorz*t.direction,t.top=t.top-t.speedUp/2.5,t.speedUp=Math.min(t.size,t.speedUp-1),t.spinVal=t.spinVal+t.spinSpeed,t.top>=e.height+t.size&&(e.particles=e.particles.filter(function(e){return e!==t}),t.element.remove()),t.element.setAttribute("style","\n          top: ".concat(t.top,"px;\n          left: ").concat(t.left,"px;\n          font-size: ").concat(t.size,"px;\n          transform:rotate(").concat(t.spinVal,"deg);\n        "))})}},{key:"render",value:function(){return(0,s.jsxs)(d.df,{as:"div",onChange:this.ftux,threshold:1,triggerOnce:!0,children:[(0,s.jsxs)("div",{className:"flex gap-[.5em]",children:[(0,s.jsx)("button",{className:h()(m().emojiButton,"thd-focus-thick"),onClick:this.handleClick,type:"button",children:(0,s.jsx)("span",{"aria-label":"Face with tears of joy emoji",role:"img",children:"\uD83D\uDE02"})}),(0,s.jsx)("button",{className:h()(m().emojiButton,"thd-focus-thick"),onClick:this.handleClick,type:"button",children:(0,s.jsx)("span",{"aria-label":"Smiling Face With Heart-Shaped Eyes emoji",ref:this.heartEmojiRef,role:"img",children:"\uD83D\uDE0D"})}),(0,s.jsx)("button",{className:h()(m().emojiButton,"thd-focus-thick"),onClick:this.handleClick,type:"button",children:(0,s.jsx)("span",{"aria-label":"Face with open mouth emoji",role:"img",children:"\uD83D\uDE2E"})}),(0,s.jsx)("button",{className:h()(m().emojiButton,"thd-focus-thick"),onClick:this.handleClick,type:"button",children:(0,s.jsx)("span",{"aria-label":"Raising hands emoji",role:"img",children:"\uD83D\uDE4C"})}),(0,s.jsx)("button",{className:h()(m().emojiButton,"thd-focus-thick"),onClick:this.handleClick,type:"button",children:(0,s.jsx)("span",{"aria-label":"Thumbs up emoji",role:"img",children:"\uD83D\uDC4D"})}),(0,s.jsx)("button",{className:h()(m().emojiButton,"thd-focus-thick"),onClick:this.handleClick,type:"button",children:(0,s.jsx)("span",{"aria-label":"Thumbs down emoji",role:"img",children:"\uD83D\uDC4E"})})]}),(0,s.jsx)("div",{className:m().particlesWrapper,id:"particles",ref:this.particlesRef})]})}}]),InteractiveEmojiBelt}(u.Component)},17531:function(e){e.exports={emojiButton:"InteractiveEmojiBelt_emojiButton__LtB__",particlesWrapper:"InteractiveEmojiBelt_particlesWrapper__wHRvQ"}}}]);