96 lines
2.3 KiB
Text
96 lines
2.3 KiB
Text
---
|
|
import { directus } from "../util"
|
|
import DirectusImg from "./DirectusImg.astro"
|
|
|
|
type Member = {
|
|
firstname: string
|
|
image?: string
|
|
chairman?: boolean
|
|
}
|
|
const members = await directus<Member[]>("items/members?sort=firstname")
|
|
---
|
|
|
|
<div class="flex flex-col sm:flex-row justify-evenly gap-6">
|
|
<div class="flex flex-col items-center">
|
|
<span class="icon-[ph--users-three-duotone] w-[100px] h-[100px]"></span>
|
|
<p>{members.length} Mitglieder</p>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<span class="icon-[ph--house-line-duotone] w-[100px] h-[100px]"></span>
|
|
<p>1 Werkstatt</p>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<span class="icon-[ph--lightbulb-duotone] w-[100px] h-[100px]"></span>
|
|
<p>∞ Ideen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-2xl md:text-4xl pt-8">Vorstand</div>
|
|
|
|
<div
|
|
class="flex flex-row flex-wrap gap-6 justify-evenly sm:justify-center text-base"
|
|
>
|
|
{
|
|
members
|
|
.filter((m) => m.chairman)
|
|
.map((member) => (
|
|
<div>
|
|
<DirectusImg
|
|
src={
|
|
member.image != null
|
|
? member.image
|
|
: "a8f48962-9f0e-40e6-abd2-e932aa9dea2e"
|
|
}
|
|
widths={[200]}
|
|
format="webp"
|
|
alt={"Profilbild von " + member.firstname}
|
|
class="rounded-full w-[100px] h-[100px]"
|
|
/>
|
|
|
|
<p>{member.firstname}</p>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<div class="text-2xl md:text-4xl pt-8">Mitglieder</div>
|
|
|
|
<div
|
|
class="flex flex-row flex-wrap gap-6 justify-evenly sm:justify-center text-base"
|
|
>
|
|
{
|
|
members
|
|
.filter((m) => !m.chairman)
|
|
.map((member) => (
|
|
<div>
|
|
<DirectusImg
|
|
src={
|
|
member.image != null
|
|
? member.image
|
|
: "a8f48962-9f0e-40e6-abd2-e932aa9dea2e"
|
|
}
|
|
widths={[200]}
|
|
format="webp"
|
|
alt={"Profilbild von " + member.firstname}
|
|
class="rounded-full w-[100px] h-[100px]"
|
|
/>
|
|
|
|
<p>{member.firstname}</p>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
<div>
|
|
<div>
|
|
<DirectusImg
|
|
src="6920d1f2-feeb-4eb3-a066-988b3f60a6d9"
|
|
widths={[200]}
|
|
format="webp"
|
|
alt="Du?"
|
|
class="rounded-full w-[100px] h-[100px]"
|
|
/>
|
|
</div>
|
|
|
|
<p>Du?</p>
|
|
</div>
|
|
</div>
|