AddToCart

package.json

@@ -18,16 +18,20 @@
     "@mui/lab": "^5.0.0-alpha.104",
     "@mui/material": "^5.10.8",
     "@mui/styles": "^5.10.10",
+    "@reach/router": "^1.3.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^4.23.4",
+    "bootstrap": "^5.2.3",
     "material-table": "^2.0.3",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.6.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
+    "react-use-cart": "^1.13.0",
     "recharts": "^2.1.15",
     "save": "^2.9.0",
     "web-vitals": "^2.1.4"

src/App.js

@@ -24,14 +24,21 @@ import Cosmetics from "./component/Cosmetics";
 import Lights from "./component/Lights";
 import Textiles from "./component/Textiles";
 import SignIn from "./component/signIn";
+import Shipping from "./views/Shipping";
+import Cart from './views/Cart'
+// import 'bootstrap/dist/css/bootstrap.min.css';
+import { useThemeHook} from './GlobalComponents/ThemeProvider'
 
 function App() {
   return (
     <>
       {/* <MyShop />    */}
       <BrowserRouter>
         <Routes>
+          <Route exact path ="/cart" element={<Cart/>}/>
+        <Route exact path="/Shipping" element={<Shipping/>}/>
           <Route exact path="/" element={<HomeLinks />}>
+
             <Route path="electronics" element={<Electronics />} />
             <Route path="decor" element={<Decorations />} />
             <Route path="men" element={<Men />} />

src/GlobalComponents/ThemeProvider.js

@@ -0,0 +1,28 @@
+ import React,{ createContext,useState,useEffect, useContext} from "react";
+
+ const ThemeContext =createContext();
+  const ThemeProvider =(props) =>{
+    const [theme, setTheme]= useState(JSON.parse(localStorage.getItem('theme')) || false );
+   useEffect(()=>{
+    localStorage.setItem('theme', JSON.stringify(theme));
+
+   },[theme]);
+   const setThemeMode = mode => setTheme(mode);
+   return(
+<ThemeContext.Provider value ={{ theme, setThemeMode}}>
+    {props.children}
+</ThemeContext.Provider>
+
+   )  ;
+
+
+};
+
+const useThemeHook = () =>{
+    const {theme}= useContext(ThemeContext);
+    return[theme];
+}
+
+export {
+ThemeProvider, ThemeContext, useThemeHook
+};

src/component/Description.js

@@ -2,9 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import electronics from '../data/electro';
 import allComponents from "../component/styles/allComponents.css";
+import { Button } from "react-bootstrap";
+import { useCart } from 'react-use-cart';
+import Item from 'antd/lib/list/Item';
 
-
-const Description = () => {
+const Description = ({item}) => {
     const params = useParams();
     const [elect, setElect] = useState({});
 
@@ -15,6 +17,7 @@ const Description = () => {
             }
         })
     }, [elect])
