abdullah amer

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.2.0",
+    "@mui/icons-material": "^5.2.1",
     "@mui/material": "^5.2.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -16,6 +16,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.3.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/App.js

@@ -1,12 +1,10 @@
-import logo from './logo.svg';
+
 import './App.css';
-import Dashboard from './pages/Dashboard'
-import Categories from './pages/Categories'
-import Products from './pages/Products'
 import Login from './pages/Login'
 import {Navigate, Route, Routes} from 'react-router-dom'
-import {useEffect,useState} from 'react'
 import Drawer from './components/Drawer'
+import Cards from "./pages/Card";
+// import Card from "./pages/Card";
 
 
 function App(props) {
@@ -17,6 +15,7 @@ function App(props) {
    <Route path="/categories" element={<Drawer   {...props}/>}/>
    <Route path="/products" element={<Drawer/>}/>
    <Route path="/login" element={<Login/>}/>
+   <Route path="/carts" element={<Cards/>}/>
 
 </Routes>
 }

src/components/Drawer.jsx

@@ -16,8 +16,6 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
 import { Routes, Link, Route, useLocation, useNavigate } from 'react-router-dom'
 import Dashboard from '../pages/Dashboard'
 import Categories from '../pages/Categories'
@@ -33,7 +31,8 @@ import Menu from '@mui/material/Menu';
 import Tooltip from '@mui/material/Tooltip';
 import {navigate} from 'react-router-dom'
 import {TOKEN_KEY} from '../utils/Constants'
-
+import Icon from '@mui/material/Icon';
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 const drawerWidth = 240;
 
 
@@ -148,14 +147,19 @@ function PersistentDrawerLeft(props) {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" noWrap component="div">
-
             </Typography>
+            <Tooltip>
+              <IconButton style={{color:'green',paddingLeft:'1000px'}}  component={Link}
+                          to="/carts"> <AddShoppingCartIcon></AddShoppingCartIcon>
+              </IconButton>
+            </Tooltip>
+
             <Tooltip title="Logout">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                 <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
               </IconButton>
-            </Tooltip>
 
+            </Tooltip>
             <Menu
               sx={{ mt: '45px' }}
               id="menu-appbar"
@@ -170,8 +174,7 @@ function PersistentDrawerLeft(props) {
                 horizontal: 'right',
               }}
               open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
-            >
+              onClose={handleCloseUserMenu}>
               <MenuItem key='Logout' onClick={logout}>
                 <Typography textAlign="center">Logout</Typography>
               </MenuItem>

src/pages/Card.jsx

@@ -0,0 +1,132 @@
+import React, {Component, useState} from 'react';
+import styled from "styled-components";
+
+import {Button} from "@mui/material";
+
+const Body=styled.div`
+display: flex;
+flex-display: row;
+  //align-items: start;
+  justify-content: space-between;
+`;
+const buttons = styled.div`
+  font-size: 14px;
+
+`;
+const Bod=styled.div`
+  flex-direction: row;
+  //background-color:#FFFAE2;
+  padding: 40px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 900px;
+  //padding-bottom: 10px;
+`;
+const Carde =styled.div`
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    //padding-bottom: 0px;
+    background-color: #E6E6E6;
+    width: 270px;
+    border-radius: 10px;
+
+    //alt:"Avatar"; 
+  `;
+const RowText=styled.div`
+display: flex;
+flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  padding-bottom: 10px;
+
+`;
+const Text=styled.div`
+padding-left: 10px;
+`;
+const BottonB=styled.div`
+background-color: black;
+  height: 60px;
+`;
+
+const Ht6=styled.h6`
+color: white;
+  justify-content: center;
+  text-align-last:center;
+`;
+function Cards(){
+    const [cart,setCart]=useState(JSON.parse(localStorage.getItem('CartsData')))
+    var price = 0
+    if(cart){
+        cart.map((item)=>(
+            price+=item.price
+        ))
+    }
+
+     const remove=(removeCart)=>{
+        let temp =cart.filter((product)=>product.id != removeCart.id)
+         setCart(temp)
+         localStorage.setItem('CartsData',JSON.stringify(temp))
+     }
+    if(!cart){
+        return  <p>don't found</p>
+    }
+    return (
+        <Body>
+            <Bod>
+                {
+
+                    cart.map((item,index)=>
+                     <div style={{padding:'30px'}}>
+                         <Carde>
+                         <img width={270} height={200}
+                              src={item.image}/>
+
+                         <RowText>
+                             <h4>{item.category}</h4>
+                             <div style={{
+                                 height:'30px',
+                                 color:'red',
+                                 background:'#FFF',
+                                 borderRadius: '15px'
+                             }}>${item.price}</div>
+
+                         </RowText>
+                         <box styles={{padding:'80px'}}>
+                             <BottonB>
+                                 <Button >
+                                     <p style={{color:'#FFF',paddingLeft:'90px'}} onClick={()=>remove(item)}>remove</p></Button>
+                             </BottonB>
+
+                         </box>
+                     </Carde>
+                     </div>
+                    )
+                }
+            </Bod>
+            <div style={{ backgroundColor: '#E6E6E6',
+                width: '315px',
+                // paddingRight:' 20px',
+                paddingTop:'30px',
+                margin:'30px',
+                borderRadius: '10px',}}>
+                <div style={{paddingLeft:'30px'}}>
+                    <h4>Details</h4>
+                    <p>items Number: {cart.length}</p>
+                    <p>Total Amount  ${price}</p>
+                    <p>Discount: 99$</p>
+            </div>
+                <div style={{paddingLeft:'100px',
+                paddingTop:'120px'}}>
+                    <h4>Final Amount:</h4>
+                    <h3 style={{color:'green'}}>900 $</h3>
+                </div>
+                <div style={{paddingLeft:'90px',paddingTop:'160px'}}>                <buttons style={{background:'green',color:'#FFF',paddingLeft:'30px',paddingRight:'30px',paddingTop:'10px',paddingBottom:'10px'}}>checkout</buttons>
+                </div>
+            </div>
+
+        </Body>
+    );
+}
+
+export default Cards;

src/pages/Login.jsx

@@ -9,7 +9,7 @@ function Login(props) {
 
     const login = (e)=>{
         e.preventDefault()
-        axios.post('/api/academy/auth/login',
+        axios.post('https://website-backend.computiq.tech/api/academy/auth/login',
         {
             email:email,
             password:password