Added WIP Menu

src/components/Page/Menu/MenuArea/index.tsx

@@ -0,0 +1,46 @@
+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;