Block Catalog — Code

TypeScript

A typed async function with generics and interface annotations

1interface User {
2  id: string
3  name: string
4  email: string
5  role: 'admin' | 'editor' | 'viewer'
6}
7
8async function fetchUsers(role?: User['role']): Promise<User[]> {
9  const params = new URLSearchParams()
10  if (role) params.set('role', role)
11
12  const res = await fetch(`/api/users?${params}`)
13  if (!res.ok) {
14    throw new Error(`Failed to fetch users: ${res.status}`)
15  }
16
17  const data: { users: User[] } = await res.json()
18  return data.users
19}

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      })
8
9      if (!res.ok && attempt < retries) {
10        await new Promise((r) => setTimeout(r, 1000 * attempt))
11        continue
12      }
13
14      return await res.json()
15    } catch (err) {
16      if (attempt === retries) throw err
17      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;
4
5  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}
10
11@container (min-width: 640px) {
12  .grid-layout {
13    --grid-gap: 1.5rem;
14    --min-col-width: 320px;
15  }
16}
17
18@media (min-width: 1024px) {
19  .grid-layout {
20    --grid-gap: 2rem;
21    grid-template-columns: repeat(3, 1fr);
22  }
23}