+    const { addItem }= useCart();
 
     return (
         <>
@@ -26,7 +29,7 @@ const Description = () => {
                     <h4>{elect.productName}</h4>
                     <h4>{elect.price}</h4>
                     <div className='link-plus'>
-                        <i className='fas fa-cart-plus'></i>
+                    <Button onClick={() =>addItem(elect)}> <i className='fas fa-cart-plus'></i></Button>  
                     </div>
                     <button className='btn-dd'>buy now</button>
 

src/component/ElCard.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import allComponents from "../component/styles/allComponents.css";
-
+import { useCart } from 'react-use-cart';
+import { Button } from "react-bootstrap";
 const ElCard =({item}) => {
     const {productName,price,image} =item;
-
+  
     return (
         <>
             <div className='cards'>
@@ -14,6 +15,7 @@ const ElCard =({item}) => {
                 <div>
                     <h5>{productName}</h5>
                     <h5>{price}</h5>
+
                 </div>
             </div>
             </div>

src/component/HomeDecorDescription.js

@@ -3,6 +3,9 @@ import { Link, useParams } from 'react-router-dom';
 import HomeDecorList from '../data/HomeDecorList';
 import allComponents from "../component/styles/allComponents.css";
 
+import { useCart } from 'react-use-cart';
+import { Button } from "react-bootstrap";
+
 
 const HomeDecorDescription = () => {
     const params = useParams();
@@ -15,6 +18,7 @@ const HomeDecorDescription = () => {
             }
         })
     }, [elect])
+     const { addItem }= useCart();
 
     return (
         <>
@@ -26,7 +30,7 @@ const HomeDecorDescription = () => {
                     <h4>{elect.productName}</h4>
                     <h4>{elect.price}</h4>
                     <div className='link-plus'>
-                        <i className='fas fa-cart-plus'></i>
+                    <Button onClick={() =>addItem(elect)}> <i className='fas fa-cart-plus'></i></Button>
                     </div>
                     <button className='btn-dd'>buy now</button>
 

src/component/HomeLinks.js

@@ -13,11 +13,13 @@ const HomeLinks = () => {
     useEffect(()=> {
         console.log(window.location.pathname);
     },[])
+    const[cart,setcart]= useState([])
+    const [show,setshow] =useState(true);
 
-
+    const [warning, setwarning]= useState(false);
     return (
         <>
-        <Header/>
+        <Header  />
             <div className="Box-container">
                 <div className='links-container'>
                     <div>

src/component/HomeProductDescription.js

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import HomeProductList from '../data/HomeProductList';
 import allComponents from "../component/styles/allComponents.css";
+import { Button } from "react-bootstrap";
+import { useCart } from 'react-use-cart';
 
 
 const HomeProductDescription = () => {
@@ -15,6 +17,7 @@ const HomeProductDescription = () => {
             }
         })
     }, [elect])
+    const { addItem }= useCart();
 
     return (
         <>
@@ -26,7 +29,7 @@ const HomeProductDescription = () => {
                     <h4>{elect.productName}</h4>
                     <h4>{elect.price}</h4>
                     <div className='link-plus'>
-                        <i className='fas fa-cart-plus'></i>
+                    <Button onClick={() =>addItem(elect)}> <i className='fas fa-cart-plus'></i></Button>
                     </div>
                     <button className='btn-dd'>buy now</button>
 

src/component/SportsDescription.js

@@ -2,6 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import sportsList from '../data/sportsList';
 import allComponents from "../component/styles/allComponents.css";
+import { Button } from "react-bootstrap";
+import { useCart } from 'react-use-cart';
+
 
 
 const SportsDescription = () => {
@@ -15,7 +18,7 @@ const SportsDescription = () => {
             }
         })
     }, [elect])
-
+    const { addItem }= useCart();
     return (
         <>
             <div className='cards-box'>
@@ -26,7 +29,7 @@ const SportsDescription = () => {
                     <h4>{elect.productName}</h4>
                     <h4>{elect.price}</h4>
                     <div className='link-plus'>
-                        <i className='fas fa-cart-plus'></i>
+                    <Button onClick={() =>addItem(elect)}> <i className='fas fa-cart-plus'></i></Button>
                     </div>
                     <button className='btn-dd'>buy now</button>
                 </div>

src/component/ToysDescription.js

@@ -2,6 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import ToysList from '../data/ToysList';
 import allComponents from "../component/styles/allComponents.css";
+import { Button } from "react-bootstrap";
+import { useCart } from 'react-use-cart';
+
 
 
 const ToysDescription = () => {
@@ -15,7 +18,7 @@ const ToysDescription = () => {
             }
         })
     }, [elect])
-
+    const { addItem }= useCart();
     return (
         <>
             <div className='cards-box'>
@@ -26,7 +29,7 @@ const ToysDescription = () => {
                     <h4>{elect.productName}</h4>
                     <h4>{elect.price}</h4>
                     <div className='link-plus'>
-                        <i className='fas fa-cart-plus'></i>
+                    <Button onClick={() =>addItem(elect)}> <i className='fas fa-cart-plus'></i></Button>
                     </div>
                     <button className='btn-dd'>buy now</button>
 

src/component/WomenDescription.js

@@ -2,7 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import womenList from '../data/womenList';
 import allComponents from "../component/styles/allComponents.css";
+import { Button } from "react-bootstrap";
 
+import { useCart } from 'react-use-cart';
 
 const WomenDescription = () => {
     const params = useParams();
@@ -15,7 +17,7 @@ const WomenDescription = () => {
             }
         })
     }, [elect])
