Files
web/components/Header/MainMenu/MenuItem/index.tsx
2024-09-03 13:26:15 +02:00

35 lines
856 B
TypeScript

"use client"
import { useState } from "react"
import { ChevronDownIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import MenuButton from "../MenuButton"
import { MenuItemProps } from "./menuItem"
import styles from "./menuItem.module.css"
export default function MenuItem({ item }: MenuItemProps) {
const { children, title, href, seeAllLinkText, infoCard } = item
const [isExpanded, setIsExpanded] = useState(false)
function handleButtonClick() {
setIsExpanded((prev) => !prev)
}
return children?.length ? (
<MenuButton onClick={handleButtonClick}>
{title}
<ChevronDownIcon
className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
color="red"
/>
</MenuButton>
) : (
<Link href={href} color="burgundy">
{title}
</Link>
)
}