added grayscale toggle functionality using useContext

src/App.js

@@ -1,4 +1,5 @@
 import { Routes, Route } from 'react-router-dom';
+import { ToggleGrayscale } from './context/ToggleGrayscale';
 import NavBar from './components/NavBar';
 import LandingPage from './components/LandingPage';
 import CategoryPage from './components/CategoryPage';
@@ -11,14 +12,16 @@ import './styles/styles.scss';
 const App = () => {
   return (
     <div className="App">
-      <NavBar />
-      <Routes>
-        <Route path="/" element={<LandingPage />} />
-        <Route path="/category/:name" element={<CategoryPage />} />
-        <Route path="/product/:name" element={<ProductPage />} />
-        <Route path="/about-the-creators" element={<TheCreators />} />
-      </Routes>
-      <Footer />
+      <ToggleGrayscale>
+        <NavBar />
+        <Routes>
+          <Route path="/" element={<LandingPage />} />
+          <Route path="/category/:name" element={<CategoryPage />} />
+          <Route path="/product/:name" element={<ProductPage />} />
+          <Route path="/about-the-creators" element={<TheCreators />} />
+        </Routes>
+        <Footer />
+      </ToggleGrayscale>
     </div>
   );
 }

src/components/CategoryCard.js

@@ -1,15 +1,24 @@
 import { Link } from 'react-router-dom';
-import placeholderImg from '../assets/LandingPage/Lips.jpg'
+import placeholderImg from '../assets/LandingPage/Lips.jpg';
+import { useGray } from "../context/ToggleGrayscale";
 const CategoryCard = ({ categories }) => {
-    const category_cards = categories.map((cat) => (
-      <div key={cat._id} id={cat.name} className="catCards">
-        <Link to={"/category/" + cat.name.toLowerCase()} state={cat}>
-          {/* placeholder images for now */}
-          <img src={placeholderImg} alt={cat.name} className="catCardsImg" />
-          <h3>{cat.name}</h3>
-        </Link>
-      </div>
-    ));
+
+  const { isActive } = useGray();
+
+  const category_cards = categories.map((cat) => (
+    <div key={cat._id} id={cat.name} className="catCards">
+      <Link to={"/category/" + cat.name.toLowerCase()} state={cat}>
+        {/* placeholder images for now */}
+        <img
+          src={placeholderImg}
+          alt={cat.name}
+          className="catCardsImg"
+          style={{ filter: isActive ? "grayscale(100%)" : "none" }}
+        />
+        <h3>{cat.name}</h3>
+      </Link>
+    </div>
+  ));
 
     return (
         <div className="categoryCard">

src/components/NavBar.js

@@ -15,7 +15,8 @@ const NavBar = () => {
         </li> */}
         {/* in MOBILE, bring it BELOW logo */}
         <li className="toggle">
-          Greyscale
+          {/* maybe have text switch between Grayscale and Color? In that case might need to bring the handleChange into this component */}
+          Grayscale
           <Toggle />
         </li>
       </ul>

src/components/Toggle.js

@@ -1,23 +1,28 @@
 import Switch from "react-switch";
 import { useState } from "react";
+import { useGray } from "../context/ToggleGrayscale";
 
 const Toggle = () => {
+  const { handleGray } = useGray();
   const [checked, setChecked] = useState(false);
+
   const handleChange = (nextChecked) => {
     setChecked(nextChecked);
+    handleGray();
   };
 
   return (
     <div className="switch">
-        {/* https://github.com/markusenglund/react-switch#readme */}
-        <label>
-            <Switch
-            onChange={handleChange}
-            checked={checked}
-            onColor="#000"
-            className="reactSwitch"
-            />
-        </label>
+      {/* https://github.com/markusenglund/react-switch#readme */}
+      <label>
+        <span className="sr-only">Switch to toggle Greyscale</span>
+        <Switch
+          onChange={handleChange}
+          checked={checked}
+          onColor="#000"
+          className="reactSwitch"
+        />
+      </label>
     </div>
   );
 };

src/context/ToggleGrayscale.js

@@ -0,0 +1,22 @@
+import { createContext, useContext, useState } from "react";
+
+const GrayScaleContext = createContext();
+
+export function ToggleGrayscale({ children }) {
+    const [isActive, setIsActive] = useState(false);
+    const handleGray = () => {
+        setIsActive((current) => !current);
+    }
+
+    return (
+      <GrayScaleContext.Provider
+        value={{ isActive, setIsActive, handleGray }}
+        >
+            {children}
+      </GrayScaleContext.Provider>
+    );
+};
+
+export function useGray() {
+    return useContext(GrayScaleContext);
+}