add pages alias

config-overrides.js

@@ -7,6 +7,7 @@ module.exports = function override(config) {
     alias: {
       ...config.alias,
       'components': path.resolve(__dirname, 'src/components'),
+      'pages': path.resolve(__dirname, 'src/pages'),
       'context': path.resolve(__dirname, 'src/context'),
       'src': path.resolve(__dirname, 'src')
     },

src/components/AppRoutes.tsx

@@ -1,7 +1,7 @@
-import MatchGame from 'components/../pages/MatchGame/MatchGame';
-import MatchMenu from 'components/../pages/MatchMenu/MatchMenu';
 import { useMatchGame } from 'context/MatchGameContext';
+import MatchMenu from 'pages/MatchMenu/MatchMenu';
 import React from 'react';
+import MatchGame from 'pages/MatchGame/MatchGame';
 import Options from 'src/pages/Options/Options';
 
 const AppRoutes = () => {

src/pages/MatchMenu/MatchMenu.tsx

@@ -0,0 +1,56 @@
+import Button from 'components/UI/Button/Button';
+import { MenuItem, useMatchGame } from 'context/MatchGameContext';
+import React from 'react';
+
+import cls from './MatchMenu.module.scss'
+
+type GameMenuProps = {
+
+}
+type MenuItemType = {
+  itemName: MenuItem;
+  itemPlaceholder: string;
+  condition?: () => boolean;
+}
+
+const MatchMenu: React.FC<GameMenuProps> = () => {
+  const {setCurrentMenuItem} = useMatchGame();
+
+  const menuItems: MenuItemType[] = [
+    {itemName: 'continue-game', itemPlaceholder: 'Continue', condition: canContinueGame},
+    {itemName: 'new-game', itemPlaceholder: 'New game'},
+    {itemName: 'options', itemPlaceholder: 'Options'},
+    {itemName: 'exit', itemPlaceholder: 'Exit'},
+  ]
+
+  function clickItemHandler(item: MenuItem) {
+    setCurrentMenuItem?.(item);
+  }
+
+  function canContinueGame() {
+    return !!localStorage.getItem('match-game:cards');
+  }
+
+  function renderItem(itemName: MenuItem, itemText: string) {
+    return <Button className={cls.button} onClick={() => clickItemHandler(itemName)}>{itemText}</Button>
+  }
+
+  function renderMenuItems() {
+    return menuItems.map(item => {
+        return item?.condition
+          ? item?.condition() && <li key={item.itemName}>{renderItem(item.itemName, item.itemPlaceholder)}</li>
+          : <li key={item.itemName}>{renderItem(item.itemName, item.itemPlaceholder)}</li>;
+    });
+  }
+
+  return (
+    <div className={cls.MatchMenu}>
+      <h2>Match game menu</h2>
+      <ul>
+        {renderMenuItems()}
+      </ul>
+    </div>
+  );
+};
+
+export default MatchMenu;

tsconfig.json

@@ -22,6 +22,7 @@
     "jsx": "react-jsx",
     "paths": {
       "components/*": ["src/components/*"],
+      "pages/*": ["src/pages/*"],
       "context/*": ["src/context/*"],
       "src/*": ["src/*"],
     }