https://nyxui.com/_next/static/chunks/19427.eed454b0c250705f.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[15507,19427,37888],{1252:(A,s,e)=>{e.r(s),e.d(s,{default:()=>a});let a={src:"/_next/static/media/avatar3.7e892a61.avif",height:1254,width:1254,blurDataURL:"data:image/avif;base64,AAAAHGZ0eXBhdmlmAAAAAG1pZjFhdmlmbWlhZgAAANZtZXRhAAAAAAAAACFoZGxyAAAAAAAAAABwaWN0AAAAAAAAAAAAAAAAAAAAAA5waXRtAAAAAAABAAAAImlsb2MAAAAAREAAAQABAAAAAAD6AAEAAAAAAAAAPQAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAAVmlwcnAAAAA4aXBjbwAAAAxhdjFDgSACAAAAABRpc3BlAAAAAAAAAAgAAAAIAAAAEHBpeGkAAAAAAwgICAAAABZpcG1hAAAAAAAAAAEAAQOBAgMAAABFbWRhdBIACgg4CL9hAQ0GkDIvGAAKKKKEAO2+sPQ17+MjWVgnS/Vx7/UgGj6GmpHmLoRrUCVVzd01UqnZUbNfEMA=",blurWidth:8,blurHeight:8}},3657:(A,s,e)=>{e.d(s,{default:()=>t});var a=e(88068),l=e(15507);let c=[32,46,38,56,44,62,52,70,60,78,92];function t(){return(0,a.jsx)(l.ScaleContainer,{width:460,height:280,children:(0,a.jsxs)("div",{className:"k2d347f48",children:[(0,a.jsx)("div",{className:"ka9ce27b6",children:c.map((A,s)=>{let e=s===c.length-1;return(0,a.jsx)("div",{className:"w-full rounded-t-[4px] bg-gradient-to-t from-transparent ".concat(e?"to-[#e2632f]":"to-neutral-300 dark:to-neutral-600"),style:{height:"".concat(A,"%")}},s)})}),(0,a.jsxs)("div",{className:"kbb869b5b",children:[(0,a.jsx)("p",{className:"k6441d851",children:"Installs this month"}),(0,a.jsxs)("div",{className:"k68db9ba7",children:[(0,a.jsx)("span",{className:"k51119536",children:"48.2k"}),(0,a.jsx)("span",{className:"k70b6712c",style:{color:"#e2632f"},children:"+18%"})]})]}),(0,a.jsx)("div",{"aria-hidden":"true",className:"k82d21f5c"}),(0,a.jsx)("div",{"aria-hidden":"true",className:"kece54007"})]})})}},15507:(A,s,e)=>{e.r(s),e.d(s,{ScaleContainer:()=>l});var a=e(88068);function l(A){let{width:s,height:e,children:l}=A;return(0,a.jsx)("div",{className:"k932f0189",style:{containerType:"inline-size"},children:(0,a.jsx)("div",{className:"k80ab60ee",style:{maxWidth:s,aspectRatio:"".concat(s," / ").concat(e)},children:(0,a.jsx)("div",{className:"kb4ba8200",style:{width:s,height:e,transformOrigin:"top left",transform:"scale(min(1, tan(atan2(100cqw, ".concat(s,"px))))")},children:l})})})}},19427:(A,s,e)=>{e.r(s),e.d(s,{GridLineHorizontal:()=>b,GridLineVertical:()=>v,default:()=>y});var a=e(88068),l=e(17819),c=e(67457),t=e(49),n=e(26933),d=e(56174),i=e(64631),r=e(1252),h=e(62376);function x(){let A=[{id:1,src:n.default,alt:"Founder 1"},{id:2,src:d.default,alt:"Founder 2"},{id:3,src:i.default,alt:"Founder 3"},{id:4,src:r.default,alt:"Founder 4"},{id:5,src:h.default,alt:"Founder 5"}];return(0,a.jsx)("div",{children:(0,a.jsx)("div",{className:"k2a7a1ffa",children:(0,a.jsx)("div",{className:"k6919bce1",children:(0,a.jsx)("div",{className:"kd7bc642a",children:A.map((s,e)=>(0,a.jsx)("div",{className:"kd89972fe",style:{zIndex:A.length-e},children:(0,a.jsx)(t.default,{src:s.src||"/placeholder.svg",alt:s.alt,width:60,height:60,loading:"lazy",placeholder:"blur",className:"k4aa82eef"})},s.id))})})})})}var m=e(64897),j=e(3657),o=e(83342),N=e(65974),f=e(49e3),p=e(15507),u=e(75900),k=e(53259);function b(A){let{className:s,offset:e}=A;return(0,a.jsx)("div",{style:{"--background":"#ffffff","--color":"rgba(0, 0, 0, 0.2)","--height":"1px","--width":"5px","--fade-stop":"90%","--offset":e||"200px","--color-dark":"rgba(255, 255, 255, 0.2)",maskComposite:"exclude"},className:(0,k.cn)("k6e677df1","k42ce13b5","kfd987ff3","k242ad675","kd575d34e","k0f2fff0a","k09e7caf5",s)})}function v(A){let{className:s,offset:e}=A;return(0,a.jsx)("div",{style:{"--background":"#ffffff","--color":"rgba(0, 0, 0, 0.2)","--height":"5px","--width":"1px","--fade-stop":"90%","--offset":e||"150px","--color-dark":"rgba(255, 255, 255, 0.2)",maskComposite:"exclude"},className:(0,k.cn)("k2519c8f7","ke5bce7a0","kfd987ff3","k689525c8","kd575d34e","k0f2fff0a","k0990152e",s)})}function g(A){let{children:s,showGridLine:e=!0}=A;return(0,a.jsxs)("div",{className:"kb9d9126a",children:[s,e&&(0,a.jsx)(b,{className:"k6da0d1d5",offset:"40px"})]})}function y(){return(0,a.jsxs)("section",{className:"kc43bd8ab",children:[(0,a.jsx)("div",{className:"k3cd86798",children:(0,a.jsxs)("div",{children:[(0,a.jsx)("h1",{className:"k0ca0956b",children:(0,a.jsxs)("span",{className:"k0cd88924",children:["Next",(0,a.jsx)("br",{}),"Generation",(0,a.jsx)("br",{}),"Components."]})}),(0,a.jsx)("div",{className:"kca952184",children:(0,a.jsx)("p",{className:"k928720a3",children:"Easily plug in the latest trending components and build stunning websites without stressing over design consistency or animations."})}),(0,a.jsxs)("div",{className:"k8971508d",children:[(0,a.jsxs)(u.$,{className:"group kcdfa72cb",children:[(0,a.jsx)("span",{className:"k4c5d2f38",children:"Browse Components"}

