feat: ✨ add members card and routes
This commit is contained in:
parent
3dc9de3c2f
commit
08edb5b791
49
components/MemberCard.css
Normal file
49
components/MemberCard.css
Normal 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
47
components/MemberCard.tsx
Normal 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('')
|
||||||
|
}
|
|
@ -4,6 +4,7 @@ import { BlogCard, blogMock } from '../components/BlogCard.tsx'
|
||||||
import { CohabitInfoTable } from '../components/CohabitInfoTable.tsx'
|
import { CohabitInfoTable } from '../components/CohabitInfoTable.tsx'
|
||||||
import { Heros } from '../components/Heros.tsx'
|
import { Heros } from '../components/Heros.tsx'
|
||||||
import { MachineCard, machineMock } from '../components/MachineCard.tsx'
|
import { MachineCard, machineMock } from '../components/MachineCard.tsx'
|
||||||
|
import { MemberCard, memberMock } from '../components/MemberCard.tsx'
|
||||||
import { ProjectCard, projectMock } from '../components/ProjectCard.tsx'
|
import { ProjectCard, projectMock } from '../components/ProjectCard.tsx'
|
||||||
import { SponsorCards } from '../components/SponsorCards.tsx'
|
import { SponsorCards } from '../components/SponsorCards.tsx'
|
||||||
|
|
||||||
|
|
12
routes/membres/[id].tsx
Normal file
12
routes/membres/[id].tsx
Normal 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
40
routes/membres/index.tsx
Normal 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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
|
@ -7,5 +7,6 @@
|
||||||
@import url('../../components/MachineCard.css');
|
@import url('../../components/MachineCard.css');
|
||||||
@import url('../../components/ProjectCard.css');
|
@import url('../../components/ProjectCard.css');
|
||||||
@import url('../../components/AutoGrid.css');
|
@import url('../../components/AutoGrid.css');
|
||||||
|
@import url('../../components/MemberCard.css');
|
||||||
@import url('../../islands/ThemePicker.css');
|
@import url('../../islands/ThemePicker.css');
|
||||||
@import url('../../islands/SearchBox.css');
|
@import url('../../islands/SearchBox.css');
|
||||||
|
|
Loading…
Reference in a new issue