54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import {
|
|
getStyleScope,
|
|
useSmartStylesheet,
|
|
} from ':plugins/SmartStylesheetIsland.tsx'
|
|
|
|
type MachineCardProps = {
|
|
img: string
|
|
name: string
|
|
tags: string[]
|
|
id: string
|
|
free: boolean
|
|
}
|
|
|
|
const scope = getStyleScope(MachineCard)
|
|
|
|
export function MachineCard(
|
|
{ name, tags, img, id, free }: MachineCardProps,
|
|
) {
|
|
useSmartStylesheet(import.meta, { scope })
|
|
|
|
const stateIcon = free
|
|
? <i class='ri-checkbox-circle-line'></i>
|
|
: <i class='ri-indeterminate-circle-line'></i>
|
|
|
|
return (
|
|
<div class={scope} style={{ backgroundImage: img }}>
|
|
<div class='spacer'></div>
|
|
<h3>
|
|
{stateIcon}
|
|
<span>{name}</span>
|
|
</h3>
|
|
<div class='tags'>
|
|
{tags.map((tag, index) => <span key={index}>{tag}</span>)}
|
|
</div>
|
|
<div class='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),
|
|
}
|
|
},
|
|
)
|