1),(0,a.jsx)(l.A,{className:"k182f601e",style:{top:"1px"}})]}),(0,a.jsx)("button",{className:"group k8ecbfc67",children:(0,a.jsx)("span",{className:"k95fd5f3c",children:"Documentation"})})]}),(0,a.jsxs)("div",{className:"k8a17fbe0",children:[(0,a.jsxs)("span",{className:"k7bb4eab3",children:[(0,a.jsxs)("span",{children:["48".padStart(2,"0")," components"]}),(0,a.jsx)(c.A,{className:"kce72f65c"})]}),(0,a.jsxs)("span",{className:"k7bb4eab3",children:[(0,a.jsxs)("span",{children:["12".padStart(2,"0")," templates"]}),(0,a.jsx)(c.A,{className:"kce72f65c"})]}),(0,a.jsxs)("span",{className:"k7bb4eab3",children:[(0,a.jsxs)("span",{children:["10".padStart(2,"0")," blocks"]}),(0,a.jsx)(c.A,{className:"kce72f65c"})]})]})]})}),(0,a.jsxs)("div",{className:"kec555f23",children:[(0,a.jsxs)("div",{className:"ka7b831b1",children:[(0,a.jsx)(v,{className:"kcbabaf0f",offset:"80px"}),(0,a.jsx)(v,{className:"k86a1461d",offset:"80px"}),(0,a.jsx)(g,{children:(0,a.jsx)(x,{})}),(0,a.jsx)(g,{children:(0,a.jsx)(j.default,{})}),(0,a.jsx)(g,{showGridLine:!1,children:(0,a.jsx)("div",{className:"k1e995527",children:(0,a.jsx)(p.ScaleContainer,{width:304,height:264,children:(0,a.jsx)(m.default,{})})})})]}),(0,a.jsxs)("div",{className:"ka7b831b1",children:[(0,a.jsx)(v,{className:"k86a1461d",offset:"80px"}),(0,a.jsx)(g,{children:(0,a.jsx)(o.Timeline,{})}),(0,a.jsx)(g,{children:(0,a.jsx)(p.ScaleContainer,{width:580,height:384,children:(0,a.jsx)(N.default,{})})}),(0,a.jsx)(g,{showGridLine:!1,children:(0,a.jsx)(f.default,{})})]})]})]})}},26933:(A,s,e)=>{e.r(s),e.d(s,{default:()=>a});let a={src:"/_next/static/media/avatar.3daa0057.avif",height:1254,width:1254,blurDataURL:"data:image/avif;base64,AAAAHGZ0eXBhdmlmAAAAAG1pZjFhdmlmbWlhZgAAANZtZXRhAAAAAAAAACFoZGxyAAAAAAAAAABwaWN0AAAAAAAAAAAAAAAAAAAAAA5waXRtAAAAAAABAAAAImlsb2MAAAAAREAAAQABAAAAAAD6AAEAAAAAAAAAOwAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAAVmlwcnAAAAA4aXBjbwAAAAxhdjFDgSACAAAAABRpc3BlAAAAAAAAAAgAAAAIAAAAEHBpeGkAAAAAAwgICAAAABZpcG1hAAAAAAAAAAEAAQOBAgMAAABDbWRhdBIACgg4CL9hAQ0GkDItGAAKKKKEAPvlY1Mw/3vd0/l8dE6RZ+/Yxi+NJ0y5rqAsqo6gMwIedqc8solK",blurWidth:8,blurHeight:8}},49e3:(A,s,e)=>{e.r(s),e.d(s,{default:()=>h});var a=e(88068),l=e(15507),c=e(64072),t=e(62848),n=e(39694),d=e(18576);function i(A){let{className:s}=A;return(0,a.jsx)("svg",{viewBox:"0 0 24 24",className:s,fill:"currentColor",children:(0,a.jsx)("path",{d:"M12 2.5l2.9 6.3 6.9.7-5.2 4.6 1.6 6.8L12 17.3 5.8 20.9l1.6-6.8-5.2-4.6 6.9-.7z"})})}let r=[22,66,110,154,198];function h(){let A=(0,c.useRef)([]),s=(0,c.useRef)([]),e=(0,c.useRef)(null),h=(0,c.useRef)(null);return(0,t.L)(()=>{let A=n.Ay.context(()=>{n.Ay.set(s.current,{opacity:0,scale:1}),n.Ay.set(e.current,{x:-10,y:0}),n.Ay.set(h.current,{opacity:0,y:6});let A=n.Ay.timeline({repeat:-1,repeatDelay:1.2});A.to(e.current,{x:r[3]+6,duration:1.1,ease:"power1.inOut"}),[0,1,2,3].forEach(e=>{A.to(s.current[e],{opacity:1,duration:.15},r[e]/(r[3]+6)*1.1)}),A.to(e.current,{scale:.85,duration:.1,yoyo:!0,repeat:1}),A.to(s.current.slice(0,4),{scale:1.25,duration:.15,yoyo:!0,repeat:1,stagger:.04,ease:"power1.out"}),A.to(h.current,{opacity:1,y:0,duration:.3},"-=0.1"),A.to({},{duration:1.3}),A.to(s.current,{opacity:0,duration:.25}),A.to(h.current,{opacity:0,y:6,duration:.25},"<"),A.to(e.current,{x:-10,duration:.6,ease:"sine.inOut"})});return()=>A.revert()},[]),(0,a.jsx)(l.ScaleContainer,{width:260,height:130,children:(0,a.jsxs)("div",{className:"kd40f1086",children:[(0,a.jsxs)("div",{className:"k33337802",children:[r.map((e,l)=>(0,a.jsx)("div",{className:"k1a4462f5",style:{left:e-14},children:(0,a.jsxs)("div",{ref:s=>{A.current[l]=s},className:"kd89972fe",children:[(0,a.jsx)(i,{className:"k0dba96d4"}),(0,a.jsx)("div",{ref:A=>{s.current[l]=A},className:"k5f81ac85",children:(0,a.jsx)(i,{className:"kf34bf142"})})]})},l)),(0,a.jsx)("div",{ref:e,className:"kc3e5d00e",children:(0,a.jsx)(d.wUs,{className:"k2f30b43b"})})]}),(0,a.jsx)("p",{ref:h,className:"ke534f85c",children:"Thanks for your feedback!"})]})})}},56174:(A,s,e)=>{e.r(s),e.d(s,{default:()=>a});let a={src:"/_next/static/media/avatar1.a1cd1478.avif",height:1254,width:1254,blurDataURL:"data:image/avif;base64,AAAAHGZ0eXBhdmlmAAAAAG1pZjFhdmlmbWlhZgAAANZtZXRhAAAAAAAAACFoZGxyAAAAAAAAAABwaWN0AAAAAAAAAAAAAAAAAAAAAA5waXRtAAAAAAABAAAAImlsb2MAAAAAREAAAQABAAAAAAD6AAEAAAAAAAAAOAAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAAVmlwcnAAAAA4aXBjbwAAAAxhdjFDgSACAAAAABRpc3BlAAAAAAAAAAgAAAAIAAAAEHBpeGkAAAAAAwgICAAAABZpcG1hAAAAAAAAAAEAAQOBAgMAAABAbWRhdBIACgg4CL9hAQ0GkDIqGAAKKKKEAAIwQ8w6lzMTwg1SSytBxhP9huabX2KLWPR4XDLQUiuoHqyo",blurWidth:8,blurHeight:8}},62376:(A,s,e)=>{e.r(s),e.d(s,{default:()=>a});let a={src:"/_next/static/media/avatar7.b49556e1.avif",height:1254,width:1254,blurDataURL:"data:image/avif;base64,AAAAHGZ0eXBhdmlmAAAAAG1pZjFhdmlmbWlhZgAAANZtZXRhAAAAAAAAACFoZGxyAAAAAAAAAABwaWN0AAAAAAAAAAAAAAAAAAAAAA5waXRtAAAAAAABAAAAImlsb2MAAAAAREAAAQABAAAAAAD6AAEAAAAAAAAAOAAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAAVmlwcnAAAAA4aXBjbwAAAAxhdjFDgSACAAAAABRpc3BlAAAAAAAAAAgAAAAIAAAAEHBpeGkAAAAAAwgICAAAABZpcG1hAAAAAAAAAAEAAQOBAgMAAABAbWRhdBIACgg4CL9hAQ0GkDIqGAAKKKKEACN9+SyvajsmW9tflaOHK+YhBX8X4rXd7V1+pQUth7e7QFzA",blurWidth:8,blurHeight:8}},64631:(A,s,e)=>{e.r(s),e.d(s,{default:()=>a});let a={src:"/_next/static/media/avatar2.f3706a5c.avif",height:1254,width:1254,blurDataURL:"data:image/avif;base64,AAAAHGZ0eXBhdmlmAAAAAG1pZjFhdmlmbWlhZgAAANZtZXRhAAAAAAAAACFoZGxyAAAAAAAAAABwaWN0AAAAAAAAAAAAAAAAAAAAAA5waXRtAAAAAAABAAAAImlsb2MAAAAAREAAAQABAAAAAAD6AAEAAAAAAAAAOgAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAAVmlwcnAAAAA4aXBjbwAAAAxhdjFDgSACAAAAABRpc3BlAAAAAAAAAAgAAAAIAAAAEHBpeGkAAAAAAwgICAAAABZpcG1hAAAAAAAAAAEAAQOBAgMAAABCbWRhdBIACgg4CL9hAQ0GkDIsGAAKKKKEACKj8FdC67rwqTHRUmYgxHg

1VRu4OFK7TN7P/e3hN3znQ6oFe6bA=",blurWidth:8,blurHeight:8}},64897:(A,s,e)=>{e.d(s,{default:()=>m});var a=e(88068),l=e(24090),c=e(68314),t=e(10950),n=e(93777),d=e(84067),i=e(31554),r=e(49),h=e(64072);let x={src:"/_next/static/media/cover.21ae10b9.webp",height:603,width:640,blurDataURL:"data:image/webp;base64,UklGRmIAAABXRUJQVlA4IFYAAADQAQCdASoIAAgAAkA4JbACdADz22jpAAD+7W84XXqZZN7WfEnonec6IHZC9SsqTkOQdLWVcRkihG5LPayqEtY7If/Jbw7f2f9DnWnCyP/4rw/3uwAAAA==",blurWidth:8,blurHeight:8},m=function(){let[A,s]=(0,h.useState)(!1),[e,m]=(0,h.useState)(45),[j,o]=(0,h.useState)(125),N=A=>{let s=Math.floor(A/60);return"".concat(s,":").concat((A%60).toString().padStart(2,"0"))};return(0,h.useEffect)(()=>{let s;return A&&(s=setInterval(()=>{o(A=>{let s=A+1;return m(s/248*100),s>=248?0:s})},1e3)),()=>clearInterval(s)},[A,248]),(0,a.jsx)("div",{className:"k0d6595e7",children:(0,a.jsxs)("div",{className:"k049e69a3",children:[(0,a.jsxs)("div",{className:"k70524a1b",children:[(0,a.jsxs)("div",{className:"kf8655383",children:[(0,a.jsx)("div",{className:"kca8c1305"}),(0,a.jsx)("span",{className:"kbd4dc6a3",children:"Now Playing"})]}),(0,a.jsxs)("div",{className:"k6cfc7e6a",children:[(0,a.jsx)(l.A,{className:"k1eac0070"}),(0,a.jsx)(c.A,{className:"k1eac0070"})]})]}),(0,a.jsxs)("div",{className:"k2dc330bc",children:[(0,a.jsxs)("div",{className:"kd89972fe",children:[(0,a.jsx)("div",{className:"ka60dcc87",children:(0,a.jsx)(r.default,{src:x,alt:"Album Cover",width:64,height:64,priority:!0,placeholder:"blur",className:"k6c9d07c7"})}),A&&(0,a.jsx)("div",{className:"k5dc5408e",children:(0,a.jsx)("div",{className:"k7ce36d65"})})]}),(0,a.jsxs)("div",{className:"k5d5142b9",children:[(0,a.jsx)("h2",{className:"ke160be3b",children:"Until I Found You"}),(0,a.jsx)("p",{className:"kb812c1c1",children:"Stephen Sanchez"}),(0,a.jsx)("p",{className:"kde29465e",children:"Single • 2022"})]})]}),(0,a.jsxs)("div",{className:"kda019856",children:[(0,a.jsx)("div",{className:"k8290ed12",children:(0,a.jsx)("div",{className:"group k30a84a18",onClick:A=>{let s=A.currentTarget.getBoundingClientRect(),e=(A.clientX-s.left)/s.width*100;m(Math.max(0,Math.min(100,e))),o(Math.floor(e/100*248))},children:(0,a.jsx)("div",{className:"k64f34baf",style:{width:"".concat(e,"%")},children:(0,a.jsx)("div",{className:"k99e41942"})})})}),(0,a.jsxs)("div",{className:"kf3980e8c",children:[(0,a.jsx)("span",{children:N(j)}),(0,a.jsx)("span",{children:N(248)})]})]}),(0,a.jsxs)("div",{className:"k0ccdfdeb",children:[(0,a.jsx)("button",{type:"button","aria-label":"Previous track",className:"ke44d275d",children:(0,a.jsx)(t.A,{className:"kf3620a10"})}),(0,a.jsx)("button",{type:"button","aria-label":A?"Pause":"Play",onClick:()=>s(A=>!A),className:"k5968ec22",children:A?(0,a.jsx)(n.A,{className:"k6a25f873"}):(0,a.jsx)(d.A,{className:"k27cc08d9"})}),(0,a.jsx)("button",{type:"button","aria-label":"Next track",className:"ke44d275d",children:(0,a.jsx)(i.A,{className:"kf3620a10"})})]})]})})}},65974:(A,s,e)=>{e.d(s,{default:()=>m});var a=e(88068),l=e(87750);let c="text-[#ab5959] dark:text-[#cb7676]",t="text-[#59873a] dark:text-[#80a665]",n="text-[#393a34] dark:text-[#dbd7ca]",d="text-[#998418] dark:text-[#b8a965]",i="text-[#a3a3a3] dark:text-[#6f6f6f]";function r(A){let{n:s,children:e}=A;return(0,a.jsxs)("div",{className:"k60fbb771",children:[(0,a.jsx)("span",{className:"k3811958b",children:s}),(0,a.jsx)("span",{className:"k3c34d785",children:e})]})}let h=[{x:300,y:150,rot:6,arrow:"#6366f1",bg:"#c7d2fe",fg:"#3730a3",name:"Sofia"}];function x(A){let{x:s,y:e,rot:c,arrow:t,bg:n,fg:d,name:i}=A;return(0,a.jsxs)("div",{className:"k6c0ffba6",style:{left:s,top:e},children:[(0,a.jsx)(l.eOn,{className:"k0991b8f0",style:{color:t,fill:t,transform:"rotate(".concat(c,"deg)"),transformOrigin:"top left"},size:24,strokeWidth:1}),(0,a.jsx)("div",{className:"kf5f98e78",style:{backgroundColor:n,color:d},children:i})]})}function m(){return(0,a.jsxs)("div",{className:"k2d347f48",children:[(0,a.jsxs)("div",{className:"k26eba947",style:{left:46,top:70,width:488},children:[(0,a.jsx)("div",{"aria-hidden":"true",className:"k5f4b12b8"}),(0,a.jsxs)("div",{className:"k23fb4ace",children:[(0,a.jsxs)("div",{className:"k6cfc7e6a",children:[(0,a.jsx)("span",{className:"kc63964b9"}),(0,a.jsx)("span",{className:"kbcbae275"}),(0,a.jsx)("span",{className:"k88c32da3"})]}),(0,a.jsx)("span",{className:"k85be2d47",children:"useDebounce.ts"})]}),(0,a.jsxs)("div",{className:"kf30cdb3d",children:[(0,a.jsxs)(r,{n:1,children:[(0,a.jsx)("span",{className:c,children:"import"}),(0,a.jsxs)("span",{className:n,children:[" ","{"," "]}),(0,a.jsx)("span",{className:t,children:"useEffect"}),(0,a.jsx)("span",{className:i,children:", "}),(0,a.jsx)("span",{className:t,children:"useState"}),(0,a.jsxs)("span",{className:n,children:[" ","}"," "]}),(0,a.jsx)("span",{className:c,children:"from"})," ",(0,a.jsx)("span",{className:"text-[#b56959] dark:text-[#c98a7d]",children:'"react"'}),(0,a.jsx)("span",{className:i,children:";"})]}),(0,a.jsx)(r,{n:2,children:" "}),(0,a.jsxs)(r,{n:3,children:[(0,a.jsx)("span",{className:c,children:"export function"})," ",(0,a.jsx)("span",{className:t,children:"useDebounce"}),(0,a.jsx)("span",{className:i,children:"<"}),(0,a.jsx)("span",{className:d,children:"T"}),(0,a.jsx)("span",{className:i,children:">("}),(0,a.jsx)("span",{className:n,children:"value"}),(0,a.jsx)("span",{className:i,children:": "}),(0,a.jsx)("span",{className:d,children:"T"}),(0,a.jsx)("span",{className:i,children:", "}),(0,a.jsx)("span",{className:n,children:"delay"}),(0,a.jsx)("span",{className:i,children:" = "}),(0,a.jsx)("span",{className:"text-[#2f798a] dark:text-[#4d9375]",children:"300"}),(0,a.jsxs)("span",{className:i,children:[") ","{"]})]}),(0,a.jsxs)(r,{n:4,children:[(0,a.jsx)("span",{className:n,children:" "}),(0,a.jsx)("span",{className:c,children:"const"}),(0,a.jsx)("span",{className:i,children:" ["}),(0,a.jsx)("span",{className:n,children:"debounced"}),(0,a.jsx)("span",{className:i,children:", "}),(0,a.jsx)("span",{className:n,children:"setDebounced"}),(0,a.jsx)("span",{className:i,children:"] = "}),(0,a.jsx)("span",{className:t,children:"useState"}),(0,a.jsx)("span",{className:i,children:"("}),(0,a.jsx)("span",{className:n,children:"value"}),(0,a.jsx)("span",{className:i,children:");"})]}),(0,a.jsx)(r,{n:5,children:" "}),(0,a.jsxs)(r,{n:6,children:[(0,a.jsx)("span",{className:n,children:" "}),(0,a.jsx)("span",{className:t,children:"useEffect"}),(0,a.jsxs)("span",{className:i,children:["(() => ","{"]})]}),(0,a.jsxs)(r,{n:7,children:[(0,a.jsx)("span",{className:n,children:" "}),(0,a.jsx)("span",{className:c,children:"const"})," ",(0,a.jsx)("span",{className:n,children:"id"}),(0,a.jsx)("span",{className:i,children:" = "}),(0,a.jsx)("span",{className:t,children:"setTimeout"}),(0,a.jsx)("span",{className:i,children:"(() => "}),(0,a.jsx)("span",{className:t,children:"setDebounced"}),(0,a.jsx)("span",{className:i,children:"("}),(0,a.jsx)("span",{className:n,children:"value"}),(0,a.jsx)("span",{className:i,children:"), "}),(0,a.jsx)("span",{className:n,children:"delay"}),(0,a.jsx)("span",{className:i,children:");"})]}),(0,a.jsxs)(r,{n:8,children:[(0,a.jsx)("span",{className:n,children:" "}),(0,a.jsx)("span",{className:c,children:"return"}),(0,a.jsx)("span",{className:i,children:" () => "}),(0,a.jsx)("span",{className:t,children:"clearTimeout"}),(0,a.jsx)("span",{className:i,children:"("}),(0,a.jsx)("span",{className:n,children:"id"}),(0,a.jsx)("span",{className:i,children:");"})]}),(0,a.jsxs)(r,{n:9,children:[(0,a.jsx)("span",{className:n,children:" "}),(0,a.jsx)("span",{className:i,children:"}, ["}),(0,a.jsx)("span",{className:n,children:"value"}),(0,a.jsx)("span",{className:i,children:", "}),(0,a.jsx)("span",{className:n,children:"delay"}),(0,a.jsx)("span",{className:i,children:"]);"})]}),(0,a.jsx)(r,{n:10,children:" "}),(0,a.jsxs)(r,{n:11,children:[(0,a.jsx)("span",{className:n,children:" "}),(0,a.jsx)("span",{className:c,children:"return"})," ",(0,a.jsx)("span",{className:n,children:"debounced"}),(0,a.jsx)("span",{className:i,children:";"})]}),(0,a.jsx)(r,{n:12,children:(0,a.jsx)("span",{className:i,children:"}"})})]})]}),(0,a.jsx)("div",{"aria-hidden":"true",className:"kf0b56a83"}),h.map(A=>(0,a.jsx)(x,{...A},A.name))]})}},83342:(A,s,e)=>{e.d(s,{Timeline:()=>i});var a=e(88068),l=e(53259),c=e(15507);let t=[{i:0,text:"MAY 1"},{i:7,text:"8"},{i:14,text:"15"},{i:23,text:"24"},{i:30,text:"JUN 1"}],n=[{title:"Ship the component library",range:"May 1 – May 20",left:28,width:230,top:88,avatars:3},{title:"Wire up the design tokens",range:"May 14 – Jun 1",left:150,width:236,top:150,avatars:2},{title:"Publish the changelog",range:"May 28 – Jun 8",left:258,width:230,top:212,avatars:1}];

1function d(A){let{count:s}=A;return(0,a.jsx)("div",{className:"k005f7c74",children:Array.from({length:s}).map((A,e)=>(0,a.jsx)("span",{className:"ke8a14ae7",style:{zIndex:s-e}},e))})}function i(){return(0,a.jsx)(c.ScaleContainer,{width:520,height:300,children:(0,a.jsxs)("div",{className:"k02b406a9",children:[(0,a.jsx)("div",{className:"k1cf3c5cd",style:{left:24,right:24,top:60}}),Array.from({length:41}).map((A,s)=>{let e=s%7==0||23===s;return(0,a.jsx)("div",{className:"k85f82e73",style:{left:24+11.8*s,top:e?52:55,height:e?8:5}},s)}),t.map(A=>(0,a.jsx)("span",{className:"k1d979323",style:{left:24+11.8*A.i,top:32},children:A.text},A.i)),n.map(A=>(0,a.jsxs)("div",{className:(0,l.cn)("keb31d4a9","kfad080f3"),style:{left:A.left,top:A.top,width:A.width},children:[(0,a.jsxs)("div",{className:"k7e0b7cdf",children:[(0,a.jsx)("p",{className:"k5bc35b86",children:A.title}),(0,a.jsx)("p",{className:"k8b1cc6d1",children:A.range})]}),(0,a.jsx)(d,{count:A.avatars})]},A.title)),(0,a.jsx)("div",{"aria-hidden":"true",className:"kcc4187ff",style:{left:300,top:34,bottom:0}}),(0,a.jsx)("div",{"aria-hidden":"true",className:"kfa5e49b2",style:{left:300,top:28,bottom:0}}),(0,a.jsx)("div",{className:"k51994015",style:{left:300,top:6},children:"JUN 8"}),(0,a.jsx)("div",{"aria-hidden":"true",className:"kef3c6d17"}),(0,a.jsx)("div",{"aria-hidden":"true",className:"kfebab8fe"}),(0,a.jsx)("div",{"aria-hidden":"true",className:"k89884b21"})]})})}}}]);