4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1139,import { useState } from 'react' import { Card } from '../surface' import { Stack, Row, Grid } from '../layout' import { Heading, Text, Eyebrow } from '../text' import { Avatar } from '../avatar' import { Badge } from '../media' import { Pagination } from '../pagination' import { Segmented } from '../Segmented' import { Empty } from '../feedback' interface Post { id: string category: string title: string excerpt: string author: string date: string tone: 'purple' | 'mint' | 'blue' | 'pink' } const FEATURED: Post = { id: '0', category: 'Design', tone: 'purple', title: 'Why depth beats flat', excerpt: 'Flat design threw away the one signal users feel before they read: elevation. Here is the case for putting it back — carefully.', author: 'Ada L.', date: 'Jul 18', } const POSTS: Post[] = [ { id: '1', category: 'Engineering', tone: 'blue', title: 'Migrating 2,700 lines of CSS to Tailwind, safely', excerpt: 'A snapshot gate that diffs computed styles let us refactor with zero visual drift.', author: 'Grace H.', date: 'Jul 15' }, { id: '2', category: 'Product', tone: 'mint', title: 'Variants, not classNames', excerpt: 'How a strict component API keeps a whole app on-system without anyone policing it.', author: 'Alan T.', date: 'Jul 11' }, { id: '3', category: 'Craft', tone: 'pink', title: 'Optical centering, and why math lies', excerpt: 'A perfectly centered glyph looks low on a cushion. The fix is half the floor lip.', author: 'Katherine J.', date: 'Jul 8' }, { id: '4', category: 'Design', tone: 'purple', title: 'Pastel that passes WCAG', excerpt: 'Ink on pastel, never white — the one deviation from the reference, and the measurements behind it.', author: 'Ada L.', date: 'Jul 2' }, ] // 'All' plus every category the grid actually has — never hand-maintained // against POSTS, so a new post's category shows up in the filter for free. const CATEGORIES = ['All', ...Array.from(new Set(POSTS.map((p) => p.category)))] function Byline({ author, date }: { author: string; date: string }) { return ( {author} · {date} ) } /** An example blog index: a featured post, a category filter that narrows the * grid, and pagination. */ export function BlogBlock() { const [page, setPage] = useState(1) const [category, setCategory] = useState('All') const shown = category === 'All' ? POSTS : POSTS.filter((p) => p.category === category) return (

The 1st-Pouf blog Notes on soft software {FEATURED.category} {FEATURED.title} {FEATURED.excerpt}

{ setCategory(c) setPage(1) // a stale page number under a shorter filtered list reads as broken pagination }} options={CATEGORIES.map((c) => ({ value: c, label: c }))} /> {shown.length === 0 ? ( Try a different filter. ) : ( {shown.map((p) => ( {p.category} {p.title} {p.excerpt} ))} )}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/avatar.json","https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/feedback.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/pagination.json","https://1st-pouf.worksonmy.dev/r/segmented.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/blog.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/blog.tsx"}],"className":"h-[70svh] min-h-80"}]]}]