import { JSX } from 'preact' type ProjectCardProps = { id: string icon: string title: string summary: string tags: string[] state: 'complete' | 'progress' | 'stale' | 'pending' } export function ProjectCard( { id, icon, title, summary, tags, state }: ProjectCardProps, ) { return (
Icon du projet

{title}

{toStateSpan(state)}
{tags.map((tag) => {tag})}
{`${summary.slice(0, 150)} ...`}
{state === 'complete' ? 'En savoir plus' : 'Participer'}
) } const summary = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, perferendis enim blanditiis consequatur at porro quod, eligendi alias recusandae modi aliquam non? Quos voluptates quisquam provident animi nisi in ratione.' export const projectMock: ProjectCardProps[] = Array(50).fill(undefined).map( (_, index) => { return { title: `Awesome project ${index}`, summary, tags: ['3D', 'électronique', 'informatique'], state: randomState(), icon: `https://picsum.photos/id/${index + 20}/300`, id: String(index), } }, ) function randomState(): ProjectCardProps['state'] { const rand = Math.random() if (rand > 3 / 4) return 'complete' if (rand > 2 / 4) return 'progress' if (rand > 1 / 4) return 'stale' return 'pending' } function toStateSpan(state: ProjectCardProps['state']): JSX.Element { if (state === 'complete') { return ( <> {' Terminé'} ) } if (state === 'pending') { return ( <> {' Non démarré'} ) } if (state === 'progress') { return ( <> {' En cours'} ) } return ( <> {' En pause'} ) }