├── src ├── App.css ├── Pages │ ├── Contact.css │ ├── Women.css │ ├── Collection.css │ ├── Home.css │ ├── Admin.css │ ├── AdminProduct.css │ ├── Ourstory.css │ ├── AdminRevenue.js │ ├── Sale.css │ ├── Contact.js │ ├── AddProduct.css │ ├── AdminLogin.css │ ├── Men.css │ ├── Login.css │ ├── Sale.js │ ├── Registration.css │ ├── AdminLogin.js │ ├── Login.js │ ├── Home.js │ ├── Ourstory.js │ ├── AdminUser.js │ ├── Cart.js │ ├── Lookbook.js │ ├── AddProducts.js │ ├── EditProduct.js │ ├── Admin.js │ ├── Registration.js │ ├── AdminProducts.js │ ├── Collection.js │ ├── Men.js │ └── Women.js ├── Components │ ├── Checkout.css │ ├── Searchbox.js │ ├── Navbar.css │ ├── Mainpage.css │ ├── Mainpage.js │ ├── LogoList.js │ ├── CartItem.jsx │ ├── Footer.css │ ├── Footer.js │ ├── AllshoeData.js │ ├── Checkout.js │ └── Navbar.js ├── index.css ├── setupTests.js ├── App.test.js ├── index.js ├── reportWebVitals.js └── App.js ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Pages/Contact.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Pages/Women.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Components/Checkout.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Pages/Collection.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Pages/Home.css: -------------------------------------------------------------------------------- 1 | .home-container{ 2 | margin: 20px; 3 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Plashoe/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Plashoe/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Plashoe/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/Pages/Admin.css: -------------------------------------------------------------------------------- 1 | .admin-link a:hover { 2 | background-color: #808080; 3 | 4 | } 5 | -------------------------------------------------------------------------------- /src/Pages/AdminProduct.css: -------------------------------------------------------------------------------- 1 | /* .men-card-button-2 :hover{ 2 | background: green; 3 | color: white; 4 | 5 | } */ -------------------------------------------------------------------------------- /src/Pages/Ourstory.css: -------------------------------------------------------------------------------- 1 | .os-vid-dis p{ 2 | color: grey; 3 | 4 | } 5 | .os-lk h5{ 6 | color: grey; 7 | 8 | } -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Pages/AdminRevenue.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const AdminRevenue = () => { 4 | return ( 5 |
6 |

7 | Revenue 8 |

9 |
10 | ); 11 | }; 12 | 13 | export default AdminRevenue; 14 | -------------------------------------------------------------------------------- /src/Pages/Sale.css: -------------------------------------------------------------------------------- 1 | .sbtn { 2 | font-size: 30px; 3 | 4 | color: white; 5 | border: 2px solid white; 6 | 7 | background-color: transparent; 8 | color:white; 9 | border: 2px solid white; 10 | transition: background-color 0.3s, color 0.3s; 11 | cursor: pointer; 12 | 13 | } 14 | 15 | .sbtn:hover { 16 | background-color:white; 17 | color: black; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import { BrowserRouter } from 'react-router-dom'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/Pages/Contact.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "../Components/Navbar"; 3 | import Footer from "../Components/Footer"; 4 | 5 | const Contact = () => { 6 | return ( 7 |
8 | {/*
9 |

CONTACT PAGE

10 |
*/} 11 | 12 |
18 |

Contact Us

19 | 20 |
21 | 22 |
23 |
24 | ); 25 | }; 26 | 27 | export default Contact; 28 | -------------------------------------------------------------------------------- /src/Components/Searchbox.js: -------------------------------------------------------------------------------- 1 | import React ,{useContext}from 'react'//useState 2 | // import { AllshoeData } from './AllshoeData' 3 | import SearchIcon from '@mui/icons-material/Search'; 4 | import { MyContext } from '../App'; 5 | 6 | const Searchbox = () => { 7 | const {searchTerm,setSearchTerm} =useContext(MyContext) 8 | 9 | return ( 10 |
11 |
12 |
13 | 14 | { 15 | setSearchTerm(e.target.value); 16 | }}/> 17 |
18 | 19 |
20 |
21 | ) 22 | } 23 | 24 | export default Searchbox 25 | -------------------------------------------------------------------------------- /src/Components/Navbar.css: -------------------------------------------------------------------------------- 1 | .nav-container{ 2 | /* background-color: #C0C0C0; */ 3 | width:100%; 4 | height:70px; 5 | display: flex; 6 | justify-content: space-between; 7 | } 8 | .nav-container img{ 9 | width: 150px; 10 | } 11 | .nav-container li{ 12 | color: grey; 13 | font-weight: 600; 14 | 15 | } 16 | .ul-nav-left li:hover, 17 | .ul-nav-right li:hover { 18 | color: black; 19 | } 20 | 21 | 22 | .ul-nav-left{ 23 | margin-left: 10px; 24 | list-style: none; 25 | display: flex; 26 | height: 100%; 27 | align-items: center; 28 | 29 | } 30 | .ul-nav-left li{ 31 | margin: 0px 10px; 32 | } 33 | .ul-nav-right{ 34 | list-style: none; 35 | height: 100%; 36 | align-items: center; 37 | display: flex; 38 | } 39 | .ul-nav-right li{ 40 | margin: 0px 10px; 41 | } 42 | .nav-left{ 43 | display: flex; 44 | } 45 | -------------------------------------------------------------------------------- /src/Pages/AddProduct.css: -------------------------------------------------------------------------------- 1 | .addproduct-div input{ 2 | text-align: center; 3 | background-color: Gainsboro; 4 | font: 600; 5 | font-weight: 800; 6 | height: 40px; 7 | border: solid; 8 | border-width: 2px 4px; 9 | border-radius: 40px; 10 | } 11 | .addproduct-div select{ 12 | text-align: center; 13 | background-color: Gainsboro; 14 | font: 600; 15 | font-weight: 800; 16 | height: 40px; 17 | border: solid; 18 | border-width: 2px 4px; 19 | border-radius: 40px; 20 | 21 | } 22 | .addproduct-div button{ 23 | text-align: center; 24 | background-color: black; 25 | color: white; 26 | font: 600; 27 | font-weight: 800; 28 | height: 40px; 29 | border: solid; 30 | border-width: 2px 4px; 31 | border-radius: 40px; 32 | cursor: pointer; 33 | } 34 | .addproduct-div button:hover{ 35 | background: green; 36 | color: black; 37 | } -------------------------------------------------------------------------------- /src/Pages/AdminLogin.css: -------------------------------------------------------------------------------- 1 | .admin-login-container { 2 | background-image: url("https://img.freepik.com/free-photo/still-life-say-no-fast-fashion_23-2149669605.jpg?w=1060&t=st=1700979669~exp=1700980269~hmac=7b13f0152e2b70b0e49c34e2da5e44387877367e1f15ecb580dbc366d8a89cbe"); 3 | background-size: cover; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | } 9 | 10 | .admin-login-form { 11 | width: 30%; 12 | padding: 20px; 13 | border-radius: 10px; 14 | background: rgba(0, 0, 0, 0.7); 15 | color: white; 16 | text-align: center; 17 | } 18 | 19 | .admin-login-form input { 20 | text-align: center; 21 | background-color: #f0f0f0; 22 | font-weight: 600; 23 | height: 40px; 24 | border: none; 25 | border-radius: 20px; 26 | margin-bottom: 15px; 27 | } 28 | 29 | .admin-login-buttons { 30 | display: flex; 31 | justify-content: center; 32 | } 33 | 34 | .admin-login-span-btn { 35 | color: white; 36 | border: none; 37 | border-radius: 20px; 38 | padding: 10px 20px; 39 | cursor: pointer; 40 | background-color: #333; 41 | transition: background-color 0.3s, color 0.3s; 42 | } 43 | 44 | .admin-login-span-btn:hover { 45 | background-color: white; 46 | color: #333; 47 | } 48 | -------------------------------------------------------------------------------- /src/Pages/Men.css: -------------------------------------------------------------------------------- 1 | .men-container{ 2 | padding: 20px; 3 | } 4 | .men-men{ 5 | color: #6e7051; 6 | font-size: xx-large; 7 | font-weight: 600; 8 | display: flex; 9 | justify-content: flex-start; 10 | } 11 | .men-navbar-left{ 12 | background-color: #6e7051; 13 | width:250px; 14 | 15 | } 16 | .men-navbar-left :hover{ 17 | background-color: #262b2c; 18 | color: #979a9b; 19 | } 20 | .men-navbar{ 21 | display: flex; 22 | justify-content: space-between; 23 | } 24 | option{ 25 | height: 100%; 26 | } 27 | .men-card-container{ 28 | margin-top: 100px; 29 | } 30 | .men-card:hover .men-card-button { 31 | background-color: black; 32 | color: white; 33 | height: 25px; 34 | } 35 | .men-card { 36 | overflow: hidden; 37 | } 38 | 39 | .men-card:hover .men-card-img { 40 | transform: scale(1.05); 41 | } 42 | .men-card-img{ 43 | width: 367px; 44 | height: 367px; 45 | transition: transform 0.3s ease; 46 | } 47 | .men-card-button{ 48 | width: 100%; 49 | color: white; 50 | border: none; 51 | font-size: larger; 52 | font-weight: 600; 53 | border-color: white; 54 | 55 | 56 | } 57 | .men-card:hover .men-card-button{ 58 | transform: scale(1.05); 59 | 60 | 61 | 62 | } 63 | .men-card-button:hover .add-to-cart-text { 64 | color: green; 65 | } 66 | -------------------------------------------------------------------------------- /src/Pages/Login.css: -------------------------------------------------------------------------------- 1 | .login-container { 2 | background-image: url("https://assets-global.website-files.com/622488277ab5ee818d179d9f/64470ce140beed1a68a4bec7_626079f8351eb056e307319e_amberjack_r1_MSP_4296-scaled.jpg"); 3 | background-size: cover; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | 11 | .login-form { 12 | width: 30%; 13 | padding: 20px; 14 | border-radius: 10px; 15 | background: rgba(0, 0, 0, 0.7); 16 | color: white; 17 | text-align: center; 18 | } 19 | 20 | .login-form input { 21 | text-align: center; 22 | background-color: #f0f0f0; 23 | font-weight: 600; 24 | height: 40px; 25 | border: none; 26 | border-radius: 20px; 27 | margin-bottom: 15px; 28 | } 29 | 30 | .login-buttons { 31 | display: flex; 32 | justify-content: center; 33 | } 34 | 35 | .login-span-btn, 36 | .admin-link { 37 | color: white; 38 | text-decoration: none; 39 | border: none; 40 | border-radius: 20px; 41 | margin: 0 5px; 42 | padding: 10px 20px; 43 | cursor: pointer; 44 | background-color: #333; 45 | transition: background-color 0.3s, color 0.3s; 46 | } 47 | 48 | .login-span-btn:hover, 49 | .admin-link:hover { 50 | background-color: white; 51 | color: #333; 52 | } 53 | 54 | .register-link { 55 | color: white; 56 | text-decoration: none; 57 | margin-top: 10px; 58 | } 59 | 60 | .register-link:hover { 61 | text-decoration: underline; 62 | } 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "plashoe", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.11.1", 7 | "@emotion/styled": "^11.11.0", 8 | "@mui/icons-material": "^5.14.11", 9 | "@mui/material": "^5.14.11", 10 | "@testing-library/jest-dom": "^5.17.0", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "bootstrap": "^5.3.2", 14 | "countries-list": "^3.0.5", 15 | "fontawesome": "^5.6.3", 16 | "react": "^18.2.0", 17 | "react-bootstrap": "^2.9.0", 18 | "react-dom": "^18.2.0", 19 | "react-player": "^2.13.0", 20 | "react-router-dom": "^6.16.0", 21 | "react-scripts": "5.0.1", 22 | "react-select": "^5.7.7", 23 | "react-select-country-list": "^2.2.3", 24 | "styled-components": "^6.0.8", 25 | "web-vitals": "^2.1.4" 26 | }, 27 | "scripts": { 28 | "start": "react-scripts start", 29 | "build": "react-scripts build", 30 | "test": "react-scripts test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/Components/Mainpage.css: -------------------------------------------------------------------------------- 1 | .mainpage-img { 2 | padding: 40px; 3 | background-position: center; 4 | background-repeat: no-repeat; 5 | width: 100%; 6 | } 7 | .mainpage-shoe { 8 | position: relative; /* Make the container a positioning context */ 9 | } 10 | 11 | .mainpage-textpar { 12 | position: absolute; /* Position the text absolutely */ 13 | top: 30%; /* Center it vertically */ 14 | left: 10%; /* Center it horizontally */ 15 | color:white; 16 | font-size: xx-large; 17 | padding: 20px; /* Add some padding for readability */ 18 | 19 | } 20 | .mainpage-textbox{ 21 | position: absolute; /* Position the text absolutely */ 22 | top: 52%; /* Center it vertically */ 23 | left: 10%; /* Center it horizontally */ 24 | color: white; 25 | font-size:x-large; 26 | padding: 20px; 27 | } 28 | 29 | 30 | .mainpage-textbox-shop{ 31 | display: flex; 32 | justify-content:space-between; 33 | padding: 10px; 34 | color:black; 35 | text-decoration: none; 36 | 37 | } 38 | .mainpage-shopmen-span{ 39 | text-align: center; 40 | width: 30%; 41 | height: 70%; 42 | background-color: whitesmoke; 43 | } 44 | 45 | .mainpage-shopwomen-span{ 46 | text-align: center; 47 | width: 30%; 48 | height: 70%; 49 | background-color:whitesmoke; 50 | } 51 | .shop-link-style{ 52 | text-decoration: none; 53 | color: black; 54 | 55 | } 56 | .mainpage-shopmen-span:hover{ 57 | background-color: black; 58 | color:white; 59 | } 60 | .mainpage-shopwomen-span:hover{ 61 | background-color: black; 62 | color:white; 63 | } -------------------------------------------------------------------------------- /src/Components/Mainpage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Mainpage.css"; 3 | import { Link } from "react-router-dom"; 4 | 5 | const Mainpage = () => { 6 | return ( 7 |
8 |
9 | Mainpage shoe pic 14 |
15 |
16 |

Love the Planet

17 |

we walk on

18 |
19 |
20 |

Bibendum fermentum, aenean donec pretium aliquam blandit

21 |

tempor imperdiet arcu arcu ut nunc in dictum mauris at ut

22 |
23 | 24 | 28 | SHOP MEN 29 | 30 | 31 | 32 | 36 | SHOP WOMEN 37 | 38 | 39 |
40 |
41 |
42 |
43 |
44 | ); 45 | }; 46 | 47 | export default Mainpage; 48 | -------------------------------------------------------------------------------- /src/Pages/Sale.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from '../Components/Navbar' 3 | import Footer from '../Components/Footer' 4 | import "./Sale.css"; 5 | 6 | 7 | const Sale = () => { 8 | return ( 9 |
10 | {/*

SALE PAGE

*/} 11 | 12 |
13 |

Sale

14 |
15 |
16 |
17 | 18 | img 19 |
20 |

Refer A Friend

21 |
22 |

Get 20% Off

23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 | img 31 | 32 |
33 |

Promotion

34 |
35 |

Student Discount

36 |
37 |
38 |
39 |
40 |
41 | 42 | 43 |
44 | 45 | 46 |
47 |
48 | ) 49 | } 50 | 51 | export default Sale 52 | -------------------------------------------------------------------------------- /src/Pages/Registration.css: -------------------------------------------------------------------------------- 1 | 2 | h1{ 3 | text-align: center; 4 | } 5 | label{ 6 | font-weight: 600; 7 | } 8 | .container { 9 | 10 | background-image: url("https://assets-global.website-files.com/622488277ab5ee818d179d9f/64470ce140beed1a68a4bec7_626079f8351eb056e307319e_amberjack_r1_MSP_4296-scaled.jpg"); 11 | background-size: cover; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | align-items: center; 16 | height: 100vh; 17 | 18 | } 19 | .container > form { 20 | /* width: 40%; 21 | padding: 20px; 22 | border-radius: 5px; 23 | background:rgba(0, 0, 0, 0.947); 24 | color: white; */ 25 | width: 30%; 26 | padding: 20px; 27 | border-radius: 10px; 28 | background: rgba(0, 0, 0, 0.7); 29 | color: white; 30 | text-align: center; 31 | } 32 | pre { 33 | width: 70%; 34 | color:black; 35 | font-size: larger; 36 | } 37 | 38 | .span-btn{ 39 | background:black ; 40 | color: Gainsboro; 41 | width: 150px; 42 | font: 600; 43 | font-weight: 800; 44 | height: 40px; 45 | border: solid; 46 | border-width: 2px 4px; 47 | border-radius: 40px; 48 | } 49 | .container p { 50 | color: red; 51 | } 52 | input{ 53 | width: 100%; 54 | } 55 | .field input{ 56 | text-align: center; 57 | background-color: Gainsboro; 58 | font: 600; 59 | font-weight: 800; 60 | height: 40px; 61 | border: solid; 62 | border-width: 2px 4px; 63 | border-radius: 40px; 64 | 65 | } 66 | .container button:hover{ 67 | background-color:white; 68 | color:black; 69 | } 70 | .link-span{ 71 | color: white; 72 | text-decoration: none; 73 | border:solid ; 74 | border-width: 2px 4px; 75 | border-radius: 40px; 76 | margin-left: 5px; 77 | width: 80px; 78 | text-align: center; 79 | 80 | 81 | } 82 | .link-span:hover{ 83 | background-color: white; 84 | color: black; 85 | 86 | } -------------------------------------------------------------------------------- /src/Pages/AdminLogin.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useNavigate } from "react-router-dom"; 3 | import "./AdminLogin.css" 4 | 5 | const AdminLogin = () => { 6 | const navigate = useNavigate(); 7 | 8 | const Admindata = { username: "sid", password: "1234" }; 9 | const initialValues = { username: "", password: "" }; 10 | const [formValues, setFormValues] = useState(initialValues); 11 | 12 | const handleChange = (e) => { 13 | const { name, value } = e.target; 14 | setFormValues({ ...formValues, [name]: value }); 15 | }; 16 | 17 | const adminClick = () => { 18 | if (!formValues.username || !formValues.password) { 19 | alert("Please Enter Valid Data"); 20 | } else { 21 | if ( 22 | formValues.username === Admindata.username && 23 | formValues.password === Admindata.password 24 | ) { 25 | alert("Login Successfully"); 26 | navigate("/admin"); 27 | } else { 28 | alert("Invalid Credentials"); 29 | } 30 | } 31 | }; 32 | 33 | return ( 34 |
35 |
36 |

Admin Login

37 | 44 |
45 | 52 |
53 |
54 | adminClick()} 57 | > 58 | Login 59 | 60 |
61 |
62 |
63 | ); 64 | }; 65 | 66 | export default AdminLogin; 67 | -------------------------------------------------------------------------------- /src/Components/LogoList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const LogoList = () => { 4 | return ( 5 |
6 |
14 |

AS SEEN IN:

15 |
    16 |
  • 17 | l1 21 |
    • 22 |
  • 23 | l2 27 |
    • 28 |
  • 29 | l3 33 |
    • 34 |
  • 35 | l4 39 |
    • 40 |
  • 41 | l5 45 |
    • 46 |
47 |
48 |
49 | ); 50 | }; 51 | 52 | export default LogoList; 53 | -------------------------------------------------------------------------------- /src/Pages/Login.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from "react"; 2 | import "./Login.css"; 3 | import { Link, useNavigate } from "react-router-dom"; 4 | import { MyContext } from "../App"; 5 | 6 | const Login = () => { 7 | const navigate = useNavigate(); 8 | const { userData, setIslogin } = useContext(MyContext); 9 | const initialValues = { username: "", password: "" }; 10 | const [formValues, setFormValues] = useState(initialValues); 11 | const filterdata = userData.filter( 12 | (item) => item.username === formValues.username 13 | ); 14 | 15 | const handleChange = (e) => { 16 | const { name, value } = e.target; 17 | setFormValues({ ...formValues, [name]: value }); 18 | }; 19 | 20 | const handleClic = () => { 21 | if (filterdata.length === 0 || filterdata[0].password === "") { 22 | alert("Please Enter Valid Data"); 23 | navigate("/login"); 24 | } else { 25 | if (formValues.password === filterdata[0].password) { 26 | alert("Login Successfully"); 27 | setIslogin(true); 28 | navigate("/"); 29 | } else { 30 | alert("Invalid Credentials"); 31 | } 32 | } 33 | }; 34 | 35 | return ( 36 |
37 |
38 |

Login

39 | 46 | 53 | 54 | Create a New Account ? 55 | 56 |
57 | handleClic()}> 58 | Login 59 | 60 | 61 | Admin 62 | 63 |
64 |
65 |
66 | ); 67 | }; 68 | 69 | export default Login; 70 | -------------------------------------------------------------------------------- /src/Pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Home.css"; 3 | 4 | import { Link } from "react-router-dom"; 5 | import Navbar from "../Components/Navbar"; 6 | import Mainpage from "../Components/Mainpage"; 7 | import Footer from "../Components/Footer"; 8 | import LogoList from "../Components/LogoList"; 9 | 10 | const Home = () => { 11 | return ( 12 |
13 | 14 | 15 | 16 |
17 |
18 | 22 |
23 | 24 |
25 |

