Générateur de composants avatar.

Crée un composant React <Avatar /> réutilisable avec Tailwind CSS. Pattern : avatar basique avec image et repli sur les initiales. Mise en page : avatar circulaire affichant un <img> lorsque src se charge ; en cas d'erreur ou de src manquant, affiche un repli sur les initiales généré, avec une couleur de fond déterministe dérivée de la chaîne du nom. API : props pour src, name (obligatoire, utilisé pour le texte alternatif et les initiales), size ("xs" | "sm" | "md" | "lg" | "xl"), et passage de className. Inclus : texte alternatif obligatoire issu de name, loading="lazy", bascule vers le repli via onError et un état local, anneau focus-visible lorsque le composant est rendu dans un lien ou un bouton, prise en charge des thèmes clair et sombre via les classes Tailwind dark:. Contraintes : React + Tailwind uniquement, aucune dépendance UI ou image externe, aucun décalage de mise en page pendant le chargement de l'image (réserve la boîte avec des width/height fixes).

Crée un composant React <AvatarWithStatus /> avec Tailwind CSS. Pattern : avatar avec badge de présence. Mise en page : avatar circulaire avec un petit point de statut épinglé en bas à droite, séparé de la photo par un anneau de la couleur du fond afin qu'il reste lisible sur n'importe quelle surface. API : props pour src, name, size et status ("online" | "away" | "busy" | "offline"), avec la couleur du point mappée par statut et la taille du point proportionnelle à celle de l'avatar. Inclus : repli sur les initiales, une étiquette textuelle masquée visuellement annonçant le statut aux lecteurs d'écran (ne te repose pas sur la seule couleur), aria-label sur le conteneur, prise en charge des thèmes clair et sombre. Contraintes : React + Tailwind uniquement, aucune dépendance UI externe, le point ne recouvre jamais plus de 30 % du bord de l'avatar.

Crée un composant React <AvatarGroup /> avec Tailwind CSS. Pattern : groupe d'avatars empilés (superposés) avec compteur de débordement. Mise en page : rangée horizontale d'avatars superposés sur environ un tiers, chacun entouré d'un anneau de la couleur du fond pour que la pile reste lisible ; au-delà du nombre maximal d'avatars visibles, affiche une puce compteur "+N" de mêmes taille et forme. API : props pour users (tableau de { src, name }), max (4 par défaut), size, et un onAddClick facultatif qui affiche une zone d'action « Inviter » en pointillés à la fin de la rangée. Comportement : au survol, l'avatar survolé passe au-dessus de ses voisins via une légère translation et un changement de z-index ; la pile inverse le sens de superposition grâce à une prop "dir". Inclus : repli sur les initiales pour chaque avatar, aria-label résumant le nombre total de membres, éléments focusables au clavier avec anneaux focus-visible, prise en charge des thèmes clair et sombre. Contraintes : React + Tailwind uniquement, aucune dépendance UI externe, aucune bibliothèque d'animation.

Crée un composant React <Avatar /> thématisable avec une échelle complète de tailles et de formes, en utilisant Tailwind CSS. Pattern : primitive avatar de design system. API : size ("xs" | "sm" | "md" | "lg" | "xl" | "2xl") mappée via un unique objet de correspondance qui pilote ensemble la largeur, la hauteur, la taille de police et le border-radius ; shape ("circle" | "squircle" | "square") ; plus src, name et className. Exigence : la taille de police des initiales évolue proportionnellement à la boîte de l'avatar afin que xs et 2xl restent tous deux équilibrés ; tous les tokens vivent dans un seul objet de configuration en haut du fichier, pour qu'une équipe puisse retravailler le thème en un seul endroit. Inclus : repli sur les initiales, texte alternatif issu de name, forwardRef vers l'élément racine, types de props TypeScript exportés, prise en charge des thèmes clair et sombre. Contraintes : React + Tailwind uniquement, aucune dépendance UI externe, aucun style inline hormis les tailles en pixels calculées.

Crée un composant React <AvatarUploader /> avec Tailwind CSS. Pattern : contrôle de photo de profil éditable pour une page de réglages. Mise en page : grand avatar à gauche avec un badge appareil photo circulaire épinglé en bas à droite ; à droite, un libellé « Photo de profil », une ligne d'indication sur les contraintes de fichier ("PNG ou JPG, jusqu'à 2 MB"), un bouton principal Téléverser et un bouton texte Supprimer. Comportement : <input type="file" accept="image/png,image/jpeg"> masqué, déclenché à la fois par le badge et par le bouton Téléverser ; validation côté client de la taille et du type avec un message d'erreur en ligne ; aperçu local via URL.createObjectURL, révoqué au démontage ; Supprimer rétablit le repli sur les initiales. Inclus : association <label> pour le champ de fichier, région aria-live pour les messages de validation, anneaux focus-visible, état désactivé/en cours de téléversement sur le bouton, prise en charge des thèmes clair et sombre. Contraintes : React + Tailwind uniquement, aucune bibliothèque d'upload, aucune dépendance de recadrage — expose un callback onChange(file) pour l'appelant.

Crée un composant React <AvatarRow /> (et un wrapper <MemberList />) avec Tailwind CSS. Pattern : ligne avatar et métadonnées pour les listes de membres, les tableaux et les fils de commentaires. Mise en page : avatar à gauche, un bloc sur deux lignes avec le nom de la personne (plus une coche de vérification facultative) et une ligne secondaire atténuée ("Équipe · Rôle"), et un bouton d'action en fin de ligne à droite ; le bloc central se tronque avec min-w-0 + truncate au lieu de passer à la ligne. API : props pour users (tableau de { src, name, role, team, verified }), un libellé d'action de fin de ligne, et un callback onAction(user). Inclus : repli sur les initiales, markup sémantique <ul>/<li> dans le wrapper, nom accessible sur le bouton de fin de ligne ("Gérer l'accès de {name}"), surbrillance de la ligne au survol, anneaux focus-visible, prise en charge des thèmes clair et sombre. Contraintes : React + Tailwind uniquement, aucune bibliothèque de tableau ou de liste, fonctionne à 320px de largeur sans débordement.