94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { Link, routes } from '@redwoodjs/router'
|
|
|
|
import { countEmotes } from 'src/helpers/emote'
|
|
import ImageUploader from 'src/components/ImageUploader'
|
|
|
|
const ProjectsList = ({
|
|
projects,
|
|
shouldFilterProjectsWithoutImage = false,
|
|
}) => {
|
|
// 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
|
|
const filteredProjects = useMemo(
|
|
() =>
|
|
(shouldFilterProjectsWithoutImage
|
|
? projects.filter(({ mainImage }) => mainImage)
|
|
: [...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-6xl mx-auto mt-8">
|
|
<ul
|
|
className="grid gap-x-8 gap-y-12 items-center mx-4 relative"
|
|
style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
|
|
>
|
|
{filteredProjects.map(({ title, mainImage, user, Reaction }) => (
|
|
<li
|
|
className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150"
|
|
key={`${user?.userName}--${title}`}
|
|
>
|
|
<Link
|
|
to={routes.project({
|
|
userName: user?.userName,
|
|
projectTitle: title,
|
|
})}
|
|
>
|
|
<div className="flex items-center p-2 bg-gray-200 border-gray-300 rounded-t-lg border-t border-l border-r">
|
|
<div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow">
|
|
<ImageUploader
|
|
className=""
|
|
aspectRatio={1}
|
|
imageUrl={user?.image}
|
|
width={50}
|
|
/>
|
|
</div>
|
|
<span className="font-ropa-sans ml-3 text-lg text-indigo-900">
|
|
{title}
|
|
</span>
|
|
</div>
|
|
<div className="w-full overflow-hidden relative rounded-b-lg">
|
|
<ImageUploader
|
|
className=""
|
|
aspectRatio={1.4}
|
|
imageUrl={mainImage}
|
|
width={700}
|
|
/>
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background:
|
|
'linear-gradient(19.04deg, rgba(62, 44, 118, 0.46) 10.52%, rgba(60, 54, 107, 0) 40.02%)',
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="absolute inset-x-0 bottom-0 -mb-4 mr-4 flex justify-end">
|
|
{countEmotes(Reaction).map(({ emoji, count }) => (
|
|
<div
|
|
key={emoji}
|
|
className="h-8 w-8 overflow-hidden ml-2 p-1 rounded-full bg-opacity-75 bg-gray-200 border border-gray-300 shadow-md flex items-center justify-between"
|
|
>
|
|
<div className="-ml-px text-sm w-1">{emoji}</div>
|
|
<div className="text-sm pl-1 font-ropa-sans text-gray-800">
|
|
{count}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default ProjectsList
|