129 lines
3.1 KiB
TypeScript
129 lines
3.1 KiB
TypeScript
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 "@solidjs/router";
|
|
|
|
const ProfileMenuButton: ParentComponent<{
|
|
profile?: { displayName: string; avatar: string; username: 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 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={`${props.profile?.displayName}'s avatar`}
|
|
src={props.profile?.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>
|
|
<ListItemAvatar>
|
|
<Avatar src={props.profile?.avatar}></Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
primary={props.profile?.displayName}
|
|
secondary={`@${props.profile?.username}`}
|
|
></ListItemText>
|
|
</MenuItem>
|
|
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<BookmarkIcon />
|
|
</ListItemIcon>
|
|
<ListItemText>Bookmarks</ListItemText>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<LikeIcon />
|
|
</ListItemIcon>
|
|
<ListItemText>Likes</ListItemText>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<ListIcon />
|
|
</ListItemIcon>
|
|
<ListItemText>Lists</ListItemText>
|
|
</MenuItem>
|
|
<Divider />
|
|
<Show when={props.children}>
|
|
{props.children}
|
|
<Divider />
|
|
</Show>
|
|
<MenuItem component={A} href="/settings" onClick={onClose}>
|
|
<ListItemIcon>
|
|
<SettingsIcon />
|
|
</ListItemIcon>
|
|
<ListItemText>Settings</ListItemText>
|
|
</MenuItem>
|
|
</Menu>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProfileMenuButton;
|