website/islands/MemberCardList.tsx

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