initial commit

src/components/blog/BlogList.svelte

@@ -0,0 +1,36 @@
+<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} />