<master> Improvement selection category button

pricing-app/package.json

@@ -12,7 +12,13 @@
     "eslint": "8.41.0",
     "eslint-config-next": "13.4.3",
     "next": "13.4.3",
+    "next-swr": "^0.1.2-canary.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false
   }
-}
+}

pricing-app/src/app/components/item-selection/category-navigation.js

@@ -0,0 +1,50 @@
+"use client";
+import itemSelectionStyles from "./item-selection.module.css";
+import React, { createContext } from "react";
+import styles from "../../page.module.css";
+
+export const CategoryContext = createContext();
+
+export default function CategoryNavigation({ categories, onChangeCategory }) {
+  const categoryNames = Object.getOwnPropertyNames(categories);
+  const categoryList = categoryNames.map((name) => {
+    const handleCategoryClick = () => {
+      onChangeCategory(name);
+    };
+    return (
+      <div key={name}>
+        <CategoryButton
+          categoryName={name}
+          onClick={handleCategoryClick} // Fix: Uncommented onClick handler
+        />
+      </div>
+    );
+  });
+  // return component to navigate each category
+  return (
+    <div className={itemSelectionStyles.navigationContainer}>
+      {categoryList}
+    </div>
+  );
+}
+
+export function CategoryButton({ categoryName, onClick }) {
+  const handleClick = () => {
+    onClick(categoryName);
+  };
+
+  // Capitalize first letter of category name
+  const capitalizedCategoryName =
+    categoryName.charAt(0).toUpperCase() + categoryName.slice(1);
+
+  // Return category button to navigate corresponding ItemList
+  return (
+    <button
+      key={categoryName}
+      className={itemSelectionStyles.categoryButton}
+      onClick={handleClick}
+    >
+      {capitalizedCategoryName}
+    </button>
+  );
+}

pricing-app/src/app/components/item-selection/item-selection.js

@@ -4,24 +4,28 @@
 		- props are single category
 		- each category is an object contains list of props, which are specific Item name
  */
-
-
-import CategoryNevigation from './category-nevigation'
-import ItemList from './item-list.js'
-import itemSelectionStyles from './item-selection.module.css';
-import styles from '../../page.module.css';
-
+"use client";
+import CategoryNavigation from "./category-navigation";
+import ItemList from "./item-list.js";
+import itemSelectionStyles from "./item-selection.module.css";
+import React, { useState } from "react";
 
 export default function ItemSelection({ categories }) {
-	// to test the ItemList, choose 1 category on categories
-	const category = categories.food;
+  const [selectedCategory, setSelectedCategory] = useState(categories["food"]);
+
+  const onChangeCategory = (name) => {
+    const newCategory = categories[name];
+    setSelectedCategory(newCategory);
+  };
 
-	// return the ItemSelection table
-	return (
-		<div className={itemSelectionStyles.itemSelection}>
-			<CategoryNevigation categories={categories} />
-			<br />
-			<ItemList category={category}/>
-		</div>
-	);
-}	// close ItemSelection
+  return (
+    <div className={itemSelectionStyles.itemSelection}>
+      <CategoryNavigation
+        categories={categories}
+        onChangeCategory={onChangeCategory}
+      />
+      <br />
+      <ItemList category={selectedCategory} />
+    </div>
+  );
+}