ABOUT US

26 |
27 |

28 | Selected materials
29 | designed for comfort 30 |
31 | and sustainability 32 |

33 | 34 |

35 | Nullam auctor faucibus ridiculus dignissim
36 | sed et auctor sed eget auctor nec sed elit nunc, 37 |
38 | magna non urna amet ac neque ut quam enim ,
39 | pretium risus gravida ullamcorper adipiscing at ut magna. 40 |

41 | 42 |

49 | READ MORE 50 |

51 | 52 |
53 |
54 | {/* continue from here............................................................................................. */} 55 |
56 |
57 |
58 |
59 | {/* */} 60 |
61 | ); 62 | }; 63 | 64 | export default Home; 65 | -------------------------------------------------------------------------------- /src/Pages/Ourstory.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactPlayer from "react-player"; 3 | import "./Ourstory.css"; 4 | 5 | import Navbar from "../Components/Navbar"; 6 | import Footer from "../Components/Footer"; 7 | 8 | const Ourstory = () => { 9 | return ( 10 |
11 | {/*
12 |

OUR STORY PAGE

13 |
*/} 14 | 15 |
23 |

Our Story

24 |
25 | Taking a stylish and sustainable footwear
26 | with a focus on creating a positive impact
27 | on both the world and the people 28 |
29 |
30 |
31 | 32 |
33 |
41 |
42 |

Ethics and equality

43 |

44 | Pellentesque quam convallis massa enim, 45 |
faucibus ornare sollicitudin gravida justo sit 46 |
suspendisse pellentesque. 47 |

48 |
49 |
50 |

Eco-design

51 |

52 | Risus leo molestie a aliquam amet urna orci
53 | nisl dignissim elementum nibh felis ultrices 54 |
vitae consectetur. 55 |

56 |
57 |
58 |

Wildlife Preservation

59 |

60 | Pellentesque nunc ante augue adipiscing 61 |
sed suspendisse amet sed pellentesque 62 |
convallis erat nibh vivamus. 63 |

64 |
65 |
66 | 67 |
68 |
69 | ); 70 | }; 71 | 72 | export default Ourstory; 73 | -------------------------------------------------------------------------------- /src/Components/CartItem.jsx: -------------------------------------------------------------------------------- 1 | // CartItem.js 2 | 3 | import React, { useContext, useState } from "react"; 4 | import styled from "styled-components"; 5 | import { MyContext } from "../App"; 6 | 7 | const Container = styled.div` 8 | background-color: white; 9 | margin: 20px 0px; 10 | display: flex; 11 | justify-content: space-around; 12 | align-items: center; 13 | width: 100%; 14 | height: 70px; 15 | `; 16 | const Img = styled.img` 17 | width: 50px; 18 | `; 19 | const Name = styled.h4``; 20 | const Price = styled.h5``; 21 | const CounterButton = styled.div``; 22 | const Increment = styled.button` 23 | padding: 20px; 24 | `; 25 | const Decrement = styled.button` 26 | padding: 20px; 27 | `; 28 | const Remove = styled.button``; 29 | 30 | const CartItem = ({ name, image, price, id, updateTotalPrice }) => { 31 | const { carddata, Setcarddata } = useContext(MyContext); 32 | const [count, setCount] = useState(1); 33 | 34 | const updateData = () => { 35 | const updatedCart = carddata.map((item) => 36 | item.id === id ? { ...item, quantity: count } : item 37 | ); 38 | Setcarddata(updatedCart); 39 | updateTotalPrice(); // Update the total price in the parent component 40 | }; 41 | 42 | const totalPrice = (price * count).toFixed(2); 43 | 44 | const handleRemove = () => { 45 | Setcarddata((prevCardData) => { 46 | const updatedCardData = prevCardData.filter((item) => item.id !== id); 47 | updateTotalPrice(); // Update the total price after removing the item 48 | return updatedCardData; 49 | }); 50 | }; 51 | 52 | return ( 53 | 54 | 55 | {name} 56 | ${price.toFixed(2)} 57 | 58 | { 60 | setCount((prevCount) => { 61 | const newCount = prevCount + 1; 62 | updateData(); 63 | return newCount; 64 | }); 65 | }} 66 | > 67 | + 68 | 69 | {count} 70 | { 72 | setCount((prevCount) => { 73 | const newCount = prevCount > 1 ? prevCount - 1 : prevCount; 74 | updateData(); 75 | return newCount; 76 | }); 77 | }} 78 | > 79 | - 80 | 81 | 82 |
83 |

