website/components/MachineCard.tsx

45 lines
1 KiB
TypeScript

type MachineCardProps = {
img: string
name: string
tags: string[]
id: string
free: boolean
}
export function MachineCard(
{ name, tags, img, id, free }: MachineCardProps,
) {
const stateIcon = free
? <i class='ri-checkbox-circle-line'></i>
: <i class='ri-indeterminate-circle-line'></i>
return (
<div class='components__machine_card' style={{ backgroundImage: img }}>
<div class='components__machine_card__spacer'></div>
<h3>
{stateIcon}
<span>{name}</span>
</h3>
<div class='components__machine_card__tags'>
{tags.map((tag) => <span>{tag}</span>)}
</div>
<div class='components__machine_card__footer'>
<a href={`/machines/${id}`}>Infos</a>
<a href={`/machines/${id}`}>Reserver</a>
</div>
</div>
)
}
export const machineMock: MachineCardProps[] = Array(20).fill(undefined).map(
(_, index) => {
return {
name: `Machine ${index}`,
tags: ['3d', 'laser'],
free: Math.random() > 0.5,
img: `url("https://picsum.photos/id/${index + 10}/400")`,
id: String(index),
}
},
)