Generatore di componenti avatar.

Crea un componente React <Avatar /> riutilizzabile con Tailwind CSS. Pattern: avatar di base con immagine e fallback a iniziali. Layout: avatar circolare che rende un <img> quando src si carica; in caso di errore o src mancante, mostra un fallback con iniziali generate e un colore di sfondo deterministico derivato dalla stringa del nome. API: prop per src, name (obbligatoria, usata per il testo alt e le iniziali), size ("xs" | "sm" | "md" | "lg" | "xl") e className passata al nodo radice. Includi: testo alt obbligatorio ricavato da name, loading="lazy", passaggio al fallback su onError tramite stato locale, anello focus-visible quando è reso dentro un link o un button, supporto per tema chiaro e scuro con le classi dark: di Tailwind. Vincoli: solo React + Tailwind, nessuna dipendenza UI o di immagini esterna, nessuno spostamento del layout durante il caricamento dell'immagine (riserva il box con width/height fissi).

Crea un componente React <AvatarWithStatus /> con Tailwind CSS. Pattern: avatar con badge di presenza. Layout: avatar circolare con un piccolo punto di stato fissato in basso a destra, separato dalla foto da un anello del colore dello sfondo così da risultare leggibile su qualsiasi superficie. API: prop per src, name, size e status ("online" | "away" | "busy" | "offline"), con il colore del punto mappato per ogni stato e il punto che scala insieme alla dimensione dell'avatar. Includi: fallback a iniziali, un'etichetta testuale nascosta visivamente che annunci lo stato agli screen reader (non affidarti al solo colore), aria-label sul contenitore, supporto per tema chiaro e scuro. Vincoli: solo React + Tailwind, nessuna dipendenza UI esterna, il punto non deve mai coprire più del 30% del bordo dell'avatar.

Crea un componente React <AvatarGroup /> con Tailwind CSS. Pattern: gruppo di avatar sovrapposti con conteggio di overflow. Layout: riga orizzontale di avatar sovrapposti di circa un terzo, ciascuno con un anello del colore dello sfondo per mantenere leggibile la pila; superato il numero massimo di avatar visibili, mostra un chip contatore "+N" della stessa dimensione e forma. API: prop per users (array di { src, name }), max (default 4), size e un onAddClick opzionale che rende un'affordance tratteggiata "Invita" alla fine della riga. Comportamento: al passaggio del mouse l'avatar sotto il cursore si solleva sopra i vicini con una piccola traslazione e un cambio di z-index; la pila inverte la direzione della sovrapposizione con una prop "dir". Includi: fallback a iniziali per ogni avatar, aria-label che riassuma il numero totale di membri, elementi raggiungibili da tastiera con anelli focus-visible, supporto per tema chiaro e scuro. Vincoli: solo React + Tailwind, nessuna dipendenza UI esterna, nessuna libreria di animazione.

Crea un componente React <Avatar /> personalizzabile nel tema con una scala completa di dimensioni e forme, usando Tailwind CSS. Pattern: primitiva avatar per design system. API: size ("xs" | "sm" | "md" | "lg" | "xl" | "2xl") mappata attraverso un unico oggetto di lookup che controlla insieme larghezza, altezza, corpo del testo e raggio dei bordi; shape ("circle" | "squircle" | "square"); più src, name e className. Requisito: il corpo del testo delle iniziali scala in proporzione al box dell'avatar, così xs e 2xl restano entrambi equilibrati; tutti i token vivono in un solo oggetto di configurazione all'inizio del file, così un team può ridefinire il tema in un unico punto. Includi: fallback a iniziali, testo alt ricavato da name, forwardRef verso l'elemento radice, tipi delle prop TypeScript esportati, supporto per tema chiaro e scuro. Vincoli: solo React + Tailwind, nessuna dipendenza UI esterna, nessuno stile inline a parte le dimensioni in pixel calcolate.

Crea un componente React <AvatarUploader /> con Tailwind CSS. Pattern: controllo modificabile della foto profilo per una pagina di impostazioni. Layout: avatar grande a sinistra con un badge fotocamera circolare fissato in basso a destra; a destra, un'etichetta "Foto profilo", una riga con i vincoli sul file ("PNG o JPG, fino a 2 MB") e un pulsante primario Carica più un pulsante testuale Rimuovi. Comportamento: <input type="file" accept="image/png,image/jpeg"> nascosto, attivato sia dal badge sia dal pulsante Carica; validazione lato client di dimensione e tipo con messaggio di errore inline; anteprima locale tramite URL.createObjectURL, revocata allo smontaggio; Rimuovi ripristina il fallback a iniziali. Includi: associazione con <label> per l'input file, regione aria-live per i messaggi di validazione, anelli focus-visible, stato disabilitato/in caricamento sul pulsante, supporto per tema chiaro e scuro. Vincoli: solo React + Tailwind, nessuna libreria di upload, nessuna dipendenza per il ritaglio: esponi una callback onChange(file) per il chiamante.

Crea un componente React <AvatarRow /> (e un wrapper <MemberList />) con Tailwind CSS. Pattern: riga con avatar e metadati per elenchi di membri, tabelle e thread di commenti. Layout: avatar a sinistra, un blocco su due righe con il nome della persona (più un segno di verifica opzionale) e una riga secondaria attenuata ("Team · Ruolo"), e un pulsante di azione in coda a destra; il blocco centrale viene troncato con min-w-0 + truncate invece di andare a capo. API: prop per users (array di { src, name, role, team, verified }), un'etichetta per l'azione in coda e una callback onAction(user). Includi: fallback a iniziali, markup semantico <ul>/<li> nel wrapper, nome accessibile sul pulsante in coda ("Gestisci gli accessi di {name}"), evidenziazione della riga al passaggio del mouse, anelli focus-visible, supporto per tema chiaro e scuro. Vincoli: solo React + Tailwind, nessuna libreria per tabelle o elenchi, funziona a 320px di larghezza senza overflow.