59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
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 }) => (
|
|
<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" />0
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
)
|
|
|
|
export default ProjectCard
|