https://www.mehdio.com/_next/static/chunks/app/videos/page-a2951d1d9864fe0d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[55],{5413:function(e,t,l){Promise.resolve().then(l.bind(l,1858))},4697:function(e,t,l){"use strict";l.d(t,{Z:function(){return a}});let a=(0,l(8030).Z)("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]])},291:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"RouterContext",{enumerable:!0,get:function(){return a}});let a=l(1609)._(l(2265)).default.createContext(null)},1858:function(e,t,l){"use strict";l.d(t,{default:function(){return f}});var a=l(7437),r=l(2265),s=l(8030);let n=(0,s.Z)("play",[["polygon",{points:"6 3 20 12 6 21 6 3",key:"1oa8hb"}]]),o=(0,s.Z)("eye",[["path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",key:"1nclc0"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]]),i=(0,s.Z)("thumbs-up",[["path",{d:"M7 10v12",key:"1qc93n"}],["path",{d:"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z",key:"emmmcr"}]]),c=(0,s.Z)("message-square",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}]]);var d=l(6235),u=l(7730);function x(e){return null===e?"0":e>=1e6?"".concat((e/1e6).toFixed(1),"M"):e>=1e3?"".concat((e/1e3).toFixed(1),"K"):e.toString()}function m(e){var t;let{video:l,onTagClick:s}=e,[m,h]=(0,r.useState)(!1),g=l.published_at?(0,d.WU)(new Date(l.published_at),"MMM d, yyyy"):null,b=((null===(t=l.tags)||void 0===t?void 0:t.filter(e=>e&&""!==e.trim()))||[]).slice(0,2);return(0,a.jsx)("a",{href:l.url||"#",target:"_blank",rel:"noopener noreferrer",className:"group block h-full",onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),children:(0,a.jsxs)("div",{className:"flex h-full flex-col overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900 transition-all duration-300 hover:border-blog-yellow/50 hover:shadow-lg hover:shadow-blog-yellow/10",children:[(0,a.jsxs)("div",{className:"relative aspect-video w-full overflow-hidden",children:[(0,a.jsx)(u.default,{src:l.thumbnail_url||"/assets/placeholder-image.svg",alt:l.title||"YouTube video",fill:!0,className:"object-cover transition-transform duration-300 ".concat(m?"scale-105":"scale-100"),sizes:"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",fallbackSrc:"/assets/placeholder-image.svg"}),(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-black/20 transition-opacity duration-300 ".concat(m?"opacity-100":"opacity-0"),children:(0,a.jsx)("div",{className:"flex h-12 w-12 items-center justify-center rounded-full bg-blog-coral/90 text-white shadow-lg",children:(0,a.jsx)(n,{className:"h-5 w-5 fill-current"})})}),l.duration&&(0,a.jsx)("span",{className:"absolute bottom-2 right-2 z-10 rounded bg-black/80 px-2 py-0.5 text-xs font-medium text-white",children:function(e){if(!e)return null;let t=e.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);if(!t)return e;let[,l,a,r]=t,s=l?parseInt(l):0,n=a?parseInt(a):0,o=r?parseInt(r):0;return s>0?"".concat(s,":").concat(n.toString().padStart(2,"0"),":").concat(o.toString().padStart(2,"0")):"".concat(n,":").concat(o.toString().padStart(2,"0"))}(l.duration)})]}),(0,a.jsxs)("div",{className:"flex flex-1 flex-col p-3",children:[(0,a.jsx)("div",{className:"mb-2 flex h-6 flex-wrap gap-1.5 overflow-hidden",children:b.map((e,t)=>(0,a.jsx)("span",{className:"cursor-pointer rounded bg-blog-yellow/20 px-2 py-0.5 text-[10px] font-medium text-blog-yellow transition-colors hover:bg-blog-yellow/30",onClick:t=>{t.preventDefault(),null==s||s(e)},children:e},t))}),(0,a.jsx)("h3",{className:"mb-2 line-clamp-2 min-h-[2.5rem] text-sm font-semibold leading-tight text-neutral-100 transition-colors group-hover:text-blog-yellow",children:l.title}),g&&(0,a.jsx)("p",{className:"text-xs text-neutral-500",children:g}),(0,a.jsx)("div",{className:"flex-1"}),(0,a.jsxs)("div",{className:"mt-3 flex items-center gap-3 border-t border-neutral-800 pt-2 text-[11px] text-neutral-500",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(o,{className:"h-3 w-3"}),(0,a.jsx)("span",{children:x(l.view_count)})]}),(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(i,{className:"h-3 w-3"}),(0,a.jsx)("span",{children:x(l.like_count)})]}),(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(c,{className:"h-3 w-3"}),(0,a.jsx)("span",{children:x(l.comment_count)}

