import { useMemo } from 'react' ; import type { Projects_Of_User } from 'types/graphql' ; import ProjectCard from 'src/components/ProjectCard/ProjectCard' ; const ProjectsList = ( { projects , shouldFilterProjectsWithoutImage = false , projectLimit = 80 , } ) => { const filteredProjects = useMemo ( ( ) => ( shouldFilterProjectsWithoutImage ? projects . filter ( ( { mainImage } ) => mainImage ) . slice ( 0 , projectLimit || 80 ) : [ ... projects ] . slice ( 0 , projectLimit || 80 ) ) . sort ( ( a , b ) => new Date ( b . updatedAt ) . getTime ( ) - new Date ( a . updatedAt ) . getTime ( ) ) , [ projects , shouldFilterProjectsWithoutImage ] ) ; return ( < section className = "max-w-7xl mx-auto" > < ul className = "grid gap-x-8 gap-y-8 items-center relative" style = { { gridTemplateColumns : 'repeat(auto-fit, minmax(16rem, 1fr))' } } > { filteredProjects . map ( ( { title , mainImage , user , Reaction , cadPackage , childForks } , index ) => ( < ProjectCard key = { `project-card-${ index }` } title = { title } mainImage = { mainImage } user = { user } Reaction = { Reaction } cadPackage = { cadPackage } childForks = { childForks } / > ) ) } < /ul> < /section>); } ; export default ProjectsList ;