@asafarim/paginated-project-grid/dist/index.js

A responsive React component for displaying paginated project cards with built-in search functionality

"use strict";var e=require("react/jsx-runtime"),a=require("react"),t=require("@asafarim/project-card");var r={gridContainer:"PaginatedProjectGrid-module_gridContainer__L-5vA",searchSection:"PaginatedProjectGrid-module_searchSection__f3hjX",searchToggle:"PaginatedProjectGrid-module_searchToggle__Mt1G9",searchToggleDark:"PaginatedProjectGrid-module_searchToggleDark__liM4G",searchIcon:"PaginatedProjectGrid-module_searchIcon__sCv64",searchIconExpanded:"PaginatedProjectGrid-module_searchIconExpanded__svgfU",searchInput:"PaginatedProjectGrid-module_searchInput__4sM2S",searchInputDark:"PaginatedProjectGrid-module_searchInputDark__rFKwn",searchExpanded:"PaginatedProjectGrid-module_searchExpanded__S67CF",searchCollapsed:"PaginatedProjectGrid-module_searchCollapsed__qOtaV",searchResults:"PaginatedProjectGrid-module_searchResults__gDVud",searchResultsDark:"PaginatedProjectGrid-module_searchResultsDark__aWjoU",projectGrid:"PaginatedProjectGrid-module_projectGrid__5y7RZ",fadeIn:"PaginatedProjectGrid-module_fadeIn__MOkaT",gridMobile:"PaginatedProjectGrid-module_gridMobile__fgXqY",gridTablet:"PaginatedProjectGrid-module_gridTablet__lKFzD",gridDesktop:"PaginatedProjectGrid-module_gridDesktop__URkkq",pagination:"PaginatedProjectGrid-module_pagination__Ypgt9",paginationButton:"PaginatedProjectGrid-module_paginationButton__krrDf",paginationButtonActive:"PaginatedProjectGrid-module_paginationButtonActive__KdUeX",paginationButtonDark:"PaginatedProjectGrid-module_paginationButtonDark__y9mXS",paginationButtonActiveDark:"PaginatedProjectGrid-module_paginationButtonActiveDark__BI9Y-",paginationInfo:"PaginatedProjectGrid-module_paginationInfo__nKn5-",paginationInfoDark:"PaginatedProjectGrid-module_paginationInfoDark__Ka2--",loadMoreButton:"PaginatedProjectGrid-module_loadMoreButton__nIXu4",loadMoreButtonDark:"PaginatedProjectGrid-module_loadMoreButtonDark__quWAe",emptyState:"PaginatedProjectGrid-module_emptyState__ITL1e",emptyStateDark:"PaginatedProjectGrid-module_emptyStateDark__HdBly",emptyStateIcon:"PaginatedProjectGrid-module_emptyStateIcon__gVHx-",emptyStateTitle:"PaginatedProjectGrid-module_emptyStateTitle__A2INS",emptyStateMessage:"PaginatedProjectGrid-module_emptyStateMessage__N9oPC",loadingState:"PaginatedProjectGrid-module_loadingState__hSKoO",loadingStateDark:"PaginatedProjectGrid-module_loadingStateDark__i9gw3",loadingSpinner:"PaginatedProjectGrid-module_loadingSpinner__9Ls1C",spin:"PaginatedProjectGrid-module_spin__iS7MO",projectCard:"PaginatedProjectGrid-module_projectCard__sAGk-",slideIn:"PaginatedProjectGrid-module_slideIn__7YDEX"};!function(e,a){void 0===a&&(a={});var t=a.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".PaginatedProjectGrid-module_gridContainer__L-5vA{margin:0 auto;max-width:1200px;padding:1rem;width:100%}.PaginatedProjectGrid-module_searchSection__f3hjX{margin-bottom:2rem}.PaginatedProjectGrid-module_searchToggle__Mt1G9{align-items:center;background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;color:#495057;cursor:pointer;display:flex;font-size:1rem;gap:.5rem;padding:.75rem 1rem;text-align:left;transition:all .3s ease;width:100%}.PaginatedProjectGrid-module_searchToggle__Mt1G9:hover{background:#e9ecef;border-color:#adb5bd}.PaginatedProjectGrid-module_searchToggleDark__liM4G{background:#343a40;border-color:#495057;color:#f8f9fa}.PaginatedProjectGrid-module_searchToggleDark__liM4G:hover{background:#495057;border-color:#6c757d}.PaginatedProjectGrid-module_searchIcon__sCv64{font-size:1.2rem;transition:transform .3s ease}.PaginatedProjectGrid-module_searchIconExpanded__svgfU{transform:rotate(180deg)}.PaginatedProjectGrid-module_searchInput__4sM2S{background:#fff;border:1px solid #dee2e6;border-radius:8px;color:#495057;font-size:1rem;margin-top:.5rem;padding:.75rem;transition:all .3s ease;width:100%}.PaginatedProjectGrid-module_searchInput__4sM2S:focus{border-color:#06c;box-shadow:0 0 0 3px rgba(0,102,204,.1);outline:none}.PaginatedProjectGrid-module_searchInputDark__rFKwn{background:#495057;border-color:#6c757d;color:#f8f9fa}.PaginatedProjectGrid-module_searchInputDark__rFKwn:focus{border-color:#4da6ff;box-shadow:0 0 0 3px rgba(77,166,255,.1)}.PaginatedProjectGrid-module_searchExpanded__S67CF{max-height:200px;opacity:1;overflow:visible}.PaginatedProjectGrid-module_searchCollapsed__qOtaV{max-height:0;opacity:0;overflow:hidden}.PaginatedProjectGrid-module_searchResults__gDVud{color:#6c757d;font-size:.875rem;margin-top:.5rem}.PaginatedProjectGrid-module_searchResultsDark__aWjoU{color:#adb5bd}.PaginatedProjectGrid-module_projectGrid__5y7RZ{animation:PaginatedProjectGrid-module_fadeIn__MOkaT .5s ease-in-out;display:grid;gap:2rem;margin-bottom:2rem}.PaginatedProjectGrid-module_gridMobile__fgXqY{grid-template-columns:1fr}.PaginatedProjectGrid-module_gridTablet__lKFzD{grid-template-columns:repeat(2,1fr)}.PaginatedProjectGrid-module_gridDesktop__URkkq{grid-template-columns:repeat(3,1fr)}@media (max-width:768px){.PaginatedProjectGrid-module_projectGrid__5y7RZ{gap:1.5rem;grid-template-columns:1fr}}@media (min-width:769px) and (max-width:1024px){.PaginatedProjectGrid-module_projectGrid__5y7RZ{grid-template-columns:repeat(2,1fr)}}@media (min-width:1025px){.PaginatedProjectGrid-module_projectGrid__5y7RZ{grid-template-columns:repeat(3,1fr)}}.PaginatedProjectGrid-module_pagination__Ypgt9{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2rem}.PaginatedProjectGrid-module_paginationButton__krrDf{background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;color:#495057;cursor:pointer;font-size:.875rem;min-width:40px;padding:.5rem .75rem;text-align:center;transition:all .2s ease}.PaginatedProjectGrid-module_paginationButton__krrDf:hover{background:#e9ecef;border-color:#adb5bd}.PaginatedProjectGrid-module_paginationButton__krrDf:disabled{cursor:not-allowed;opacity:.5}.PaginatedProjectGrid-module_paginationButton__krrDf:disabled:hover{background:#f8f9fa;border-color:#dee2e6}.PaginatedProjectGrid-module_paginationButtonActive__KdUeX{background:#06c;border-color:#06c;color:#fff}.PaginatedProjectGrid-module_paginationButtonActive__KdUeX:hover{background:#0052a3}.PaginatedProjectGrid-module_paginationButtonDark__y9mXS{background:#495057;border-color:#6c757d;color:#f8f9fa}.PaginatedProjectGrid-module_paginationButtonDark__y9mXS:hover{background:#6c757d;border-color:#868e96}.PaginatedProjectGrid-module_paginationButtonActiveDark__BI9Y-{background:#4da6ff;border-color:#4da6ff;color:#1a1a1a}.PaginatedProjectGrid-module_paginationInfo__nKn5-{color:#6c757d;font-size:.875rem;margin:0 1rem}.PaginatedProjectGrid-module_paginationInfoDark__Ka2--{color:#adb5bd}.PaginatedProjectGrid-module_loadMoreButton__nIXu4{background:#06c;border:none;border-radius:8px;color:#fff;cursor:pointer;display:block;font-size:1rem;margin:2rem auto;padding:.75rem 1.5rem;transition:all .3s ease}.PaginatedProjectGrid-module_loadMoreButton__nIXu4:hover{background:#0052a3;transform:translateY(-2px)}.PaginatedProjectGrid-module_loadMoreButtonDark__quWAe{background:#4da6ff;color:#1a1a1a}.PaginatedProjectGrid-module_loadMoreButtonDark__quWAe:hover{background:#66b3ff}.PaginatedProjectGrid-module_emptyState__ITL1e{color:#6c757d;padding:3rem 1rem;text-align:center}.PaginatedProjectGrid-module_emptyStateDark__HdBly{color:#adb5bd}.PaginatedProjectGrid-module_emptyStateIcon__gVHx-{font-size:3rem;margin-bottom:1rem}.PaginatedProjectGrid-module_emptyStateTitle__A2INS{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.PaginatedProjectGrid-module_emptyStateMessage__N9oPC{font-size:1rem;line-height:1.5}.PaginatedProjectGrid-module_loadingState__hSKoO{align-items:center;color:#6c757d;display:flex;justify-content:center;padding:3rem}.PaginatedProjectGrid-module_loadingStateDark__i9gw3{color:#adb5bd}.PaginatedProjectGrid-module_loadingSpinner__9Ls1C{animation:PaginatedProjectGrid-module_spin__iS7MO 1s linear infinite;font-size:2rem;margin-right:1rem}@keyframes PaginatedProjectGrid-module_fadeIn__MOkaT{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes PaginatedProjectGrid-module_spin__iS7MO{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.PaginatedProjectGrid-module_projectCard__sAGk-{animation:PaginatedProjectGrid-module_slideIn__7YDEX .3s ease-out forwards}@keyframes PaginatedProjectGrid-module_slideIn__7YDEX{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.PaginatedProjectGrid-module_gridContainer__L-5vA{padding:.5rem}.PaginatedProjectGrid-module_searchSection__f3hjX{margin-bottom:1.5rem}.PaginatedProjectGrid-module_pagination__Ypgt9{gap:.25rem}.PaginatedProjectGrid-module_paginationButton__krrDf{min-width:35px;padding:.375rem .5rem}.PaginatedProjectGrid-module_paginationInfo__nKn5-{margin:.5rem 0;order:-1;text-align:center;width:100%}}");exports.PaginatedProjectGrid=({projects:o,cardsPerPage:d=6,currentTheme:i="dark",className:n="",onProjectClick:c,showTechStackIcons:s=!1,maxDescriptionLength:l=150,enableSearch:g=!0,searchPlaceholder:m="Search projects by name, description, or technology...",noResultsMessage:_="No projects found matching your search.",loadingMessage:u="Loading projects...",isLoading:p=!1,searchFields:P=["title","description","techStacks","tags"],responsive:h={mobile:1,tablet:2,desktop:3,largeDesktop:4,extraLargeDesktop:5},showLoadMore:j=!1,loadMoreText:f="Load More",animationDuration:G=300})=>{const[k,x]=a.useState(1),[b,y]=a.useState(""),[S,D]=a.useState(!1),[v,I]=a.useState(d),B="dark"===i,M=a.useMemo(()=>{if(!b.trim())return o||[];const e=b.toLowerCase().trim();return(o||[]).filter(a=>{const t=[];return P.includes("title")&&a.title&&t.push(a.title),P.includes("description")&&a.description&&t.push(a.description),P.includes("techStacks")&&a.techStacks&&Array.isArray(a.techStacks)&&t.push(...a.techStacks.map(e=>e.name)),P.includes("tags")&&a.tags&&t.push(...a.tags.map(e=>"string"==typeof e?e:e.name)),P.includes("category")&&a.category&&t.push(a.category),t.some(a=>a.toLowerCase().includes(e))})},[o,b,P]),C=Math.ceil(M.length/d),N=(k-1)*d,w=N+d,T=j?M.slice(0,v):M.slice(N,w);a.useEffect(()=>{x(1),I(d)},[b,d]);const A=e=>{x(e)},$=[r.gridContainer,n].filter(Boolean).join(" "),L=[r.searchToggle,B?r.searchToggleDark:""].filter(Boolean).join(" "),R=[r.searchInput,B?r.searchInputDark:""].filter(Boolean).join(" ");return p?e.jsx("div",{className:$,children:e.jsxs("div",{className:`${r.loadingState} ${B?r.loadingStateDark:""}`,children:[e.jsx("div",{className:r.loadingSpinner,children:"⟳"}),u]})}):o&&0!==o.length?e.jsxs("div",{className:$,children:[g&&e.jsxs("div",{className:r.searchSection,children:[e.jsxs("div",{className:L,onClick:()=>{D(!S)},children:[e.jsx("span",{className:`${r.searchIcon} ${S?r.searchIconExpanded:""}`,children:"🔍"}),"Search Projects"]}),e.jsxs("div",{className:S?r.searchExpanded:r.searchCollapsed,children:[e.jsx("input",{type:"text",placeholder:m,value:b,onChange:e=>{y(e.target.value)},className:R}),b&&e.jsxs("div",{className:`${r.searchResults} ${B?r.searchResultsDark:""}`,children:[M.length," project",1!==M.length?"s":""," found"]})]})]}),0===M.length&&b&&e.jsxs("div",{className:`${r.emptyState} ${B?r.emptyStateDark:""}`,children:[e.jsx("div",{className:r.emptyStateIcon,children:"🔍"}),e.jsx("div",{className:r.emptyStateTitle,children:"No Results Found"}),e.jsx("div",{className:r.emptyStateMessage,children:_})]}),M.length>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:`${r.projectGrid} ${r.gridDesktop}`,children:T&&T.map((a,o)=>e.jsx("div",{style:{animationDelay:.1*o+"s"},children:e.jsx(t.ProjectCard,{title:a.title,description:a.description,image:null==a?void 0:a.image,techStacks:null==a?void 0:a.techStacks,links:null==a?void 0:a.links,currentTheme:i,showTechStackIcons:s,maxDescriptionLength:l,onCardClick:()=>null==c?void 0:c(a),featured:a.isFeatured,isLoading:p,isPublic:a.isPublic,lastUpdated:a.lastUpdated,category:a.category,dateCreated:a.createdAt,status:a.status,tags:a.tags,priority:a.priority,budget:a.budget,dateUpdated:a.updatedAt,progress:a.progress,startDate:a.startDate,endDate:a.endDate,dueDate:a.dueDate,relatedProjects:a.relatedProjects,className:r.projectCard,createdAt:a.createdAt,updatedAt:a.updatedAt,createdBy:a.createdBy,updatedBy:a.updatedBy,id:a.id,isFeatured:a.isFeatured,repo:a.repo,userId:a.userId})},a.id))}),j?v<M.length&&e.jsx("button",{onClick:()=>{I(e=>e+d)},className:`${r.loadMoreButton} ${B?r.loadMoreButtonDark:""}`,children:f}):C>1&&e.jsxs("div",{className:r.pagination,children:[e.jsx("button",{onClick:()=>A(k-1),disabled:1===k,className:`${r.paginationButton} ${B?r.paginationButtonDark:""}`,children:"‹"}),(()=>{const t=(()=>{const e=[];if(C<=5)for(let a=1;a<=C;a++)e.push(a);else{const a=Math.max(1,k-Math.floor(2.5)),t=Math.min(C,a+5-1);a>1&&(e.push(1),a>2&&e.push("..."));for(let r=a;r<=t;r++)e.push(r);t<C&&(t<C-1&&e.push("..."),e.push(C))}return e})();return t&&t.map((t,o)=>e.jsx(a.Fragment,{children:"..."===t?e.jsx("span",{className:`${r.paginationInfo} ${B?r.paginationInfoDark:""}`,children:t}):e.jsx("button",{onClick:()=>A(t),className:`${r.paginationButton} ${k===t?B?r.paginationButtonActiveDark:r.paginationButtonActive:B?r.paginationButtonDark:""}`,children:t})},o))})(),e.jsx("button",{onClick:()=>A(k+1),disabled:k===C,className:`${r.paginationButton} ${B?r.paginationButtonDark:""}`,children:"›"}),e.jsxs("div",{className:`${r.paginationInfo} ${B?r.paginationInfoDark:""}`,children:[N+1,"-",Math.min(w,M.length)," of ",M.length]})]})]})]}):e.jsx("div",{className:$,children:e.jsxs("div",{className:`${r.emptyState} ${B?r.emptyStateDark:""}`,children:[e.jsx("div",{className:r.emptyStateIcon,children:"📂"}),e.jsx("div",{className:r.emptyStateTitle,children:"No Projects Yet"}),e.jsx("div",{className:r.emptyStateMessage,children:"Projects will appear here once they are added."})]})})};
//# sourceMappingURL=index.js.map