Janady13/llms-txt-hub / apps/web/components/ui/paginated-content.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/llms-txt-hub / apps/web/components/ui/paginated-content.tsx
Date	Not specified in source
Repository	Janady13/llms-txt-hub
Revision	e0f4bf978d4df168369c7601d9c5f5ea89e84377
Branch	main
Path or archive member	apps/web/components/ui/paginated-content.tsx
Original SHA-256	e403356d778fbaad540c66675f546079f2a5866473f07dd56cf29a55d1bbe3ca
Git blob SHA	b182be7e07a174a0cf9fec8c9796bf482f837082
Reading-copy SHA-256	e403356d778fbaad540c66675f546079f2a5866473f07dd56cf29a55d1bbe3ca

Original source ↗

Recovered source transcript

Download complete source text ↓87 lines · 2.3 KB

'use client'

import { useLoadMore } from '@/hooks/use-load-more'
import { LoadMore } from './load-more'

interface PaginatedContentProps<T> {
  items: T[]
  renderItem: (item: T, index: number) => React.ReactNode
  initialItemsPerPage?: number
  itemsPerLoad?: number
  loadMoreVariant?: 'button' | 'auto' | 'scroll'
  loadMoreText?: string
  noMoreText?: string
  containerClassName?: string
  itemsClassName?: string
  emptyState?: React.ReactNode
  threshold?: number
}

export function PaginatedContent<T>({
  items,
  renderItem,
  initialItemsPerPage = 12,
  itemsPerLoad = 12,
  loadMoreVariant = 'button',
  loadMoreText = 'Load more',
  noMoreText = 'All items loaded',
  containerClassName = '',
  itemsClassName = 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4',
  emptyState,
  threshold = 200
}: PaginatedContentProps<T>) {
  const { displayedItems, hasMore, isLoading, loadMore, showItemsCount, totalItemsCount } =
    useLoadMore({
      items,
      initialItemsPerPage,
      itemsPerLoad
    })

  if (items.length === 0 && emptyState) {
    return <div className={containerClassName}>{emptyState}</div>
  }

  return (
    <div className={containerClassName}>
      {/* Items Grid/List */}
      <div className={itemsClassName}>
        {displayedItems.map((item, index) => renderItem(item, index))}
      </div>

      {/* Load More Component */}
      {(hasMore || loadMoreVariant !== 'scroll') && (
        <LoadMore
          onLoadMore={loadMore}
          hasMore={hasMore}
          isLoading={isLoading}
          loadMoreText={loadMoreText}
          noMoreText={noMoreText}
          showItemsCount={showItemsCount}
          totalItemsCount={totalItemsCount}
          variant={loadMoreVariant}
          threshold={threshold}
        />
      )}
    </div>
  )
}

// Convenience wrapper for common website grid layout
export function WebsitesPaginatedGrid<T>({
  items,
  renderItem,
  ...props
}: Omit<PaginatedContentProps<T>, 'itemsClassName'> & {
  items: T[]
  renderItem: (item: T, index: number) => React.ReactNode
}) {
  return (
    <PaginatedContent
      items={items}
      renderItem={renderItem}
      itemsClassName="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 4xl:grid-cols-8 gap-4"
      {...props}
    />
  )
}