64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import useDropdownStore from "@/stores/main-menu"
|
|
|
|
import { ChevronLeftIcon } from "@/components/Icons"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./languageSwitcherContainer.module.css"
|
|
|
|
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
|
|
import {
|
|
type LanguageSwitcherContainerProps,
|
|
LanguageSwitcherTypesEnum,
|
|
} from "@/types/components/languageSwitcher/languageSwitcher"
|
|
|
|
export default function LanguageSwitcherContainer({
|
|
children,
|
|
type,
|
|
}: LanguageSwitcherContainerProps) {
|
|
const { toggleDropdown } = useDropdownStore()
|
|
const intl = useIntl()
|
|
const isFooter = type === LanguageSwitcherTypesEnum.Footer
|
|
const isMobileHeader = type === LanguageSwitcherTypesEnum.MobileHeader
|
|
const position = isFooter
|
|
? DropdownTypeEnum.FooterLanguageSwitcher
|
|
: DropdownTypeEnum.HamburgerMenu
|
|
|
|
return (
|
|
<div>
|
|
{isMobileHeader ? (
|
|
<div className={styles.backWrapper}>
|
|
<button
|
|
type="button"
|
|
className={styles.backButton}
|
|
onClick={() => toggleDropdown(position)}
|
|
>
|
|
<ChevronLeftIcon color="red" />
|
|
<Subtitle type="one">
|
|
{intl.formatMessage({
|
|
id: "Main menu",
|
|
})}
|
|
</Subtitle>
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
{isFooter ? (
|
|
<div className={styles.closeWrapper}>
|
|
<button
|
|
type="button"
|
|
className={styles.closeButton}
|
|
aria-label={intl.formatMessage({
|
|
id: "Close menu",
|
|
})}
|
|
onClick={() => toggleDropdown(position)}
|
|
>
|
|
<span className={styles.bar}></span>
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|