feat: ✨ add members card and routes

components/MemberCard.css

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

components/MemberCard.tsx

@@ -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('')
+}

routes/index.tsx

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

routes/membres/[id].tsx

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

routes/membres/index.tsx

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

src/stylesheets/components.css

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