"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[694],{65673:(e,t,s)=>{s.d(t,{A:()=>f});var l=s(74848),n=s(91106),r=s.n(n),a=s(34760),i=s(6419),c=s(30772),o=s(96233),x=s(65243);function d(e){let{className:t,authors:s,useLinks:n=!1}=e;return(0,l.jsx)("div",{className:(0,x.QP)("flex flex-col gap-2",t),children:null==s?void 0:s.map(e=>{let{slug:t,title:s}=e,a=(0,l.jsxs)("p",{className:"flex items-center author-name author-name",children:[(0,l.jsx)(o.A,{className:"inline-block w-4 h-4 mr-2 text-white/50"}),s]},t);return n?(0,l.jsx)(r(),{className:"hover:text-white text-white/75",href:"/author/".concat(t),children:a},t):a})})}var h=s(12235),u=s(32485),m=s.n(u);function f(e){let{articles:t,className:s}=e;return(0,l.jsx)("div",{className:m()("grid sm:grid-cols-2 gap-8",{"lg:grid-cols-4":!s},s),children:t.map((e,t)=>{let{title:s,date:n,description:o,subtitle:x,slug:u,imageUrl:m}=e;return(0,l.jsx)(r(),{href:(0,c.yW)(u),children:(0,l.jsxs)("div",{className:"flex flex-col space-4 hover:text-white group",children:[(0,l.jsx)(i.A,{alt:s,height:300,src:m,width:400}),(0,l.jsx)("time",{className:"mb-2 mt-5 eyebrow",children:(0,c.Wo)(n)}),e.tags&&(0,l.jsx)(h.A,{tags:e.tags,className:"flex flex-wrap gap-2 mb-2"}),(0,l.jsx)(a.A,{className:"mb-2",size:"h4",children:s}),(0,l.jsx)("p",{className:"text-sm text-zinc-400 group-hover:text-white/80 mb-2",children:o||x}),(0,l.jsx)(d,{authors:e.author})]})},t)})})}},12235:(e,t,s)=>{s.d(t,{A:()=>u});var l=s(74848),n=s(32485),r=s.n(n),a=s(47967),i=s(65243),c=s(16939),o=s(91106),x=s.n(o),d=s(42302),h=s(30772);function u(e){let{className:t,iconClassName:s,tags:n,asLinks:o=!1}=e;return n=n.filter(e=>{let{slug:t}=e;return(0,c.Yr)().some(e=>e.slug===t)}),(0,l.jsx)("div",{className:t,children:n.map(e=>{let{slug:t}=e,{title:n}=(0,c.xQ)(t),u=(0,l.jsxs)("span",{className:r()("inline-flex items-center gap-1"),children:[(0,l.jsx)(a.A,{className:(0,i.QP)("h-4 w-4 text-zinc-400",s)}),n]},(0,d.A)()),m=(0,h.w_)(t);return o?(0,l.jsx)(x(),{href:m,className:"flex text-white/75 hover:text-white",children:u},(0,d.A)()):u})})}},6419:(e,t,s)=>{s.d(t,{A:()=>o});var l=s(74848),n=s(29965),r=s.n(n),a=s(32485),i=s.n(a),c=s(8499);function o(e){let{src:t,alt:s,fill:n=!1,width:a,height:o,className:x,priority:d=!1}=e,h=i()("relative w-full rounded-lg overflow-hidden",{"aspect-video":n}),u=i()("object-cover w-full",{"absolute h-full w-full":n},x);return(0,l.jsxs)("div",{className:h,children:[(0,l.jsx)(r(),{alt:s,className:u,height:o,src:t.length>0?(0,c.h)(t):(0,c.h)("/assets/observability-labs-thumbnail.png"),width:a,fill:n,priority:d}),(0,l.jsx)("div",{className:"absolute border border-white/50 inset-0 mix-blend-overlay rounded-lg z-10"})]})}},3694:(e,t,s)=>{s.d(t,{Ay:()=>w});var l=s(74848),n=s(65673),r=s(16939),a=s(91106),i=s.n(a),c=s(96540),o=s(86715),x=s(32485),d=s.n(x),h=s(33866),u=s(19130),m=s(30772),f=s(33425),j=s(41986),p=s(34760),b=s(97067);function g(e){let{title:t,items:s}=e,n=(0,o.useRouter)(),[r,a]=(0,c.useState)(!1),[x,h]=(0,c.useState)(""),[u,g]=(0,c.useState)(10),v=s.filter(e=>e.title.toLowerCase().includes(x.toLowerCase())),N=s.length>10,w=u<v.length,y=u>10,z=e=>"Tags"===t?(0,m.w_)(e):"";return(0,l.jsxs)("div",{className:"space-y-2",children:[(0,l.jsxs)("div",{className:"relative flex justify-between items-center py-2 border-b border-zinc-600",children:[(0,l.jsx)(p.A,{size:"h5",children:t}),N&&(0,l.jsx)("button",{onClick:function(){a(!r),h("")},className:"text-sm font-bold hover:text-white",title:"Filter ".concat(t),children:!r&&(0,l.jsx)(f.A,{className:"h-4 w-4"})}),N&&r&&(0,l.jsxs)("div",{className:"absolute inset-x-0 top-[1px] h-full w-full",children:[(0,l.jsx)("div",{className:"absolute inset-y-0 w-6 justify-center left-0 flex items-center pl-2 pointer-events-none",children:(0,l.jsx)(f.A,{className:"h-4 w-4 text-zinc-300"})}),(0,l.jsx)("input",{type:"text",placeholder:(()=>{switch(t){case"Categories":return"Filter categories";case"Tags":return"Filter tags";default:return"Filter values"}})(),value:x,onChange:e=>h(e.target.value),className:"w-full h-full text-sm py-1 pl-8 border border-zinc-600 pr-8 placeholder:text-zinc-400 text-zinc-200 bg-zinc-800 focus:outline-none focus:border-zinc-500 focus:bg-zinc-600",onKeyDown:function(e){"Escape"===e.key&&(a(!1),h(""))},autoFocus:!0}),x?(0,l.jsx)("button",{onClick:()=>h(""),className:"absolute inset-y-0 right-0 h-full w-8 flex items-center justify-center",children:(0,l.jsx)(j.A,{className:"h-4 w-4 text-zinc-300 hover:text-zinc-200"})}):(0,l.jsx)("span",{className:"absolute inset-y-0 right-0 h-full w-14 flex items-center pointer-events-none",children:(0,l.jsxs)("span",{className:"border border-zinc-300 rounded uppercase text-[10px] text-zinc-300 px-1 flex items-center gap-[2px]",children:[(0,l.jsx)(b.A,{className:"h-3 w-3"}),"ESC"]})})]})]}),(0,l.jsxs)("div",{className:"space-y-2",children:[(0,l.jsxs)("ul",{className:"space-y-1",children:[v.slice(0,u).map(e=>{let t=n.asPath===z(e.slug),s=d()("hover:text-white",t?"text-white font-bold":"");return(0,l.jsx)("li",{children:(0,l.jsx)(i(),{className:s,href:z(e.slug),children:e.title})},e.slug)}),0===v.length&&(0,l.jsx)("li",{className:"text-zinc-400 text-center p-1 border rounded border-zinc-600 uppercase tracking-wide text-xs font-bold",children:"No tags found"})]}),w||y?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("hr",{className:"border-zinc-600"}),(0,l.jsxs)("div",{className:"flex justify-between items-center",children:[w&&(0,l.jsx)("button",{className:"text-sm font-bold hover:text-white",onClick:function(){g(u+10)},children:"Show more"}),y&&(0,l.jsx)("button",{className:"text-sm font-bold hover:text-white",onClick:function(){g(u<=10?10:u-10)},children:"Show less"})]})]}):null]})]})}function v(e){let{articles:t,paginate:s}=e,[r,a]=(0,c.useState)(1),i=(r-1)*12,o=t.slice(i,i+12),x=t.length>12;function d(){a(r+1)}function h(){a(r-1)}return(0,l.jsxs)("div",{className:"space-y-8",children:[(0,l.jsx)(n.A,{articles:o,className:"lg:grid-cols-2 xl:grid-cols-3"}),s&&x&&(0,l.jsx)("div",{className:"py-4 border-t border-zinc-700",children:(0,l.jsx)(function(){let e=Math.ceil(t.length/12),s=[];if(e<=5)for(let t=1;t<=e;t++)s.push(t);else{let t=Math.floor(2.5),l=r-t,n=r+t;l<=0&&(l=1,n=5),n>e&&(n=e,l=e-5+1);for(let e=l;e<=n;e++)s.push(e)}return(0,l.jsxs)("div",{className:"flex w-full gap-2",children:[(0,l.jsx)("button",{onClick:h,className:"text-sm font-bold hover:text-white disabled:text-zinc-400 disabled:hover:text-zinc-400",disabled:1===r,children:"Previous"}),(0,l.jsx)("div",{className:"flex flex-grow justify-center gap-2",children:s.map(e=>(0,l.jsx)("button",{onClick:()=>a(e),className:"text-sm font-bold hover:text-white ".concat(e===r?"text-white":""),children:e},e))}),(0,l.jsx)("button",{onClick:d,className:"text-sm font-bold hover:text-white disabled:text-zinc-400 disabled:hover:text-zinc-400",disabled:r===e,children:"Next"})]})},{})})]})}function N(){let e=(0,o.useRouter)(),t=d()("hover:text-white","/blog"===e.asPath?"text-white font-bold":"");function s(){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("div",{className:"space-y-2",children:(0,l.jsx)("ul",{className:"space-y-1",children:(0,l.jsx)("li",{children:(0,l.jsx)(i(),{className:t,href:"/blog",children:"All Articles"})})})}),(0,l.jsx)(g,{title:"Tags",items:(0,r.Yr)()})]})}return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("div",{className:"hidden lg:flex w-64 shrink-0 flex-col gap-8",children:(0,l.jsx)(s,{})}),(0,l.jsx)(h.AM,{className:"lg:hidden relative z-50",as:"div",children:e=>{let{open:t}=e;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(h.AM.Button,{className:"button justify-center w-full",children:t?"Hide Filters":"Filter Articles"}),(0,l.jsx)(u.e,{enter:"transition duration-100 ease-out",enterFrom:"transform scale-95 opacity-0",enterTo:"transform scale-100 opacity-100",leave:"transition duration-75 ease-out",leaveFrom:"transform scale-100 opacity-100",leaveTo:"transform scale-95 opacity-0",children:(0,l.jsx)(h.AM.Panel,{className:"bg-zinc-900 rounded shadow-lg p-8",children:(0,l.jsx)("div",{className:"flex flex-col gap-8",children:(0,l.jsx)(s,{})})})})]})}})]})}function w(e){let{articles:t,paginate:s=!0}=e;return(0,l.jsxs)("div",{className:"flex flex-col md:flex-row gap-12",children:[(0,l.jsx)(N,{}),(0,l.jsx)("div",{className:"flex-grow",children:(0,l.jsx)(v,{articles:t,paginate:s})})]})}}}]);