Total: ${totalPrice}

84 |
85 | { 87 | handleRemove(); 88 | }} 89 | style={{ background: "red", color: "white", fontSize: "20px" }} 90 | > 91 | Remove 92 | 93 | 94 | ); 95 | }; 96 | 97 | export default CartItem; 98 | -------------------------------------------------------------------------------- /src/Components/Footer.css: -------------------------------------------------------------------------------- 1 | .footer{ 2 | height: 400px; 3 | width: 100%; 4 | /* background-color: red; */ 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .wrapper{ 11 | height: 80%; 12 | width: 80%; 13 | /* background-color: green; */ 14 | display: flex; 15 | 16 | } 17 | 18 | .plashoe{ 19 | width: 25%; 20 | height: 100%; 21 | 22 | 23 | display: flex; 24 | flex-direction: column; 25 | align-items: flex-start; 26 | justify-content: flex-start; 27 | 28 | } 29 | .plashoe p{ 30 | margin-top: 40px; 31 | 32 | text-align: start; 33 | 34 | } 35 | .shop{ 36 | width: 25%; 37 | height: 100%; 38 | /* background-color: blue; */ 39 | text-align: left; 40 | padding-left: 100px; 41 | 42 | 43 | } 44 | .shop-li{ 45 | list-style: none; 46 | /* background-color: yellow; */ 47 | text-align: left; 48 | width: 100%; 49 | 50 | } 51 | 52 | .shop ul{ 53 | /* background-color: red; */ 54 | padding: 0; 55 | margin-top: 40px; 56 | } 57 | 58 | .about{ 59 | width: 25%; 60 | height: 100%; 61 | /* background-color: rgb(39, 237, 18); */ 62 | padding-left: 100px; 63 | display: flex; 64 | flex-direction: column; 65 | align-items: flex-start; 66 | justify-content: flex-start; 67 | 68 | 69 | } 70 | .about-li{ 71 | 72 | list-style: none; 73 | /* background-color: rgb(60, 185, 243); */ 74 | text-align: left; 75 | width: 100%; 76 | 77 | } 78 | 79 | .about ul{ 80 | /* background-color: red; */ 81 | padding: 0; 82 | margin-top: 40px; 83 | } 84 | 85 | 86 | .needhelp{ 87 | width: 25%; 88 | height: 100%; 89 | /* background-color:white; */ 90 | display: flex; 91 | flex-direction: column; 92 | align-items: flex-start; 93 | justify-content: flex-start; 94 | padding-left: 50px; 95 | 96 | } 97 | 98 | .needhelp-li{ 99 | /* background-color: rgb(30, 243, 51); */ 100 | list-style: none; 101 | 102 | text-align: left; 103 | width: 100%; 104 | 105 | } 106 | .needhelp ul{ 107 | /* background-color: green; */ 108 | padding: 0; 109 | margin-top: 40px; 110 | } 111 | 112 | .icons-li{ 113 | margin-top: 40px; 114 | list-style: none; 115 | display: flex; 116 | 117 | } 118 | .icons{ 119 | margin: 10px; 120 | 121 | } 122 | .underground{ 123 | width: 100%; 124 | height: 80px; 125 | background-color: #f1f1ef; 126 | 127 | display: flex; 128 | justify-content: space-between; 129 | align-items: center; 130 | 131 | } 132 | .underground-left{ 133 | /* background-color: blue; */ 134 | margin: 150px; 135 | padding: 15px; 136 | 137 | } 138 | .underground-right{ 139 | 140 | margin-right: 155px; 141 | } -------------------------------------------------------------------------------- /src/Components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Footer.css"; 3 | import InstagramIcon from "@mui/icons-material/Instagram"; 4 | import FacebookIcon from "@mui/icons-material/Facebook"; 5 | import TwitterIcon from "@mui/icons-material/Twitter"; 6 | 7 | const Footer = () => { 8 | return ( 9 | <> 10 |
11 |
12 |
13 |

PLASHOE

14 | 15 |

16 | Praesent eget tortor sit risus egestas nulla pharetra ornare quis 17 | bibendum est bibendum sapien proin nascetur 18 |

19 |
    20 |
  • 21 | 22 |
    • 23 |
  • 24 | 25 |
    • 26 |
  • 27 | 28 |
    • 29 |
30 |
31 |
32 |

shop

33 |
    34 |
  • Shop Men
    • 35 |
  • Shop Women
    • 36 |
  • Lookbook
    • 37 |
  • Gift Card
    • 38 |
  • Sale
    • 39 |
40 |
41 |
42 |

About

43 |
    44 |
  • Our Story
    • 45 |
  • Our Materials
    • 46 |
  • Our Value
    • 47 |
  • Sustainability
    • 48 |
  • Manufacture
    • 49 |
50 |
51 |
52 |

Need Help?

53 |
    54 |
  • FAQs
    • 55 |
  • Shipping & Returns
    • 56 |
  • Shoe Care
    • 57 |
  • Size Chart
    • 58 |
  • Contact Us
    • 59 |
60 |
61 |
62 |
63 |
64 |
65 |

© 2023 Recycled Shoe Store. Powered by Recycled Shoe Store.

66 |
67 |
68 | 72 |
73 |
74 | 75 | ); 76 | }; 77 | 78 | export default Footer; 79 | -------------------------------------------------------------------------------- /src/Pages/AdminUser.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from "react"; 2 | import { MyContext } from "../App"; 3 | import { Form } from "react-bootstrap"; 4 | import VisibilityIcon from '@mui/icons-material/Visibility'; 5 | import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; 6 | 7 | const AdminUser = () => { 8 | const { userData } = useContext(MyContext); 9 | const [searchdata, setSearchdata] = useState(""); 10 | const [showPassword, setShowPassword] = useState(false); 11 | 12 | const handleChange = (e) => { 13 | setSearchdata(e.target.value); 14 | }; 15 | 16 | const togglePasswordVisibility = () => { 17 | setShowPassword(!showPassword); 18 | }; 19 | 20 | return ( 21 |
22 |
23 |

Registered User Data

24 |
25 |
26 | 33 |
34 | 35 |
36 | {userData 37 | .filter((data) => data.username.toLowerCase().includes(searchdata.toLowerCase())) 38 | .map((item, index) => ( 39 |
53 |
54 |

Username: {item.username}

55 |
56 |
57 |

Email: {item.email}

58 |
59 |
60 |

61 | Password:{" "} 62 | {showPassword ? item.password : "*".repeat(item.password.length)} 63 | 72 | {showPassword ? : } 73 | 74 |

75 |
76 |
77 | ))} 78 |
79 |
80 | ); 81 | }; 82 | 83 | export default AdminUser; 84 | -------------------------------------------------------------------------------- /src/Pages/Cart.js: -------------------------------------------------------------------------------- 1 | // Cart.js 2 | 3 | import React, { useContext, useState, useEffect, useCallback } from "react"; 4 | import { Link } from "react-router-dom"; 5 | import { MyContext } from "../App"; 6 | import { Button } from "react-bootstrap"; 7 | import CartItem from "../Components/CartItem"; 8 | 9 | const Cart = () => { 10 | const { carddata, Setcarddata ,setTotals} = useContext(MyContext); 11 | const [total, setTotal] = useState(0); 12 | 13 | const calculateTotalAmount = useCallback(() => { 14 | const totalPrice = carddata.reduce((total, item) => total + Number(item.price * (item.quantity || 1)), 0); 15 | setTotal(totalPrice.toFixed(2)); 16 | }, [carddata]); 17 | 18 | useEffect(() => { 19 | calculateTotalAmount(); 20 | }, [carddata, calculateTotalAmount]); 21 | 22 | const handleRemoveItem = (itemId) => { 23 | // Use the functional form of setCardData to ensure state updates correctly 24 | Setcarddata((prevCardData) => { 25 | const updatedCardData = prevCardData.filter((item) => item.id !== itemId); 26 | return updatedCardData; 27 | }); 28 | 29 | // Now call calculateTotalAmount after the state has been updated 30 | calculateTotalAmount(); 31 | }; 32 | 33 | const updateTotalPrice = useCallback(() => { 34 | calculateTotalAmount(); 35 | }, [calculateTotalAmount]); 36 | 37 | return ( 38 |
39 |
40 |

