Magazine Layout

When to use

Reach for MagazineLayout when you need a magazine- style layout: optional hero band, optional filter row, descending- density card tower in a main column, optional sticky sidebar, infinite scroll. The layout is generic over your item type and slot-based — bring your own cards, hero, filter bar, sidebar.

Minimal example

import { MagazineLayout } from "@/components/magazine-layout";

<MagazineLayout<Article>
  displayedItems={articles}
  renderItem={(article, slot) => (
    <ArticleCard article={article} variant={slot} />
  )}
/>;

slot is either "large" (lead article) or "medium" (the rest of the tower). Your renderer maps slot to a card variant.

Full magazine composition (the canonical use case)

Combines all four sibling components from the news family. The layout itself imports nothing from them — composition happens at the consumer level.

import { MagazineLayout, useMagazineFilter } from "@/components/magazine-layout";
import { NewsCard } from "@/components/news-card";
import { FilterBar } from "@/components/filter-bar";
import { CategoryCloud } from "@/components/category-cloud";
import { NewsletterSignup } from "@/components/newsletter-signup";
import { PageHero } from "@/components/page-hero";

const filtered = useMagazineFilter<Article>({
  items: articles,
  pageSize: 6,
  isFeatured: (a) => a.featured,
  filterPredicate: (a) => a.title.includes(search) && (cat ? a.category === cat : true),
  sortComparator: (a, b) => +new Date(b.date) - +new Date(a.date),
});

<MagazineLayout<Article>
  hero={<PageHero badge="News" title="Latest Stories" description="..." />}
  filterBar={<FilterBar categories={categories} onChange={...} />}
  sidebar={
    <>
      <CategoryCloud items={categories} value={cat} onChange={setCat} title="Categories" />
      <NewsletterSignup onSubmit={subscribe} />
    </>
  }
  displayedItems={filtered.displayedItems}
  featuredItem={filtered.featuredItem}
  hasMore={filtered.hasMore}
  isLoading={filtered.isLoading}
  onLoadMore={filtered.loadMore}
  renderItem={(article, slot) => (
    <NewsCard item={article} variant={slot} href={`/news/${article.id}`} />
  )}
/>;

Companion hook: useMagazineFilter

For consumers who don't need server-driven filtering / pagination, useMagazineFilter derives all the props the layout expects from your full items array + filter / sort / feature predicates.

const {
  displayedItems,
  featuredItem,
  hasMore,
  isLoading,
  filteredCount,
  loadMore,
  reset,
} = useMagazineFilter<Article>({
  items,
  pageSize: 6,
  isFeatured: (a) => a.featured,
  filterPredicate: (a) => /* filter */,
  sortComparator: (a, b) => /* sort */,
  simulatedLoadingMs: 500, // optional artificial delay for demos
});

Slot-only patterns

• Omit sidebar — main column expands to full width.
• Omit hero and filterBar — bare layout for documentation indexes or simple lists.
• Provide emptyState for a custom empty fallback; otherwise the default labels.emptyStateText renders.
• Use renderFeatured for a different visual on the featured item (e.g., a hero card variant) vs. the in-tower large.

Server-driven filtering / pagination

Skip the companion hook. Drive displayedItems / hasMore / isLoading / onLoadMore from your data layer (React Query, Tanstack Router, etc.) directly:

const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery(...);

<MagazineLayout
  displayedItems={data?.pages.flatMap(p => p.items) ?? []}
  hasMore={!!hasNextPage}
  isLoading={isFetching}
  onLoadMore={() => fetchNextPage()}
  renderItem={...}
/>;

Accessibility

• Sidebar uses <aside> for landmark semantics.
• Loader region has aria-live="polite" with a visually-hidden text label.
• End-of-list announcement also uses aria-live="polite".
• Tower is plain CSS grid — natural Tab order through items.