1)]}),l.channel_handle&&(0,a.jsxs)("span",{className:"ml-auto font-medium text-blog-coral",children:["@",l.channel_handle]})]})]})]})})}var h=l(7714),g=l(2869),b=l(4697);function f(e){let{initialData:t,filterOptions:l}=e,[s,n]=(0,r.useState)([]),[o,i]=(0,r.useState)(""),[c,d]=(0,r.useState)(null),[u,x]=(0,r.useState)("recent"),[f,p]=(0,r.useState)(t),[v,y]=(0,r.useState)(!1),[j,w]=(0,r.useState)(1),N=Math.ceil((f.total||0)/9),k=async(e,t)=>{let l=new URLSearchParams({page:(e-1).toString(),limit:"9",sortBy:t.sortBy});t.selectedTags.length>0&&l.set("selectedTags",t.selectedTags.join(",")),t.selectedChannel&&l.set("selectedChannel",t.selectedChannel);let a=await fetch("/api/videos?".concat(l));if(!a.ok)throw Error("Failed to fetch data");return a.json()},C=(0,r.useCallback)(async e=>{if(e!==j&&!v){y(!0),w(e);try{let t=await k(e,{selectedTags:s,selectedChannel:c,sortBy:u});p(t),window.scrollTo({top:0,behavior:"smooth"})}catch(e){console.error("Error loading page:",e),w(j)}finally{y(!1)}}},[j,s,c,u,v]),S=(0,r.useCallback)(async function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};y(!0),w(1);try{var t,l,a;let r={selectedTags:null!==(t=e.selectedTags)&&void 0!==t?t:s,selectedChannel:null!==(l=e.selectedChannel)&&void 0!==l?l:c,sortBy:null!==(a=e.sortBy)&&void 0!==a?a:u},n=await k(1,r);p(n)}catch(e){console.error("Error fetching videos:",e)}finally{y(!1)}},[s,c,u]),M=(0,r.useCallback)(e=>{if(!s.includes(e)){let t=[...s,e];n(t),S({selectedTags:t})}},[s,S]),_=(0,r.useCallback)(e=>{let t=s.filter(t=>t!==e);n(t),S({selectedTags:t})},[s,S]),T=(0,r.useCallback)(e=>{d(e),S({selectedChannel:e})},[S]),Z=(0,r.useCallback)(e=>{x(e),S({sortBy:e})},[S]),P=l.tags.filter(e=>e.toLowerCase().includes(o.toLowerCase())&&!s.includes(e)).slice(0,8);return(0,a.jsxs)("div",{className:"content-container m-auto",children:[(0,a.jsxs)("div",{className:"mb-4",children:[(0,a.jsx)(h.D,{text:"Videos"}),(0,a.jsx)("p",{className:"mt-1 text-sm text-neutral-400",children:"Tutorials, talks, and tech content from my YouTube channels. \uD83C\uDFAC"})]}),(0,a.jsxs)("div",{className:"mb-6 space-y-4 border-b border-neutral-800 pb-4",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center gap-2",children:[(0,a.jsx)("span",{className:"text-xs font-medium uppercase tracking-wide text-neutral-500",children:"Channel:"}),(0,a.jsx)("button",{onClick:()=>T(null),className:"rounded-full px-3 py-1 text-xs font-medium transition-all ".concat(c?"border border-neutral-700 text-neutral-400 hover:border-blog-yellow hover:text-blog-yellow":"bg-gradient-to-r from-blog-yellow to-blog-coral text-neutral-900"),children:"All"}),l.channels.map(e=>(0,a.jsxs)("button",{onClick:()=>T(e),className:"rounded-full px-3 py-1 text-xs font-medium transition-all ".concat(c===e?"bg-gradient-to-r from-blog-yellow to-blog-coral text-neutral-900":"border border-neutral-700 text-neutral-400 hover:border-blog-yellow hover:text-blog-yellow"),children:["@",e]},e))]}),(0,a.jsxs)("div",{className:"flex flex-wrap items-center gap-3",children:[(0,a.jsx)("span",{className:"text-xs font-medium uppercase tracking-wide text-neutral-500",children:"Tags:"}),(0,a.jsxs)("div",{className:"relative",children:[(0,a.jsx)("input",{type:"text",className:"h-8 w-40 rounded-full border border-neutral-700 bg-neutral-900 px-3 text-xs text-neutral-100 placeholder-neutral-500 outline-none transition-all focus:border-blog-yellow focus:ring-1 focus:ring-blog-yellow/50",placeholder:"Search tags...",value:o,onChange:e=>i(e.target.value)}),o&&P.length>0&&(0,a.jsx)("div",{className:"absolute z-10 mt-1 w-full rounded-lg border border-neutral-700 bg-neutral-900 py-1 shadow-lg",children:P.map(e=>(0,a.jsxs)("div",{className:"cursor-pointer px-3 py-1.5 text-xs text-neutral-300 hover:bg-blog-yellow/10 hover:text-blog-yellow",onClick:()=>{M(e),i("")},children:["#",e]},e))})]}),s.map(e=>(0,a.jsxs)("button",{onClick:()=>_(e),className:"flex items-center gap-1 rounded-full bg-blog-yellow/20 px-2.5 py-1 text-xs font-medium text-blog-yellow transition-colors hover:bg-blog-yellow/30",children:["#",e,(0,a.jsx)(b.Z,{className:"h-3 w-3"})]},e)),(0,a.jsxs)("div",{className:"ml-auto flex items-center gap-2",children:[(0,a.jsx)("span",{className:"text-xs font-medium uppercase tracking-wide text-neutral-500",children:"Sort:"}),(0,a.jsx)("button",{onClick:()=>Z("recent"),className:"rounded-full px-3 py-1 text-xs font-medium transition-all ".concat("recent"===u?"bg-gradient-to-r from-blog-yellow to-blog-coral text-neutral-900":"border border-neutral-700 text-neutral-400 hover:border-blog-yellow hover:text-blog-yellow"),children:"Recent"}),(0,a.jsx)("button",{onClick:()=>Z("popular"),className:"rounded-full px-3 py-1 text-xs font-medium transition-all ".concat("popular"===u?"bg-gradient-to-r from-blog-yellow to-blog-coral text-neutral-900":"border border-neutral-700 text-neutral-400 hover:border-blog-yellow hover:text-blog-yellow"),children:"Popular"})]})]})]}),(0,a.jsx)("div",{className:"grid min-h-[400px] gap-4 sm:grid-cols-2 lg:grid-cols-3",children:v?Array.from({length:9}).map((e,t)=>(0,a.jsxs)("div",{className:"flex flex-col overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900",children:[(0,a.jsx)("div",{className:"aspect-video animate-pulse bg-neutral-800"}),(0,a.jsxs)("div",{className:"p-3",children:[(0,a.jsxs)("div",{className:"mb-2 flex gap-2",children:[(0,a.jsx)("div",{className:"h-5 w-12 animate-pulse rounded bg-neutral-800"}),(0,a.jsx)("div",{className:"h-5 w-16 animate-pulse rounded bg-neutral-800"})]}),(0,a.jsx)("div",{className:"mb-2 h-4 animate-pulse rounded bg-neutral-800"}),(0,a.jsx)("div",{className:"mb-2 h-4 w-3/4 animate-pulse rounded bg-neutral-800"}),(0,a.jsx)("div",{className:"h-3 w-20 animate-pulse rounded bg-neutral-800"})]})]},t)):f.data.map(e=>(0,a.jsx)(m,{video:e,onTagClick:M},e.id))}),N>1&&(0,a.jsx)("div",{className:"mt-8 border-t border-neutral-800 pt-8",children:(0,a.jsx)(g.Z,{currentPage:j,totalPages:N,onPageChange:C,loading:v,totalItems:f.total,itemsPerPage:9})})]})}}

1,7730:function(e,t,l){"use strict";l.d(t,{default:function(){return n}});var a=l(7437),r=l(6648),s=l(2265);function n(e){let{src:t,alt:l,fallbackSrc:n="/assets/placeholder-image.svg",...o}=e,[i,c]=(0,s.useState)(t),[d,u]=(0,s.useState)(!1);return(0,a.jsx)(r.default,{...o,src:i,alt:l,onError:()=>{d||i===n||(u(!0),c(n))}})}},2869:function(e,t,l){"use strict";l.d(t,{Z:function(){return d}});var a=l(7437),r=l(518),s=l(7592),n=l(2265),o=l(4839),i=l(6164);let c=n.forwardRef((e,t)=>{let{className:l,variant:r="default",size:s="default",...n}=e;return(0,a.jsx)("button",{className:function(){for(var e=arguments.length,t=Array(e),l=0;l<e;l++)t[l]=arguments[l];return(0,i.m6)((0,o.W)(t))}("inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:pointer-events-none disabled:opacity-50",{"bg-primary text-primary-foreground hover:bg-primary/90":"default"===r,"bg-destructive text-destructive-foreground hover:bg-destructive/90":"destructive"===r,"border-input hover:bg-accent hover:text-accent-foreground border":"outline"===r,"bg-secondary text-secondary-foreground hover:bg-secondary/80":"secondary"===r,"hover:bg-accent hover:text-accent-foreground":"ghost"===r,"text-primary underline-offset-4 hover:underline":"link"===r,"h-10 px-4 py-2":"default"===s,"h-9 rounded-md px-3":"sm"===s,"h-11 rounded-md px-8":"lg"===s,"h-10 w-10":"icon"===s},l),ref:t,...n})});function d(e){let{currentPage:t,totalPages:l,onPageChange:n,loading:o=!1,showInfo:i=!0,totalItems:d,itemsPerPage:u=9}=e,x=(()=>{let e=[],a=[];for(let a=Math.max(1,t-2);a<=Math.min(l,t+2);a++)e.push(a);return t-2>2?a.push(1,"..."):t-2==2&&a.push(1),a.push(...e),t+2<l-1?a.push("...",l):t+2===l-1&&a.push(l),a})();return l<=1?null:(0,a.jsxs)("div",{className:"flex flex-col items-center gap-4",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(c,{variant:"outline",size:"sm",onClick:()=>{t>1&&n(t-1)},disabled:1===t||o,className:"h-8 w-8 p-0",children:(0,a.jsx)(r.Z,{className:"h-4 w-4"})}),x.map((e,l)=>(0,a.jsx)("div",{children:"..."===e?(0,a.jsx)("span",{className:"text-muted-foreground px-2 py-1 text-sm",children:"..."}):(0,a.jsx)(c,{variant:e===t?"default":"outline",size:"sm",onClick:()=>n(e),disabled:o,className:"h-8 min-w-8 ".concat(e===t?"bg-blue-600 text-white hover:bg-blue-700":""),children:e})},l)),(0,a.jsx)(c,{variant:"outline",size:"sm",onClick:()=>{t<l&&n(t+1)},disabled:t===l||o,className:"h-8 w-8 p-0",children:(0,a.jsx)(s.Z,{className:"h-4 w-4"})})]}),i&&d&&(0,a.jsxs)("div",{className:"text-muted-foreground text-sm",children:["Showing ",Math.min((t-1)*u+1,d)," -"," ",Math.min(t*u,d)," of ",d," ","items"]})]})}c.displayName="Button"},7714:function(e,t,l){"use strict";l.d(t,{D:function(){return r}});var a=l(7437);function r(e){let{text:t,description:l,...r}=e;return(0,a.jsxs)("div",{className:"flex flex-col items-center md:items-start",children:[(0,a.jsx)("h1",{...r,className:"w-fit bg-gradient-to-br from-neutral-900 via-neutral-900/90 to-neutral-900/70 bg-clip-text text-4xl font-semibold text-transparent dark:from-neutral-300 dark:via-neutral-300/90 dark:to-neutral-300/70",children:t}),l&&(0,a.jsx)("span",{className:"text-xs text-neutral-400 dark:text-neutral-600",children:l})]})}}},function(e){e.O(0,[173,819,661,971,23,744],function(){return e(e.s=5413)}),_N_E=e.O()}]);