https://halal.or.id/_next/static/chunks/app/(public)/articles/page-f7513cdcc1de0da5.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3711],{1443:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>c});var r=i(5155),n=i(2115),l=i(3750),s=i(1461),o=i(2619),a=i.n(o),d=i(4649);function c(){let[e,t]=(0,n.useState)([]),[i,o]=(0,n.useState)(!0),[c,x]=(0,n.useState)(!1),[p,h]=(0,n.useState)(null),[g,f]=(0,n.useState)(1),m=(0,n.useRef)(null);(0,n.useEffect)(()=>{y(1,!0)},[]);let y=async function(e){let i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];try{i?o(!0):x(!0);let r=await d.T.getArticles({page:e,limit:6});i?t(r.articles):t(e=>[...e,...r.articles]),h(r.pagination),f(e)}catch(e){console.error("Error fetching articles:",e)}finally{o(!1),x(!1)}},u=(0,n.useCallback)(e=>{i||c||(m.current&&m.current.disconnect(),m.current=new IntersectionObserver(e=>{e[0].isIntersecting&&(null==p?void 0:p.hasNext)&&y(g+1,!1)},{threshold:.1,rootMargin:"100px"}),e&&m.current.observe(e))},[i,c,p,g]);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("style",{children:"\n        .articles-page h1.page-title {\n          font-size: 2.5rem !important;\n          font-weight: 900 !important;\n          color: #0f172a !important;\n          margin-bottom: 24px !important;\n        }\n        .articles-page h3.card-title {\n          font-size: 1.25rem !important;\n          font-weight: 700 !important;\n          color: #0f172a !important;\n          margin-bottom: 12px !important;\n          line-height: 1.3 !important;\n        }\n        @media (max-width: 768px) {\n          .articles-page h1.page-title {\n            font-size: 1.875rem !important;\n          }\n        }\n      "}),(0,r.jsx)(l.A,{}),(0,r.jsx)("div",{className:"articles-page",style:{backgroundColor:"#f8fafc",minHeight:"100vh",paddingTop:"96px",paddingBottom:"80px"},children:(0,r.jsxs)("div",{style:{maxWidth:"1280px",margin:"0 auto",padding:"0 16px"},children:[(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",textAlign:"center",marginBottom:"48px"},children:[(0,r.jsx)("span",{style:{color:"#059669",fontWeight:700,letterSpacing:"0.05em",textTransform:"uppercase",fontSize:"0.875rem",marginBottom:"8px"},children:"Halal Digital Blog"}),(0,r.jsx)("h1",{className:"page-title",children:"Wawasan & Inspirasi Digital"}),(0,r.jsxs)("p",{style:{color:"#64748b",maxWidth:"672px",fontSize:"1.125rem",marginBottom:"32px"},children:["Artikel terbaru seputar desain, teknologi, bisnis, dan fiqih muamalah untuk menunjang karir profesional Anda.",p&&(0,r.jsxs)("span",{style:{marginLeft:"8px",fontSize:"0.875rem",color:"#94a3b8"},children:["(",p.total," articles)"]})]}),(0,r.jsxs)("div",{style:{position:"relative",width:"100%",maxWidth:"512px"},children:[(0,r.jsx)("div",{style:{position:"absolute",left:"16px",top:"50%",transform:"translateY(-50%)",color:"#94a3b8"},children:(0,r.jsxs)("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[(0,r.jsx)("circle",{cx:"11",cy:"11",r:"8"}),(0,r.jsx)("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]})}),(0,r.jsx)("input",{type:"text",placeholder:"Cari artikel...",style:{width:"100%",paddingLeft:"48px",paddingRight:"24px",paddingTop:"14px",paddingBottom:"14px",borderRadius:"9999px",border:"1px solid #e2e8f0",boxShadow:"0 1px 3px rgba(0,0,0,0.05)",outline:"none",backgroundColor:"#ffffff"}})]})]}),(0,r.jsx)("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(350px, 1fr))",gap:"32px"},children:i?Array.from({length:6}).map((e,t)=>(0,r.jsxs)("div",{style:{backgroundColor:"#ffffff",borderRadius:"16px",overflow:"hidden"},className:"animate-pulse",children:[(0,r.jsx)("div",{style:{aspectRatio:"16/9",backgroundColor:"#e2e8f0"}}),(0,r.jsxs)("div",{style:{padding:"24px"},children:[(0,r.jsx)("div",{style:{height:"16px",backgroundColor:"#e2e8f0",borderRadius:"4px",marginBottom:"12px",width:"60%"}}),(0,r.jsx)("div",{style:{height:"24px",backgroundColor:"#e2e8f0",borderRadius:"4px",marginBottom:"12px"}}),(0,r.jsx)("div",{style:{height:"16px",backgroundColor:"#e2e8f0",borderRadius:"4px",width:"80%"}})]})]},t)):e.map((t,i)=>{var n;return(0,r.jsxs)(a(),{href:"/articles/".concat(((e,t)=>{let i=e.toLowerCase().replace(/[^a-z0-9\s-]/g,"").replace(/\s+/g,"-").replace(/-+/g,"-").trim().substring(0,50);return"".concat(i,"-").concat(t)})(t.title,t.id)),ref:i===e.length-1?u:null,style:{backgroundColor:"#ffffff",borderRadius:"16px",overflow:"hidden",textDecoration:"none",display:"flex",flexDirection:"column",height:"100%",transition:"box-shadow 0.3s ease"},children:[(0,r.jsxs)("div",{style:{aspectRatio:"16/9",overflow:"hidden",backgroundColor:"#e2e8f0",position:"relative"},children:[(0,r.jsx)("img",{src:"https://picsum.photos/800/600?random=".concat(t.id),alt:t.title,style:{width:"100%",height:"100%",objectFit:"cover"}}),(0,r.jsx)("span",{style:{position:"absolute",top:"16px",left:"16px",backgroundColor:"rgba(255,255,255,0.9)",padding:"4px 12px",borderRadius:"8px",fontSize:"0.75rem",fontWeight:700,color:"#0f172a",textTransform:"uppercase",letterSpacing:"0.05em"},children:"ARTICLE"})]}),(0,r.jsxs)("div",{style:{padding:"24px",display:"flex",flexDirection:"column",flex:1},children:[(0,r.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"16px",fontSize:"0.75rem",color:"#64748b",marginBottom:"12px"},children:[(0,r.jsxs)("span",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[(0,r.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[(0,r.jsx)("rect",{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}),(0,r.jsx)("line",{x1:"16",y1:"2",x2:"16",y2:"6"}),(0,r.jsx)("line",{x1:"8",y1:"2",x2:"8",y2:"6"}),(0,r.jsx)("line",{x1:"3",y1:"10",x2:"21",y2:"10"})]}),new Date(t.created_at).toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric"})]}),(0,r.jsxs)("span",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[(0,r.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[(0,r.jsx)("path",{d:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"}),(0,r.jsx)("circle",{cx:"12",cy:"7",r:"4"})]}),"Admin"]})]}),(0,r.jsx)("h3",{className:"card-title",children:t.title}),(0,r.jsxs)("p",{style:{color:"#64748b",fontSize:"0.875rem",lineHeight:1.6,marginBottom:"24px",flex:1},children:[null==(n=t.excerpt)?void 0:n.replace(/<[^>]*>/g,"").substring(0,150),"..."]}),(0,r.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"16px",borderTop:"1px solid #f1f5f9"},children:[(0,r.jsx)("span",{style:{fontSize:"0.75rem",color:"#94a3b8",fontWeight:500},children:"3 min read"}),(0,r.jsxs)("span",{style:{display:"flex",alignItems:"center",gap:"4px",color:"#059669",fontWeight:700,fontSize:"0.875rem"},children:["Read More",(0,r.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[(0,r.jsx)("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),(0,r.jsx)("polyline",{points:"12 5 19 12 12 19"})]})]})]})]})]},t.id)})}),c&&(0,r.jsx)("div",{style:{display:"flex",justifyContent:"center",padding:"32px 0"},children:(0,r.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"12px",color:"#64748b"},children:[(0,r.jsxs)("svg",{className:"animate-spin",style:{width:"20px",height:"20px"},viewBox:"0 0 24 24",fill:"none",children:[(0,r.jsx)("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),(0,r.jsx)("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),(0,r.jsx)("span",{children:"Loading more articles..."})]})}),!i&&p&&!p.hasNext&&e.length>0&&(0,r.jsx)("div",{style:{display:"flex",justifyContent:"center",padding:"48px 0"},children:(0,r.jsx)("p",{style:{color:"#94a3b8",fontSize:"0.875rem"},children:"You've reached the end of articles"})}),!i&&0===e.length&&(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"80px 0"},children:[(0,r.jsxs)("svg",{width:"64",height:"64",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1",style:{color:"#cbd5e1",marginBottom:"16

1px"},children:[(0,r.jsx)("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"}),(0,r.jsx)("polyline",{points:"14 2 14 8 20 8"}),(0,r.jsx)("line",{x1:"16",y1:"13",x2:"8",y2:"13"}),(0,r.jsx)("line",{x1:"16",y1:"17",x2:"8",y2:"17"}),(0,r.jsx)("polyline",{points:"10 9 9 9 8 9"})]}),(0,r.jsx)("p",{style:{color:"#64748b",fontSize:"1.125rem",fontWeight:500},children:"No articles available"}),(0,r.jsx)("p",{style:{color:"#94a3b8",fontSize:"0.875rem"},children:"Check back later for new articles"})]})]})}),(0,r.jsx)(s.A,{})]})}},8911:(e,t,i)=>{Promise.resolve().then(i.bind(i,1443))}},e=>{e.O(0,[2619,7050,8441,1255,7358],()=>e(e.s=8911)),_N_E=e.O()}]);