https://yunkhngn.dev/_next/static/chunks/app/(public)/blog/page-d9543be58bda8264.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[864],{1572:(e,t,s)=>{"use strict";s.d(t,{d:()=>l});var r=s(95155),a=s(5392),i=s(41641),n=s(21362);function l({currentPage:e,totalPages:t,onPageChange:s}){if(t<=1)return null;let d=e=>{s(e),window.scrollTo({top:0,behavior:"smooth"})};return(0,r.jsxs)("div",{className:"flex items-center justify-center gap-2 mt-8",children:[(0,r.jsx)(a.$,{variant:"outline",size:"icon",onClick:()=>d(e-1),disabled:1===e,"aria-label":"Previous page",children:(0,r.jsx)(i.A,{className:"h-4 w-4"})}),(0,r.jsxs)("span",{className:"text-sm font-medium",children:["Page ",e," of ",t]}),(0,r.jsx)(a.$,{variant:"outline",size:"icon",onClick:()=>d(e+1),disabled:e===t,"aria-label":"Next page",children:(0,r.jsx)(n.A,{className:"h-4 w-4"})})]})}},5392:(e,t,s)=>{"use strict";s.d(t,{$:()=>d,r:()=>l});var r=s(95155);s(12115);var a=s(42442),i=s(18460),n=s(25903);let l=(0,i.F)("backdrop-blur-sm  inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 has-[>svg]:px-3",sm:"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",lg:"h-10 rounded-md px-6 has-[>svg]:px-4",icon:"size-9","icon-sm":"size-8","icon-lg":"size-10"}},defaultVariants:{variant:"default",size:"default"}});function d({className:e,variant:t,size:s,asChild:i=!1,...c}){let o=i?a.DX:"button";return(0,r.jsx)(o,{"data-slot":"button",className:(0,n.cn)(l({variant:t,size:s,className:e})),...c})}},6583:(e,t,s)=>{"use strict";s.d(t,{default:()=>k});var r=s(95155),a=s(12115),i=s(73321),n=s(51296),l=s(5392),d=s(61878),c=s(42268),o=s(48368),u=s(98500),x=s.n(u),m=s(5772),h=s(8550),p=s(83505),g=s(1572),f=s(82301),v=s(54234),b=s(27376),j=s(85338);let y={hidden:{},visible:{transition:{staggerChildren:.08}}},N={hidden:{opacity:0,y:24},visible:{opacity:1,y:0,transition:{duration:.5,ease:[.16,1,.3,1]}}};function w({onTagChange:e}){let t=(0,i.useSearchParams)();return(0,a.useEffect)(()=>{e(t.get("tag")||null)},[t,e]),null}function k({blogs:e=[]}){let[t,s]=(0,a.useState)(""),[i,u]=(0,a.useState)(1),[A,M]=(0,a.useState)(null),z=[...new Set(e.flatMap(e=>e.tags?e.tags.split(",").map(e=>e.trim()):[]))],S=e.filter(e=>{let s=e.title.toLowerCase().includes(t.toLowerCase()),r=e.tags?e.tags.split(",").map(e=>e.trim()):[],a=!A||r.includes(A);return s&&a}),$=t.length>0||null!==A,C=$?[]:S.slice(0,3),P=$?S:S.slice(3),E=Math.ceil(P.length/6),_=P.slice((i-1)*6,6*i);(0,a.useEffect)(()=>{u(1)},[t,A]);let T=(e,t=150)=>{if(e.description)return e.description;let s=e.contentJSON||e.content||"",r="";try{let e=JSON.parse(s);if(e.content){let t=e=>e.text?e.text:e.content?e.content.map(t).join(" "):"";r=t(e)}}catch(e){r=s.replace(/<[^>]*>?/gm,"")}return r.length>t?r.substring(0,t)+"...":r};return(0,r.jsxs)("div",{className:"container mx-auto px-4 py-12 md:py-20 max-w-7xl",children:[(0,r.jsx)(a.Suspense,{fallback:null,children:(0,r.jsx)(w,{onTagChange:M})}),(0,r.jsx)(v.A,{eyebrow:"Curious Blog",title:"My Writings & Ideas",description:"The latest writings, news, technologies, and resources from me.",className:"mb-20",children:(0,r.jsx)("div",{className:"w-full max-w-md flex gap-2 mt-4",children:(0,r.jsxs)("div",{className:"relative flex-1",children:[(0,r.jsx)(d.A,{className:"absolute left-3 top-3 h-4 w-4 text-muted-foreground z-10 pointer-events-none"}),(0,r.jsx)(n.p,{placeholder:"Search articles...",value:t,onChange:e=>s(e.target.value),className:"pl-10 h-10"})]})})}),z.length>0&&(0,r.jsxs)("div",{className:"flex flex-wrap justify-center gap-2 mb-16 max-w-3xl mx-auto",children:[(0,r.jsx)(l.$,{variant:null===A?"default":"outline",onClick:()=>M(null),className:"rounded-full text-sm h-8",children:"All"}),z.map(e=>(0,r.jsx)(l.$,{variant:A===e?"default":"outline",onClick:()=>M(e===A?null:e),className:"rounded-full text-sm h-8",children:e},e))]}),S.length>0?(0,r.jsxs)("div",{className:"space-y-16",children:[!$&&C.length>0&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b.A,{index:1,children:(0,r.jsx)("h2",{className:"text-3xl font-bold mb-8",children:"Recent Posts"})}),(0,r.jsxs)("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16",children:[C[0]&&(0,r.jsx)(j.A,{children:(0,r.jsxs)(x(),{href:`/blog/${C[0].slug||C[0].id}`,className:"group flex flex-col gap-4",children:[(0,r.jsx)("div",{className:"aspect-video w-full relative overflow-hidden rounded-3xl bg-muted",children:C[0].thumbnail?(0,r.jsx)(m.default,{src:C[0].thumbnail,alt:C[0].title,fill:!0,sizes:"(max-width: 1024px) 100vw, 50vw",className:"object-cover transition-transform duration-500 group-hover:scale-105"}):(0,r.jsx)("div",{className:"flex items-center justify-center h-full text-muted-foreground",children:"No Thumbnail"})}),(0,r.jsxs)("div",{className:"space-y-3",children:[(0,r.jsxs)("div",{className:"text-sm font-semibold text-primary flex items-center gap-2",children:[(0,r.jsx)("span",{children:"Kho

