47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import MenuItem from '@/components/Page/Menu//MenuItem/';
|
|
import { useCurrentPath } from '@/hooks/useCurrentPath';
|
|
|
|
import styles from './MenuArea.module.css';
|
|
|
|
import { NavigationItem } from '@/lib/types/navigation';
|
|
|
|
interface MenuAreaProps {
|
|
item: NavigationItem;
|
|
}
|
|
|
|
const MenuArea = React.memo(({ item }: MenuAreaProps) => {
|
|
const hasBGImg = !!item.background;
|
|
const { isCurrentPath } = useCurrentPath();
|
|
|
|
const areaClasses = React.useMemo(() => {
|
|
return [
|
|
styles.area,
|
|
styles[item.gridPosition],
|
|
styles[item.variant],
|
|
isCurrentPath(item.path) ? styles.current : '',
|
|
item.background ? styles.hasBGImg : null,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
}, [item.background, isCurrentPath]);
|
|
|
|
return (
|
|
<section className={areaClasses}>
|
|
{hasBGImg && (
|
|
<img
|
|
className={styles.bgImg}
|
|
src={item.background}
|
|
alt={`Background Image for ${item.name}`}
|
|
/>
|
|
)}
|
|
<MenuItem item={item} />
|
|
</section>
|
|
);
|
|
});
|
|
|
|
MenuArea.displayName = 'MenuArea';
|
|
|
|
export default MenuArea;
|