---
estimated_steps: 39
estimated_files: 3
skills_used: []
---

# T02: Render social link icons in hero and enhance stats bar with all counts

Create a SocialIcons component with inline SVGs for common platforms, render social links as clickable icons in the hero section, and update the stats bar to show technique/video/moment counts.

## Steps

1. Create `frontend/src/components/SocialIcons.tsx` following the `CategoryIcons.tsx` pattern (shared style constant `S` for dimensions, `P` for stroke props). Include icons for: instagram, bandcamp, youtube, soundcloud, twitter/x, spotify, facebook, and a globe/website fallback. Each icon is a named export function returning an inline SVG. Also export a `SocialIcon` component that takes `platform: string` and returns the matching icon (case-insensitive key lookup), falling back to globe.

2. In `frontend/src/pages/CreatorDetail.tsx`:
   - Import `SocialIcon` from `../components/SocialIcons`.
   - After the bio paragraph and before genre pills in the `.creator-hero__info` div, add a conditional block:
     ```tsx
     {creator.social_links && Object.keys(creator.social_links).length > 0 && (
       <div className="creator-hero__socials">
         {Object.entries(creator.social_links).map(([platform, url]) => (
           <a key={platform} href={url} target="_blank" rel="noopener noreferrer"
              className="creator-hero__social-link" title={platform}>
             <SocialIcon platform={platform} />
           </a>
         ))}
       </div>
     )}
     ```
   - Update the stats bar to show all three counts:
     ```tsx
     <span>{creator.technique_count} technique{creator.technique_count !== 1 ? 's' : ''}</span>
     <span className="creator-detail__stats-sep">·</span>
     <span>{creator.video_count} video{creator.video_count !== 1 ? 's' : ''}</span>
     <span className="creator-detail__stats-sep">·</span>
     <span>{creator.moment_count} moment{creator.moment_count !== 1 ? 's' : ''}</span>
     ```

3. In `frontend/src/App.css`, add styles:
   - `.creator-hero__socials` — flex row, gap 0.5rem, margin 0.5rem 0
   - `.creator-hero__social-link` — color: var(--color-text-muted), hover: var(--color-accent), transition
   - `.creator-hero__social-link svg` — width: 1.25rem, height: 1.25rem
   - `.creator-detail__stats-sep` — color: var(--color-text-muted), margin: 0 0.25rem
   - Adjust `.creator-detail__stats-bar` to use flex with gap for the count items

4. Verify: `cd frontend && npx tsc --noEmit && npm run build` — zero errors, clean build.

## Must-Haves

- [ ] SocialIcons.tsx with at least 8 platform icons + fallback
- [ ] Social links render as clickable `<a>` tags with `target=_blank` and `rel=noopener noreferrer`
- [ ] Stats bar shows technique_count, video_count, moment_count
- [ ] CSS styles for social links and stats separators
- [ ] TypeScript compiles and production build succeeds

## Inputs

- `frontend/src/components/SocialIcons.tsx`
- `frontend/src/pages/CreatorDetail.tsx`
- `frontend/src/App.css`
- `frontend/src/components/CategoryIcons.tsx`
- `backend/schemas.py`
- `frontend/src/api/public-client.ts`

## Expected Output

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

## Verification

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