UserMenu

tcmts.share.UserMenu · #oga3lxtv · term · runs in the browser

handles onAction

Who's signed in, as their avatar, which opens a menu: who it is, where their work is, and signing out.

import { refresh } from "#codebase/tcmts/react";
import { at, Avatar, signOut, toasts } from "#codebase/tcmts/share";
import { Button, Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover } from "react-aria-components";

export function UserMenu({ who, canSignOut }: { who: string; canSignOut: boolean }) {
  return (
    <MenuTrigger>
      <Button className="avatar-btn" aria-label={`Signed in as ${who}`}>
        <Avatar name={who} />
      </Button>
      <Popover className="menu-pop" placement="bottom end" offset={6}>
        <Menu
          className="menu"
          aria-label="Account"
          onAction={(k) => {
            if (k !== "out") return;
            void signOut().then(() => {
              toasts.add({ title: "Signed out" }, { timeout: 3000 });
              refresh();
            });
          }}
        >
          <MenuSection>
            <Header className="menu-head">
              Signed in as <b>{who}</b>
            </Header>
            <MenuItem id="contributions" href={at("/contributions")} className="opt">
              Contributions
            </MenuItem>
            <MenuItem id="people" href={at("/people")} className="opt">
              People
            </MenuItem>
          </MenuSection>
          {canSignOut ? (
            <MenuSection className="menu-end">
              <MenuItem id="out" className="opt">
                Sign out
              </MenuItem>
            </MenuSection>
          ) : null}
        </Menu>
      </Popover>
    </MenuTrigger>
  );
}

uses

used by