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 { ImageFallback } from '../ImageUploader/ImageUploader' ; const ProjectCard = ( { title , mainImage , user , Reaction , cadPackage , childForks , } ) => ( < li className = "rounded p-1.5 bg-ch-gray-760 hover:bg-ch-gray-710 shadow-ch" key = { `${ user ?. userName }--${ title }` } > < Link to = { routes . project ( { userName : user ?. userName , projectTitle : title , } ) } > < div className = "relative" > < ImageUploader className = "rounded" aspectRatio = { 1.4 } imageUrl = { mainImage } width = { 700 } / > < CadPackage cadPackage = { cadPackage } className = "absolute right-0 top-0 p-1.5 rounded-bl text-sm bg-opacity-50" dotClass = "w-3 h-3" / > < /div> < div className = "flex items-center mt-1" > < div className = "w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow" > < ImageFallback imageId = { user ?. image } width = { 80 } / > < /div> < div className = "ml-3 text-lg text-ch-gray-300 font-fira-sans" > < div className = "" > { title } < /div> < div className = "text-sm" > { user ?. userName } < /div> < /div> < /div> < div className = "grid grid-flow-col-dense gap-2 justify-start mt-1.5" > < div className = "px-2 flex items-center bg-ch-gray-600 text-ch-gray-300 rounded-sm" > < Svg name = "reactions" className = "w-4 mr-2" / > { countEmotes ( Reaction ) . reduce ( ( prev , { count } ) => prev + count , 0 ) } < /div> < div className = "px-2 flex items-center bg-ch-blue-650 bg-opacity-30 text-ch-gray-300 rounded-sm" > < Svg name = "fork-new" className = "w-4 mr-2" / > { childForks ?. length || 0 } < /div> < /div> < /Link> < /li>); export default ProjectCard ;