61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { MemberCard } from ':components/MemberCard.tsx'
|
|
import CardList from ':islands/CardList.tsx'
|
|
import type { Ref } from 'preact'
|
|
|
|
export default function MemberCardList(
|
|
{ limit, filters, usePlaceholder, useObserver }: {
|
|
filters?: [string, string][]
|
|
limit?: number
|
|
usePlaceholder?: boolean
|
|
useObserver?: boolean
|
|
},
|
|
) {
|
|
const query = new URL('members/fetchAll', 'https://null/')
|
|
filters?.forEach((filter) => query.searchParams.set(...filter))
|
|
|
|
const apiRoute = `${query.pathname}${query.search}`
|
|
|
|
if (usePlaceholder) {
|
|
return (
|
|
<CardList
|
|
apiRoute={apiRoute}
|
|
builder={MemberCard}
|
|
limit={limit}
|
|
placeholder={Placeholder}
|
|
fallback={Fallback}
|
|
useObserver={useObserver}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<CardList
|
|
apiRoute={apiRoute}
|
|
builder={MemberCard}
|
|
limit={limit}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function Placeholder({ ref }: { ref?: Ref<HTMLDivElement> | undefined }) {
|
|
return (
|
|
<div
|
|
// class='components__blog_block components__blog_block--card components__blog_block--placeholder'
|
|
ref={ref}
|
|
>
|
|
<h3>Chargement ...</h3>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Fallback() {
|
|
return (
|
|
<div
|
|
// class='components__blog_block components__blog_block--card components__blog_block--fallback'
|
|
inert
|
|
>
|
|
<h3>Pas d'utilisateur</h3>
|
|
</div>
|
|
)
|
|
}
|