151 lines
3.7 KiB
TypeScript
151 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Divider } from "@scandic-hotels/design-system/Divider"
|
|
|
|
import { logout } from "@/constants/routes/handleAuth"
|
|
import { trpc } from "@/lib/trpc/client"
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./my-pages-mobile-dropdown.module.css"
|
|
|
|
import type { ReactNode } from "react"
|
|
|
|
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
|
|
|
|
export default function MyPagesMobileDropdown() {
|
|
const intl = useIntl()
|
|
const { toggleDropdown, isMyPagesMobileMenuOpen } = useDropdownStore()
|
|
|
|
const handleOnClick = () => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
|
|
|
|
return (
|
|
<nav
|
|
className={`${styles.navigationMenu} ${isMyPagesMobileMenuOpen ? styles.navigationMenuIsOpen : ""}`}
|
|
>
|
|
<Title textTransform="capitalize" level="h5">
|
|
<div className={styles.heading}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "My pages",
|
|
})}
|
|
</div>
|
|
</Title>
|
|
|
|
<List>
|
|
<PrimaryLinks handleOnClick={handleOnClick} />
|
|
</List>
|
|
<List>
|
|
<SecondaryLinks handleOnClick={handleOnClick} />
|
|
</List>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
function List({ children }: { children: ReactNode }) {
|
|
return (
|
|
<>
|
|
<div className={styles.dividerWrapper}>
|
|
<Divider />
|
|
</div>
|
|
<ul className={styles.dropdownWrapper}>
|
|
<ul className={styles.dropdownLinks}>{children}</ul>
|
|
</ul>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function PrimaryLinks({ handleOnClick }: { handleOnClick: () => void }) {
|
|
const {
|
|
data: myPagesNavigation,
|
|
isLoading,
|
|
isSuccess,
|
|
} = useMyPagesNavigation()
|
|
|
|
const primaryLinks = myPagesNavigation?.primaryLinks ?? []
|
|
return (
|
|
<>
|
|
{isLoading && <Skeletons count={4} />}
|
|
{isSuccess &&
|
|
primaryLinks.map((link, i) => (
|
|
<li key={link.href + i}>
|
|
<Link
|
|
href={link.href}
|
|
partialMatch
|
|
size="regular"
|
|
variant="myPageMobileDropdown"
|
|
onClick={handleOnClick}
|
|
>
|
|
{link.text}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
function SecondaryLinks({ handleOnClick }: { handleOnClick: () => void }) {
|
|
const {
|
|
data: myPagesNavigation,
|
|
isLoading,
|
|
isSuccess,
|
|
} = useMyPagesNavigation()
|
|
|
|
const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
|
|
return (
|
|
<>
|
|
{isLoading && <Skeletons count={3} />}
|
|
{isSuccess &&
|
|
secondaryLinks.map((link, i) => (
|
|
<li key={link.href + i}>
|
|
<Link
|
|
href={link.href}
|
|
partialMatch
|
|
size="small"
|
|
variant="myPageMobileDropdown"
|
|
onClick={handleOnClick}
|
|
>
|
|
{link.text}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
<li>
|
|
<Link
|
|
href={logout[lang]}
|
|
prefetch={false}
|
|
size="small"
|
|
variant="myPageMobileDropdown"
|
|
>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Log out",
|
|
})}
|
|
</Link>
|
|
</li>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Skeletons({ count }: { count: number }) {
|
|
return (
|
|
<>
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<li key={i} className={styles.skeletonItem}>
|
|
<SkeletonShimmer width="100px" height="20px" />
|
|
</li>
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function useMyPagesNavigation() {
|
|
const lang = useLang()
|
|
return trpc.navigation.myPages.useQuery({ lang })
|
|
}
|