tutu/src/timelines/ProfileMenuButton.tsx

import {
  Avatar,
  ButtonBase,
  Divider,
  ListItemAvatar,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuItem,
} from "@suid/material";
import {
  ErrorBoundary,
  Show,
  createSignal,
  createUniqueId,
  type ParentComponent,
} from "solid-js";
import {
  Settings as SettingsIcon,
  Bookmark as BookmarkIcon,
  Star as LikeIcon,
  FeaturedPlayList as ListIcon,
} from "@suid/icons-material";
import A from "../platform/A";

const ProfileMenuButton: ParentComponent<{
  profile?: {
    account: {
      site: string;
      inf?: {
        displayName: string;
        avatar: string;
        username: string;
        id: string;
      };
    };
  };
  onClick?: () => void;
  onClose?: () => void;
}> = (props) => {
  const menuId = createUniqueId();
  const buttonId = createUniqueId();

  let [anchor, setAnchor] = createSignal<HTMLButtonElement | null>(null);
  const open = () => !!anchor();

  const onClick = (
    event: MouseEvent & { currentTarget: HTMLButtonElement },
  ) => {
    setAnchor(event.currentTarget);
    props.onClick?.();
  };

  const inf = () => props.profile?.account.inf;

  const onClose = () => {
    props.onClick?.();
    setAnchor(null);
  };

  return (
    <>
      <ButtonBase
        aria-haspopup="true"
        sx={{ borderRadius: "50%" }}
        id={buttonId}
        onClick={onClick}
        aria-controls={open() ? menuId : undefined}
        aria-expanded={open() ? "true" : undefined}
      >
        <Avatar
          alt={`${inf()?.displayName}'s avatar`}
          src={inf()?.avatar}
        ></Avatar>
      </ButtonBase>
      <Menu
        id={menuId}
        anchorEl={anchor()}
        open={open()}
        onClose={onClose}
        MenuListProps={{
          "aria-labelledby": buttonId,
          sx: {
            minWidth: "220px",
          },
        }}
        anchorOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
      >
        <MenuItem
          component={A}
          href={`/${encodeURIComponent(`${inf()?.username}@${props.profile?.account.site}`)}/profile/${inf()?.id}`}
          disabled={!props.profile}
        >
          <ListItemAvatar>
            <Avatar src={inf()?.avatar}></Avatar>
          </ListItemAvatar>
          <ListItemText
            primary={inf()?.displayName}
            secondary={`@${inf()?.username}`}
          ></ListItemText>
        </MenuItem>

        <MenuItem disabled>
          <ListItemIcon>
            <BookmarkIcon />
          </ListItemIcon>
          <ListItemText>Bookmarks</ListItemText>
        </MenuItem>
        <MenuItem disabled>
          <ListItemIcon>
            <LikeIcon />
          </ListItemIcon>
          <ListItemText>Likes</ListItemText>
        </MenuItem>
        <MenuItem disabled>
          <ListItemIcon>
            <ListIcon />
          </ListItemIcon>
          <ListItemText>Lists</ListItemText>
        </MenuItem>
        <Divider />
        <Show when={props.children}>
          {props.children}
          <Divider />
        </Show>
        <MenuItem component={A} href="/settings">
          <ListItemIcon>
            <SettingsIcon />
          </ListItemIcon>
          <ListItemText>Settings</ListItemText>
        </MenuItem>
      </Menu>
    </>
  );
};

export default ProfileMenuButton;