feat: ✨ add machines card and routes

components/MachineCard.css

@@ -0,0 +1,56 @@
+.components__machine_card {
+	min-width: 10rem;
+	aspect-ratio: 1 / 2;
+	display: flex;
+	flex-direction: column;
+	padding: var(--_gap-half);
+	gap: var(--_gap);
+	box-shadow: 0 0 0.4rem 0.2rem var(--_translucent);
+	border: var(--_border-size) solid transparent;
+	background-repeat: no-repeat;
+	background-size: contain;
+
+	&:hover:has(a:not(:focus-visible)) {
+		border: var(--_border-size) solid var(--_accent-color);
+	}
+
+	& h3 {
+		margin: 0;
+	}
+}
+
+.components__machine_card__spacer {
+	height: 50%;
+}
+
+.components__machine_card__tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--_gap-half);
+
+	& span {
+		padding: var(--_gap-half);
+		background-color: var(--_translucent);
+	}
+}
+
+.components__machine_card__footer {
+	height: fit-content;
+	display: flex;
+	gap: var(--_gap);
+	justify-content: space-between;
+
+	a {
+		width: 100%;
+		padding: var(--_gap);
+		color: currentColor;
+		outline: none;
+		text-decoration: none;
+		border: var(--_border-size) solid currentColor;
+	}
+
+	& a:is(:focus-visible, :hover, :active) {
+		color: var(--_accent-color);
+		border: var(--_border-size) solid var(--_accent-color);
+	}
+}

components/MachineCard.tsx

@@ -0,0 +1,44 @@
+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),
+		}
+	},
+)

routes/index.tsx

@@ -2,6 +2,7 @@ import { Head } from '$fresh/runtime.ts'
 import { BlogCard, blogMock } from '../components/BlogCard.tsx'
 import { CohabitInfoTable } from '../components/CohabitInfoTable.tsx'
 import { Heros } from '../components/Heros.tsx'
+import { MachineCard, machineMock } from '../components/MachineCard.tsx'
 import { SponsorCards } from '../components/SponsorCards.tsx'
 
 export default function Home() {

routes/machines/[id].tsx

@@ -0,0 +1,10 @@
+import { PageProps } from '$fresh/server.ts'
+import { MachineCard, machineMock } from '../../components/MachineCard.tsx'
+
+export default function Machine({ params }: PageProps) {
+	const machine = machineMock.at(Number(params.id))
+
+	return (
+        machine ? MachineCard(machine) : <h3>Machine pas encore disponible</h3>
+	)
+}

routes/machines/index.tsx

@@ -0,0 +1,18 @@
+import { MachineCard, machineMock } from '../../components/MachineCard.tsx'
+
+export default function Machine() {
+	return (
+		<>
+			<h1>Nos machines</h1>
+			<section
+				style={{
+					display: 'grid',
+					gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr));',
+					gap: 'var(--_gap)',
+				}}
+			>
+				{machineMock.map(MachineCard)}
+			</section>
+		</>
+	)
+}

src/stylesheets/components.css

@@ -4,5 +4,6 @@
 @import url('../../components/SponsorCards.css');
 @import url('../../components/CohabitInfoTable.css');
 @import url('../../components/BlogCard.css');
+@import url('../../components/MachineCard.css');
 @import url('../../islands/ThemePicker.css');
 @import url('../../islands/SearchBox.css');