Shopping Cart

41 |
42 |

Items in Cart : {carddata.length}

43 |
44 |
45 |
    46 | {carddata.map((item) => ( 47 | 56 | ))} 57 |
58 |
59 |
60 |

Total Price: ${total}

61 | 62 | 65 | 66 |
67 | 68 |
69 | 70 | 73 | 74 |
75 |
76 |
77 | ); 78 | }; 79 | 80 | export default Cart; 81 | -------------------------------------------------------------------------------- /src/Pages/Lookbook.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "../Components/Navbar"; 3 | import Footer from "../Components/Footer"; 4 | 5 | const Lookbook = () => { 6 | return ( 7 |
8 | {/*
9 |

LOOKBOOK PAGE

10 |
*/} 11 | 12 |
20 |

Lookbook

21 |
22 |
23 | img 28 |
29 |
38 |
39 |

Fall/Winter 2021

40 |
41 |
42 |

43 | Elementum donec leo vulputate sit proin suspendisse 44 |
malesuada neque proin gravida ut platea vitae duis hac 45 |
hac vel id ipsum ultricies ut faucibus ultrices. 46 |

47 | 52 |
53 |
54 |
55 |
56 | img 61 |
62 | 63 |
72 |
73 |

Spring/Summer 2021

74 |
75 |
76 |

77 | Elementum donec leo vulputate sit proin suspendisse 78 |
malesuada neque proin gravida ut platea vitae duis hac 79 |
hac vel id ipsum ultricies ut faucibus ultrices. 80 |

81 | 86 |
87 |
88 |
89 |
90 |
91 | ); 92 | }; 93 | 94 | export default Lookbook; 95 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from "react-router-dom"; 2 | import "./App.css"; 3 | import Home from "./Pages/Home"; 4 | import Registration from "./Pages/Registration"; 5 | import Login from "./Pages/Login"; 6 | // import Navbar from './Components/Navbar'; 7 | import Men from "./Pages/Men"; 8 | import Women from "./Pages/Women"; 9 | import Collection from "./Pages/Collection"; 10 | import Lookbook from "./Pages/Lookbook"; 11 | import Sale from "./Pages/Sale"; 12 | import Ourstory from "./Pages/Ourstory"; 13 | import Contact from "./Pages/Contact"; 14 | import Cart from "./Pages/Cart"; 15 | import { createContext, useState } from "react"; 16 | import Checkout from "./Components/Checkout"; 17 | import { AllshoeData } from "./Components/AllshoeData"; 18 | import AdminLogin from "./Pages/AdminLogin"; 19 | import Admin from "./Pages/Admin"; 20 | import AdminUser from "./Pages/AdminUser"; 21 | import AdminProducts from "./Pages/AdminProducts"; 22 | import AdminRevenue from "./Pages/AdminRevenue"; 23 | import AddProducts from "./Pages/AddProducts"; 24 | import EditProduct from "./Pages/EditProduct"; 25 | export const MyContext = createContext(); 26 | 27 | function App() { 28 | const [userData, setUserdata] = useState([ 29 | { username: "amal", password: "123",email:"amal@gmail.com" },{ username: "dani", password: "123",email:"dani@gmail.com" },{ username: "noor", password: "123",email:"noor@gmail.com" } 30 | ]); 31 | const [searchTerm, setSearchTerm] = useState(""); 32 | const [carddata, Setcarddata] = useState([]); 33 | const [total, setTotals] = useState("");//CHANGED HERE TO SET TOTALS 34 | const [islogin, setIslogin] = useState(false); 35 | const [allproducts,setAllproducts]=useState(AllshoeData); 36 | 37 | const data = { 38 | userData, 39 | setUserdata, 40 | searchTerm, 41 | setSearchTerm, 42 | carddata, 43 | Setcarddata, 44 | total, 45 | setTotals, 46 | islogin, 47 | setIslogin,allproducts,setAllproducts 48 | }; 49 | 50 | return ( 51 |
52 | 53 | 54 | } /> 55 | } /> 56 | } /> 57 | } /> 58 | } /> 59 | } /> 60 | } /> 61 | } /> 62 | } /> 63 | } /> 64 | } /> 65 | } /> 66 | } /> 67 | } > 68 | }/> 69 | }/> 70 | }/> 71 | }/> 72 | }/> 73 | 74 | 75 | 76 | 77 |
78 | ); 79 | } 80 | 81 | export default App; 82 | -------------------------------------------------------------------------------- /src/Components/AllshoeData.js: -------------------------------------------------------------------------------- 1 | export const AllshoeData =[ 2 | { 3 | "category":"men", 4 | "id":1, 5 | "name":"Men’s Black Running", 6 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-005.jpg", 7 | "price":209.56, 8 | }, 9 | { 10 | "category":"men", 11 | "id":2, 12 | "name":"Men’s Classic Blue", 13 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-019.jpg", 14 | "price": 347.89, 15 | }, 16 | { "category":"men", 17 | 18 | "id":3, 19 | "name":"Men’s Classic Mint", 20 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-020.jpg", 21 | "price": 287.89 , 22 | }, 23 | { "category":"men", 24 | 25 | "id":4, 26 | "name":"Men’s Earth-Tone Sneaker", 27 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-017.jpg", 28 | "price": 329.99, 29 | }, 30 | { "category":"men", 31 | 32 | "id":5, 33 | "name":"Men’s Green Running", 34 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-007.jpg", 35 | "price": 239.99, 36 | }, 37 | { "category":"men", 38 | 39 | "id":6, 40 | "name":"Men’s Moonstone Sneaker", 41 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-018.jpg", 42 | "price": 329.99, 43 | }, 44 | { "category":"women", 45 | 46 | "id":7, 47 | "name":"Women’s Blue Training", 48 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-003.jpg", 49 | "price": 249.99, 50 | }, 51 | { "category":"women", 52 | "id":8, 53 | "name":"Women’s Candy City Run", 54 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-014.jpg", 55 | "price": 249.99, 56 | }, 57 | { "category":"women", 58 | "id":9, 59 | "name":"Women’s Cream Suede", 60 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-015.jpg", 61 | "price": 199.99 , 62 | }, 63 | { "category":"women", 64 | "id":10, 65 | "name":"Women’s Green Training", 66 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-001.jpg", 67 | "price": 199.99, 68 | }, 69 | { "category":"women", 70 | "id":11, 71 | "name":"Women’s Tosca City Run", 72 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-012.jpg", 73 | "price": 249.99, 74 | }, 75 | { "category":"women", 76 | "id":12, 77 | "name":"Women’s Mint Sneaker", 78 | "imgpath":"https://websitedemos.net/recycled-shoe-store-04/wp-content/uploads/sites/983/2021/11/recycled-shoe-product-image-010.jpg", 79 | "price": 249.99 , 80 | }, 81 | 82 | 83 | ] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### FOR PREVIEW : 2 | https://plashoee.netlify.app/ 3 | 4 | 5 | # Getting Started with Create React App 6 | 7 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 8 | 9 | ## Available Scripts 10 | 11 | In the project directory, you can run: 12 | 13 | ### `npm start` 14 | 15 | Runs the app in the development mode.\ 16 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 17 | 18 | The page will reload when you make changes.\ 19 | You may also see any lint errors in the console. 20 | 21 | ### `npm test` 22 | 23 | Launches the test runner in the interactive watch mode.\ 24 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 25 | 26 | ### `npm run build` 27 | 28 | Builds the app for production to the `build` folder.\ 29 | It correctly bundles React in production mode and optimizes the build for the best performance. 30 | 31 | The build is minified and the filenames include the hashes.\ 32 | Your app is ready to be deployed! 33 | 34 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 35 | 36 | ### `npm run eject` 37 | 38 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 39 | 40 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 41 | 42 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 43 | 44 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 45 | 46 | ## Learn More 47 | 48 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 49 | 50 | To learn React, check out the [React documentation](https://reactjs.org/). 51 | 52 | ### Code Splitting 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 55 | 56 | ### Analyzing the Bundle Size 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 59 | 60 | ### Making a Progressive Web App 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 63 | 64 | ### Advanced Configuration 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 67 | 68 | ### Deployment 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 71 | 72 | ### `npm run build` fails to minify 73 | 74 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 75 | -------------------------------------------------------------------------------- /src/Pages/AddProducts.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from "react"; 2 | import { MyContext } from "../App"; 3 | // import { image } from 'fontawesome'; 4 | import { useNavigate } from "react-router-dom"; 5 | import "./AddProduct.css"; 6 | 7 | const AddProducts = () => { 8 | const { allproducts, setAllproducts } = useContext(MyContext); 9 | const navigate = useNavigate(); 10 | const [category, setCategory] = useState(); 11 | const [id, setId] = useState(); 12 | const [name, setName] = useState(); 13 | const [imgpath, Setimgpath] = useState(); 14 | const [price, setPrice] = useState(); 15 | const obj = { 16 | category: category, 17 | id: id, 18 | name: name, 19 | imgpath: imgpath, 20 | price: price, 21 | }; 22 | const handlebutton = (e) => { 23 | e.preventDefault(); 24 | }; 25 | const handleUpdate = () => { 26 | setAllproducts([...allproducts, obj]); 27 | alert("New Product Added to cart"); 28 | navigate("/admin/products"); 29 | }; 30 | return ( 31 |
32 |
33 |

34 | Add New Products To Shopping Cart 35 |

36 |
37 | 38 |
47 |
57 | imge

58 | {/* */} 59 | setId(e.target.value)} 65 | />{" "} 66 |

67 | {/* */} 68 | setName(e.target.value)} 74 | />{" "} 75 |

