97 lines
2.2 KiB
TypeScript
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'}
|
|
</>
|
|
)
|
|
}
|