website/components/ProjectCard.tsx

97 lines
2.2 KiB
TypeScript

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 (
<div class='components__project_card'>
<img
alt='Icon du projet'
src={icon}
class='components__project_card__icon'
/>
<div class='components__project_card__content'>
<h3>{title}</h3>
<div class='components__project_card__state'>
{toStateSpan(state)}
</div>
<div class='components__project_card__tags'>
{tags.map((tag) => <span>{tag}</span>)}
</div>
<div class='components__project_card__summary'>
{`${summary.slice(0, 150)} ...`}
</div>
<a href={`/projets/${id}`}>
{state === 'complete' ? 'En savoir plus' : 'Participer'}
</a>
</div>
</div>
)
}
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 (
<>
<i class='ri-checkbox-circle-line'></i>
{' Terminé'}
</>
)
}
if (state === 'pending') {
return (
<>
<i class='ri-error-warning-line'></i>
{' Non démarré'}
</>
)
}
if (state === 'progress') {
return (
<>
<i class='ri-play-circle-line'></i>
{' En cours'}
</>
)
}
return (
<>
<i class='ri-pause-circle-line'></i>
{' En pause'}
</>
)
}