54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { myPages } from "@/constants/routes/myPages"
|
|
import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { ChevronDownIcon } from "@/components/Icons"
|
|
import useLang from "@/hooks/useLang"
|
|
import { getInitials } from "@/utils/user"
|
|
|
|
import MenuButton from "../MenuButton"
|
|
import MyPagesMenu from "../MyPagesMenu"
|
|
import Avatar from "./Avatar"
|
|
|
|
import styles from "./myPages.module.css"
|
|
|
|
import { User } from "@/types/user"
|
|
|
|
export default function MyPages({
|
|
myPagesNavigation,
|
|
user,
|
|
}: {
|
|
myPagesNavigation: Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
|
|
user: Pick<User, "firstName" | "lastName"> | null
|
|
}) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
|
|
const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
|
|
useDropdownStore()
|
|
|
|
return user ? (
|
|
<>
|
|
<MenuButton className={styles.button} onClick={toggleMyPagesMobileMenu}>
|
|
<Avatar initials={getInitials(user.firstName, user.lastName)} />
|
|
{intl.formatMessage({ id: "Hi" })} {user.firstName}!
|
|
<ChevronDownIcon
|
|
className={`${styles.chevron} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
|
|
color="red"
|
|
/>
|
|
</MenuButton>
|
|
<MyPagesMenu navigation={myPagesNavigation} />
|
|
</>
|
|
) : (
|
|
<Link href={myPages[lang]} className={styles.link}>
|
|
<Avatar />
|
|
{intl.formatMessage({ id: "Log in/Join" })}
|
|
</Link>
|
|
)
|
|
}
|