plspace/src/components/blog/BlogList.svelte

<script lang="ts">
  /** A `Feed<Status>` rendered as a list of blog entries, plus its pager. */
  import type { Status } from '$lib/api/types'
  import type { Feed } from '$lib/stores/feed.svelte'
  import BlogEntry from './BlogEntry.svelte'
  import Pager from '../common/Pager.svelte'

  interface Props {
    feed: Feed<Status>
    emptyText?: string
    label?: string
    longFormDate?: boolean
  }

  let {
    feed,
    emptyText = 'There are no Blog Entries yet.',
    label = 'View More Entries',
    longFormDate = false,
  }: Props = $props()
</script>

<ul class="blog-list">
  {#each feed.items as status (status.id)}
    <li class="blog-list-item">
      <BlogEntry
        {status}
        {longFormDate}
        onupdate={(next) => feed.update(status.id, () => next)}
        ondelete={(id) => feed.remove(id)}
      />
    </li>
  {/each}
</ul>

<Pager {feed} {emptyText} {label} />