Block Catalog — Code
TypeScript
A typed async function with generics and interface annotations
1interface User {2 id: string3 name: string4 email: string5 role: 'admin' | 'editor' | 'viewer'6}78async function fetchUsers(role?: User['role']): Promise<User[]> {9 const params = new URLSearchParams()10 if (role) params.set('role', role)1112 const res = await fetch(`/api/users?${params}`)13 if (!res.ok) {14 throw new Error(`Failed to fetch users: ${res.status}`)15 }1617 const data: { users: User[] } = await res.json()18 return data.users19}
JavaScript
An async fetch wrapper with retry logic and error handling
1async function fetchWithRetry(url, options = {}, retries = 3) {2 for (let attempt = 1; attempt <= retries; attempt++) {3 try {4 const res = await fetch(url, {5 headers: { 'Content-Type': 'application/json' },6 ...options,7 })89 if (!res.ok && attempt < retries) {10 await new Promise((r) => setTimeout(r, 1000 * attempt))11 continue12 }1314 return await res.json()15 } catch (err) {16 if (attempt === retries) throw err17 await new Promise((r) => setTimeout(r, 1000 * attempt))18 }19 }20}
CSS
Responsive grid layout with container queries and custom properties
1.grid-layout {2 --grid-gap: 1rem;3 --min-col-width: 280px;45 display: grid;6 grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));7 gap: var(--grid-gap);8 padding: var(--grid-gap);9}1011@container (min-width: 640px) {12 .grid-layout {13 --grid-gap: 1.5rem;14 --min-col-width: 320px;15 }16}1718@media (min-width: 1024px) {19 .grid-layout {20 --grid-gap: 2rem;21 grid-template-columns: repeat(3, 1fr);22 }23}