Component

ProfileInfoCard

User profile card with avatar slot, name (inline editable), email, roles, and email-verified badge. Each site supplies its own avatar widget.

Read-only

live editor — edit to update preview

<ProfileInfoCard
  avatar={<div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-2xl">👤</div>}
  name="Charlin Joe"
  email="charlin@example.com"
  roles={["admin"]}
  emailVerified={true}
  editingName={false}
  nameInput=""
  saving={false}
  saveError=""
  saveSuccess={false}
  onStartEdit={() => {}}
  onNameInput={() => {}}
  onSaveName={() => {}}
  onCancelEdit={() => {}}
/>

Props

Prop	Type	Default	Description
avatar*	ReactNode	—	Avatar widget — each site provides its own (photo upload, colour picker, etc.).
name*	string	—	Display name shown in the card.
email*	string	—	User email address.
roles*	string[]	—	Array of role labels shown as badges.
emailVerified*	boolean	—	Shows a verified badge when true.
editingName*	boolean	—	Switches the name into an editable input when true.
nameInput*	string	—	Controlled value of the name input.
saving*	boolean	—	Disables the save button during the async save.
saveError*	string	—	Error message shown below the input. Empty string hides it.
saveSuccess*	boolean	—	Shows a success indicator after saving.
onStartEdit*	() => void	—	Called when the user clicks the edit icon.
onNameInput*	(v: string) => void	—	Called on every keystroke in the name input.
onSaveName*	() => void	—	Called when the user confirms the name change.
onCancelEdit*	() => void	—	Called when the user cancels editing.
onNameKeyDown	(e: KeyboardEvent) => void	—	Optional — handle Enter/Escape key shortcuts.