1a Nguyễn"}),(0,r.jsx)("span",{children:"•"}),(0,r.jsx)("span",{children:(0,h.GP)(new Date(C[0].createdAt),"d MMM yyyy")})]}),(0,r.jsxs)("div",{className:"flex justify-between items-start gap-4",children:[(0,r.jsx)("h2",{className:"text-2xl font-bold group-hover:text-primary transition-colors leading-tight",children:C[0].title}),(0,r.jsx)(c.A,{className:"h-6 w-6 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0"})]}),(0,r.jsx)("p",{className:"text-muted-foreground line-clamp-3 text-base",children:T(C[0])}),(0,r.jsx)("div",{className:"flex flex-wrap gap-2 pt-2",children:C[0].tags&&C[0].tags.split(",").map((e,t)=>(0,r.jsx)(p.E,{variant:"outline",className:"rounded-md font-normal",children:e.trim()},t))})]})]})}),(0,r.jsx)("div",{className:"flex flex-col gap-8",children:C.slice(1,3).map(e=>(0,r.jsxs)(x(),{href:`/blog/${e.slug||e.id}`,className:"group flex flex-col md:flex-row gap-6 items-start",children:[(0,r.jsx)("div",{className:"aspect-video md:aspect-[4/3] w-full md:w-64 relative overflow-hidden rounded-3xl bg-muted flex-shrink-0",children:e.thumbnail?(0,r.jsx)(m.default,{src:e.thumbnail,alt:e.title,fill:!0,sizes:"(max-width: 768px) 100vw, 256px",className:"object-cover transition-transform duration-500 group-hover:scale-105"}):(0,r.jsx)("div",{className:"flex items-center justify-center h-full text-muted-foreground text-xs",children:"No Thumbnail"})}),(0,r.jsxs)("div",{className:"flex-1 space-y-2",children:[(0,r.jsxs)("div",{className:"text-xs font-semibold text-primary flex items-center gap-2",children:[(0,r.jsx)("span",{children:"Kho

