Skip to content
Jaringan

Components · avatar, profile-menu

Avatar and profile menu

One way every app shows who is signed in: the avatar and first name in the header, opening the name, email, role, the app's own links, “Your account” and “Sign out”.

Profile menu

The header's account slot in Shop, Forms, Account and both dashboards. Signed out it is a “Sign in” capsule. “Your account” opens PPITSZ Account, where the photo and details are edited; “Sign out” signs out of every app (ADR 0008).

Preview
Sign in
Show code
<ProfileMenu
  account={await menuAccount()}            // from @ppitsz/accounts/avatar, in the layout
  signInHref="/sign-in"
  accountHref={accountOrigin()}
  links={[{ href: "/orders", label: "Your orders", icon: <QrCodeIcon aria-hidden /> }]}
  signOut={buyerSignOutAction}             // a server action
  linkAs={NextLink}
/>

Avatar

shadcn's Avatar on Base UI, restyled: a circle with a hairline ring, the initials on surface-strong while the photo loads or when there is none. The photo is decorative; the name beside it says who it is.

Preview
Show code
<Avatar size="lg">
  <AvatarImage src={avatarUrl} />
  <AvatarFallback>{initials(name)}</AvatarFallback>
</Avatar>
SizeWhere
sm, 24pxLists of people, avatar groups
default, 32pxThe profile menu's capsule
lg, 40pxInside the open profile menu
xl, 96pxThe photo on the PPITSZ Account profile page

Where photos come from

  • The person's own photo, chosen in PPITSZ Account; else a linked sign-in's photo (Google, later); else the initials. ADR 0009.
  • Stored under avatars/{uid}/, a new name on every change, and served by every app at /avatars/… from its own domain, so they load in China.
  • The browser shrinks a chosen photo to 512px first; the server takes JPEG, PNG or WebP up to 1 MB.

Rules

  • One profile menu per header, in the account slot. Apps add their own links to it, never their own account control.
  • Never an image straight from Google or another host: a linked photo is copied to our Storage first.

Don’t

A bare “Sign out” button and a name in the header, different in every app.

Do

The profile menu, the same everywhere, with the app's links inside.