https://coolhead.in/_next/static/chunks/pages/animation/stripetab-abdd42f2d340e14d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4347],{6937:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/animation/stripetab",function(){return n(5761)}])},6891:function(e,t,n){"use strict";n.d(t,{Z:function(){return SimpleLayout}});var i=n(5893);function SimpleLayout(e){let{children:t,className:n}=e;return(0,i.jsx)("div",{className:"container mx-auto h-screen w-screen px-4 py-4 "+n,children:t})}n(7294)},5761:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return StripeTab}});var i=n(5893),l=n(512),a=n(8506),s=n(3114),o=n(7294),u=n(6891);function StripeTab(){let[e,t]=(0,o.useState)(!1),[n,c]=(0,o.useState)(!0),[d,p]=(0,o.useState)(0),[h,f]=(0,o.useState)([]),x=(0,o.useRef)([]),m=(0,o.useMemo)(()=>[{label:"Overview"},{label:"Integrations"},{label:"Activity"},{label:"Domains"},{label:"Usage",hide:!0}],[]);(0,o.useEffect)(()=>{let e=m.map((e,t)=>{let n=x.current[t].getBoundingClientRect();return{w:n.width,offset:n.left-x.current[0].getBoundingClientRect().left}});f(e)},[m]);let getClipPath=e=>{if(0===h.length)return"";let{offset:t,w:n}=h[e];return"inset(4px calc(100% - (".concat(t+3.5,"px + ").concat(n,"px)) calc(100% - (0px + 32px)) ").concat(t+3.5,"px round 20px)")};return(0,i.jsx)(u.Z,{children:(0,i.jsxs)("div",{className:(0,l.Z)("min-h-96 my-4 flex w-full items-center justify-center rounded-xl border border-neutral-200 bg-neutral-100/25  dark:border-neutral-700/50 dark:bg-neutral-900"),children:[(0,i.jsx)("div",{className:(0,l.Z)("relative flex w-fit items-center rounded-full p-1"),children:m.map((e,t)=>(0,i.jsx)("button",{ref:e=>{x.current[t]=e},className:(0,l.Z)("z-10 rounded-full px-3 py-1 text-sm tracking-tight text-neutral-900 transition-colors hover:text-neutral-500 dark:text-neutral-600",e.hide&&"hidden sm:block"),onClick:()=>p(t),children:e.label},t))}),(0,i.jsx)(a.E.div,{style:{clipPath:n?getClipPath(d):"unset"},animate:{clipPath:n?getClipPath(d):"unset"},transition:{type:e?"tween":"spring",stiffness:300,damping:29,duration:e?2:.1},className:(0,l.Z)("[will-change: clip-path] bg-neutral-950 pointer-events-none absolute left-1/2 z-20 flex w-fit -translate-x-1/2 items-center p-1 dark:bg-neutral-50"),"aria-hidden":!0,children:m.map((e,t)=>(0,i.jsx)("span",{className:(0,l.Z)("dark:text-neutral-950 z-20 rounded-full px-3 py-1 text-sm tracking-tight text-neutral-50 transition-colors",e.hide&&"hidden sm:block"),"aria-hidden":!0,children:e.label},t))}),(0,i.jsxs)("div",{className:"absolute right-0 top-0 flex items-center gap-x-1 p-4",children:[(0,i.jsxs)(a.E.button,{className:"relative flex h-6 items-center justify-center rounded-full bg-neutral-200/50 text-xs text-neutral-500 transition-all duration-200 hover:bg-neutral-200 dark:bg-neutral-50/5 dark:hover:bg-neutral-50/10",onClick:()=>c(e=>!e),style:{width:n?108:118},children:[(0,i.jsx)("span",{className:"absolute left-0 ml-2",children:"clip-path:"})," ",n?(0,i.jsx)(a.E.span,{initial:{y:10,opacity:0},animate:{y:0,opacity:1},exit:{y:-10,opacity:0},className:"absolute right-0 mr-2",children:"active"},0):(0,i.jsx)(a.E.span,{initial:{y:10,opacity:0},animate:{y:0,opacity:1},exit:{y:-10,opacity:0},className:"absolute right-0 mr-2",children:"inactive"},1)]}),(0,i.jsx)("button",{className:"flex h-6 items-center justify-center overflow-hidden rounded-full bg-neutral-200 bg-neutral-200/50 text-xs text-neutral-500 transition-all duration-200 hover:bg-neutral-200 dark:bg-neutral-50/5 dark:hover:bg-neutral-50/10",onClick:()=>t(e=>!e),style:{width:e?48:32},children:(0,i.jsx)(s.M,{children:e?(0,i.jsx)(a.E.span,{initial:{x:10,opacity:0},animate:{x:0,opacity:1},exit:{x:-10,opacity:0},className:"absolute",children:"0.25x"},0):(0,i.jsx)(a.E.span,{initial:{x:10,opacity:0},animate:{x:0,opacity:1},exit:{x:-10,opacity:0},className:"absolute",children:"1x"},1)})})]})]})})}},512:function(e,t,n){"use strict";function clsx(){for(var e,t,n=0,i="",l=arguments.length;n<l;n++)(e=arguments[n])&&(t=function r(e){var t,n,i="";if("string"==typeof e||"number"==typeof e)i+=e;else if("object"==typeof e){if(Array.isArray(e)){var l=e.length;for(t=0;t<l;t++)e[t]&&(n=r(e[t]))&&(i&&(i+=" "),i+=n)}else for(n in e)e[n]&&(i&&(i+=" "),i+=n)}return i}(e))&&(i&&(i+=" "),i+=t);return i}n.d(t,{W:function(){return clsx}}),t.Z=clsx},3114:function(e,t,n){"use strict";n.d(t,{M:function(){return AnimatePresence}});var i=n(5893),l=n(7294),a=n(5364),s=n(6681),o=n(240),u=n(6014);let PopChildMeasure=class PopChildMeasure extends l.Component{getSnapshotBeforeUpdate(e){let t=this.props.childRef.current;if(t&&e.isPresent&&!this.props.isPresent){let e=this.props.sizeRef.current;e.height=t.offsetHeight||0,e.width=t.offsetWidth||0,e.top=t.offsetTop,e.left=t.offsetLeft}return null}componentDidUpdate(){}render(){return this.props.children}};function PopChild({children:e,isPresent:t}){let n=(0,l.useId)(),a=(0,l.useRef)(null),s=(0,l.useRef)({width:0,height:0,top:0,left:0}),{nonce:o}=(0,l.useContext)(u._);return(0,l.useInsertionEffect)(()=>{let{width:e,height:i,top:l,left:u}=s.current;if(t||!a.current||!e||!i)return;a.current.dataset.motionPopId=n;let c=document.createElement("style");return o&&(c.nonce=o),document.head.appendChild(c),c.sheet&&c.sheet.insertRule(`
2          [data-motion-pop-id="${n}"] {
3            position: absolute !important;
4            width: ${e}px !important;
5            height: ${i}px !important;
6            top: ${l}px !important;
7            left: ${u}px !important;
8          }
9        `),()=>{document.head.removeChild(c)}},[t]),(0,i.jsx)(PopChildMeasure,{isPresent:t,childRef:a,sizeRef:s,children:l.cloneElement(e,{ref:a})})}let PresenceChild=({children:e,initial:t,isPresent:n,onExitComplete:a,custom:u,presenceAffectsLayout:c,mode:d})=>{let p=(0,s.h)(newChildrenMap),h=(0,l.useId)(),f=(0,l.useCallback)(e=>

9{for(let t of(p.set(e,!0),p.values()))if(!t)return;a&&a()},[p,a]),x=(0,l.useMemo)(()=>({id:h,initial:t,isPresent:n,custom:u,onExitComplete:f,register:e=>(p.set(e,!1),()=>p.delete(e))}),c?[Math.random(),f]:[n,f]);return(0,l.useMemo)(()=>{p.forEach((e,t)=>p.set(t,!1))},[n]),l.useEffect(()=>{n||p.size||!a||a()},[n]),"popLayout"===d&&(e=(0,i.jsx)(PopChild,{isPresent:n,children:e})),(0,i.jsx)(o.O.Provider,{value:x,children:e})};function newChildrenMap(){return new Map}var c=n(5947);let getChildKey=e=>e.key||"";function onlyElements(e){let t=[];return l.Children.forEach(e,e=>{(0,l.isValidElement)(e)&&t.push(e)}),t}var d=n(8868);let AnimatePresence=({children:e,custom:t,initial:n=!0,onExitComplete:o,presenceAffectsLayout:u=!0,mode:p="sync",propagate:h=!1})=>{let[f,x]=(0,c.oO)(h),m=(0,l.useMemo)(()=>onlyElements(e),[e]),g=h&&!f?[]:m.map(getChildKey),y=(0,l.useRef)(!0),b=(0,l.useRef)(m),v=(0,s.h)(()=>new Map),[C,j]=(0,l.useState)(m),[w,E]=(0,l.useState)(m);(0,d.L)(()=>{y.current=!1,b.current=m;for(let e=0;e<w.length;e++){let t=getChildKey(w[e]);g.includes(t)?v.delete(t):!0!==v.get(t)&&v.set(t,!1)}},[w,g.length,g.join("-")]);let k=[];if(m!==C){let e=[...m];for(let t=0;t<w.length;t++){let n=w[t],i=getChildKey(n);g.includes(i)||(e.splice(t,0,n),k.push(n))}"wait"===p&&k.length&&(e=k),E(onlyElements(e)),j(m);return}let{forceRender:P}=(0,l.useContext)(a.p);return(0,i.jsx)(i.Fragment,{children:w.map(e=>{let l=getChildKey(e),a=(!h||!!f)&&(m===w||g.includes(l));return(0,i.jsx)(PresenceChild,{isPresent:a,initial:(!y.current||!!n)&&void 0,custom:a?void 0:t,presenceAffectsLayout:u,mode:p,onExitComplete:a?void 0:()=>{if(!v.has(l))return;v.set(l,!0);let e=!0;v.forEach(t=>{t||(e=!1)}),e&&(null==P||P(),E(b.current),h&&(null==x||x()),o&&o())},children:e},l)})})}}},function(e){e.O(0,[9177,8506,9774,2888,179],function(){return e(e.s=6937)}),_N_E=e.O()}]);