add component for page navigation

src/App.tsx

@@ -12,6 +12,7 @@ import {
   goRight,
   goUp,
 } from "./utils/keyboardNavigation";
+import CategoriesMenu from "./components/CategoriesMenu";
 
 function App() {
   const [itemsPaginated, setItemsPaginated] = useState(getItems());
@@ -51,11 +52,15 @@ function App() {
     <div
       ref={inventoryRef}
       onKeyDown={handleKeyPressed}
-      className="bg-zelda-darkGreen min-h-screen pt-32 font-calamity"
+      className="bg-zelda-darkGreen min-h-screen pt-10 font-calamity"
       tabIndex={0}
     >
       <div className="container mx-auto flex flex-col xl:flex-row">
         <div className="flex flex-col justify-center w-full max-w-2xl mx-auto xl:w-1/2 relative xl:px-12">
+          <CategoriesMenu
+            categorySelected={itemsPaginated[page].mainCategory}
+            setPage={setPage}
+          />
           <ItemsContext.Provider value={contextState}>
             <div className="flex">
               <ItemsGrid items={items} />

src/components/CategoriesMenu.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import CategoriesMenuItem from "./CategoriesMenuItem";
+import { ItemsMainCategoriesType } from "../data/items.type";
+import Shield from "./Icons/Shield";
+import Sword from "./Icons/Sword";
+import Armor from "./Icons/Armor";
+import { Dispatch, SetStateAction } from "react";
+
+type Props = {
+  categorySelected: ItemsMainCategoriesType;
+  setPage: Dispatch<SetStateAction<number>>;
+};
+
+const CategoriesMenu: React.FC<Props> = ({ categorySelected, setPage }) => {
+  return (
+    <div className="flex mx-auto mb-6 z-20">
+      <CategoriesMenuItem
+        page={0}
+        setPage={setPage}
+        isSelected={categorySelected === ItemsMainCategoriesType.WEAPONS}
+      >
+        <Sword className="fill-current h-10 w-16 pb-3 px-4" />
+      </CategoriesMenuItem>
+      <CategoriesMenuItem
+        page={1}
+        setPage={setPage}
+        isSelected={categorySelected === ItemsMainCategoriesType.SHIELDS}
+      >
+        <Shield className="fill-current h-10 w-16 pb-3 px-4" />
+      </CategoriesMenuItem>
+      <CategoriesMenuItem
+        page={2}
+        setPage={setPage}
+        isSelected={categorySelected === ItemsMainCategoriesType.ARMORS}
+      >
+        <Armor className="fill-current h-10 w-16 pb-3 px-4" />
+      </CategoriesMenuItem>
+    </div>
+  );
+};
+
+export default CategoriesMenu;

src/components/CategoriesMenuItem.tsx

@@ -0,0 +1,33 @@
+import cx from "classnames";
+import React from "react";
+import { Dispatch, SetStateAction } from "react";
+
+type Props = {
+  page: number;
+  setPage: Dispatch<SetStateAction<number>>;
+  isSelected: boolean;
+};
+
+const CategoriesMenuItem: React.FC<Props> = ({
+  page,
+  setPage,
+  isSelected,
+  children,
+}) => (
+  <div
+    onClick={() => {
+      setPage(page);
+    }}
+    className={cx(
+      {
+        "text-white border-white": isSelected,
+        "text-zelda-lightGray border-zelda-lightGray": !isSelected,
+      },
+      "border-b cursor-pointer"
+    )}
+  >
+    {children}
+  </div>
+);
+
+export default CategoriesMenuItem;