Filterable Blog Index

1"use client"
2 
3import { useState } from "react"
4import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
5import { Badge } from "@/components/ui/badge"
6import { Button } from "@/components/ui/button"
7import {
8  Card,
9  CardContent,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from "@/components/ui/card"
14import { cn } from "@/lib/utils"
15import { IconPlaceholder } from "@/components/icons/icon-placeholder"
16 
17const featured = {
18  category: "Engineering",
19  title: "How we cut API latency by 60% with edge caching",
20  image:
21    "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&q=80",
22  excerpt:
23    "Our monolith was fast enough, until it wasn't. We traced the bottleneck to cold database reads on every request and rearchitected the caching layer in three weeks.",
24  author: { name: "Lena Park", initials: "LP", img: 47 },
25  date: "Jun 9, 2026",
26  readTime: "7 Min Read",
27}
28 
29const categories = [
30  "All",
31  "Engineering",
32  "Design",
33  "Product",
34  "Company",
35] as const
36 
37const posts = [
38  {
39    category: "Design",
40    title: "Building a token system that survives a rebrand",
41    image:
42      "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&q=80",
43    excerpt:
44      "Semantic tokens feel abstract until your brand color changes overnight.",
45    author: { name: "Marcus Webb", initials: "MW", img: 12 },
46    date: "May 28, 2026",
47    readTime: "5 Min Read",
48  },
49  {
50    category: "Product",
51    title: "What 1,200 user interviews taught us about onboarding",
52    image:
53      "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80",
54    excerpt:
55      "Drop-off at step two had nothing to do with the UI, it was a mental model gap.",
56    author: { name: "Sofia Andrade", initials: "SA", img: 45 },
57    date: "May 14, 2026",
58    readTime: "9 Min Read",
59  },
60  {
61    category: "Engineering",
62    title: "Shipping a type-safe API layer without a build step",
63    image:
64      "https://images.unsplash.com/photo-1667372393119-3d4c48d07fc9?w=800&q=80",
65    excerpt:
66      "We replaced our codegen pipeline with inferred types and never looked back.",
67    author: { name: "Devon Ross", initials: "DR", img: 13 },
68    date: "May 2, 2026",
69    readTime: "6 Min Read",
70  },
71  {
72    category: "Company",
73    title: "Why Acme is going remote-first in 2026",
74    image:
75      "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80",
76    excerpt:
77// … truncated