-
+    const { addItem }= useCart();
     return (
         <>
             <div className='cards-box'>
@@ -26,7 +28,7 @@ const WomenDescription = () => {
                     <h4>{elect.productName}</h4>
                     <h4>{elect.price}</h4>
                     <div className='link-plus'>
-                        <i className='fas fa-cart-plus'></i>
+                    <Button onClick={() =>addItem(elect)}> <i className='fas fa-cart-plus'></i></Button>
                     </div>
                     <button className='btn-dd'>buy now</button>
 

src/component/header.js

@@ -13,8 +13,18 @@ import { Link } from "react-router-dom";
 import { SidebarData } from "./SidebarData";
 import { IconContext } from "react-icons";
 import { Icon } from "@mui/material";
+import { useCart } from 'react-use-cart'
+
+const Header = ({size}) => {
+const {
+  isEmpty,
+  totalItems,
+
+}= useCart();
+const [show,setshow] =useState(true);
+
+const [warning, setwarning]= useState(false);
 
-const Header = () => {
   const [sidebar, setSidebar] = useState(false);
 
   const showSidebar = () => setSidebar(!sidebar);
@@ -113,8 +123,9 @@ const Header = () => {
               <img src={user}></img>
               <h4>Login</h4>
             </a>
-            <a href="#">
+            <a href="/cart">
               <img src={cart}></img>
+              {!isEmpty && <span style={{ position:'relative', left: '-21px', top: '-18px'}}>{totalItems}</span>}
               <h4>Cart</h4>
             </a>
             {/* <a href="#"><img src={order}></img><span></span><h4 >order</h4></a> */}

src/component/signIn.js

@@ -1,12 +1,12 @@
 import React from "react";
 import "./signIn.css";
-import onlineshopping from "../images/cart-image.JPG";
+import picture from'../assets/image/picture.jpg';
 
 function SignIn() {
   return (
     <div className="container1">
       <div>
-        <img src={onlineshopping} alt="" id="picture" />
+        <img src={picture} alt="" id="picture" />
       </div>
       ;.
       <div className="container3">

src/index.js

@@ -1,6 +1,17 @@
 import React from "react";
 import  ReactDOM from "react-dom";
-
+import { ThemeProvider } from './GlobalComponents/ThemeProvider';
 import App from "./App";
+import { CartProvider} from 'react-use-cart'
+ReactDOM.render(
+
+<ThemeProvider>
+    <CartProvider>
+    <App/>
+    </CartProvider>
+
+</ThemeProvider>
+
+
 
-ReactDOM.render(<App/>,document.querySelector("#root"));
+,document.querySelector("#root"));

src/routes/index.js

@@ -5,11 +5,13 @@ import HomeLayout from "../component/Homelayout";
 import Dashboard from "../views/Dashbord/Dashboard";
 import Dashlayout from "../component/admin/DashLayout";
 import Dashbrd from "../Dashbrd/Dashbrd";
+import { ThemeProvider } from './GlobalComponents/ThemeProvider';
 const index = () => {
   return (
     <>
       {/* <HomeLayout> */}
       <Routes>
+        <Route path ="#" element={<Cart/>}/>
         <Route path="/login" element={<SignIn />} />
         <Route exact path="/Dashboard" element={<Dashboard />} />
         <Route exact path="/Dashlayout" element={<Dashlayout />} />