add basket probider

my-app/src/App.jsx

@@ -5,9 +5,10 @@ import { Portfolio } from "./Components/Portfolio/Portfolio.tsx";
 import { Pricing } from "./Components/Pricing/Pricing";
 import { ContactForm } from "./Components/ContactForm/ContactForm";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { PortfolioImage } from "./Components/Portfolio/PortfolioImage/portfolioimage";
+import { PortfolioImage } from "./Components/Portfolio/PortfolioImage/PortfolioImage.jsx";
 import { NotFound } from "./Components/NotFound/NotFound";
 import { ThemeProvider } from "./providers/theme.tsx";
+import { BasketProvider } from "./providers/basketContext.tsx";
 import { Footer } from "./Components/Footer/Footer";
 
 function App() {
@@ -19,23 +20,28 @@ function App() {
   return (
     <>
       <ThemeProvider>
-        <BrowserRouter>
-          <Header />
-          <div className="main__container">
-            <Routes>
-              <Route path="/" element={<LandingPage quotes={quotes} />}></Route>
-              <Route path="/portfolio" element={<Portfolio />}></Route>
-              <Route path="/pricing" element={<Pricing />}></Route>
-              <Route path="/contactform" element={<ContactForm />}></Route>
-              <Route
-                path="/portfolio/:imageId"
-                element={<PortfolioImage />}
-              ></Route>
-              <Route path="*" element={<NotFound />}></Route>
-            </Routes>
-          </div>
-          <Footer />
-        </BrowserRouter>
+        <BasketProvider>
+          <BrowserRouter>
+            <Header />
+            <div className="main__container">
+              <Routes>
+                <Route
+                  path="/"
+                  element={<LandingPage quotes={quotes} />}
+                ></Route>
+                <Route path="/portfolio" element={<Portfolio />}></Route>
+                <Route path="/pricing" element={<Pricing />}></Route>
+                <Route path="/contactform" element={<ContactForm />}></Route>
+                <Route
+                  path="/portfolio/:imageId"
+                  element={<PortfolioImage />}
+                ></Route>
+                <Route path="*" element={<NotFound />}></Route>
+              </Routes>
+            </div>
+            <Footer />
+          </BrowserRouter>
+        </BasketProvider>
       </ThemeProvider>
     </>
   );

my-app/src/providers/basketContext.tsx

@@ -0,0 +1,38 @@
+import React, { PropsWithChildren, createContext, useContext, useState } from 'react';
+import { Product } from "./basketContext.types"
+
+interface BasketContextType {
+    basket: Product[];
+    addToBasket: (product: Product) => void;
+    removeFromBasket: (productId: number) => void;
+}
+
+const BasketContext = createContext<BasketContextType | undefined>(undefined);
+
+const BasketProvider: React.FC = ({ children }: PropsWithChildren) => {
+    const [basket, setBasket] = useState<Product[]>([]);
+
+    const addToBasket = (product: Product) => {
+        setBasket([...basket, product]);
+    }
+
+    const removeFromBasket = (productId: number) => {
+        setBasket(basket.filter(item => item.id !== productId));
+    }
+
+    return (
+        <BasketContext.Provider value={{ basket, addToBasket, removeFromBasket }}>
+            {children}
+        </BasketContext.Provider>
+    );
+}
+
+const useBasket = () => {
+    const context = useContext(BasketContext);
+    if (!context) {
+        throw new Error('useBasket must be used within a BasketProvider');
+    }
+    return context;
+}
+
+export { BasketProvider, useBasket };

my-app/src/providers/basketContext.types.ts

@@ -0,0 +1,8 @@
+export interface Product {
+    author: string;
+    height: number;
+    id: number;
+    price: number;
+    url: string;
+    width: number;
+}