76 | {/* */} 77 | Setimgpath(e.target.value)} 83 | />{" "} 84 |

85 | {/* */} 86 | setPrice(e.target.value)} 92 | />{" "} 93 |
94 |
95 | {/* */} 96 | 100 |

101 | 102 |
103 |
104 |
105 | ); 106 | }; 107 | 108 | export default AddProducts; 109 | -------------------------------------------------------------------------------- /src/Components/Checkout.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./Checkout.css"; 3 | import { MyContext } from "../App"; 4 | import LockIcon from "@mui/icons-material/Lock"; 5 | const Checkout = () => { 6 | const { total } = useContext(MyContext); 7 | const handlebutton=(e)=>{ 8 | e.preventDefault(); 9 | }; 10 | 11 | return ( 12 |
13 | {/*
14 |

PLASHOE PAYMENT SECTION

15 |
*/} 16 |
17 |
18 |
19 |
22 |

CHECK OUT

23 |
24 |
25 |
26 |
27 | 28 | 33 |
34 |
35 | 36 | 37 |
38 | 39 | 40 |
41 |
42 | 43 |
44 |
45 | 53 |
54 |
55 | 62 |
63 |
64 | 69 |
70 |
71 |

Additional information

72 | 79 |
80 |
81 |
82 | 93 |
94 |
95 |
96 |
97 |
98 |
99 | ); 100 | }; 101 | 102 | export default Checkout; 103 | -------------------------------------------------------------------------------- /src/Pages/EditProduct.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from "react"; 2 | import { MyContext } from "../App"; 3 | import { useNavigate, useParams } from "react-router-dom"; 4 | 5 | const EditProduct = () => { 6 | const Inpstyl = { 7 | backgroundColor: "lightblue", 8 | padding: "20px", 9 | border: "2px solid black", 10 | borderRadius: "5px", 11 | textAlign: "center", 12 | marginTop: "5px", 13 | fontWeight: "600", 14 | }; 15 | const { id } = useParams(); 16 | const { allproducts, setAllproducts } = useContext(MyContext); 17 | const currentdata = allproducts.find( 18 | (e) => e.id.toString() === id.toString() 19 | ); 20 | 21 | const navigate = useNavigate(); 22 | const [category, setCategory] = useState(currentdata.category); 23 | const [name, setName] = useState(currentdata.name); 24 | const [imgpath, Setimgpath] = useState(currentdata.imgpath); 25 | const [price, setPrice] = useState(currentdata.price); 26 | const buttonClick = () => { 27 | const updateddata = { 28 | ...currentdata, 29 | name: name, 30 | price: price, 31 | imgpath: imgpath, 32 | }; 33 | const index = allproducts.findIndex( 34 | (p) => p.id.toString() === currentdata.id.toString() 35 | ); 36 | const updatedproducts = [...allproducts]; 37 | updatedproducts[index] = updateddata; 38 | setAllproducts(updatedproducts); 39 | alert("Updated "); 40 | navigate("/admin/products"); 41 | }; 42 | return ( 43 |
44 |
45 |

46 | Edit Product Details 47 |

48 |
55 |
56 | img 57 |
58 | 59 |
63 | setName(e.target.value)} 69 | /> 70 | setPrice(e.target.value)} 76 | /> 77 | setCategory(e.target.value)} 83 | /> 84 |