30 lines
1020 B
React
30 lines
1020 B
React
|
import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
|
||
|
|
|
||
|
|
|
||
|
|
export default function UserAvatarMenu({ name, avatar }) {
|
||
|
|
return (
|
||
|
|
<Menu.Root>
|
||
|
|
<Menu.Trigger focusRing="none">
|
||
|
|
<Box
|
||
|
|
rounded="full"
|
||
|
|
tabIndex={0}
|
||
|
|
_hover={{ boxShadow: "0 0 0 2px rgb(37, 77, 197)" }}
|
||
|
|
>
|
||
|
|
<Avatar.Root shape="full">
|
||
|
|
<Avatar.Fallback name={name} />
|
||
|
|
<Avatar.Image src={avatar} />
|
||
|
|
</Avatar.Root>
|
||
|
|
</Box>
|
||
|
|
</Menu.Trigger>
|
||
|
|
<Portal>
|
||
|
|
<Menu.Positioner zIndex="popover">
|
||
|
|
<Menu.Content>
|
||
|
|
<Menu.Item value="account">Account</Menu.Item>
|
||
|
|
<Menu.Item value="settings">Settings</Menu.Item>
|
||
|
|
<Menu.Item value="logout">Logout</Menu.Item>
|
||
|
|
</Menu.Content>
|
||
|
|
</Menu.Positioner>
|
||
|
|
</Portal>
|
||
|
|
</Menu.Root>
|
||
|
|
);
|
||
|
|
}
|