123 lines
2.9 KiB
TypeScript
123 lines
2.9 KiB
TypeScript
import {
|
|
Avatar,
|
|
ButtonBase,
|
|
Divider,
|
|
ListItemAvatar,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
MenuItem,
|
|
} from "@suid/material";
|
|
import {
|
|
Show,
|
|
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";
|
|
import Menu, { createManagedMenuState } from "../material/Menu";
|
|
|
|
const ProfileMenuButton: ParentComponent<{
|
|
profile?: {
|
|
account: {
|
|
site: string;
|
|
inf?: {
|
|
displayName: string;
|
|
avatar: string;
|
|
username: string;
|
|
id: string;
|
|
};
|
|
};
|
|
};
|
|
}> = (props) => {
|
|
const menuId = createUniqueId();
|
|
const buttonId = createUniqueId();
|
|
|
|
const [open, state] = createManagedMenuState();
|
|
|
|
const onClick = (
|
|
event: MouseEvent & { currentTarget: HTMLButtonElement },
|
|
) => {
|
|
open(event.currentTarget.getBoundingClientRect());
|
|
};
|
|
|
|
const inf = () => props.profile?.account.inf;
|
|
|
|
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}
|
|
MenuListProps={{
|
|
"aria-labelledby": menuId,
|
|
style: {
|
|
"min-width": "220px",
|
|
},
|
|
}}
|
|
{...state}
|
|
>
|
|
<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;
|