https://fliplab.io.vn/assets/js/BlogPost-BynDWlx7.js

1import{k as B,r as o,j as e,L as g}from"./react-vendor-BaX8wFxW.js";import{B as L,l as _,k as H,ae as T,b_ as C,bf as S,n as q,ao as O,aA as M,aB as $}from"./icons-hi2-zdK1GiMw.js";import{u as D,R as E,i as F,ah as I,T as z}from"./index-CLYH3Hla.js";import{B as i}from"./blogData-DbHUIVDa.js";import{m as A}from"./motion-vendor-C9lJIqxK.js";import"./icons-other-B4wTEEQh.js";import"./data-vendor-B9G6AmzB.js";import"./charts-vendor-BEN4kyo5.js";const U=()=>{var b;const{id:n}=B(),{formatDate:p,t:a}=D(),{setTheme:k}=E(),l=F(),[r,d]=o.useState(!1),[u,c]=o.useState(38),[x,f]=o.useState(!1),s=i.find(t=>t.id===n||t.slug===n)||i[0],m=i.filter(t=>t.id!==s.id).slice(0,2),j=()=>{const t=document.documentElement.classList.contains("dark");k(t?"light":"dark")},N=()=>{navigator.clipboard.writeText(window.location.href),l.success(a("toast.blog_link_copied"))},w=()=>{r?(d(!1),c(t=>t-1)):(d(!0),c(t=>t+1),l.success(a("toast.blog_liked")))},v=()=>{f(t=>!t),l.info(a(x?"toast.blog_unbookmarked":"toast.blog_bookmarked"))},y=t=>{const h=document.getElementById(t);h&&h.scrollIntoView({behavior:"smooth",block:"start"})};return e.jsxs("div",{className:"min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans transition-colors duration-200",children:[e.jsx(I,{title:`${s.title} | FlipLab Blog`,description:s.excerpt,image:s.image,canonicalPath:`/blog/${s.id}`,type:"article",schema:{"@context":"https://schema.org","@type":"BlogPosting",headline:s.title,description:s.excerpt,image:s.image?[s.image]:void 0,datePublished:s.date,author:{"@type":"Person",name:((b=s.author)==null?void 0:b.name)||"FlipLab Team"},publisher:{"@type":"Organization",name:"FlipLab",logo:{"@type":"ImageObject",url:"https://fliplab.io.vn/logo.svg"}}}}),e.jsx("header",{className:"h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-50 transition-colors",children:e.jsxs("div",{className:"max-w-4xl mx-auto px-4 sm:px-6 h-full flex items-center justify-between gap-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(g,{to:"/blog",className:"w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer",title:a("blog.back_list"),children:e.jsx(L,{className:"w-4 h-4"})}),e.jsx(z,{to:"/blog",size:28,textClassName:"text-sm font-extrabold",suffix:e.jsx("span",{className:"text-slate-600 dark:text-slate-300 font-medium ml-1",children:"/ Blog"})})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{onClick:j,className:"w-9 h-9 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors cursor-pointer flex items-center justify-center shrink-0",title:a("blog.toggle_theme"),children:[e.jsx(_,{className:"w-4.5 h-4.5 hidden dark:block text-amber-400"}),e.jsx(H,{className:"w-4.5 h-4.5 block dark:hidden text-slate-600"})]}),e.jsx("button",{onClick:v,className:"w-9 h-9 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors cursor-pointer flex items-center justify-center shrink-0",title:a("blog.bookmark"),children:x?e.jsx(T,{className:"w-4 h-4 text-blue-600 dark:text-blue-400"}):e.jsx(C,{className:"w-4 h-4"})}),e.jsx("button",{onClick:N,className:"w-9 h-9 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors cursor-pointer flex items-center justify-center shrink-0",title:a("blog.share_link"),

1children:e.jsx(S,{className:"w-4 h-4"})})]})]})}),e.jsxs(A.main,{initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{duration:.35},className:"max-w-4xl mx-auto px-4 sm:px-6 py-8 sm:py-12",children:[e.jsxs("article",{className:"bg-white dark:bg-slate-900 border border-slate-200/90 dark:border-slate-800/90 rounded-2xl p-6 sm:p-10 shadow-xs",children:[e.jsx("div",{className:"mb-4",children:e.jsx("span",{className:"px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-semibold",children:s.category})}),e.jsx("h1",{className:"text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white leading-tight tracking-tight mb-6",children:s.title}),e.jsxs("div",{className:"flex items-center gap-3 pb-6 mb-8 border-b border-slate-100 dark:border-slate-800 text-xs text-slate-500 dark:text-slate-400",children:[e.jsx("img",{src:s.author.avatar,alt:s.author.name,className:"w-8 h-8 rounded-full object-cover"}),e.jsxs("div",{className:"flex items-center gap-1.5 font-bold text-slate-800 dark:text-slate-200",children:[e.jsx("span",{children:s.author.name}),e.jsx(q,{className:"w-4 h-4 text-blue-500"})]}),e.jsx("span",{children:"•"}),e.jsx("span",{children:p(new Date(`${s.date}T00:00:00`),"long")}),e.jsx("span",{children:"•"}),e.jsx("span",{children:a("blog.read_minutes",{count:s.readMinutes})})]}),e.jsx("div",{className:"mb-8 rounded-xl overflow-hidden bg-slate-100 dark:bg-slate-800",children:e.jsx("img",{src:s.image,alt:s.title,className:"w-full aspect-[16/9] object-cover"})}),s.toc&&s.toc.length>0&&e.jsxs("div",{className:"mb-8 p-5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/80 dark:border-slate-800",children:[e.jsxs("div",{className:"flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-3",children:[e.jsx(O,{className:"w-4 h-4"}),e.jsx("span",{children:a("blog.toc")})]}),e.jsx("ul",{className:"space-y-1.5 text-xs font-medium",children:s.toc.map(t=>e.jsx("li",{children:e.jsx("button",{onClick:()=>y(t.id),className:"text-slate-700 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-left cursor-pointer",children:t.text})},t.id))})]}),e.jsx("div",{className:`prose prose-slate dark:prose-invert max-w-none 
2              prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-slate-900 dark:prose-headings:text-white
3              prose-p:text-slate-700 dark:prose-p:text-slate-300 prose-p:leading-relaxed prose-p:text-sm sm:prose-p:text-base
4              prose-strong:text-slate-900 dark:prose-strong:text-white prose-strong:font-bold
5              prose-blockquote:border-l-2 prose-blockquote:border-slate-400 prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-slate-600 dark:prose-blockquote:text-slate-400
6              prose-li:text-slate-700 dark:prose-li:text-slate-300 prose-li:text-sm
7              mb-10`,dangerouslySetInnerHTML:{__html:s.content}}),e.jsxs("div",{className:"pt-6 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between",children:[e.jsx("div",{className:"flex flex-wrap gap-1.5",children:s.tags.map(t=>e.jsxs("span",{className:"px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-[11px] font-semibold",children:["#",t]},t))}),e.jsxs("button",{onClick:w,className:`flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-xs font-bold transition-all cursor-pointer ${r?"bg-rose-50 dark:bg-rose-950/40 text-rose-600 border-rose-200 dark:border-rose-800":"bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-800 hover:bg-slate-50"}`,children:[r?e.jsx(M,{className:"w-4 h-4 text-rose-500 fill-current"}):e.jsx($,{className:"w-4 h-4"}),e.jsx("span",{children:a("blog.like",{count:u})})]})]})]}),m.length>0&&e.jsxs("div",{className:"mt-10",children:[e.jsx("h3",{className:"text-sm font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-4",children:a("blog.related")}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4",children:m.map(t=>e.jsxs(g,{to:`/blog/${t.id}`,className:"bg-white dark:bg-slate-900 border border-slate-200/90 dark:border-slate-800/90 rounded-xl p-4 flex gap-4 hover:border-slate-300 dark:hover:border-slate-700 transition-all shadow-xs group",children:[e.jsx("img",{src:t.image,alt:t.title,className:"w-20 h-20 rounded-lg object-cover shrink-0"}),e.jsxs("div",{className:"flex flex-col justify-between",children:[e.jsx("span",{className:"text-[10px] font-bold text-slate-400 uppercase",children:t.category}),e.jsx("h4",{className:"text-xs font-bold text-slate-900 dark:text-white group-hover:text-blue-600 transition-colors line-clamp-2",children:t.title}),e.jsx("span",{className:"text-[10px] text-slate-400 font-medium",children:a("blog.read_minutes",{count:t.readMinutes})})]})]},t.id))})]})]}),e.jsx("footer",{className:"bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 py-8 transition-colors mt-12",children:e.jsx("div",{className:"max-w-4xl mx-auto px-4 sm:px-6 text-center text-xs font-medium text-slate-500 dark:text-slate-400",children:a("blog.footer_inc",{year:new Date().getFullYear()})})})]})};export{U as default};