website/islands/MemberCardList.tsx

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