forked from phc/website
30 lines
793 B
TypeScript
30 lines
793 B
TypeScript
import { useComputed, useSignal, type ReadonlySignal } from '@preact/signals'
|
|
import type { JSX } from 'preact/jsx-runtime'
|
|
|
|
export const ShowMore = <T extends any>({
|
|
items,
|
|
pageSize,
|
|
children,
|
|
}: {
|
|
items: ReadonlySignal<T[]>
|
|
pageSize: number
|
|
children: (item: T) => JSX.Element
|
|
}) => {
|
|
const $shownItems = useSignal(pageSize)
|
|
|
|
const $paginatedItems = useComputed(() => {
|
|
return items.value.slice(0, $shownItems.value)
|
|
})
|
|
|
|
return (
|
|
<>
|
|
{$paginatedItems.value.map(children)}
|
|
<div class="show-more">
|
|
{$shownItems.value < items.value.length && (
|
|
<button onClick={() => ($shownItems.value += pageSize)}>Mostra altri</button>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|