website/islands/BlogCardList.tsx

59 lines
1.4 KiB
TypeScript
Raw Normal View History

import { BlogCard, BlogProps } from ':components/BlogBlocks.tsx'
import CardList from ':islands/CardList.tsx'
import type { Ref } from 'preact'
export default function BlogCardList(
{ limit, usePlaceholder, useObserver }: {
limit?: number
usePlaceholder?: boolean
useObserver?: boolean
},
) {
if (usePlaceholder) {
return (
<CardList
apiRoute='news/fetchAll'
builder={builder}
limit={limit}
placeholder={Placeholder}
fallback={Fallback}
useObserver={useObserver}
/>
)
}
return (
<CardList
apiRoute='news/fetchAll'
builder={builder}
limit={limit}
/>
)
}
function builder(news: BlogProps) {
return BlogCard({ ...news, lastUpdate: new Date(news.lastUpdate) })
}
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 de news disponible</h3>
</div>
)
}