{elect.productName}
{elect.price}
-
+
diff --git a/src/component/ElCard.js b/src/component/ElCard.js
index 36cee83..6c1eb67 100644
--- a/src/component/ElCard.js
+++ b/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 (
<>
@@ -14,6 +15,7 @@ const ElCard =({item}) => {
diff --git a/src/component/HomeDecorDescription.js b/src/component/HomeDecorDescription.js
index a6428d1..9368682 100644
--- a/src/component/HomeDecorDescription.js
+++ b/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 = () => {
{productName}
{price}
+{elect.productName}
{elect.price}
-
+
diff --git a/src/component/HomeLinks.js b/src/component/HomeLinks.js
index 466ebd6..555fc32 100644
--- a/src/component/HomeLinks.js
+++ b/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 (
<>
-
diff --git a/src/component/HomeProductDescription.js b/src/component/HomeProductDescription.js
index 7525438..6d25fb3 100644
--- a/src/component/HomeProductDescription.js
+++ b/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 = () => {
{elect.productName}
{elect.price}
-
+
diff --git a/src/component/SportsDescription.js b/src/component/SportsDescription.js
index 8b5b986..9676979 100644
--- a/src/component/SportsDescription.js
+++ b/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 (
<>
@@ -26,7 +29,7 @@ const SportsDescription = () => {
diff --git a/src/component/ToysDescription.js b/src/component/ToysDescription.js
index 8694b17..489c594 100644
--- a/src/component/ToysDescription.js
+++ b/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 (
<>
{elect.productName}
{elect.price}
-
+
@@ -26,7 +29,7 @@ const ToysDescription = () => {
{elect.productName}
{elect.price}
-
+
diff --git a/src/component/WomenDescription.js b/src/component/WomenDescription.js
index b6bc07b..36cf968 100644
--- a/src/component/WomenDescription.js
+++ b/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 (
<>
@@ -26,7 +28,7 @@ const WomenDescription = () => {
+ {!isEmpty && {totalItems}}
{elect.productName}
{elect.price}
-
+
diff --git a/src/component/header.js b/src/component/header.js
index f75ad60..a043fb6 100644
--- a/src/component/header.js
+++ b/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 = () => {
Login
- +Cart
{/*order
*/} diff --git a/src/component/signIn.js b/src/component/signIn.js index 20c7657..852f0be 100644 --- a/src/component/signIn.js +++ b/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 (
- 
+ 
;.
diff --git a/src/index.js b/src/index.js
index c39966c..fcd16c7 100644
--- a/src/index.js
+++ b/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(
+
+
+
+
+
+
+
+
-ReactDOM.render( */}
+ }/>
+
+
+
+
+
+
+
+ {items.map((item, index)=>{
+ return(
+
+ {!isEmpty &&
+
+
+
+
+ }
+
+
+
+
+ )
+
+}
+
+export default Cart;
\ No newline at end of file
diff --git a/src/views/Shipping.css b/src/views/Shipping.css
new file mode 100644
index 0000000..4841b51
--- /dev/null
+++ b/src/views/Shipping.css
@@ -0,0 +1,68 @@
+
+
+.form-Shipping h1{
+ text-align: center;
+ font-size:25px;
+ color:black;
+}
+
+
+label{
+ margin: 3px;
+ color: black;
+
+}
+
+
+.p input{
+ width: 60%;
+ height: 1vh;
+ border-radius: 6px;
+ border: none;
+ margin-left: 40px;
+ padding: 20px;
+
+}
+
+.p select{
+
+ margin-left: 80px ;
+}
+
+.btn button{
+ width:160px;
+ height: 40px;
+ border-radius: 10px;
+ background-color: #CC8032;
+ color: white;
+ text-align: center;
+ border: none;
+ margin-top: 60px;
+ margin-left: 170px;
+
+}
+.formone{
+ padding-top: 50px;
+ background-image: url("../assets/image/picture.jpg");
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: right bottom ;
+ height: 100vh;
+ width: 60%;
+ background-color: rgba(245, 245, 245, 0.685);
+}
+
+.form-Shipping{
+ width: 605px;
+ height:104vh;
+ border: 0px solid white;
+ margin: auto;
+ color:black;
+ margin-right: 2px;
+ position: relative;
+ bottom: 75rem;
+ border-radius:7px ;
+padding: 30px;
+background-color:gainsboro
+}
+
\ No newline at end of file
diff --git a/src/views/Shipping.js b/src/views/Shipping.js
new file mode 100644
index 0000000..2f09125
--- /dev/null
+++ b/src/views/Shipping.js
@@ -0,0 +1,96 @@
+import React from "react"
+import "./Shipping.css";
+
+
+
+const Shipping = () => {
+
+ return (
+ { isEmpty? 'The Cart is Empty':"The Cart"}
+|
+
+ |
+ + {item.productName} + | + {item.price} + | +
+Total Price: Rwf .{price} +
+ +
+
+
+
+
+
+
+
+
+
+ )
+
+
+
+}
+
+
+
+
+export default Shipping
\ No newline at end of file
+
+
+
+
+
+
+ Shipping Info
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+