From 08edb5b791711792393d8fc6c3e81d1c93704eec Mon Sep 17 00:00:00 2001 From: Julien Oculi Date: Thu, 15 Feb 2024 14:04:01 +0100 Subject: [PATCH] feat: :sparkles: add members card and routes --- components/MemberCard.css | 49 ++++++++++++++++++++++++++++++++++ components/MemberCard.tsx | 47 ++++++++++++++++++++++++++++++++ routes/index.tsx | 1 + routes/membres/[id].tsx | 12 +++++++++ routes/membres/index.tsx | 40 +++++++++++++++++++++++++++ src/stylesheets/components.css | 1 + 6 files changed, 150 insertions(+) create mode 100644 components/MemberCard.css create mode 100644 components/MemberCard.tsx create mode 100644 routes/membres/[id].tsx create mode 100644 routes/membres/index.tsx diff --git a/components/MemberCard.css b/components/MemberCard.css new file mode 100644 index 0000000..b89e63f --- /dev/null +++ b/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); + } +} diff --git a/components/MemberCard.tsx b/components/MemberCard.tsx new file mode 100644 index 0000000..477242d --- /dev/null +++ b/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 ( +
+
+
+

+ {name} +

+
+ {groups.map((group) => {group})} +
+
+
+ ) +} + +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('') +} diff --git a/routes/index.tsx b/routes/index.tsx index 696753a..c8ee632 100644 --- a/routes/index.tsx +++ b/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' diff --git a/routes/membres/[id].tsx b/routes/membres/[id].tsx new file mode 100644 index 0000000..293bac5 --- /dev/null +++ b/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) + :

Membre inconnu, peut être serai vous le prochain

+ ) +} diff --git a/routes/membres/index.tsx b/routes/membres/index.tsx new file mode 100644 index 0000000..c076f95 --- /dev/null +++ b/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 ( + <> +

Nos membres

+
+

Permanents

+ + {memberMock.slice(0, 5).map(MemberCard)} + +
+
+

Bénévoles

+ + {memberMock.slice(5, 10).map(MemberCard)} + +
+
+

Service civique

+ + {memberMock.slice(10, 15).map(MemberCard)} + +
+
+

Stage

+ + {memberMock.slice(15, 20).map(MemberCard)} + +
+
+

Étudiants

+ + {memberMock.slice(0, 5).map(MemberCard)} + +
+ + ) +} diff --git a/src/stylesheets/components.css b/src/stylesheets/components.css index 6d00ba5..fc449d0 100644 --- a/src/stylesheets/components.css +++ b/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');