"use client" import { useRef } from "react" import { useIntl } from "react-intl" import useDropdownStore from "@/stores/main-menu" import { ChevronDownSmallIcon } from "@/components/Icons" import SkeletonShimmer from "@/components/SkeletonShimmer" import Body from "@/components/TempDesignSystem/Text/Body" import useClickOutside from "@/hooks/useClickOutside" import { useHandleKeyUp } from "@/hooks/useHandleKeyUp" import { getInitials } from "@/utils/user" import Avatar from "../Avatar" import MainMenuButton from "../MainMenuButton" import MyPagesMenuContent from "../MyPagesMenuContent" import styles from "./myPagesMenu.module.css" import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown" import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu" export default function MyPagesMenu({ membership, navigation, user, membershipLevel, }: MyPagesMenuProps) { const intl = useIntl() const myPagesMenuRef = useRef(null) const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore() useHandleKeyUp((event: KeyboardEvent) => { if (event.key === "Escape" && isMyPagesMenuOpen) { toggleDropdown(DropdownTypeEnum.MyPagesMenu) } }) useClickOutside(myPagesMenuRef, isMyPagesMenuOpen, () => { toggleDropdown(DropdownTypeEnum.MyPagesMenu) }) return (
toggleDropdown(DropdownTypeEnum.MyPagesMenu)} > {intl.formatMessage( { id: "Hi {firstName}!" }, { firstName: user.firstName } )} {isMyPagesMenuOpen ? (
toggleDropdown(DropdownTypeEnum.MyPagesMenu) } />
) : null}
) } export function MyPagesMenuSkeleton() { return (
) }