Article List Grid

1import * as React from 'react';
2 
3// @interlace/article-list-grid v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/article-list-grid
5// What changed since: https://ds.interlace.tools/c/article-list-grid#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — ArticleListGrid
10 *
11 * Grid of ArticleCards with an optional featured slot above. The pattern
12 * blog index pages reach for: one big featured card (overlay variant)
13 * above N tiles. Composes RelatedPosts-style streaming with proper
14 * loading + empty states.
15 *
16 * ## Anatomy
17 *
18 *   <section data-slot="article-list-grid" data-min-viewport="320">
19 *     <Container>
20 *       {featured && <ArticleCard variant="overlay" priority />}
21 *       <Grid cols={3}>{posts.map(<ArticleCard />)}</Grid>
22 *     </Container>
23 *   </section>
24 *
25 * | Rule | Concept                          | Where in this file                                          |
26 * | ---- | -------------------------------- | ----------------------------------------------------------- |
27 * | R4   | Extends native el                | `React.ComponentProps<'section'>` + props                   |
28 * | R6   | data-slot on root                | `data-slot="article-list-grid"`                             |
29 * | R10  | Composition seam                 | `featured` + `posts` arrays of ArticleCard props            |
30 * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |
31 * | R18  | Tailwind only                    | Zero inline `style`                                         |
32 * | R25  | Server component                 | No hooks                                                    |
33 * | R26  | A11y                             | `<section>` landmark                                        |
34 */
35 
36import { cn } from '@/lib/utils';
37import { Container } from '@/components/ui/container';
38import { Grid } from '@/components/ui/grid';
39import { Skeleton } from '@/components/ui/skeleton';
40import { Stack } from '@/components/ui/stack';
41import { Typography } from '@/components/ui/typography';
42import { ArticleCard, type ArticleCardProps } from '@/components/ui/patterns/article-card';
43 
44export const MIN_VIEWPORT = 320 as const;
45 
46interface ArticleListGridProps extends Omit<React.ComponentProps<'section'>, 'title'> {
47  title?: React.ReactNode;
48  lead?: React.ReactNode;
49// … truncated