1a Nguyễn"}),(0,r.jsx)("span",{children:"•"}),(0,r.jsx)("span",{children:(0,h.GP)(new Date(e.createdAt),"d MMM yyyy")})]}),(0,r.jsx)("h3",{className:"text-lg font-bold group-hover:text-primary transition-colors line-clamp-2",children:e.title}),(0,r.jsx)("p",{className:"text-muted-foreground text-sm line-clamp-2",children:T(e)}),(0,r.jsx)("div",{className:"flex flex-wrap gap-2 pt-1",children:e.tags&&e.tags.split(",").slice(0,2).map((e,t)=>(0,r.jsx)(p.E,{variant:"outline",className:"text-xs rounded-md font-normal",children:e.trim()},t))})]})]},e.id))})]})]}),_.length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)(b.A,{index:$?1:2,children:(0,r.jsx)("h2",{className:"text-2xl font-bold mb-8",children:$?"Search Results":"All blog posts"})}),(0,r.jsx)(f.m.div,{variants:y,initial:"hidden",whileInView:"visible",viewport:{once:!0},className:"grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-12",children:_.map(e=>(0,r.jsx)(f.m.div,{variants:N,children:(0,r.jsx)(j.A,{children:(0,r.jsxs)(x(),{href:`/blog/${e.slug||e.id}`,className:"group flex flex-col gap-4",children:[(0,r.jsx)("div",{className:"aspect-video relative bg-muted overflow-hidden rounded-3xl",children:e.thumbnail?(0,r.jsx)(m.default,{src:e.thumbnail,alt:e.title,fill:!0,sizes:"(max-width: 768px) 100vw, 50vw",className:"object-cover transition-transform duration-500 group-hover:scale-105"}):(0,r.jsx)("div",{className:"flex items-center justify-center h-full text-muted-foreground bg-secondary/50",children:"No Thumbnail"})}),(0,r.jsxs)("div",{className:"space-y-3",children:[(0,r.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,r.jsxs)("div",{className:"text-xs font-semibold text-primary flex items-center gap-2",children:[(0,r.jsx)("span",{children:"Kho

1a Nguyễn"}),(0,r.jsx)("span",{children:"•"}),(0,r.jsx)("span",{children:(0,h.GP)(new Date(e.createdAt),"d MMM yyyy")})]}),(0,r.jsx)("h2",{className:"text-2xl font-bold group-hover:text-primary transition-colors leading-tight",children:e.title})]}),(0,r.jsx)("p",{className:"text-muted-foreground line-clamp-2 text-base",children:T(e)}),(0,r.jsx)("div",{className:"flex flex-wrap gap-2 mt-auto",children:e.tags&&e.tags.split(",").map((e,t)=>(0,r.jsx)(p.E,{variant:"secondary",className:"bg-primary/10 text-primary hover:bg-primary/20 border-none rounded-md font-medium",children:e.trim()},t))})]})]})})},e.id))},`${i}-${A||"all"}-${t}`)]})]}):(0,r.jsxs)("div",{className:"text-center py-20 text-muted-foreground",children:[(0,r.jsx)(o.A,{className:"h-10 w-10 mx-auto mb-3 opacity-40"}),"No articles found matching your search."]}),(0,r.jsx)("div",{className:"mt-16",children:(0,r.jsx)(g.d,{currentPage:i,totalPages:E,onPageChange:u})})]})}},25903:(e,t,s)=>{"use strict";s.d(t,{B:()=>l,Q:()=>n,cn:()=>i});var r=s(29722),a=s(622);function i(...e){return(0,a.QP)((0,r.$)(e))}function n(e){return e?e.replace(/<[^>]*>?/gm,"").replace(/&nbsp;/g," ").trim():""}function l(e){try{if(!e)return"";let t="string"==typeof e?JSON.parse(e):e,s="",r=e=>{"text"===e.type&&(s+=e.text+" "),e.content&&e.content.forEach(r)};return r(t),s.trim()}catch(e){return""}}},27376:(e,t,s)=>{"use strict";s.d(t,{A:()=>i});var r=s(95155),a=s(82301);function i({children:e,index:t,className:s=""}){return(0,r.jsxs)("div",{children:[void 0!==t&&(0,r.jsx)("p",{className:"font-mono text-xs text-muted-foreground/60 mb-2 tracking-widest",children:String(t).padStart(2,"0")}),(0,r.jsx)(a.m.div,{initial:{clipPath:"inset(0 100% 0 0)"},whileInView:{clipPath:"inset(-20% 0% -20% 0%)"},viewport:{once:!0,margin:"-100px"},transition:{duration:.7,ease:[.16,1,.3,1]},className:`pb-2 ${s}`,children:e})]})}},32792:(e,t,s)=>{Promise.resolve().then(s.bind(s,6583))},37381:(e,t,s)=>{"use strict";s.d(t,{A:()=>d});var r=s(95155),a=s(82301);let i=[{className:"w-96 h-96 top-[-10%] left-[-5%]",duration:10,animate:{x:[0,40,-20,0],y:[0,-30,20,0]}},{className:"w-80 h-80 top-[20%] right-[-5%]",duration:12,animate:{x:[0,-30,50,0],y:[0,40,-10,0]}},{className:"w-64 h-64 bottom-[10%] left-[30%]",duration:8,animate:{x:[0,20,-40,0],y:[0,-20,30,0]}}],n=["bg-primary/10","bg-secondary/10","bg-primary/5"],l=["bg-primary/5","bg-secondary/5","bg-primary/2"];function d({subtle:e=!1}){let t=e?l:n;return(0,r.jsx)("div",{className:"fixed inset-0 w-full h-screen overflow-hidden -z-10 pointer-events-none",children:i.map((e,s)=>(0,r.jsx)(a.m.div,{className:`absolute rounded-full blur-[120px] ${e.className} ${t[s]}`,animate:e.animate,transition:{duration:e.duration,repeat:1/0,ease:"linear"}},s))})}},51296:(e,t,s)=>{"use strict";s.d(t,{p:()=>n});var r=s(95155),a=s(12115),i=s(25903);let n=a.forwardRef(({className:e,type:t,...s},a)=>(0,r.jsx)("input",{type:t,className:(0,i.cn)("flex h-10 w-full rounded-md border border-input bg-background backdrop-blur-sm px-3 py-2 text-sm r

