---
estimated_steps: 23
estimated_files: 2
skills_used: []
---

# T02: Creator stats topic-colored pill badges

Replace the run-on text stats on CreatorDetail page with colored pill badges using existing badge CSS classes.

## Steps

1. In `frontend/src/pages/CreatorDetail.tsx`, add import: `import { catSlug } from "../utils/catSlug";`

2. Find the stats section (~line 108-126) that renders `<span className="creator-detail__topic-stat">` with dot separators. Replace the entire `.map(([cat, count], i) => ...)` block with pills:
   ```tsx
   .map(([cat, count]) => (
     <span key={cat} className={`badge badge--cat-${catSlug(cat)}`}>
       {cat}: {count}
     </span>
   ))
   ```
   Remove the dot separator spans (`queue-card__separator`) between them.

3. Wrap the topic stat pills in a flex container: `<span className="creator-detail__topic-pills">` and add CSS in `frontend/src/App.css`:
   ```css
   .creator-detail__topic-pills {
     display: flex;
     flex-wrap: wrap;
     gap: 0.375rem;
     align-items: center;
   }
   ```

4. Remove the old `.creator-detail__topic-stat` class from App.css if it exists (or leave it — no harm).

5. Verify: `cd frontend && npx tsc --noEmit && npm run build`

## Inputs

- `frontend/src/pages/CreatorDetail.tsx`
- `frontend/src/App.css`
- `frontend/src/utils/catSlug.ts`

## Expected Output

- `frontend/src/pages/CreatorDetail.tsx`
- `frontend/src/App.css`

## Verification

cd frontend && npx tsc --noEmit && npm run build
