60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { Link, routes } from '@redwoodjs/router'
|
|
import Svg from 'src/components/Svg/Svg'
|
|
import CadPackage from 'src/components/CadPackage/CadPackage'
|
|
|
|
import { countEmotes } from 'src/helpers/emote'
|
|
import ImageUploader from 'src/components/ImageUploader'
|
|
import ProjectCard from 'src/components/ProjectCard/ProjectCard'
|
|
|
|
const ProjectsList = ({
|
|
projects,
|
|
shouldFilterProjectsWithoutImage = false,
|
|
projectLimit = 80,
|
|
}) => {
|
|
// temporary filtering projects that don't have images until some kind of search is added and there are more things on the website
|
|
// it helps avoid the look of the website just being filled with dumby data.
|
|
// related issue-104
|
|
|
|
// note to self the projectCard is hardcoded directly into this component will not be hard the extract later when we need it elsewhere.
|
|
const filteredProjects = useMemo(
|
|
() =>
|
|
(shouldFilterProjectsWithoutImage
|
|
? projects
|
|
.filter(({ mainImage }) => mainImage)
|
|
.slice(0, projectLimit || 80)
|
|
: [...projects]
|
|
)
|
|
// sort should probably be done on the service, but the filtering is temp too
|
|
.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 }, index) => (
|
|
<ProjectCard
|
|
key={index}
|
|
title={title}
|
|
mainImage={mainImage}
|
|
user={user}
|
|
Reaction={Reaction}
|
|
cadPackage={cadPackage}
|
|
/>
|
|
)
|
|
)}
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default ProjectsList
|