Avatar-Komponenten-Generator.

Erstelle eine wiederverwendbare <Avatar /> React-Komponente mit Tailwind CSS. Muster: Basis-Avatar mit Bild und Initialen-Fallback. Layout: runder Avatar, der ein <img> rendert, wenn src lädt; bei einem Fehler oder fehlendem src stattdessen ein generierter Initialen-Fallback mit einer deterministisch aus dem Namens-String abgeleiteten Hintergrundfarbe. API: Props für src, name (erforderlich, genutzt für alt-Text und Initialen), size ("xs" | "sm" | "md" | "lg" | "xl") und className-Durchreichung. Enthalten: erforderlicher alt-Text aus name, loading="lazy", onError-Fallback-Wechsel über lokalen State, focus-visible-Ring, wenn die Komponente in einem Link oder Button gerendert wird, Light- und Dark-Unterstützung über Tailwind dark:-Klassen. Einschränkungen: nur React + Tailwind, keine externen UI- oder Bild-Abhängigkeiten, kein Layout-Shift während das Bild lädt (Box mit fixer width/height reservieren).

Erstelle eine <AvatarWithStatus /> React-Komponente mit Tailwind CSS. Muster: Avatar mit Presence-Anzeige. Layout: runder Avatar mit einem kleinen Statuspunkt unten rechts, durch einen Ring in der Hintergrundfarbe vom Foto abgesetzt, damit er auf jeder Oberfläche lesbar bleibt. API: Props für src, name, size und status ("online" | "away" | "busy" | "offline"), wobei die Punktfarbe pro Status gemappt wird und der Punkt mit der Avatargröße skaliert. Enthalten: Initialen-Fallback, ein visuell verborgenes Textlabel, das den Status für Screenreader ankündigt (nicht allein auf Farbe verlassen), aria-label am Wrapper, Light- und Dark-Unterstützung. Einschränkungen: nur React + Tailwind, keine externen UI-Abhängigkeiten, der Punkt überdeckt nie mehr als 30 % des Avatar-Rands.

Erstelle eine <AvatarGroup /> React-Komponente mit Tailwind CSS. Muster: gestapelte (überlappende) Avatar-Gruppe mit Überlaufzähler. Layout: horizontale Reihe von Avataren, die sich um etwa ein Drittel überlappen, jeder mit einem Ring in der Hintergrundfarbe, damit der Stapel lesbar bleibt; nach max sichtbaren Avataren einen "+N"-Zähler-Chip in gleicher Größe und Form rendern. API: Props für users (Array aus { src, name }), max (Standard 4), size und ein optionales onAddClick, das am Ende der Reihe ein gestricheltes "Invite"-Element rendert. Verhalten: Beim Hover hebt sich der angefahrene Avatar mit leichter Verschiebung und geändertem z-index über seine Nachbarn; über ein "dir"-Prop kehrt der Stapel die Überlappungsrichtung um. Enthalten: Initialen-Fallback pro Avatar, aria-label mit der vollständigen Mitgliederzahl, per Tastatur fokussierbare Elemente mit focus-visible-Ringen, Light- und Dark-Unterstützung. Einschränkungen: nur React + Tailwind, keine externen UI-Abhängigkeiten, keine Animationsbibliothek.

Erstelle eine themefähige <Avatar /> React-Komponente mit vollständiger Größen- und Formskala, mit Tailwind CSS. Muster: Avatar als Design-System-Primitive. API: size ("xs" | "sm" | "md" | "lg" | "xl" | "2xl"), gemappt über ein einzelnes Lookup-Objekt, das Breite, Höhe, Schriftgröße und Border-Radius gemeinsam steuert; shape ("circle" | "squircle" | "square"); dazu src, name und className. Anforderung: Die Schriftgröße der Initialen skaliert proportional zur Avatar-Box, damit xs und 2xl beide ausbalanciert bleiben; alle Tokens liegen in einem Konfigurationsobjekt am Anfang der Datei, sodass ein Team an einer Stelle neu themen kann. Enthalten: Initialen-Fallback, alt-Text aus name, forwardRef auf das Root-Element, exportierte TypeScript-Prop-Typen, Light- und Dark-Unterstützung. Einschränkungen: nur React + Tailwind, keine externen UI-Abhängigkeiten, keine Inline-Styles außer berechneten Pixelgrößen.

Erstelle eine <AvatarUploader /> React-Komponente mit Tailwind CSS. Muster: bearbeitbares Profilbild-Control für eine Einstellungsseite. Layout: großer Avatar links mit einem runden Kamera-Badge unten rechts; rechts ein "Profile Photo"-Label, eine Hinweiszeile zu den Dateiregeln ("PNG or JPG, up to 2 MB") sowie ein Upload-Primärbutton plus ein Remove-Textbutton. Verhalten: verstecktes <input type="file" accept="image/png,image/jpeg">, ausgelöst sowohl vom Badge als auch vom Upload-Button; clientseitige Prüfung von Größe und Typ mit Inline-Fehlermeldung; lokale Vorschau über URL.createObjectURL, beim Unmount wieder freigegeben; Remove stellt den Initialen-Fallback wieder her. Enthalten: <label>-Verknüpfung für das File-Input, aria-live-Bereich für Validierungsmeldungen, focus-visible-Ringe, Disabled-/Upload-Zustand am Button, Light- und Dark-Unterstützung. Einschränkungen: nur React + Tailwind, keine Upload-Bibliothek, keine Crop-Abhängigkeit — stelle stattdessen einen onChange(file)-Callback für den Aufrufer bereit.

Erstelle eine <AvatarRow /> React-Komponente (plus einen <MemberList />-Wrapper) mit Tailwind CSS. Muster: Avatar mit Metadaten-Zeile für Mitgliederlisten, Tabellen und Kommentar-Threads. Layout: Avatar links, ein zweizeiliger Block mit dem Namen der Person (plus optionalem Verifizierungshaken) und einer gedämpften Sekundärzeile ("Team · Role"), und rechts ein nachgestellter Aktionsbutton; der mittlere Block kürzt mit min-w-0 + truncate statt umzubrechen. API: Props für users (Array aus { src, name, role, team, verified }), ein Label für die nachgestellte Aktion und ein onAction(user)-Callback. Enthalten: Initialen-Fallback, semantisches <ul>/<li>-Markup im Wrapper, zugänglicher Name am nachgestellten Button ("Manage access for {name}"), Zeilen-Highlight beim Hover, focus-visible-Ringe, Light- und Dark-Unterstützung. Einschränkungen: nur React + Tailwind, keine Tabellen- oder Listen-Bibliothek, funktioniert bei 320px Breite ohne Überlauf.