hawraa

src/App.css

@@ -1,38 +1,38 @@
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }

src/App.js

@@ -1,18 +1,14 @@
-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 { Route, Routes} from 'react-router-dom'
 import Drawer from './components/Drawer'
 
 
 function App(props) {
 
 
   return  <Routes>
+   <Route path="/cart" element={<Drawer/>}/>
    <Route path="/dashboard" element={<Drawer/>}/>
    <Route path="/categories" element={<Drawer   {...props}/>}/>
    <Route path="/products" element={<Drawer/>}/>

src/components/AddNewProduct.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Button from './Button'
+
+const AddNewProduct = (props) => {
+    return (
+        <>
+            <Button value ='add new' handelClick={props.handelClick} />
+        </>
+
+    )
+}
+
+export default AddNewProduct

src/components/Button.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Button(props) {
+    return (
+    <button onClick={props.handelClick}>{props.value} </button>
+    )
+}

src/components/Drawer.jsx

@@ -16,13 +16,10 @@ 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 { Link, useLocation, useNavigate } from 'react-router-dom'
 import Dashboard from '../pages/Dashboard'
 import Categories from '../pages/Categories'
-import Products from '../pages/Products'
-import LogoutIcon from '@mui/icons-material/Logout';
+import Products from "../pages/Products";
 import GridViewIcon from '@mui/icons-material/GridView';
 import CategoryIcon from '@mui/icons-material/Category';
 import ProductionQuantityLimitsIcon from '@mui/icons-material/ProductionQuantityLimits';
@@ -31,8 +28,8 @@ import Avatar from './Avatar'
 import MenuItem from '@mui/material/MenuItem';
 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 ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import Cart from '../pages/Cart';
 
 const drawerWidth = 240;
 
@@ -100,16 +97,17 @@ function PersistentDrawerLeft(props) {
   };
 
   const logout = () => {
-    localStorage.removeItem(TOKEN_KEY)
+    localStorage.removeItem('token')
     navigate('/login')
     handleCloseUserMenu()
   }
   useEffect(() => {
 
   }, [])
   const renderContent = (routeName) => {
-    console.log(routeName)
     switch (routeName) {
+      case '/':
+        return <Dashboard />
       case '/login':
         return <Login />
       case '/products':
@@ -118,8 +116,15 @@ function PersistentDrawerLeft(props) {
         return <Dashboard />
       case '/categories':
         return <Categories />
+      case '/cart':
+        return <Cart />
+        default:
+
     }
   }
+  const cartBtn = () => {
+    navigate('/cart')
+  }
   const handleOpenUserMenu = (event) => {
     setAnchorElUser(event.currentTarget);
   };
@@ -148,13 +153,26 @@ function PersistentDrawerLeft(props) {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" noWrap component="div">
-
             </Typography>
+            <Box>
+              <Tooltip title="My Cart">
+              <IconButton onClick={cartBtn} 
+              sx={{ color: 'white',
+                border: '1px solid gray',
+                borderRadius: '5px',
+                margin: '10px' }}>
+                <ShoppingCartIcon />
+              </IconButton>
+            </Tooltip>
+
             <Tooltip title="Logout">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                 <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
               </IconButton>
             </Tooltip>
+            </Box>
+
+
 
             <Menu
               sx={{ mt: '45px' }}
@@ -212,20 +230,20 @@ function PersistentDrawerLeft(props) {
             </ListItemIcon>
             <ListItemText primary='Categories' />
           </ListItem>
-          <ListItem component={Link} to="/products" key='products'>
+          <ListItem component={Link} to="/products" key='product'>
             <ListItemIcon>
               <ProductionQuantityLimitsIcon />
             </ListItemIcon>
-            <ListItemText primary='Products' />
+            <ListItemText primary='Product' />
           </ListItem>
         </List>
         <Divider />
         <List>
-          <ListItem component={Link} to="/login" key='logout'>
+          <ListItem component={Link} to="/cart">
             <ListItemIcon>
-              <LogoutIcon />
+              <ShoppingCartIcon />
             </ListItemIcon>
-            <ListItemText primary='Logout' />
+            <ListItemText primary='My Cart' />
           </ListItem>
         </List>
       </Drawer>

src/components/OneProduct.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+const OneProduct = (props) => {
+
+  const addCart = () => {
+    let getData = JSON.parse(localStorage.getItem('CartData'))
+    if (!getData){
+        let addCart = [props]
+        localStorage.setItem('CartData', JSON.stringify(addCart) )
+    }
+    else{
+        getData.push(props)
+        localStorage.setItem('CartData', JSON.stringify(getData) )
+    }
+}
+    return (
+                      <div className="Card">
+                        <img className="img" src={props.image} alt="" />   
+                        <div>
+                        <div className="item">
+                          <div className="p" >
+                            <h6>{ props.description }</h6>
+                            <h1>{ props.name }</h1>
+                          </div>
+                          <div>
+                            <h2>{ props.price }</h2>
+                          </div>
+                        </div>
+                        <button className="Btn" onClick={addCart}>Add To cart</button>
+                        </div>
+                      </div>
+    )
+}
+
+export default OneProduct

src/index.js

@@ -4,8 +4,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {BrowserRouter} from 'react-router-dom'
-import Drawer from './components/Drawer'
-import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const theme = createTheme({