82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { logout } from "@/constants/routes/handleAuth"
|
|
|
|
import { ArrowRightIcon } from "@/components/Icons"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import useLang from "@/hooks/useLang"
|
|
import { useTrapFocus } from "@/hooks/useTrapFocus"
|
|
|
|
import styles from "./myPagesMenuContent.module.css"
|
|
|
|
import { MyPagesMenuContentProps } from "@/types/components/header/myPagesMenu"
|
|
|
|
export default function MyPagesMenuContent({
|
|
navigation,
|
|
toggleOpenStateFn,
|
|
user,
|
|
}: MyPagesMenuContentProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const myPagesMenuContentRef = useTrapFocus()
|
|
|
|
if (!navigation) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<nav className={styles.myPagesMenuContent} ref={myPagesMenuContentRef}>
|
|
<div className={styles.intro}>
|
|
<Subtitle type="two" className={styles.userName}>
|
|
{intl.formatMessage({ id: "Hi" })} {user.firstName}!
|
|
</Subtitle>
|
|
<Caption className={styles.friendTypeWrapper}>
|
|
<span className={styles.friendType}>Loyal friend</span>
|
|
<span className={styles.friendPoints}>12 350 points</span>
|
|
</Caption>
|
|
</div>
|
|
|
|
<ul className={styles.groups}>
|
|
{navigation.menuItems.map((menuItem, idx) => (
|
|
<li
|
|
key={`${menuItem.display_sign_out_link}-${idx}`}
|
|
className={styles.group}
|
|
>
|
|
<Divider color="subtle" className={styles.divider} />
|
|
<ul className={styles.menuItems}>
|
|
{menuItem.links.map((link) => (
|
|
<li key={link.uid}>
|
|
<Link
|
|
href={link.originalUrl || link.url}
|
|
onClick={toggleOpenStateFn}
|
|
className={`${styles.link} ${menuItem.display_sign_out_link ? styles.smallLink : ""}`}
|
|
>
|
|
{link.linkText}
|
|
<ArrowRightIcon className={styles.arrow} color="burgundy" />
|
|
</Link>
|
|
</li>
|
|
))}
|
|
{menuItem.display_sign_out_link && lang ? (
|
|
<li>
|
|
<Link
|
|
href={logout[lang]}
|
|
prefetch={false}
|
|
className={`${styles.link} ${styles.smallLink}`}
|
|
>
|
|
{intl.formatMessage({ id: "Log out" })}
|
|
</Link>
|
|
</li>
|
|
) : null}
|
|
</ul>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|