1ing-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",e),ref:a,...s}));n.displayName="Input"},54234:(e,t,s)=>{"use strict";s.d(t,{A:()=>n});var r=s(95155),a=s(37381),i=s(25903);function n({eyebrow:e,title:t,description:s,children:l,className:d}){return(0,r.jsxs)("div",{className:(0,i.cn)("relative flex flex-col items-center text-center pb-20 space-y-6",d),children:[(0,r.jsx)(a.A,{}),(0,r.jsxs)("div",{className:"space-y-4",children:[(0,r.jsx)("p",{className:"text-xs font-bold tracking-[0.2em] text-muted-foreground uppercase",children:e}),(0,r.jsx)("h1",{className:"text-4xl md:text-6xl font-bold tracking-tight font-serif",children:t}),(0,r.jsx)("p",{className:"text-muted-foreground max-w-2xl mx-auto text-lg md:text-xl",children:s})]}),l]})}},83505:(e,t,s)=>{"use strict";s.d(t,{E:()=>d});var r=s(95155);s(12115);var a=s(42442),i=s(18460),n=s(25903);let l=(0,i.F)("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"}},defaultVariants:{variant:"default"}});function d({className:e,variant:t,asChild:s=!1,...i}){let c=s?a.DX:"span";return(0,r.jsx)(c,{"data-slot":"badge",className:(0,n.cn)(l({variant:t}),e),...i})}},85338:(e,t,s)=>{"use strict";s.d(t,{A:()=>d});var r=s(95155),a=s(12115),i=s(28245),n=s(62321),l=s(82301);function d({children:e,className:t=""}){let s=(0,a.useRef)(null),[c,o]=(0,a.useState)(!1),u=(0,i.d)(.5),x=(0,i.d)(.5),m=(0,n.G)(x,[0,1],[8,-8]),h=(0,n.G)(u,[0,1],[-8,8]);return((0,a.useEffect)(()=>{o(window.matchMedia("(hover: none)").matches)},[]),c)?(0,r.jsx)("div",{className:t,children:e}):(0,r.jsx)("div",{style:{perspective:"1000px"},className:t,children:(0,r.jsx)(l.m.div,{ref:s,style:{rotateX:m,rotateY:h},onMouseMove:e=>{if(!s.current)return;let t=s.current.getBoundingClientRect();u.set((e.clientX-t.left)/t.width),x.set((e.clientY-t.top)/t.height)},onMouseLeave:()=>{u.set(.5),x.set(.5)},whileHover:{scale:1.02,boxShadow:"0 20px 40px rgba(0,0,0,0.15)"},transition:{type:"spring",stiffness:300,damping:30},className:"w-full h-full",children:e})})}}},e=>{e.O(0,[3242,8500,9988,3646,154,8550,8976,8441,3794,7358],()=>e(e.s=32792)),_N_E=e.O()}]);