Générer du code propre avec l'IA

Crée un composant React [NomComposant] en TypeScript.

## Props
- [prop1] : [type] - [description]
- [prop2] : [type] - [description]  
- [prop3?] : [type] - [description] (optionnel)

## Comportement
- [ce que fait le composant]
- [interactions utilisateur]
- [états à gérer : loading, error, empty]

## Style
- Tailwind CSS
- [responsive ? animations ? dark mode ?]

## Contraintes
- Pas de dépendance externe
- Server Component / Client Component ? (préciser)
- [accessibilité requise ?]

## Exemple d'utilisation
```tsx
<NomComposant prop1="valeur" prop2={42} />
```

Crée un composant React Avatar en TypeScript.

## Props
- src : string - URL de l'image
- alt : string - texte alternatif
- size : "sm" | "md" | "lg" - taille (32px, 48px, 64px)
- fallback? : string - initiales si pas d'image (ex: "JD")
- status? : "online" | "offline" | "away" - indicateur de statut

## Comportement
- Si l'image ne charge pas, afficher les initiales sur fond coloré
- Le point de statut est positionné en bas à droite
- Transition douce au hover (léger scale)

## Style
- Tailwind CSS, forme ronde
- Responsive (pas de taille fixe en px, utiliser les classes Tailwind)

## Contraintes
- Pas de librairie d'images externe
- Accessible : alt sur l'img, aria-label pour le statut
- Client Component (gère le onError)

Crée un hook React [useNomHook] en TypeScript.

## Paramètres
- [param1] : [type] - [description]
- [options?] : { [clé]: [type] } - options de config

## Retour
- [valeur1] : [type] - [description]
- [fonction1] : [signature] - [description]
- [état1] : [type] - [description]

## Comportement interne
- [effet au montage ?]
- [cleanup au démontage ?]
- [dépendances du useEffect ?]

## Edge cases
- [que se passe-t-il si... ?]
- [SSR safe ?]
- [gestion d'erreurs ?]

Crée une API route Next.js 15 (App Router) pour [description].

## Endpoint
- Méthode : [GET | POST | PUT | DELETE]
- Path : /api/[path]

## Input
- [Body / Query params / URL params] :
  [décrire la structure attendue]

## Output
- Succès (200) : { [structure] }
- Erreur validation (400) : { error: string }
- Non trouvé (404) : { error: string }
- Erreur serveur (500) : { error: string }

## Logique
- [étapes de traitement]
- [validation avec Zod]
- [interaction base de données]

## Sécurité
- [authentification requise ?]
- [rate limiting ?]
- [validation des inputs ?]