https://www.redai.vn/_next/static/chunks/3480.5576e6d43a11ab2d.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3480],{53480:function(e,t,l){l.r(t);var r=l(85893),a=l(67294),n=l(81627),o=l(6169);let s=(0,a.memo)(e=>{let{htmlContent:t,contentId:l="blog-content"}=e,s=(0,n.T_)("blogs.toc"),[i,c]=(0,a.useState)([]),[d,u]=(0,a.useState)(""),m=(0,a.useMemo)(()=>t?Array.from(new DOMParser().parseFromString(t,"text/html").querySelectorAll("h2, h3")).map((e,t)=>{let l=e.textContent||"",r=l.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/đ/g,"d").replace(/[^\w\s-]/g,"").replace(/\s+/g,"-").replace(/-+/g,"-").trim();return{id:`heading-${r}-${t}`,text:l,level:parseInt(e.tagName.substring(1))}}):[],[t]);(0,a.useEffect)(()=>{c(m),setTimeout(()=>{let e=document.getElementById(l);e&&e.querySelectorAll("h2, h3").forEach((e,t)=>{m[t]&&(e.id=m[t].id)})},100)},[m,l]);let g=(0,a.useCallback)(()=>{let e=i.map(e=>document.getElementById(e.id)).filter(Boolean),t="";for(let l=e.length-1;l>=0;l--){let r=e[l];if(r&&r.getBoundingClientRect().top<=160){t=r.id;break}}t!==d&&u(t)},[i,d]);(0,a.useEffect)(()=>{let e=null,t=()=>{e||(e=window.setTimeout(()=>{g(),e=null},100))};return window.addEventListener("scroll",t,{passive:!0}),g(),()=>{window.removeEventListener("scroll",t),e&&window.clearTimeout(e)}},[g]);let p=e=>{let t=document.getElementById(e);if(t){let e=t.getBoundingClientRect().top+window.pageYOffset;window.scrollTo({top:e-120,behavior:"smooth"})}};return 0===i.length?null:(0,r.jsx)("nav",{className:"sticky top-20 max-h-[calc(100vh-160px)] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent hover:scrollbar-thumb-gray-400",children:(0,r.jsxs)("div",{className:"text-xs",children:[(0,r.jsx)("span",{className:"mb-4 text-xs font-heading font-semibold uppercase tracking-wider text-gray-900",children:s("title")}),(0,r.jsx)("ul",{className:"space-y-1 border-l border-gray-200",children:i.map(e=>(0,r.jsx)("li",{children:(0,r.jsx)("button",{onClick:()=>p(e.id),className:`
2                  block w-full text-left px-2 py-1 -ml-px border-l-2 transition-all duration-200 text-xs leading-snug
3                  ${3===e.level?"pl-5":""}
4                  ${d===e.id?"border-red-500 text-red-600 font-medium bg-red-50/50":"border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50"}
5                `,children:(0,r.jsx)(o.ZP,{variant:"caption",className:"line-clamp-2",children:e.text})})},e.id))})]})})});s.displayName="BlogTableOfContents",t.default=s}}]);