feat: add members card and routes

This commit is contained in:
Julien Oculi 2024-02-15 14:04:01 +01:00
parent 3dc9de3c2f
commit 08edb5b791
6 changed files with 150 additions and 0 deletions

49
components/MemberCard.css Normal file
View file

@ -0,0 +1,49 @@
.components__member_card {
display: grid;
grid-template-rows: 1fr 5rem;
min-width: 15rem;
aspect-ratio: 1;
box-shadow: 0 0 0.4rem 0.2rem var(--_translucent);
border: var(--_border-size) solid transparent;
background-size: cover;
background-repeat: no-repeat;
&:has(a:focus-visible),
&:hover {
border: var(--_border-size) solid var(--_accent-color);
}
& h3 {
margin: 0;
}
& a {
outline: none;
}
}
.components__member_card__icon {
height: 100%;
object-fit: cover;
overflow: hidden;
}
.components__member_card__content {
background-color: var(--_translucent);
backdrop-filter: blur(var(--_blur));
display: flex;
flex-direction: column;
padding: var(--_gap-half);
gap: var(--_gap-half);
}
.components__member_card__groups {
display: flex;
flex-wrap: wrap;
gap: var(--_gap-half);
& span {
padding: var(--_gap-half);
background-color: var(--_translucent);
}
}

47
components/MemberCard.tsx Normal file
View file

@ -0,0 +1,47 @@
type MemberCardProps = {
id: string
icon: string
name: string
groups: string[]
}
export function MemberCard(
{ id, icon, name, groups }: MemberCardProps,
) {
return (
<div class='components__member_card' style={{ backgroundImage: icon }}>
<div class='components__member_card__spacer'></div>
<div class='components__member_card__content'>
<h3>
<a href={`/membres/${id}`}>{name}</a>
</h3>
<div class='components__member_card__groups'>
{groups.map((group) => <span>{group}</span>)}
</div>
</div>
</div>
)
}
export const memberMock: MemberCardProps[] = Array(50).fill(undefined).map(
(_, index) => {
return {
name: `Michel ${randomLastName()}`,
groups: ['FabManager', 'Étudiant'],
icon: `url("https://thispersondoesnotexist.com/")`,
id: String(index),
}
},
)
function randomLastName() {
const randomArray = Math.round(Math.random() * 1e8).toString().split('').map(
Number,
)
const [first, ...tail] = randomArray.map((number) =>
String.fromCodePoint(number + 97)
)
return [first.toLocaleUpperCase(), ...tail].join('')
}

View file

@ -4,6 +4,7 @@ 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 { MemberCard, memberMock } from '../components/MemberCard.tsx'
import { ProjectCard, projectMock } from '../components/ProjectCard.tsx'
import { SponsorCards } from '../components/SponsorCards.tsx'

12
routes/membres/[id].tsx Normal file
View file

@ -0,0 +1,12 @@
import { PageProps } from '$fresh/server.ts'
import { MemberCard, memberMock } from '../../components/MemberCard.tsx'
export default function Member({ params }: PageProps) {
const Member = memberMock.at(Number(params.id))
return (
Member
? MemberCard(Member)
: <h3>Membre inconnu, peut être serai vous le prochain</h3>
)
}

40
routes/membres/index.tsx Normal file
View file

@ -0,0 +1,40 @@
import { AutoGrid } from '../../components/AutoGrid.tsx'
import { MemberCard, memberMock } from '../../components/MemberCard.tsx'
export default function Membres() {
return (
<>
<h1>Nos membres</h1>
<section>
<h2>Permanents</h2>
<AutoGrid columnWidth='15rem'>
{memberMock.slice(0, 5).map(MemberCard)}
</AutoGrid>
</section>
<section>
<h2>Bénévoles</h2>
<AutoGrid columnWidth='15rem'>
{memberMock.slice(5, 10).map(MemberCard)}
</AutoGrid>
</section>
<section>
<h2>Service civique</h2>
<AutoGrid columnWidth='15rem'>
{memberMock.slice(10, 15).map(MemberCard)}
</AutoGrid>
</section>
<section>
<h2>Stage</h2>
<AutoGrid columnWidth='15rem'>
{memberMock.slice(15, 20).map(MemberCard)}
</AutoGrid>
</section>
<section>
<h2>Étudiants</h2>
<AutoGrid columnWidth='15rem'>
{memberMock.slice(0, 5).map(MemberCard)}
</AutoGrid>
</section>
</>
)
}

View file

@ -7,5 +7,6 @@
@import url('../../components/MachineCard.css');
@import url('../../components/ProjectCard.css');
@import url('../../components/AutoGrid.css');
@import url('../../components/MemberCard.css');
@import url('../../islands/ThemePicker.css');
@import url('../../islands/SearchBox.css');