feat: add machines card and routes

This commit is contained in:
Julien Oculi 2024-02-15 11:30:35 +01:00
parent ea4340f080
commit 996b622b38
6 changed files with 130 additions and 0 deletions

View file

@ -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);
}
}

View file

@ -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),
}
},
)

View file

@ -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() {

10
routes/machines/[id].tsx Normal file
View file

@ -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>
)
}

18
routes/machines/index.tsx Normal file
View file

@ -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>
</>
)
}

View file

@ -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');