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

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

import{jsx as e,jsxs as a,Fragment as t}from"react/jsx-runtime";import r,{useState as o,useMemo as d,useEffect as i}from"react";import{ProjectCard as n}from"@asafarim/project-card";var c={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%}}");const l=({projects:l,cardsPerPage:s=6,currentTheme:g="dark",className:m="",onProjectClick:_,showTechStackIcons:u=!1,maxDescriptionLength:p=150,enableSearch:P=!0,searchPlaceholder:h="Search projects by name, description, or technology...",noResultsMessage:f="No projects found matching your search.",loadingMessage:j="Loading projects...",isLoading:G=!1,searchFields:k=["title","description","techStacks","tags"],responsive:b={mobile:1,tablet:2,desktop:3,largeDesktop:4,extraLargeDesktop:5},showLoadMore:y=!1,loadMoreText:D="Load More",animationDuration:S=300})=>{const[v,x]=o(1),[I,B]=o(""),[M,N]=o(!1),[C,w]=o(s),T="dark"===g,A=d(()=>{if(!I.trim())return l||[];const e=I.toLowerCase().trim();return(l||[]).filter(a=>{const t=[];return k.includes("title")&&a.title&&t.push(a.title),k.includes("description")&&a.description&&t.push(a.description),k.includes("techStacks")&&a.techStacks&&Array.isArray(a.techStacks)&&t.push(...a.techStacks.map(e=>e.name)),k.includes("tags")&&a.tags&&t.push(...a.tags.map(e=>"string"==typeof e?e:e.name)),k.includes("category")&&a.category&&t.push(a.category),t.some(a=>a.toLowerCase().includes(e))})},[l,I,k]),$=Math.ceil(A.length/s),L=(v-1)*s,R=L+s,X=y?A.slice(0,C):A.slice(L,R);i(()=>{x(1),w(s)},[I,s]);const Y=e=>{x(e)},K=[c.gridContainer,m].filter(Boolean).join(" "),z=[c.searchToggle,T?c.searchToggleDark:""].filter(Boolean).join(" "),E=[c.searchInput,T?c.searchInputDark:""].filter(Boolean).join(" ");return G?e("div",{className:K,children:a("div",{className:`${c.loadingState} ${T?c.loadingStateDark:""}`,children:[e("div",{className:c.loadingSpinner,children:"⟳"}),j]})}):l&&0!==l.length?a("div",{className:K,children:[P&&a("div",{className:c.searchSection,children:[a("div",{className:z,onClick:()=>{N(!M)},children:[e("span",{className:`${c.searchIcon} ${M?c.searchIconExpanded:""}`,children:"🔍"}),"Search Projects"]}),a("div",{className:M?c.searchExpanded:c.searchCollapsed,children:[e("input",{type:"text",placeholder:h,value:I,onChange:e=>{B(e.target.value)},className:E}),I&&a("div",{className:`${c.searchResults} ${T?c.searchResultsDark:""}`,children:[A.length," project",1!==A.length?"s":""," found"]})]})]}),0===A.length&&I&&a("div",{className:`${c.emptyState} ${T?c.emptyStateDark:""}`,children:[e("div",{className:c.emptyStateIcon,children:"🔍"}),e("div",{className:c.emptyStateTitle,children:"No Results Found"}),e("div",{className:c.emptyStateMessage,children:f})]}),A.length>0&&a(t,{children:[e("div",{className:`${c.projectGrid} ${c.gridDesktop}`,children:X&&X.map((a,t)=>e("div",{style:{animationDelay:.1*t+"s"},children:e(n,{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:g,showTechStackIcons:u,maxDescriptionLength:p,onCardClick:()=>null==_?void 0:_(a),featured:a.isFeatured,isLoading:G,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:c.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))}),y?C<A.length&&e("button",{onClick:()=>{w(e=>e+s)},className:`${c.loadMoreButton} ${T?c.loadMoreButtonDark:""}`,children:D}):$>1&&a("div",{className:c.pagination,children:[e("button",{onClick:()=>Y(v-1),disabled:1===v,className:`${c.paginationButton} ${T?c.paginationButtonDark:""}`,children:"‹"}),(()=>{const a=(()=>{const e=[];if($<=5)for(let a=1;a<=$;a++)e.push(a);else{const a=Math.max(1,v-Math.floor(2.5)),t=Math.min($,a+5-1);a>1&&(e.push(1),a>2&&e.push("..."));for(let r=a;r<=t;r++)e.push(r);t<$&&(t<$-1&&e.push("..."),e.push($))}return e})();return a&&a.map((a,t)=>e(r.Fragment,{children:"..."===a?e("span",{className:`${c.paginationInfo} ${T?c.paginationInfoDark:""}`,children:a}):e("button",{onClick:()=>Y(a),className:`${c.paginationButton} ${v===a?T?c.paginationButtonActiveDark:c.paginationButtonActive:T?c.paginationButtonDark:""}`,children:a})},t))})(),e("button",{onClick:()=>Y(v+1),disabled:v===$,className:`${c.paginationButton} ${T?c.paginationButtonDark:""}`,children:"›"}),a("div",{className:`${c.paginationInfo} ${T?c.paginationInfoDark:""}`,children:[L+1,"-",Math.min(R,A.length)," of ",A.length]})]})]})]}):e("div",{className:K,children:a("div",{className:`${c.emptyState} ${T?c.emptyStateDark:""}`,children:[e("div",{className:c.emptyStateIcon,children:"📂"}),e("div",{className:c.emptyStateTitle,children:"No Projects Yet"}),e("div",{className:c.emptyStateMessage,children:"Projects will appear here once they are added."})]})})};export{l as PaginatedProjectGrid};
//# sourceMappingURL=index.esm.js.map