User

The User component displays the current user's name and avatar. If the user belongs to more than one account, they can switch accounts here. It also provides options to change the language, toggle dark mode, and sign out.

It's rendered within the header component and appears at the top right-hand corner of the viewport.

Preview

Usage

import { User } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <div>
      <User />
    </div>
  );
}

Props

This component does not accept any props directly as it uses context for its functionality.

User Avatars

Users can upload an avatar in the /account/profile view, and it will be uploaded to your S3 bucket in a folder called avatars and displayed in the User component.

You can change the folder and size of the photos inside the config file in the avatar section.

Users signed in via a social network will display the profile picture from that network unless they overwrite it by uploading a photo.

Notes

• The User component relies on AuthContext and ViewContext for authentication and view management.

• The DropdownMenu component is used to display the user options.