45 lines
1 KiB
TypeScript
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),
|
||
|
|
}
|
||
|
|
},
|
||
|
|
)
|