https://learnprompting.org/_next/static/chunks/app/(website)/blog/…?dpl=dpl_Es3TboNx8GRNkQsPgkxjm4QbF1AJ

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[13296],{47037:function(e,t,n){Promise.resolve().then(n.bind(n,73621))},73621:function(e,t,n){"use strict";n.d(t,{default:function(){return h}});var r=n(57437),a=n(2265),l=n(76907),s=n(33145),i=n(30166);let o=a.forwardRef(function(e,t){let{title:n,titleId:r,...l}=e;return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:t,"aria-labelledby":r},l),n?a.createElement("title",{id:r},n):null,a.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"}))}),c=a.forwardRef(function(e,t){let{title:n,titleId:r,...l}=e;return a.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:t,"aria-labelledby":r},l),n?a.createElement("title",{id:r},n):null,a.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18 18 6M6 6l12 12"}))});function d(e){let{blogs:t,onSearch:n}=e,[l,s]=(0,a.useState)("");return(0,a.useEffect)(()=>{let e=setTimeout(()=>{if(""===l.trim()){n(t);return}n(t.filter(e=>"".concat(e.title," ").concat(e.description," ").concat(e.category).toLowerCase().includes(l.toLowerCase())))},300);return()=>clearTimeout(e)},[l,t,n]),(0,r.jsxs)("div",{className:"relative flex-1",children:[(0,r.jsx)("div",{className:"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none z-10",children:(0,r.jsx)(o,{className:"h-5 w-5 text-gray-400","aria-hidden":"true"})}),(0,r.jsx)("input",{type:"text",value:l,onChange:e=>s(e.target.value),className:"w-full rounded-lg border-0 bg-gray-50 py-2 pl-10 pr-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-gossamer sm:text-sm sm:leading-6 transition-all duration-200",placeholder:"Search articles by title, description, or category..."}),l&&(0,r.jsx)("button",{onClick:()=>s(""),className:"absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors duration-200 z-10",children:(0,r.jsx)(c,{className:"h-5 w-5"})})]})}var u=n(46201),m=n(33044),f=n(51268),g=n(35217);function x(e){let{blogs:t,onSort:n,currentSort:l}=e,s=(0,a.useMemo)(()=>[{name:"Alphabetical (A-Z)",sortFn:(e,t)=>e.title.localeCompare(t.title),icon:(0,r.jsx)(f.G,{icon:g.bDz,className:"h-4 w-4 mr-2"})},{name:"Alphabetical (Z-A)",sortFn:(e,t)=>t.title.localeCompare(e.title),icon:(0,r.jsx)(f.G,{icon:g.ifd,className:"h-4 w-4 mr-2"})},{name:"Newest First",sortFn:(e,t)=>new Date(t.date).getTime()-new Date(e.date).getTime(),icon:(0,r.jsx)(f.G,{icon:g.DlO,className:"h-4 w-4 mr-2"})},{name:"Oldest First",sortFn:(e,t)=>new Date(e.date).getTime()-new Date(t.date).getTime(),icon:(0,r.jsx)(f.G,{icon:g.$GV,className:"h-4 w-4 mr-2"})},{name:"Shortest Read",sortFn:(e,t)=>parseInt(e.time)-parseInt(t.time),icon:(0,r.jsx)(f.G,{icon:g.MdH,className:"h-4 w-4 mr-2"})},{name:"Longest Read",sortFn:(e,t)=>{let n=parseInt(e.time);return parseInt(t.time)-n},icon:(0,r.jsx)(f.G,{icon:g.J$0,className:"h-4 w-4 mr-2"})}],[]),i=(0,a.useMemo)(()=>(e,r)=>{n([...t].sort(e),r)},[t,n]);return(0,r.jsxs)(u.v,{as:"div",className:"relative inline-block text-left",children:[(0,r.jsx)("div",{children:(0,r.jsxs)(u.v.Button,{className:"inline-flex w-full justify-center items-center gap-x-1.5 rounded-lg bg-gray-50 px-3 py-2.5 text-sm font-medium text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 hover:bg-gray-100 transition-all duration-200",children:[(0,r.jsx)(f.G,{icon:g.CmM,className:"h-4 w-4 mr-2"}),"Sort",(0,r.jsx)(f.G,{icon:g.ptq,className:"h-4 w-4 ml-1","aria-hidden":"true"})]})}),(0,r.jsx)(m.u,{as:a.Fragment,enter:"transition ease-out duration-100",enterFrom:"transform opacity-0 scale-95",enterTo:"transform opacity-100 scale-100",leave:"transition ease-in duration-75",leaveFrom:"transform opacity-100 scale-100",leaveTo:"transform opacity-0 scale-95",children:(0,r.jsx)(u.v.Items,{className:"absolute sm:right-0 left-1/2 sm:left-auto -translate-x-1/2 sm:translate-x-0 z-10 mt-2 w-56 origin-top-right rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",children:(0,r.jsx)("div",{className:"py-1",children:s.map(e=>(0,r.jsx)(u.v.Item,{children:t=>{let{active:n}=t;return(0,r.jsxs)("button",{onClick:()=>i(e.sortFn,e.name),className:"".concat(n?"bg-gray-50 text-gossamer":"text-gray-700"," ").concat(l===e.name?"bg-gossamer/10 text-gossamer":""," group flex w-full items-center px-4 py-2 text-sm transition-colors duration-200"),children:[e.icon,e.name]})}},e.name))})})})]})}let p=(0,i.default)(()=>

1n.e(980).then(n.bind(n,980)),{loadableGenerated:{webpack:()=>[980]},ssr:!1});function h(e){let{blogs:t}=e,[n,i]=(0,a.useState)(t),[o,c]=(0,a.useState)("Newest First"),[u,m]=(0,a.useState)(1),f=(0,a.useCallback)(e=>{i(e),m(1)},[]),g=(0,a.useCallback)((e,t)=>{c(t),m(1)},[]),h=(0,a.useCallback)(e=>{m(e)},[]),b=(0,a.useMemo)(()=>[...n].sort({"Alphabetical (A-Z)":(e,t)=>e.title.localeCompare(t.title),"Alphabetical (Z-A)":(e,t)=>t.title.localeCompare(e.title),"Newest First":(e,t)=>(0,l.s)(t.date).getTime()-(0,l.s)(e.date).getTime(),"Oldest First":(e,t)=>(0,l.s)(e.date).getTime()-(0,l.s)(t.date).getTime(),"Shortest Read":(e,t)=>parseInt(e.time)-parseInt(t.time),"Longest Read":(e,t)=>parseInt(t.time)-parseInt(e.time)}[o]),[n,o]),j=(0,a.useMemo)(()=>{let e=(u-1)*12;return b.slice(e,e+12)},[b,u]);return(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("div",{className:"w-full max-w-7xl mx-auto px-4",children:[(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row items-center gap-4",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2 w-full",children:[(0,r.jsx)(d,{blogs:t,onSearch:f}),(0,r.jsxs)("div",{className:"text-sm text-gray-500 whitespace-nowrap",children:[b.length," articles"]})]}),(0,r.jsx)(x,{blogs:b,onSort:g,currentSort:o})]}),(0,r.jsx)("div",{className:"grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 text-left my-8 gap-4 sm:gap-x-2 sm:gap-y-3",children:j.map(e=>(0,r.jsxs)("a",{href:e.href,className:"flex flex-col h-[420px] w-full rounded-lg border overflow-hidden bg-white shadow-2xl shadow-gray-100",children:[(0,r.jsx)("div",{className:"p-2 border-b",children:(0,r.jsx)(s.default,{className:"w-full h-[200px] object-contain object-center rounded-t-md",src:e.image,alt:e.title+" Image",width:2400,height:200,priority:!0})}),(0,r.jsxs)("div",{className:"flex flex-col justify-between flex-1 px-4 py-3",children:[(0,r.jsxs)("div",{className:"space-y-3 flex-1",children:[(0,r.jsx)("h3",{className:"text-left text-base line-clamp-2 h-[48px]",children:e.title}),(0,r.jsx)("p",{className:"text-sm text-gray-500 font-normal line-clamp-3 h-[60px]",children:e.description})]}),(0,r.jsxs)("div",{className:"text-xs flex gap-2 items-center mt-3",children:[(0,r.jsx)("time",{className:"text-gray-500 font-normal",dateTime:(0,l.s)(e.date).toDateString(),children:e.date}),(0,r.jsx)("span",{className:"w-1 h-1 rounded-full block bg-gray-500"}),(0,r.jsx)("span",{className:"bg-[#1D9774]/80 py-1 text-white rounded-full px-2 font-normal",children:e.time})]})]})]},e.title))}),(0,r.jsx)(p,{totalItems:b.length,itemsPerPage:12,currentPage:u,onPageChange:h})]})})}},30166:function(e,t,n){"use strict";n.d(t,{default:function(){return a.a}});var r=n(55775),a=n.n(r)},33145:function(e,t,n){"use strict";n.d(t,{default:function(){return a.a}});var r=n(48461),a=n.n(r)},55775:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return l}});let r=n(47043);n(57437),n(2265);let a=r._(n(15602));function l(e,t){var n;let r={loading:e=>{let{error:t,isLoading:n,pastDelay:r}=e;return null}};"function"==typeof e&&(r.loader=e);let l={...r,...t};return(0,a.default)({...l,modules:null==(n=l.loadableGenerated)?void 0:n.modules})}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},48461:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var n in t)Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}(t,{default:function(){return o},getImageProps:function(){return i}});let r=n(47043),a=n(55346),l=n(65878),s=r._(n(5084));function i(e){let{props:t}=(0,a.getImgProps)(e,{defaultLoader:s.default,imgConf:{deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image",loader:"default",dangerouslyAllowSVG:!1,unoptimized:!1}});for(let[e,n]of Object.entries(t))void 0===n&&delete t[e];return{props:t}}let o=l.Image},81523:function(e,t,n){"use strict";

1Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"BailoutToCSR",{enumerable:!0,get:function(){return a}});let r=n(18993);function a(e){let{reason:t,children:n}=e;if("undefined"==typeof window)throw new r.BailoutToCSRError(t);return n}},15602:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return c}});let r=n(57437),a=n(2265),l=n(81523),s=n(70049);function i(e){return{default:e&&"default"in e?e.default:e}}let o={loader:()=>Promise.resolve(i(()=>null)),loading:null,ssr:!0},c=function(e){let t={...o,...e},n=(0,a.lazy)(()=>t.loader().then(i)),c=t.loading;function d(e){let i=c?(0,r.jsx)(c,{isLoading:!0,pastDelay:!0,error:null}):null,o=t.ssr?(0,r.jsxs)(r.Fragment,{children:["undefined"==typeof window?(0,r.jsx)(s.PreloadCss,{moduleIds:t.modules}):null,(0,r.jsx)(n,{...e})]}):(0,r.jsx)(l.BailoutToCSR,{reason:"next/dynamic",children:(0,r.jsx)(n,{...e})});return(0,r.jsx)(a.Suspense,{fallback:i,children:o})}return d.displayName="LoadableComponent",d}},70049:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"PreloadCss",{enumerable:!0,get:function(){return l}});let r=n(57437),a=n(20544);function l(e){let{moduleIds:t}=e;if("undefined"!=typeof window)return null;let n=(0,a.getExpectedRequestStore)("next/dynamic css"),l=[];if(n.reactLoadableManifest&&t){let e=n.reactLoadableManifest;for(let n of t){if(!e[n])continue;let t=e[n].files.filter(e=>e.endsWith(".css"));l.push(...t)}}return 0===l.length?null:(0,r.jsx)(r.Fragment,{children:l.map(e=>(0,r.jsx)("link",{precedence:"dynamic",rel:"stylesheet",href:n.assetPrefix+"/_next/"+encodeURI(e),as:"style"},e))})}},25523:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"RouterContext",{enumerable:!0,get:function(){return r}});let r=n(47043)._(n(2265)).default.createContext(null)},76907:function(e,t,n){"use strict";function r(e){return new Date(e.replace(/(\d+)(st|nd|rd|th)/,"$1").replace(",",""))}n.d(t,{s:function(){return r}})}},function(e){e.O(0,[3676,65878,51268,33044,46201,92971,52117,1744],function(){return e(e.s=47037)}),_N_E=e.O()}]);