├── .github └── workflows │ └── jekyll-gh-pages.yml ├── .gitignore ├── README.md ├── asset-manifest.json ├── index.html ├── manifest.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json └── src ├── app ├── Cart.jsx ├── Categories.jsx ├── Favorites.jsx └── Home.jsx ├── assets ├── BrokenHeart.png ├── CartEmpty.png ├── FavBrokenHeart.png ├── White.png ├── empty.png └── shopping-with-bags.png ├── components ├── Basket.jsx ├── Basketitem.jsx ├── CartProductNotFound.jsx ├── FavNotFound.jsx ├── FavoriteAddHeart.jsx ├── Loginİmage.jsx ├── Product.jsx ├── Search.jsx └── Slider.jsx ├── css ├── Cart.css ├── CartProductNotFound.css ├── FavNotFound.css ├── Favorites.css ├── Home.css ├── Loginİmage.css ├── Routes.css ├── Slider.css ├── ecommerce-category-product.css ├── filter.css └── newCart.css ├── helpers └── helpers.js ├── hooks └── FavoritesCount.jsx ├── index.js ├── routes ├── CartRoute.jsx ├── FavoritesRoute.jsx └── HomeRoute.jsx └── vars ├── App.js ├── reportWebVitals.js └── setupTests.js /.github/workflows/jekyll-gh-pages.yml: -------------------------------------------------------------------------------- 1 | # Sample workflow for building and deploying a Jekyll site to GitHub Pages 2 | name: Deploy Jekyll with GitHub Pages dependencies preinstalled 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["master"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Build job 26 | build: 27 | runs-on: ubuntu-latest 28 | steps: 29 | - name: Checkout 30 | uses: actions/checkout@v4 31 | - name: Setup Pages 32 | uses: actions/configure-pages@v4 33 | - name: Build with Jekyll 34 | uses: actions/jekyll-build-pages@v1 35 | with: 36 | source: ./ 37 | destination: ./_site 38 | - name: Upload artifact 39 | uses: actions/upload-pages-artifact@v3 40 | 41 | # Deployment job 42 | deploy: 43 | environment: 44 | name: github-pages 45 | url: ${{ steps.deployment.outputs.page_url }} 46 | runs-on: ubuntu-latest 47 | needs: build 48 | steps: 49 | - name: Deploy to GitHub Pages 50 | id: deployment 51 | uses: actions/deploy-pages@v4 52 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | 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. 41 | 42 | ### `npm ci` 43 | Installs package dependencies in the package-lock.json 44 | 45 | ## Learn More 46 | 47 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 48 | 49 | To learn React, check out the [React documentation](https://reactjs.org/). 50 | 51 | ### Code Splitting 52 | 53 | 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) 54 | 55 | ### Analyzing the Bundle Size 56 | 57 | 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) 58 | 59 | ### Making a Progressive Web App 60 | 61 | 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) 62 | 63 | ### Advanced Configuration 64 | 65 | 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) 66 | 67 | ### Deployment 68 | 69 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 70 | 71 | ### `npm run build` fails to minify 72 | 73 | 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) 74 | -------------------------------------------------------------------------------- /asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/React-Market-Application/static/css/main.e8586b21.css", 4 | "main.js": "/React-Market-Application/static/js/main.ec94bf83.js", 5 | "static/js/787.c2e87f03.chunk.js": "/React-Market-Application/static/js/787.c2e87f03.chunk.js", 6 | "index.html": "/React-Market-Application/index.html", 7 | "main.e8586b21.css.map": "/React-Market-Application/static/css/main.e8586b21.css.map", 8 | "main.ec94bf83.js.map": "/React-Market-Application/static/js/main.ec94bf83.js.map", 9 | "787.c2e87f03.chunk.js.map": "/React-Market-Application/static/js/787.c2e87f03.chunk.js.map" 10 | }, 11 | "entrypoints": [ 12 | "static/css/main.e8586b21.css", 13 | "static/js/main.ec94bf83.js" 14 | ] 15 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-proje", 3 | "homepage": "https://0memo07.github.io/React-Shopping-Web-Application/", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@emotion/react": "^11.11.3", 8 | "@emotion/styled": "^11.11.0", 9 | "@fontsource/roboto": "^5.0.8", 10 | "@headlessui/react": "^1.7.17", 11 | "@heroicons/react": "^2.1.1", 12 | "@material-tailwind/react": "^2.1.8", 13 | "@mui/base": "^5.0.0-beta.29", 14 | "@mui/material": "^5.15.10", 15 | "@mui/system": "^5.15.2", 16 | "@react-login-page/page6": "^1.0.2", 17 | "@testing-library/jest-dom": "^5.17.0", 18 | "@testing-library/react": "^13.4.0", 19 | "@testing-library/user-event": "^13.5.0", 20 | "bootstrap": "^5.3.2", 21 | "classnames": "^2.3.2", 22 | "dark-mode-toggle": "^0.14.6", 23 | "gh-pages": "^6.1.1", 24 | "i18next": "^23.7.16", 25 | "i18next-browser-languagedetector": "^7.2.0", 26 | "i18next-chained-backend": "^4.6.2", 27 | "i18next-http-backend": "^2.4.2", 28 | "i18next-resources-to-backend": "^1.2.0", 29 | "jekyll": "^3.0.0-beta1", 30 | "mdb-react-ui-kit": "^7.1.0", 31 | "nanoid": "^5.0.4", 32 | "react": "^18.2.0", 33 | "react-bootstrap": "^2.9.2", 34 | "react-dom": "^18.2.0", 35 | "react-helmet": "^6.1.0", 36 | "react-hot-toast": "^2.4.1", 37 | "react-i18next": "^14.0.0", 38 | "react-router-dom": "^6.21.1", 39 | "react-scripts": "5.0.1", 40 | "react-slick": "^0.30.1", 41 | "react-slideshow-image": "^4.3.0", 42 | "sass": "^1.69.5", 43 | "slick-carousel": "^1.8.1", 44 | "styled-components": "^6.1.2", 45 | "web-vitals": "^2.1.4", 46 | "yarn": "^1.22.21" 47 | }, 48 | "scripts": { 49 | "predeploy": "npm run build", 50 | "deploy": "gh-pages -d build", 51 | "start": "react-scripts start", 52 | "build": "react-scripts build", 53 | "test": "react-scripts test", 54 | "eject": "react-scripts eject" 55 | }, 56 | "eslintConfig": { 57 | "extends": [ 58 | "react-app", 59 | "react-app/jest" 60 | ] 61 | }, 62 | "browserslist": { 63 | "production": [ 64 | ">0.2%", 65 | "not dead", 66 | "not op_mini all" 67 | ], 68 | "development": [ 69 | "last 1 chrome version", 70 | "last 1 firefox version", 71 | "last 1 safari version" 72 | ] 73 | }, 74 | "devDependencies": { 75 | "tailwindcss": "^3.3.7" 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0MeMo07/React-Shopping-Web-Application/0ac8524467637f5f4f4e3a8fc2dacbad6bc1442a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React Shopping Web Application 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React Shopping Web Application", 3 | "name": "shopping web app", 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/app/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import CartProductNotFound from '../components/CartProductNotFound'; 3 | import { Link } from 'react-router-dom'; 4 | import { BsChevronCompactRight, BsChevronCompactLeft } from "react-icons/bs"; 5 | import { FaLongArrowAltLeft } from "react-icons/fa"; 6 | import classNames from 'classnames'; 7 | import Header from '../components/Search' 8 | import '../css/Cart.css'; 9 | import '../css/newCart.css' 10 | export default function Cart() { 11 | // const[total, SetTotal] = useState('') 12 | // useEffect(() => { 13 | // setTotal( 14 | // basket.reduce((acc, item) => { 15 | // return acc + item.total; 16 | // }, 0) 17 | // ); 18 | // }, [basket]); 19 | 20 | 21 | const [ProductCount, setProductCount] = useState(0); 22 | const [products, setProducts] = useState([]); 23 | const [productDetails, setProductDetails] = useState([]); 24 | useEffect(() => { 25 | const ProductCount = JSON.parse(localStorage.getItem('Products')) || []; 26 | setProductCount(ProductCount.length); 27 | }, []); 28 | 29 | useEffect(() => { 30 | const fetchData = async () => { 31 | try { 32 | const response = await fetch("https://dummyjson.com/products"); 33 | const result = await response.json(); 34 | if (result && Array.isArray(result.products)) { 35 | setProducts(result.products); 36 | } 37 | else{ 38 | console.log("Your Cart list is empty.") 39 | } 40 | } catch (error) { 41 | console.error('Error fetching data:', error); 42 | } 43 | }; 44 | 45 | fetchData(); 46 | }, []); 47 | 48 | useEffect(() => { 49 | const fetchProductDetails = async () => { 50 | const ProductIds = JSON.parse(localStorage.getItem('Products')) || []; 51 | const productsDetails = []; 52 | 53 | for (const productInfo of ProductIds) { 54 | const productId = productInfo.id; 55 | const productQuantity = productInfo.quantity; 56 | const product = products.find(product => product.id === productId); 57 | 58 | if (product) { 59 | const productDetail = { 60 | thumbnail: product.thumbnail, 61 | price: product.price, 62 | title: product.title, 63 | catogory: product.catogory, 64 | description: product.description, 65 | id: product.id, 66 | quantity: productQuantity, 67 | }; 68 | productsDetails.push(productDetail); 69 | } 70 | } 71 | 72 | setProductDetails(productsDetails); 73 | }; 74 | 75 | fetchProductDetails(); 76 | }, [products]); 77 | 78 | const DeleteProduct = (productId) => { 79 | const DeleteProducts = JSON.parse(localStorage.getItem('Products')) || []; 80 | const updatedFavorites = DeleteProducts.filter((product) => product.id !== productId); 81 | localStorage.setItem('Products', JSON.stringify(updatedFavorites)); 82 | setProductDetails(prevDetails => prevDetails.filter(product => product.id !== productId)); 83 | setProductCount(prevCount => prevCount - 1); 84 | }; 85 | 86 | const AddQuantity = (productId) => { 87 | const productsInLocalStorage = JSON.parse(localStorage.getItem('Products')) || []; 88 | const productIndex = productsInLocalStorage.findIndex(product => product.id === productId); 89 | if (productIndex !== -1 && productsInLocalStorage[productIndex].quantity > 0) { 90 | productsInLocalStorage[productIndex].quantity += 1; 91 | 92 | localStorage.setItem('Products', JSON.stringify(productsInLocalStorage)); 93 | 94 | const updatedProductDetails = productDetails.map(product => { 95 | if (product.id === productId) { 96 | return { 97 | ...product, 98 | quantity: product.quantity + 1 99 | }; 100 | } 101 | return product; 102 | }); 103 | 104 | setProductDetails(updatedProductDetails); 105 | } 106 | }; 107 | 108 | const RemoveQuantity = (productId) => { 109 | const productsInLocalStorage = JSON.parse(localStorage.getItem('Products')) || []; 110 | const productIndex = productsInLocalStorage.findIndex(product => product.id === productId); 111 | 112 | if (productIndex !== -1 && productsInLocalStorage[productIndex].quantity > 0) { 113 | productsInLocalStorage[productIndex].quantity -= 1; 114 | 115 | if (productsInLocalStorage[productIndex].quantity === 0) { 116 | const updatedProductsInLocalStorage = productsInLocalStorage.filter(product => product.id !== productId); 117 | localStorage.setItem('Products', JSON.stringify(updatedProductsInLocalStorage)); 118 | 119 | const updatedProductDetails = productDetails.filter(product => product.id !== productId); 120 | setProductDetails(updatedProductDetails); 121 | setProductCount(prevCount => prevCount - 1); 122 | } else { 123 | localStorage.setItem('Products', JSON.stringify(productsInLocalStorage)); 124 | 125 | const updatedProductDetails = productDetails.map(product => { 126 | if (product.id === productId) { 127 | return { 128 | ...product, 129 | quantity: product.quantity - 1 130 | }; 131 | } 132 | return product; 133 | }); 134 | setProductDetails(updatedProductDetails); 135 | } 136 | } 137 | }; 138 | 139 | let totalPrice = 0; 140 | productDetails.map((product, index) => { 141 | totalPrice += product.price * product.quantity; 142 | }); 143 | 144 | 145 | const cartClass = classNames( 146 | { 147 | "d-flex": ProductCount > 0, 148 | }, 149 | "justify-content-between", 150 | ); 151 | 152 | return ( 153 | <> 154 | 155 | 156 | 157 | 158 |
159 |
160 |
161 |
162 |
163 |

Shopping Cart

164 |
{ProductCount} items
165 | {ProductCount === 0 && } 166 |
167 |
168 | {productDetails.map((product, index) => ( 169 |
170 |
171 |
{`${index}`}/
172 |
173 |
{product.catogory}
174 |
{product.title}
175 |
176 |
177 | RemoveQuantity(product.id)}>-{product.quantity} AddQuantity(product.id)}>+ 178 |
179 |
${product.price * product.quantity} DeleteProduct(product.id)}>✕
180 |
181 |
182 | ))} 183 |
Back to shop
184 |
185 |
186 |
Summary
187 |
188 |
189 |
{ProductCount} product Amount:
190 |
$ {totalPrice}
191 |
192 | 193 |
194 |

SHIPPING

195 | 196 |

GIVE CODE

197 | 198 |
199 |
200 |
TOTAL PRICE
201 |
$ {totalPrice}
202 |
203 | 204 |
205 |
206 |
207 | 208 | ); 209 | } 210 | -------------------------------------------------------------------------------- /src/app/Categories.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import FavNotFound from '../components/FavNotFound'; 4 | import Header from '../components/Search' 5 | import Button from "@mui/material/Button"; 6 | import { IoIosHeart, IoMdHeartEmpty } from "react-icons/io"; 7 | import "../css/ecommerce-category-product.css"; 8 | import '../css/filter.css' 9 | import Radio from '@mui/material/Radio'; 10 | import RadioGroup from '@mui/material/RadioGroup'; 11 | import FormControlLabel from '@mui/material/FormControlLabel'; 12 | import FormControl from '@mui/material/FormControl'; 13 | import FormLabel from '@mui/material/FormLabel'; 14 | import Box from '@mui/material/Box'; 15 | import Slider from '@mui/material/Slider'; 16 | import Typography from '@mui/material/Typography'; 17 | import TextField from '@mui/material/TextField' 18 | import toast, { Toaster } from 'react-hot-toast'; 19 | import styled from 'styled-components' 20 | import FavoriteHeart from '../components/FavoriteAddHeart' 21 | 22 | 23 | const IconButton = styled(Button)` 24 | && { 25 | padding: 0; 26 | min-width: unset; 27 | width: auto; 28 | left: 0; 29 | } 30 | `; 31 | 32 | const HeartIconEmpty = styled(IoMdHeartEmpty)` 33 | font-size: 24px; 34 | `; 35 | 36 | const HeartIcon = styled(IoIosHeart)` 37 | font-size: 24px; 38 | color:red; 39 | `; 40 | 41 | function Filter() { 42 | const [favoritesCount, setFavoritesCount] = useState(0); 43 | const [products, setProducts] = useState([]); 44 | const [productDetails, setProductDetails] = useState([]); 45 | const [basket, setBasket] = useState([]); 46 | const [total, setTotal] = useState(0); 47 | const [filteredProducts, setFilteredProducts] = useState([]); 48 | const [categories, setCategories] = useState([]); 49 | 50 | useEffect(() => { 51 | const fetchData = async () => { 52 | try { 53 | const response = await fetch("https://dummyjson.com/products"); 54 | const result = await response.json(); 55 | if (result && Array.isArray(result.products)) { 56 | setProducts(result.products); 57 | } 58 | } catch (error) { 59 | console.error('Error fetching data:', error); 60 | } 61 | }; 62 | 63 | fetchData(); 64 | }, []); 65 | 66 | useEffect(() => { 67 | const fetchProductDetails = async () => { 68 | const favoriteIds = JSON.parse(localStorage.getItem('Favorites')) || []; 69 | const productsDetails = []; 70 | 71 | for (const id of favoriteIds) { 72 | const product = products.find(product => product.id === id); 73 | if (product) { 74 | productsDetails.push({ 75 | thumbnail: product.thumbnail, 76 | price: product.price, 77 | title: product.title, 78 | description: product.description, 79 | id: product.id, 80 | }); 81 | } 82 | } 83 | 84 | setProductDetails(productsDetails); 85 | setFavoritesCount(favoriteIds.length); 86 | }; 87 | 88 | fetchProductDetails(); 89 | }, [products]); 90 | 91 | const DeleteFavorite = (productId) => { 92 | const favorites = JSON.parse(localStorage.getItem('Favorites')) || []; 93 | const updatedFavorites = favorites.filter((favId) => favId !== productId); 94 | localStorage.setItem('Favorites', JSON.stringify(updatedFavorites)); 95 | setProductDetails(prevDetails => prevDetails.filter(product => product.id !== productId)); 96 | setFavoritesCount(prevCount => prevCount - 1); 97 | }; 98 | 99 | 100 | const [ProductItem, setProductItem] = useState(checkIfProduct()); 101 | 102 | function checkIfProduct(productİtemId){ 103 | const ProductsItems = JSON.parse(localStorage.getItem('Products')) || []; 104 | return ProductsItems.includes(productİtemId) 105 | } 106 | 107 | const toggleProduct = (productId) => { 108 | let ProductItems = JSON.parse(localStorage.getItem('Products')) || []; 109 | 110 | const productIndex = ProductItems.findIndex(item => item.id === productId); 111 | 112 | if (productIndex === -1) { 113 | 114 | ProductItems.push({ id: productId, quantity: 1 }); 115 | } else { 116 | 117 | ProductItems[productIndex].quantity += 1; 118 | } 119 | 120 | localStorage.setItem('Products', JSON.stringify(ProductItems)); 121 | setProductItem(!ProductItem) 122 | 123 | toast.success('Product successfully added to cart', { 124 | style: { 125 | boxShadow: 'none', 126 | }, 127 | }); 128 | 129 | } 130 | useEffect(() => { 131 | const fetchData = async () => { 132 | try { 133 | const response = await fetch('https://dummyjson.com/products'); 134 | const result = await response.json(); 135 | 136 | if (result && Array.isArray(result.products)) { 137 | setProducts(result.products); 138 | setFilteredProducts(result.products); 139 | 140 | const uniqueCategories = Array.from(new Set(result.products.map(product => product.category))); 141 | setCategories(uniqueCategories); 142 | } else { 143 | console.error('Invalid data structure:', result); 144 | setProducts([]); 145 | setFilteredProducts([]); 146 | setCategories([]); 147 | } 148 | } catch (error) { 149 | console.error('Error fetching data:', error); 150 | } 151 | }; 152 | 153 | fetchData(); 154 | }, []); 155 | 156 | const handleSearch = (searchValue) => { 157 | const filtered = products.filter(product => 158 | product.title.toLowerCase().includes(searchValue.toLowerCase()) 159 | ); 160 | 161 | setFilteredProducts(filtered); 162 | 163 | 164 | const uniqueCategories = Array.from(new Set(filtered.map(product => product.category))); 165 | setCategories(uniqueCategories); 166 | }; 167 | const handleChange = (event) => { 168 | const selectedCategory = event.target.value; 169 | let filteredProducts = []; 170 | if (selectedCategory === "All") { 171 | filteredProducts = products; 172 | } else { 173 | filteredProducts = products.filter(product => product.category === selectedCategory); 174 | } 175 | setFilteredProducts(filteredProducts); 176 | 177 | const uniqueCategories = Array.from(new Set(filteredProducts.map(product => product.category))); 178 | setCategories(uniqueCategories); 179 | }; 180 | 181 | 182 | 183 | const [minPrice, setMinPrice] = useState(''); 184 | const [maxPrice, setMaxPrice] = useState(''); 185 | 186 | const handlePriceFilter = () => { 187 | const minPriceValue = parseFloat(minPrice); 188 | const maxPriceValue = parseFloat(maxPrice); 189 | 190 | if (isNaN(minPriceValue) || isNaN(maxPriceValue)) { 191 | toast.error('Please enter valid numeric values for both minimum and maximum prices', { 192 | style: { 193 | boxShadow: 'none', 194 | }, 195 | }); 196 | return; 197 | } 198 | 199 | const filteredByPrice = products.filter(product => { 200 | return product.price >= minPrice && product.price <= maxPrice; 201 | }); 202 | 203 | setFilteredProducts(filteredByPrice); 204 | }; 205 | 206 | return ( 207 | <> 208 | 209 |
210 |
211 | 212 | 213 | 214 | 221 | Categories 222 | {/* --------------------------------------------------- */} 223 | } label="All" /> 224 | } label="Smart Phones" /> 225 | } label="Laptops" /> 226 | } label="fragrances" /> 227 | } label="skincare" /> 228 | } label="groceries" /> 229 | } label="home decoration" /> 230 | 231 | 232 | 233 | 234 | Price 235 |
236 | setMinPrice(e.target.value)} 243 | /> 244 | setMaxPrice(e.target.value)} 251 | /> 252 |
253 | 254 | 255 | 256 |
257 | 258 | {categories.map(category => ( 259 |
260 |

{category}

261 |
262 | {filteredProducts 263 | .filter(product => product.category === category) 264 | .map((product, index) => ( 265 |
266 |
267 |
268 |
269 |
270 |
271 | 272 |
273 |
274 | {product.title} 275 | {/* MeMo */} 276 |
277 |
{product.description}
278 |
279 |
280 | 281 |
282 |
283 |
284 |
285 | 286 | ${product.price} 287 | 288 | 289 | toggleProduct(product.id)}>Add Cart 290 | 291 | 292 | 293 | 294 | 295 |
296 |
297 |
298 |
299 |
300 |
301 | ))} 302 |
303 |
304 | ))} 305 |
306 | 307 |
308 | 309 | ); 310 | } 311 | 312 | export default Filter; 313 | 314 | 315 | 316 | -------------------------------------------------------------------------------- /src/app/Favorites.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import FavNotFound from '../components/FavNotFound'; 4 | import { FaRegTrashCan } from "react-icons/fa6"; 5 | import Header from '../components/Search' 6 | import Button from "@mui/material/Button"; 7 | import { IoIosHeart, IoMdHeartEmpty } from "react-icons/io"; 8 | import '../css/Favorites.css' 9 | 10 | export default function Favorites({ product, total, money, basket, setBasket, value }) { 11 | const [favoritesCount, setFavoritesCount] = useState(0); 12 | const [products, setProducts] = useState([]); 13 | const [productDetails, setProductDetails] = useState([]); 14 | 15 | useEffect(() => { 16 | const fetchData = async () => { 17 | try { 18 | const response = await fetch("https://dummyjson.com/products"); 19 | const result = await response.json(); 20 | if (result && Array.isArray(result.products)) { 21 | setProducts(result.products); 22 | } 23 | } catch (error) { 24 | console.error('Error fetching data:', error); 25 | } 26 | }; 27 | 28 | fetchData(); 29 | }, []); 30 | 31 | useEffect(() => { 32 | const fetchProductDetails = async () => { 33 | const favoriteIds = JSON.parse(localStorage.getItem('Favorites')) || []; 34 | const productsDetails = []; 35 | 36 | for (const id of favoriteIds) { 37 | const product = products.find(product => product.id === id); 38 | if (product) { 39 | productsDetails.push({ 40 | thumbnail: product.thumbnail, 41 | price: product.price, 42 | title: product.title, 43 | description: product.description, 44 | id: product.id, 45 | }); 46 | } 47 | } 48 | 49 | setProductDetails(productsDetails); 50 | setFavoritesCount(favoriteIds.length); 51 | }; 52 | 53 | fetchProductDetails(); 54 | }, [products]); 55 | 56 | const DeleteFavorite = (productId) => { 57 | const favorites = JSON.parse(localStorage.getItem('Favorites')) || []; 58 | const updatedFavorites = favorites.filter((favId) => favId !== productId); 59 | localStorage.setItem('Favorites', JSON.stringify(updatedFavorites)); 60 | setProductDetails(prevDetails => prevDetails.filter(product => product.id !== productId)); 61 | setFavoritesCount(prevCount => prevCount - 1); 62 | }; 63 | 64 | 65 | const [ProductItem, setProductItem] = useState(checkIfProduct()); 66 | 67 | function checkIfProduct(productİtemId){ 68 | const ProductsItems = JSON.parse(localStorage.getItem('Products')) || []; 69 | return ProductsItems.includes(productİtemId) 70 | } 71 | 72 | const toggleProduct = (productId) => { 73 | let ProductItems = JSON.parse(localStorage.getItem('Products')) || []; 74 | 75 | const productIndex = ProductItems.findIndex(item => item.id === productId); 76 | 77 | if (productIndex === -1) { 78 | 79 | ProductItems.push({ id: productId, quantity: 1 }); 80 | } else { 81 | 82 | ProductItems[productIndex].quantity += 1; 83 | } 84 | 85 | localStorage.setItem('Products', JSON.stringify(ProductItems)); 86 | setProductItem(!ProductItem) 87 | 88 | } 89 | 90 | return ( 91 | <> 92 |
93 |
94 |
Shopping Favorites
95 |
96 | You have {favoritesCount} items in your Favorites 97 | {favoritesCount === 0 && } 98 |
99 |
100 | {productDetails.map((product, index) => ( 101 |
102 |
103 |
104 |
105 |
106 | 107 |
108 |
109 | {product.title} 110 | {/* MeMo */} 111 |
112 |
{product.description}
113 |
114 |
115 | 116 |
117 |
118 |
119 |
120 | toggleProduct(product.id)}> 121 | ${product.price} 122 | 123 | 124 | Go To Cart 125 | DeleteFavorite(product.id)}> 126 | 127 | 128 | 129 |
130 |
131 |
132 |
133 |
134 | ))} 135 | 136 | ); 137 | } 138 | -------------------------------------------------------------------------------- /src/app/Home.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import Header from '../components/Search'; 3 | import Product from '../components/Product'; 4 | import Basket from '../components/Basket'; 5 | import '../css/Home.css' 6 | import Loginİmage from '../components/Loginİmage' 7 | import Slider from '../components/Slider'; 8 | 9 | export default function Home() { 10 | const [money] = useState(100000); 11 | const [basket, setBasket] = useState([]); 12 | const [total, setTotal] = useState(0); 13 | const [products, setProducts] = useState([]); 14 | const [filteredProducts, setFilteredProducts] = useState([]); 15 | const [categories, setCategories] = useState([]); 16 | 17 | const resetBasket = () => { 18 | setBasket([]); 19 | setTotal(0); 20 | }; 21 | 22 | const handleSearch = (searchValue) => { 23 | const filtered = products.filter(product => 24 | product.title.toLowerCase().includes(searchValue.toLowerCase()) 25 | ); 26 | 27 | setFilteredProducts(filtered); 28 | 29 | 30 | const uniqueCategories = Array.from(new Set(filtered.map(product => product.category))); 31 | setCategories(uniqueCategories); 32 | }; 33 | 34 | useEffect(() => { 35 | const fetchData = async () => { 36 | try { 37 | const response = await fetch('https://dummyjson.com/products'); 38 | const result = await response.json(); 39 | 40 | if (result && Array.isArray(result.products)) { 41 | setProducts(result.products); 42 | setFilteredProducts(result.products); 43 | 44 | const uniqueCategories = Array.from(new Set(result.products.map(product => product.category))); 45 | setCategories(uniqueCategories); 46 | } else { 47 | console.error('Invalid data structure:', result); 48 | setProducts([]); 49 | setFilteredProducts([]); 50 | setCategories([]); 51 | } 52 | } catch (error) { 53 | console.error('Error fetching data:', error); 54 | } 55 | }; 56 | 57 | fetchData(); 58 | }, []); 59 | 60 | 61 | 62 | return ( 63 |
64 |
65 | 66 | {total > 0 && ( 67 | 68 | )} 69 | 70 | {/* */} 71 | 72 |
73 | {categories.map(category => ( 74 |
75 |

{category}

76 |
77 | {filteredProducts 78 | .filter(product => product.category === category) 79 | .map(product => ( 80 | 81 | ))} 82 |
83 |
84 | ))} 85 |
86 |
87 | ); 88 | } 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /src/assets/BrokenHeart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0MeMo07/React-Shopping-Web-Application/0ac8524467637f5f4f4e3a8fc2dacbad6bc1442a/src/assets/BrokenHeart.png -------------------------------------------------------------------------------- /src/assets/CartEmpty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0MeMo07/React-Shopping-Web-Application/0ac8524467637f5f4f4e3a8fc2dacbad6bc1442a/src/assets/CartEmpty.png -------------------------------------------------------------------------------- /src/assets/FavBrokenHeart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0MeMo07/React-Shopping-Web-Application/0ac8524467637f5f4f4e3a8fc2dacbad6bc1442a/src/assets/FavBrokenHeart.png -------------------------------------------------------------------------------- /src/assets/White.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0MeMo07/React-Shopping-Web-Application/0ac8524467637f5f4f4e3a8fc2dacbad6bc1442a/src/assets/White.png -------------------------------------------------------------------------------- /src/assets/empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0MeMo07/React-Shopping-Web-Application/0ac8524467637f5f4f4e3a8fc2dacbad6bc1442a/src/assets/empty.png -------------------------------------------------------------------------------- /src/assets/shopping-with-bags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0MeMo07/React-Shopping-Web-Application/0ac8524467637f5f4f4e3a8fc2dacbad6bc1442a/src/assets/shopping-with-bags.png -------------------------------------------------------------------------------- /src/components/Basket.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import BasketItem from "./Basketitem"; 3 | import Button from "@mui/material/Button"; 4 | import Typography from "@mui/material/Typography"; 5 | import Box from "@mui/material/Box"; 6 | import styled from 'styled-components'; 7 | import { BsCartX } from "react-icons/bs"; 8 | 9 | function Basket({ basket, products, total, resetBasket }) { 10 | 11 | const BoxBottom = styled.div` 12 | text-align: center; 13 | background-color: rgb(255 255 255 / 50%); 14 | border-radius: 0% 0% 15px 15px; 15 | `; 16 | 17 | const ShopCartX = styled.i` 18 | width: 50px; 19 | height: 20px; 20 | text-align: center; 21 | font-size: 15px; 22 | `; 23 | 24 | return ( 25 | <> 26 | 27 | 28 | 29 | {basket.map((item) => ( 30 | p.id === item.id)} /> 31 | ))} 32 | 33 | Total: ${total} 34 | 35 | 36 | 37 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default Basket; 48 | -------------------------------------------------------------------------------- /src/components/Basketitem.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function BasketItem({ item, product }) { 4 | return ( 5 |
6 | {product.title} x {item.amount} 7 |
8 | ) 9 | } 10 | 11 | export default BasketItem -------------------------------------------------------------------------------- /src/components/CartProductNotFound.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../css/CartProductNotFound.css'; 3 | import emptyImage from '../assets/CartEmpty.png'; 4 | function CartProductNotFound() { 5 | return ( 6 |
7 | Empty 8 |

Oops!

9 |

Your Cart list is empty.

10 |

Why not add some items to your Cart?

11 |
12 | ); 13 | } 14 | 15 | export default CartProductNotFound; -------------------------------------------------------------------------------- /src/components/FavNotFound.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../css/FavNotFound.css'; 3 | import emptyImage from '../assets/FavBrokenHeart.png'; 4 | function FavNotFound() { 5 | return ( 6 |
7 | Empty 8 |

Oops!

9 |

Your favorites list is empty.

10 |

Why not add some items to your favorites?

11 |
12 | ); 13 | } 14 | 15 | export default FavNotFound; 16 | -------------------------------------------------------------------------------- /src/components/FavoriteAddHeart.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import toast from 'react-hot-toast'; 3 | import { Button } from '@mui/material'; 4 | import styled from 'styled-components'; 5 | import { IoIosHeart, IoMdHeartEmpty } from 'react-icons/io'; 6 | 7 | const IconButton = styled(Button)` 8 | && { 9 | padding: 0; 10 | min-width: unset; 11 | width: auto; 12 | left: 0; 13 | margin-top: auto; 14 | padding-left: 100px; 15 | } 16 | 17 | @media (max-width: 767px) { 18 | && { 19 | padding: 0; 20 | min-width: unset; 21 | width: auto; 22 | left: 0; 23 | margin-top: auto; 24 | padding-left: 65px; 25 | } 26 | } 27 | 28 | `; 29 | 30 | const HeartIconEmpty = styled(IoMdHeartEmpty)` 31 | font-size: 24px; 32 | `; 33 | 34 | const HeartIcon = styled(IoIosHeart)` 35 | font-size: 24px; 36 | color: red; 37 | `; 38 | 39 | function FavoriteAddHeart({ productId }) { 40 | 41 | const [isFavorite, setIsFavorite] = useState(checkIfFavorite(productId)); 42 | 43 | function checkIfFavorite(productId) { 44 | const favorites = JSON.parse(localStorage.getItem('Favorites')) || []; 45 | return favorites.includes(productId); 46 | } 47 | 48 | const toggleFavorite = () => { 49 | const favorites = JSON.parse(localStorage.getItem('Favorites')) || []; 50 | 51 | if (!isFavorite) { 52 | favorites.push(productId); 53 | localStorage.setItem('Favorites', JSON.stringify(favorites)); 54 | 55 | toast.success('Product successfully added to favorites', { 56 | style: { 57 | boxShadow: 'none', 58 | }, 59 | }); 60 | } else { 61 | // Favoriden kaldır 62 | const updatedFavorites = favorites.filter((favId) => favId !== productId); 63 | localStorage.setItem('Favorites', JSON.stringify(updatedFavorites)); 64 | 65 | toast.success('Product removed from favorites', { 66 | style: { 67 | boxShadow: 'none', 68 | }, 69 | }); 70 | } 71 | setIsFavorite(!isFavorite); 72 | }; 73 | 74 | return ( 75 | 76 | {isFavorite ? : } 77 | 78 | ); 79 | } 80 | 81 | export default FavoriteAddHeart; 82 | -------------------------------------------------------------------------------- /src/components/Loginİmage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ShoppingPng from '../assets/shopping-with-bags.png' 3 | import '../css/Loginİmage.css' 4 | function Loginİmage() { 5 | return ( 6 | <> 7 | 8 |
9 |

10 | Welcome to MeMo Shopping 👋 11 |

12 | 13 | 14 |
15 | 16 | ); 17 | }; 18 | 19 | 20 | export default Loginİmage; -------------------------------------------------------------------------------- /src/components/Product.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import styled from 'styled-components'; 3 | import Button from "@mui/material/Button"; 4 | import Typography from "@mui/material/Typography"; 5 | import Box from "@mui/material/Box"; 6 | import { createTheme, ThemeProvider} from '@mui/material/styles'; 7 | import { MdAddShoppingCart } from "react-icons/md"; 8 | import { FaRegTrashCan } from "react-icons/fa6"; 9 | import toast, { Toaster } from 'react-hot-toast'; 10 | import { IoIosHeart, IoMdHeartEmpty } from "react-icons/io"; 11 | 12 | 13 | const darkTheme = createTheme({ 14 | palette: { 15 | primary: { 16 | main: 'rgba(0, 0, 0, 0.8)', 17 | 18 | }, 19 | secondary: { 20 | main: 'rgba(237, 242, 255, 0.8)', 21 | }, 22 | }, 23 | }); 24 | 25 | const BoxSide = styled.div` 26 | float: left; 27 | padding: 17px; 28 | `; 29 | 30 | const İconSize = styled.i` 31 | width: 20px; 32 | height: 20px; 33 | text-align: center; 34 | `; 35 | 36 | // const Uppernumber = styled.div` 37 | // border: 2px solid #eee; 38 | // background-color: #eee; 39 | // width: 40px; 40 | // height: 20px; 41 | // text-align: center; 42 | // border-radius: 15px; 43 | // `; 44 | 45 | // const Heart = styled.i` 46 | // padding: 0px 0px; 47 | // position: absolute; 48 | // /* margin-left: 120px; 49 | // margin-top: 20px; */ 50 | // left: 0; 51 | // `; 52 | 53 | const IconButton = styled(Button)` 54 | && { 55 | padding: 0; 56 | min-width: unset; 57 | width: auto; 58 | left: 0; 59 | } 60 | `; 61 | 62 | const HeartIconEmpty = styled(IoMdHeartEmpty)` 63 | font-size: 24px; 64 | margin-left: 200px; 65 | margin-top: 20px; 66 | position: absolute; 67 | `; 68 | 69 | const HeartIcon = styled(IoIosHeart)` 70 | font-size: 24px; 71 | margin-left: 200px; 72 | margin-top: 20px; 73 | color:red; 74 | position: absolute; 75 | `; 76 | // const CartImg = styled.img` 77 | // width: 100px; 78 | // height: 100px; 79 | // margin-bottom: 20px; 80 | // border-radius: 10px; 26 81 | // `; 82 | 83 | function Product({ product, total, money, basket, setBasket, value }) { 84 | 85 | const [ProductItem, setProductItem] = useState(checkIfProduct(product.id)); 86 | 87 | function checkIfProduct(productİtemId){ 88 | const ProductsItems = JSON.parse(localStorage.getItem('Products')) || []; 89 | return ProductsItems.includes(productİtemId) 90 | } 91 | 92 | const toggleProduct = () => { 93 | const productId = product.id; 94 | let ProductItems = JSON.parse(localStorage.getItem('Products')) || []; 95 | 96 | const productIndex = ProductItems.findIndex(item => item.id === productId); 97 | 98 | if (productIndex === -1) { 99 | 100 | ProductItems.push({ id: productId, quantity: 1 }); 101 | } else { 102 | 103 | ProductItems[productIndex].quantity += 1; 104 | } 105 | 106 | localStorage.setItem('Products', JSON.stringify(ProductItems)); 107 | setProductItem(!ProductItem); 108 | 109 | toast.success('Product successfully added to cart', { 110 | style: { 111 | boxShadow: 'none', 112 | }, 113 | }); 114 | }; 115 | const basketItem = basket.find((item) => item.id === product.id) || []; 116 | 117 | const [productDetails, setProductDetails] = useState([]); 118 | const [productsCount, setProductsCount] = useState(0); 119 | 120 | const DeleteProduct = (productId) => { 121 | const DeleteProducts = JSON.parse(localStorage.getItem('Products')) || []; 122 | let updatedFavorites = [...DeleteProducts]; 123 | let shouldRemoveProduct = false; 124 | 125 | updatedFavorites = updatedFavorites.map(product => { 126 | if (product.id === productId) { 127 | product.quantity -= 1; 128 | if (product.quantity === 0) { 129 | shouldRemoveProduct = true; 130 | } 131 | } 132 | return product; 133 | }); 134 | 135 | if (shouldRemoveProduct) { 136 | updatedFavorites = updatedFavorites.filter(product => product.id !== productId); 137 | } 138 | 139 | localStorage.setItem('Products', JSON.stringify(updatedFavorites)); 140 | setProductDetails(updatedFavorites); 141 | 142 | toast.error('The product has been successfully removed from your cart', { 143 | style: { 144 | boxShadow: 'none', 145 | }, 146 | }); 147 | }; 148 | 149 | 150 | const [isFavorite, setIsFavorite] = useState(checkIfFavorite(product.id)); 151 | 152 | function checkIfFavorite(productId) { 153 | const favorites = JSON.parse(localStorage.getItem('Favorites')) || []; 154 | return favorites.includes(productId); 155 | } 156 | 157 | const toggleFavorite = () => { 158 | const productId = product.id; 159 | const favorites = JSON.parse(localStorage.getItem('Favorites')) || []; 160 | 161 | if (!isFavorite) { 162 | favorites.push(productId); 163 | localStorage.setItem('Favorites', JSON.stringify(favorites)); 164 | 165 | toast.success('Product successfully added to favorites', { 166 | style: { 167 | boxShadow: 'none', 168 | }, 169 | }); 170 | } else { 171 | // Favoriden kaldır 172 | const updatedFavorites = favorites.filter((favId) => favId !== productId); 173 | localStorage.setItem('Favorites', JSON.stringify(updatedFavorites)); 174 | 175 | toast.success('Product removed from favorites', { 176 | style: { 177 | boxShadow: 'none', 178 | }, 179 | }); 180 | } 181 | 182 | // Favori durumunu güncelle 183 | setIsFavorite(!isFavorite); 184 | }; 185 | 186 | 187 | 188 | return ( 189 | <> 190 | 191 | 192 | 193 | 207 | {/* 208 | 209 | {basketItem && basketItem.amount || 0} 210 | 211 | */} 212 | 213 | {checkIfFavorite(product.id) ? : } 214 | 215 | 216 | 221 | {product.title} 222 | 223 | ${product.price} 224 | 225 | 226 | 233 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | ); 249 | }; 250 | 251 | export default Product; 252 | -------------------------------------------------------------------------------- /src/components/Search.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { styled, alpha } from '@mui/material/styles'; 3 | import AppBar from '@mui/material/AppBar'; 4 | import Box from '@mui/material/Box'; 5 | import Toolbar from '@mui/material/Toolbar'; 6 | import IconButton from '@mui/material/IconButton'; 7 | import Typography from '@mui/material/Typography'; 8 | import InputBase from '@mui/material/InputBase'; 9 | import Badge from '@mui/material/Badge'; 10 | import MenuItem from '@mui/material/MenuItem'; 11 | import Menu from '@mui/material/Menu'; 12 | import { BiCategory } from "react-icons/bi"; 13 | import { FaShoppingCart } from "react-icons/fa"; 14 | import { IoMenu } from "react-icons/io5"; 15 | import { IoSearchSharp } from "react-icons/io5"; 16 | import { IoMdHome } from "react-icons/io"; 17 | import { createTheme, ThemeProvider} from '@mui/material/styles'; 18 | import { useState, useEffect } from 'react'; 19 | import { Link } from 'react-router-dom'; 20 | import Styled from 'styled-components'; 21 | import { IoIosHeart} from "react-icons/io"; 22 | import FavoritesCount from '../hooks/FavoritesCount' 23 | import '../css/Routes.css' 24 | 25 | const darkTheme = createTheme({ 26 | palette: { 27 | primary: { 28 | main: 'rgba(0, 0, 0, 0.8)', 29 | }, 30 | secondary: { 31 | main: 'rgba(237, 242, 255, 0.8)', 32 | }, 33 | }, 34 | }); 35 | const BoxSide = Styled.div` 36 | position: fixed; 37 | z-index: 100; 38 | width: 100%; 39 | top:0; 40 | right:0; 41 | left:0; 42 | 43 | backdrop-filter: blur(4px); 44 | `; 45 | 46 | 47 | const Search = styled('div')(({ theme }) => ({ 48 | position: 'relative', 49 | borderRadius: theme.shape.borderRadius, 50 | backgroundColor: alpha(theme.palette.common.white, 0.15), 51 | '&:hover': { 52 | backgroundColor: alpha(theme.palette.common.white, 0.25), 53 | }, 54 | marginRight: theme.spacing(2), 55 | marginLeft: 0, 56 | width: '100%', 57 | [theme.breakpoints.up('sm')]: { 58 | marginLeft: theme.spacing(3), 59 | width: 'auto', 60 | }, 61 | })); 62 | 63 | const SearchIconWrapper = styled('div')(({ theme }) => ({ 64 | padding: theme.spacing(0, 2), 65 | height: '100%', 66 | position: 'absolute', 67 | pointerEvents: 'none', 68 | display: 'flex', 69 | alignItems: 'center', 70 | justifyContent: 'center', 71 | })); 72 | 73 | const StyledInputBase = styled(InputBase)(({ theme }) => ({ 74 | color: 'inherit', 75 | '& .MuiInputBase-input': { 76 | padding: theme.spacing(1, 1, 1, 0), 77 | paddingLeft: `calc(1em + ${theme.spacing(4)})`, 78 | transition: theme.transitions.create('width'), 79 | width: '100%', 80 | [theme.breakpoints.up('md')]: { 81 | width: '20ch', 82 | }, 83 | }, 84 | })); 85 | 86 | export default function PrimarySearchAppBar({ product, total, money, basket, setBasket, onSearch }) { 87 | const favoritesCount = FavoritesCount(); 88 | 89 | 90 | const [anchorEl, setAnchorEl] = React.useState(null); 91 | const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null); 92 | 93 | const isMenuOpen = Boolean(anchorEl); 94 | const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); 95 | 96 | const handleProfileMenuOpen = (event) => { 97 | setAnchorEl(event.currentTarget); 98 | }; 99 | 100 | const handleMobileMenuClose = () => { 101 | setMobileMoreAnchorEl(null); 102 | }; 103 | 104 | const handleMenuClose = () => { 105 | setAnchorEl(null); 106 | handleMobileMenuClose(); 107 | }; 108 | 109 | const handleMobileMenuOpen = (event) => { 110 | setMobileMoreAnchorEl(event.currentTarget); 111 | }; 112 | const totalQuantity = basket ? basket.reduce((acc, item) => acc + item.amount, 0) : 0; 113 | 114 | const [value, setValue] = useState(''); 115 | 116 | const menuId = 'primary-search-account-menu'; 117 | const renderMenu = ( 118 | 119 | 120 | 121 | 122 | ); 123 | 124 | const mobileMenuId = 'primary-search-account-menu-mobile'; 125 | const renderMobileMenu = ( 126 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 |

Filter

150 | 151 | 152 | 157 | 158 | 159 | 160 | 161 | Favorites 162 | 163 | 164 | 171 | 172 | 173 | Cart 174 | 175 | 176 | ); 177 | return ( 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 192 | 193 | 194 | 195 | 201 | MeMo Shoping 202 | 203 | 204 | 205 | 206 | 207 | 208 | { 213 | try { 214 | setValue(e.target.value); 215 | onSearch(e.target.value); 216 | } catch (error) { 217 | console.error("Error:", error); 218 | } 219 | }} 220 | /> 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 238 | 239 | 240 | 241 | 242 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 266 | 267 | 268 | 269 | 270 | 271 | {renderMobileMenu} 272 | {renderMenu} 273 | 274 | 275 | 276 | 277 | 278 | ); 279 | } 280 | -------------------------------------------------------------------------------- /src/components/Slider.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from 'react-icons/fa'; 3 | import { BsCircleFill, BsChevronCompactRight, BsChevronCompactLeft } from "react-icons/bs"; 4 | import '../css/Slider.css'; 5 | 6 | const ImageSlider = ({ slides }) => { 7 | const [slideIndex, setSlideIndex] = useState(0); 8 | const [products, setProducts] = useState([]); 9 | 10 | useEffect(() => { 11 | const fetchData = async () => { 12 | try { 13 | const response = await fetch('https://dummyjson.com/products'); 14 | const result = await response.json(); 15 | setProducts(result.products); 16 | } catch (error) { 17 | console.error('error fetching data:', error); 18 | } 19 | }; 20 | 21 | fetchData(); 22 | }, []); 23 | 24 | useEffect(() => { 25 | const interval = setInterval(() => { 26 | setSlideIndex((prevIndex) => 27 | prevIndex === products.length - 1 ? 0 : prevIndex + 1 28 | ); 29 | }, 5000); 30 | return () => clearInterval(interval); 31 | }, [products]); 32 | 33 | const nextSlide = () => { 34 | setSlideIndex((prevIndex) => 35 | prevIndex === products.length - 1 ? 0 : prevIndex + 1 36 | ); 37 | }; 38 | 39 | const prevSlide = () => { 40 | setSlideIndex((prevIndex) => 41 | prevIndex === 0 ? products.length - 1 : prevIndex - 1 42 | ); 43 | }; 44 | 45 | return ( 46 |
47 | 48 | 49 | 50 |
51 | {products.map((product, index) => ( 52 |
56 | {index === slideIndex && ( 57 | travel image 58 | )} 59 |
60 | ))} 61 |
62 |
63 | {products.map((_, index) => ( 64 | setSlideIndex(index)} 68 | /> 69 | ))} 70 |
71 |
72 | ); 73 | }; 74 | 75 | export default ImageSlider; 76 | -------------------------------------------------------------------------------- /src/css/Cart.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .spec { 4 | font-size: 11px; 5 | } 6 | #AddQuantity-RemoveQuantity{ 7 | margin-right: 20px; 8 | } 9 | #AddQuantity-RemoveQuantity:hover{ 10 | cursor: pointer; 11 | } 12 | #Leftİcon{ 13 | left: 0; 14 | } 15 | #Rightİcon{ 16 | right: 0; 17 | } 18 | 19 | 20 | .quantity-controller { 21 | display: flex; 22 | flex-wrap: wrap; 23 | flex-direction: column; 24 | text-align: center; 25 | align-items: center; 26 | } 27 | 28 | #Trash { 29 | margin-top: auto; 30 | margin-bottom: 3px; 31 | } 32 | /* Removes product description */ 33 | .spec { 34 | display: none; 35 | } 36 | @media (max-width: 850px) { 37 | 38 | .items img { 39 | width: 50px; 40 | height: 50px; 41 | border-radius: 5px; 42 | margin-right: 10px; 43 | } 44 | 45 | /* Removes product description */ 46 | .spec { 47 | display: none; 48 | } 49 | 50 | } 51 | 52 | @media (max-width: 500px) { 53 | #Trash { 54 | margin-top: auto; 55 | margin-bottom: 0px; 56 | position: relative; 57 | right: 30px; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/css/CartProductNotFound.css: -------------------------------------------------------------------------------- 1 | .cart-not-found-container { 2 | text-align: center; 3 | position: fixed; 4 | top: 55%; 5 | left: 35%; 6 | transform: translate(-50%, -50%); 7 | padding: 20px; 8 | border: 2px solid #ccc; 9 | border-radius: 5px; 10 | background-color: #f9f9f9; 11 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 12 | } 13 | 14 | .cart-empty-image { 15 | width: 100px; 16 | height: auto; 17 | margin-bottom: 20px; 18 | } 19 | 20 | .cart-not-found-container h2 { 21 | font-size: 24px; 22 | color: #333; 23 | } 24 | 25 | .cart-not-found-container p { 26 | font-size: 18px; 27 | color: #666; 28 | margin-bottom: 10px; 29 | } 30 | 31 | 32 | @media (max-width: 767px) { 33 | .cart-not-found-container { 34 | text-align: center; 35 | position: relative; 36 | top: 55%; 37 | left: 35%; 38 | transform: translate(-35%, 25%); 39 | padding: 20px; 40 | border: 2px solid #ccc; 41 | border-radius: 5px; 42 | background-color: #f9f9f9; 43 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 44 | 45 | } 46 | 47 | .cart-empty-image { 48 | width: 100px; 49 | height: auto; 50 | margin-bottom: 20px; 51 | } 52 | 53 | .cart-not-found-container h2 { 54 | font-size: 24px; 55 | color: #333; 56 | } 57 | 58 | .cart-not-found-container p { 59 | font-size: 18px; 60 | color: #666; 61 | margin-bottom: 10px; 62 | } 63 | 64 | .payment-info{ 65 | margin-top: 120px !important; 66 | } 67 | } -------------------------------------------------------------------------------- /src/css/FavNotFound.css: -------------------------------------------------------------------------------- 1 | .not-found-container { 2 | text-align: center; 3 | position: fixed; 4 | top: 65%; 5 | left: 50%; 6 | transform: translate(-50%, -50%); 7 | padding: 20px; 8 | border: 2px solid #ccc; 9 | border-radius: 5px; 10 | background-color: #f9f9f9; 11 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 12 | } 13 | 14 | @media (max-width: 767px) { 15 | .not-found-container { 16 | text-align: center; 17 | position: fixed; 18 | top: 65%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | padding: 20px; 22 | border: 2px solid #ccc; 23 | border-radius: 5px; 24 | background-color: #f9f9f9; 25 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 26 | } 27 | } 28 | .empty-image { 29 | width: 100px; 30 | height: auto; 31 | margin-bottom: 20px; 32 | } 33 | 34 | .not-found-container h2 { 35 | font-size: 24px; 36 | color: #333; 37 | } 38 | 39 | .not-found-container p { 40 | font-size: 18px; 41 | color: #666; 42 | margin-bottom: 10px; 43 | } 44 | -------------------------------------------------------------------------------- /src/css/Favorites.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Cairo'); 2 | 3 | .align-center { 4 | -webkit-box-align: center; 5 | -ms-flex-align: center; 6 | align-items: center; 7 | } 8 | 9 | .flex-centerY-centerX { 10 | justify-content: center; 11 | -webkit-box-pack: center; 12 | -ms-flex-pack: center; 13 | justify-content: center; 14 | -webkit-box-align: center; 15 | -ms-flex-align: center; 16 | align-items: center; 17 | } 18 | 19 | body { 20 | background-color: #f7f7f7; 21 | } 22 | 23 | .page-wrapper { 24 | height: 100%; 25 | display: table; 26 | } 27 | 28 | .page-wrapper .page-inner { 29 | display: table-cell; 30 | vertical-align: middle; 31 | } 32 | 33 | .el-wrapper { 34 | width: 360px; 35 | padding: 15px; 36 | margin: 15px auto; 37 | background-color: #fff; 38 | border-radius: 10px; 39 | } 40 | 41 | @media (max-width: 991px) { 42 | .el-wrapper { 43 | width: 345px; 44 | border-radius: 10px; 45 | } 46 | } 47 | 48 | @media (max-width: 767px) { 49 | .el-wrapper { 50 | width: 290px; 51 | margin: 30px auto; 52 | border-radius: 10px; 53 | } 54 | 55 | } 56 | 57 | .el-wrapper:hover .h-bg { 58 | left: 0px; 59 | } 60 | 61 | .el-wrapper:hover .price { 62 | left: 20px; 63 | -webkit-transform: translateY(-50%); 64 | -ms-transform: translateY(-50%); 65 | -o-transform: translateY(-50%); 66 | transform: translateY(-50%); 67 | color: #818181; 68 | } 69 | 70 | .el-wrapper:hover .add-to-cart { 71 | left: 50%; 72 | } 73 | 74 | .el-wrapper:hover .img { 75 | webkit-filter: blur(7px); 76 | -o-filter: blur(7px); 77 | -ms-filter: blur(7px); 78 | filter: blur(7px); 79 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0'); 80 | opacity: 0.4; 81 | } 82 | 83 | .el-wrapper:hover .info-inner { 84 | bottom: 155px; 85 | } 86 | 87 | .el-wrapper:hover .a-size { 88 | -webkit-transition-delay: 300ms; 89 | -o-transition-delay: 300ms; 90 | transition-delay: 300ms; 91 | bottom: 50px; 92 | opacity: 1; 93 | } 94 | 95 | .el-wrapper .box-down { 96 | width: 100%; 97 | height: 60px; 98 | position: relative; 99 | overflow: hidden; 100 | } 101 | 102 | .el-wrapper .box-up { 103 | width: 100%; 104 | height: 300px; 105 | position: relative; 106 | overflow: hidden; 107 | text-align: center; 108 | } 109 | 110 | .el-wrapper .img { 111 | padding: 20px 0; 112 | width: 80%; 113 | height: 75%; 114 | -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 115 | -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 116 | -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 117 | transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 118 | /* ease-out */ 119 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 120 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 121 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 122 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 123 | /* ease-out */ 124 | } 125 | 126 | .h-bg { 127 | -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 128 | -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 129 | -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 130 | transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 131 | /* ease-out */ 132 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 133 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 134 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 135 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 136 | /* ease-out */ 137 | width: 660px; 138 | height: 100%; 139 | background-color: #3f96cd; 140 | position: absolute; 141 | left: -659px; 142 | } 143 | 144 | .h-bg .h-bg-inner { 145 | width: 60%; 146 | height: 100%; 147 | background-color: #464646; 148 | } 149 | 150 | .info-inner { 151 | -webkit-transition: all 400ms cubic-bezier(0, 0, 0.18, 1); 152 | -moz-transition: all 400ms cubic-bezier(0, 0, 0.18, 1); 153 | -o-transition: all 400ms cubic-bezier(0, 0, 0.18, 1); 154 | transition: all 400ms cubic-bezier(0, 0, 0.18, 1); 155 | /* ease-out */ 156 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 157 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 158 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 159 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 160 | /* ease-out */ 161 | position: absolute; 162 | width: 100%; 163 | bottom: 25px; 164 | } 165 | 166 | .info-inner .p-name, 167 | .info-inner .p-company { 168 | display: block; 169 | } 170 | 171 | .info-inner .p-name { 172 | font-family: 'PT Sans', sans-serif; 173 | font-size: 18px; 174 | color: #252525; 175 | } 176 | 177 | .info-inner .p-company { 178 | font-family: 'Lato', sans-serif; 179 | font-size: 12px; 180 | text-transform: uppercase; 181 | color: #8c8c8c; 182 | } 183 | 184 | .a-size { 185 | -webkit-transition: all 300ms cubic-bezier(0, 0, 0.18, 1); 186 | -moz-transition: all 300ms cubic-bezier(0, 0, 0.18, 1); 187 | -o-transition: all 300ms cubic-bezier(0, 0, 0.18, 1); 188 | transition: all 300ms cubic-bezier(0, 0, 0.18, 1); 189 | /* ease-out */ 190 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 191 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 192 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 193 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 194 | /* ease-out */ 195 | position: absolute; 196 | width: 100%; 197 | bottom: -20px; 198 | font-family: 'PT Sans', sans-serif; 199 | color: #828282; 200 | opacity: 0; 201 | } 202 | 203 | .a-size .size { 204 | color: #252525; 205 | } 206 | 207 | .cart { 208 | display: block; 209 | /* position: absolute; */ 210 | width: 100%; 211 | height: 100%; 212 | top: 0; 213 | left: 0; 214 | font-family: 'Lato', sans-serif; 215 | font-weight: 700; 216 | 217 | } 218 | 219 | .cart .price { 220 | -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 221 | -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 222 | -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 223 | transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 224 | /* ease-out */ 225 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 226 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 227 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 228 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 229 | /* ease-out */ 230 | -webkit-transition-delay: 100ms; 231 | -o-transition-delay: 100ms; 232 | transition-delay: 100ms; 233 | display: block; 234 | position: absolute; 235 | top: 50%; 236 | left: 50%; 237 | -webkit-transform: translate(-50%, -50%); 238 | -ms-transform: translate(-50%, -50%); 239 | -o-transform: translate(-50%, -50%); 240 | transform: translate(-50%, -50%); 241 | font-size: 16px; 242 | color: #252525; 243 | 244 | } 245 | 246 | .cart .add-to-cart { 247 | -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 248 | -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 249 | -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 250 | transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 251 | /* ease-out */ 252 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 253 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 254 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 255 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 256 | /* ease-out */ 257 | -webkit-transition-delay: 100ms; 258 | -o-transition-delay: 100ms; 259 | transition-delay: 100ms; 260 | display: block; 261 | position: absolute; 262 | top: 50%; 263 | left: 125%; 264 | -webkit-transform: translate(-25%, -50%); 265 | -ms-transform: translate(-25%, -50%); 266 | -o-transform: translate(-25%, -50%); 267 | transform: translate(-25%, -50%); 268 | 269 | } 270 | 271 | .cart .add-to-cart .txt { 272 | font-size: 12px; 273 | color: #fff; 274 | letter-spacing: 0.045em; 275 | text-transform: uppercase; 276 | white-space: nowrap; 277 | } 278 | 279 | .FavoritesContainer { 280 | display: flex; 281 | flex-wrap: wrap; 282 | justify-content: flex-start; 283 | flex-direction: row; 284 | float: left; 285 | padding: 25px; 286 | } 287 | 288 | a{ 289 | color: #fff; 290 | } 291 | 292 | .img{ 293 | border-radius: 10px; 294 | } 295 | 296 | .mbbb-0{ 297 | padding-top: 60px; 298 | font-size: 30px; 299 | } 300 | 301 | 302 | .GoToCartLink{ 303 | text-decoration: none; 304 | } 305 | 306 | #FTrash{ 307 | margin-top: auto; 308 | margin-bottom: 0px; 309 | padding-left: 100px; 310 | } 311 | 312 | .close{ 313 | cursor: pointer; 314 | } 315 | 316 | .FavTitle { 317 | font-family: "Cairo"; 318 | text-align: center; 319 | color: #FFF; 320 | display: flex; 321 | flex-direction: column; 322 | align-items: center; 323 | justify-content: center; 324 | letter-spacing: 1px; 325 | line-height:2 326 | } 327 | 328 | .mbbb-0{ 329 | background-image: url(https://i.pinimg.com/originals/95/86/84/9586846990183c06e768204cd0593eee.gif); 330 | background-size: cover; 331 | color: transparent; 332 | -moz-background-clip: text; 333 | -webkit-background-clip: text; 334 | text-transform: uppercase; 335 | margin: 10px 0; 336 | } 337 | 338 | .FavİtemCount{ 339 | color:#252525; 340 | text-align: center; 341 | /* margin-right: 50px; */ 342 | margin-right: 50px; 343 | } 344 | 345 | @media (max-width: 767px) { 346 | #FTrash{ 347 | padding-left: 50px; 348 | } 349 | 350 | .FavoritesContainer { 351 | display: flex; 352 | flex-wrap: wrap; 353 | flex-direction: row; 354 | float: left; 355 | align-items: center; 356 | justify-content: center; 357 | } 358 | 359 | 360 | } 361 | 362 | -------------------------------------------------------------------------------- /src/css/Home.css: -------------------------------------------------------------------------------- 1 | .categories-container { 2 | display: flex; 3 | margin-top: 80px; 4 | flex-direction: column; 5 | gap: 10px; 6 | overflow-x: auto; 7 | } 8 | 9 | .category-container { 10 | flex: 0 0 auto; 11 | width: 98%; 12 | padding: 10px; 13 | border: 1px solid #ddd; 14 | border-radius: 20px; 15 | } 16 | 17 | .category-title { 18 | font-size: 1.5rem; 19 | margin-bottom: 10px; 20 | font-family: system-ui; 21 | } 22 | 23 | .product-container { 24 | display: flex; 25 | flex-wrap: nowrap; 26 | gap: 10px; 27 | overflow-x: auto; 28 | } 29 | 30 | 31 | .category-title-fixed { 32 | position: sticky; 33 | top: 0; 34 | background-color: #fff; 35 | z-index: 1; 36 | } 37 | 38 | ::-webkit-scrollbar { 39 | width: 8px; 40 | } 41 | 42 | ::-webkit-scrollbar-thumb { 43 | background-color: #8a8a8a; 44 | border-radius: 6px; 45 | } 46 | 47 | ::-webkit-scrollbar-thumb:hover { 48 | background-color: #6b6b6b; 49 | } 50 | 51 | ::-webkit-scrollbar-track { 52 | background-color: #f1f1f1; 53 | } 54 | 55 | -------------------------------------------------------------------------------- /src/css/Loginİmage.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: relative; 3 | text-align: center; 4 | } 5 | 6 | .Mainİmage{ 7 | width: 100%; 8 | height: 700px; 9 | align-items: center; 10 | position: relative; 11 | justify-content: center; 12 | align-items: center; 13 | z-index: -1; 14 | filter: blur(4px); 15 | right: 7px; 16 | } 17 | 18 | .imageText{ 19 | top: 50%; 20 | left: 50%; 21 | transform: translate(-100%, -100%); 22 | font-size: 50px; 23 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 24 | position: absolute; 25 | z-index: 1; 26 | color: black; 27 | 28 | } 29 | 30 | 31 | .imageText { 32 | background-color: rgb(0,0,0); 33 | background-color: rgba(0,0,0, 0.4); 34 | color: white; 35 | font-weight: bold; 36 | border: 3px solid #f1f1f1; 37 | position: absolute; 38 | top: 50%; 39 | left: 50%; 40 | transform: translate(-50%, -50%); 41 | z-index: 2; 42 | width: 80%; 43 | padding: 20px; 44 | text-align: center; 45 | } 46 | 47 | @media (max-width:500px) { 48 | .Mainİmage{ 49 | width: 100%; 50 | height: 300px; 51 | align-items: center; 52 | position: relative; 53 | justify-content: center; 54 | align-items: center; 55 | z-index: -1; 56 | filter: blur(4px); 57 | right: 7px; 58 | } 59 | 60 | .imageText{ 61 | top: 50%; 62 | left: 50%; 63 | transform: translate(-100%, -100%); 64 | font-size: 25px; 65 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 66 | position: absolute; 67 | z-index: 1; 68 | color: black; 69 | 70 | } 71 | 72 | 73 | .imageText { 74 | background-color: rgb(0,0,0); 75 | background-color: rgba(0,0,0, 0.4); 76 | color: white; 77 | font-weight: bold; 78 | border: 3px solid #f1f1f1; 79 | position: absolute; 80 | top: 50%; 81 | left: 50%; 82 | transform: translate(-50%, -50%); 83 | z-index: 2; 84 | width: 80%; 85 | padding: 20px; 86 | text-align: center; 87 | } 88 | } -------------------------------------------------------------------------------- /src/css/Routes.css: -------------------------------------------------------------------------------- 1 | .İconLinks{ 2 | text-decoration: none; 3 | color: white; 4 | } 5 | .MobilMenuİconLinks{ 6 | text-decoration: none; 7 | color: black; 8 | } 9 | .FavİconLinks{ 10 | text-decoration: nnoe; 11 | } 12 | 13 | .FavİconLinks:hover{ 14 | color: none; 15 | text-decoration: none; 16 | } 17 | -------------------------------------------------------------------------------- /src/css/Slider.css: -------------------------------------------------------------------------------- 1 | .slider { 2 | position: relative; 3 | height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | .image { 10 | width: 700px; 11 | height: 400px; 12 | border-radius: 10px; 13 | } 14 | 15 | .right-arrow { 16 | position: absolute; 17 | top: 50%; 18 | right: 100px; 19 | font-size: 3rem; 20 | color: #000; 21 | z-index: 10; 22 | cursor: pointer; 23 | user-select: none; 24 | } 25 | 26 | .left-arrow { 27 | position: absolute; 28 | top: 50%; 29 | left: 100px; 30 | font-size: 3rem; 31 | color: #000; 32 | z-index: 10; 33 | cursor: pointer; 34 | user-select: none; 35 | } 36 | 37 | .left-arrow:hover{ 38 | font-size: 45px; 39 | } 40 | 41 | .right-arrow:hover{ 42 | font-size: 45px; 43 | } 44 | 45 | .slide { 46 | opacity: 0; 47 | transition-duration: 1s ease; 48 | } 49 | 50 | .slide.active { 51 | opacity: 1; 52 | transition-duration: 1s; 53 | transform: scale(1.08); 54 | } 55 | 56 | .slider-dots { 57 | position: absolute; 58 | bottom: 10px; 59 | left: 50%; 60 | transform: translateX(-50%); 61 | display: flex; 62 | } 63 | 64 | .dot { 65 | margin: 0 5px; 66 | cursor: pointer; 67 | } 68 | .dot:hover{ 69 | font-size: 15px; 70 | } 71 | .dot.active { 72 | color: red; 73 | } 74 | 75 | @media (max-width:1115px) { 76 | .image { 77 | width: 600px; 78 | height: 400px; 79 | border-radius: 10px; 80 | } 81 | } 82 | 83 | @media (max-width:1030px) { 84 | .image { 85 | width: 500px; 86 | height: 400px; 87 | border-radius: 10px; 88 | } 89 | } 90 | 91 | @media (max-width:900px) { 92 | .image { 93 | width: 400px; 94 | height: 300px; 95 | border-radius: 10px; 96 | } 97 | } 98 | 99 | @media (max-width:800px) { 100 | .image { 101 | width: 400px; 102 | height: 300px; 103 | border-radius: 10px; 104 | } 105 | .slider-dots { 106 | position: absolute; 107 | bottom: 40px; 108 | font-size: 11px; 109 | left: 50%; 110 | transform: translateX(-50%); 111 | display: flex; 112 | } 113 | 114 | .dot:hover{ 115 | font-size: 10px; 116 | } 117 | } 118 | 119 | 120 | @media (max-width:750px) { 121 | 122 | .image { 123 | width: 400px; 124 | height: 300px; 125 | border-radius: 10px; 126 | } 127 | .slider-dots { 128 | position: absolute; 129 | bottom: 10px; 130 | font-size: 11px; 131 | margin: 0 auto; 132 | display: flex; 133 | flex-wrap: wrap; 134 | justify-content: center; 135 | } 136 | 137 | .slider-dot { 138 | margin-top: 10px; 139 | } 140 | .dot:hover{ 141 | font-size: 10px; 142 | } 143 | .left-arrow { 144 | position: absolute; 145 | top: 80%; 146 | right: 100px; 147 | font-size: 3rem; 148 | color: #000; 149 | z-index: 10; 150 | cursor: pointer; 151 | user-select: none; 152 | } 153 | .right-arrow { 154 | position: absolute; 155 | top: 80%; 156 | right: 100px; 157 | font-size: 3rem; 158 | color: #000; 159 | z-index: 10; 160 | cursor: pointer; 161 | user-select: none; 162 | } 163 | .dot { 164 | margin: 5px 5px; 165 | cursor: pointer; 166 | } 167 | .dot:hover{ 168 | font-size: 11px; 169 | } 170 | } 171 | 172 | 173 | @media (max-width:450px) { 174 | .slider { 175 | position: relative; 176 | height: 50vh; 177 | display: flex; 178 | justify-content: center; 179 | align-items: center; 180 | } 181 | .image { 182 | width: 300px; 183 | height: 200px; 184 | border-radius: 10px; 185 | } 186 | .slider-dots { 187 | position: absolute; 188 | bottom: -80px; 189 | font-size: 11px; 190 | margin: 0 auto; 191 | display: flex; 192 | flex-wrap: wrap; 193 | justify-content: center; 194 | } 195 | } -------------------------------------------------------------------------------- /src/css/ecommerce-category-product.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Cairo'); 2 | 3 | .align-center { 4 | -webkit-box-align: center; 5 | -ms-flex-align: center; 6 | align-items: center; 7 | } 8 | 9 | .flex-centerY-centerX { 10 | justify-content: center; 11 | -webkit-box-pack: center; 12 | -ms-flex-pack: center; 13 | justify-content: center; 14 | -webkit-box-align: center; 15 | -ms-flex-align: center; 16 | align-items: center; 17 | } 18 | 19 | body { 20 | background-color: #f7f7f7; 21 | } 22 | 23 | .page-wrapper { 24 | height: 100%; 25 | display: table; 26 | } 27 | 28 | .page-wrapper .page-inner { 29 | display: table-cell; 30 | vertical-align: middle; 31 | } 32 | 33 | .el-wrapper { 34 | width: 360px; 35 | padding: 15px; 36 | margin: 15px auto; 37 | background-color: #fff; 38 | border-radius: 10px; 39 | } 40 | 41 | @media (max-width: 991px) { 42 | .el-wrapper { 43 | width: 345px; 44 | border-radius: 10px; 45 | } 46 | } 47 | 48 | @media (max-width: 767px) { 49 | .el-wrapper { 50 | width: 290px; 51 | margin: 30px auto; 52 | border-radius: 10px; 53 | } 54 | 55 | } 56 | 57 | .el-wrapper:hover .h-bg { 58 | left: 0px; 59 | } 60 | 61 | .el-wrapper:hover .price { 62 | left: 20px; 63 | -webkit-transform: translateY(-50%); 64 | -ms-transform: translateY(-50%); 65 | -o-transform: translateY(-50%); 66 | transform: translateY(-50%); 67 | color: #818181; 68 | } 69 | 70 | .el-wrapper:hover .add-to-cart { 71 | left: 50%; 72 | } 73 | 74 | .el-wrapper:hover .img { 75 | webkit-filter: blur(7px); 76 | -o-filter: blur(7px); 77 | -ms-filter: blur(7px); 78 | filter: blur(7px); 79 | filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0'); 80 | opacity: 0.4; 81 | } 82 | 83 | .el-wrapper:hover .info-inner { 84 | bottom: 155px; 85 | } 86 | 87 | .el-wrapper:hover .a-size { 88 | -webkit-transition-delay: 300ms; 89 | -o-transition-delay: 300ms; 90 | transition-delay: 300ms; 91 | bottom: 50px; 92 | opacity: 1; 93 | } 94 | 95 | .el-wrapper .box-down { 96 | width: 100%; 97 | height: 60px; 98 | position: relative; 99 | overflow: hidden; 100 | } 101 | 102 | .el-wrapper .box-up { 103 | width: 100%; 104 | height: 300px; 105 | position: relative; 106 | overflow: hidden; 107 | text-align: center; 108 | } 109 | 110 | .el-wrapper .img { 111 | padding: 20px 0; 112 | width: 80%; 113 | height: 75%; 114 | -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 115 | -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 116 | -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 117 | transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 118 | /* ease-out */ 119 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 120 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 121 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 122 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 123 | /* ease-out */ 124 | } 125 | 126 | .h-bg { 127 | -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 128 | -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 129 | -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 130 | transition: all 800ms cubic-bezier(0, 0, 0.18, 1); 131 | /* ease-out */ 132 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 133 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 134 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 135 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 136 | /* ease-out */ 137 | width: 660px; 138 | height: 100%; 139 | background-color: #3f96cd; 140 | position: absolute; 141 | left: -659px; 142 | } 143 | 144 | .h-bg .h-bg-inner { 145 | width: 60%; 146 | height: 100%; 147 | background-color: #464646; 148 | } 149 | 150 | .info-inner { 151 | -webkit-transition: all 400ms cubic-bezier(0, 0, 0.18, 1); 152 | -moz-transition: all 400ms cubic-bezier(0, 0, 0.18, 1); 153 | -o-transition: all 400ms cubic-bezier(0, 0, 0.18, 1); 154 | transition: all 400ms cubic-bezier(0, 0, 0.18, 1); 155 | /* ease-out */ 156 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 157 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 158 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 159 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 160 | /* ease-out */ 161 | position: absolute; 162 | width: 100%; 163 | bottom: 25px; 164 | } 165 | 166 | .info-inner .p-name, 167 | .info-inner .p-company { 168 | display: block; 169 | } 170 | 171 | .info-inner .p-name { 172 | font-family: 'PT Sans', sans-serif; 173 | font-size: 18px; 174 | color: #252525; 175 | } 176 | 177 | .info-inner .p-company { 178 | font-family: 'Lato', sans-serif; 179 | font-size: 12px; 180 | text-transform: uppercase; 181 | color: #8c8c8c; 182 | } 183 | 184 | .a-size { 185 | -webkit-transition: all 300ms cubic-bezier(0, 0, 0.18, 1); 186 | -moz-transition: all 300ms cubic-bezier(0, 0, 0.18, 1); 187 | -o-transition: all 300ms cubic-bezier(0, 0, 0.18, 1); 188 | transition: all 300ms cubic-bezier(0, 0, 0.18, 1); 189 | /* ease-out */ 190 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 191 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 192 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 193 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 194 | /* ease-out */ 195 | position: absolute; 196 | width: 100%; 197 | bottom: -20px; 198 | font-family: 'PT Sans', sans-serif; 199 | color: #828282; 200 | opacity: 0; 201 | } 202 | 203 | .a-size .size { 204 | color: #252525; 205 | } 206 | 207 | .cart { 208 | display: block; 209 | /* position: absolute; */ 210 | width: 100%; 211 | height: 100%; 212 | top: 0; 213 | left: 0; 214 | font-family: 'Lato', sans-serif; 215 | font-weight: 700; 216 | 217 | } 218 | 219 | .cart .price { 220 | -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 221 | -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 222 | -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 223 | transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 224 | /* ease-out */ 225 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 226 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 227 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 228 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 229 | /* ease-out */ 230 | -webkit-transition-delay: 100ms; 231 | -o-transition-delay: 100ms; 232 | transition-delay: 100ms; 233 | display: block; 234 | position: absolute; 235 | top: 50%; 236 | left: 50%; 237 | -webkit-transform: translate(-50%, -50%); 238 | -ms-transform: translate(-50%, -50%); 239 | -o-transform: translate(-50%, -50%); 240 | transform: translate(-50%, -50%); 241 | font-size: 16px; 242 | color: #252525; 243 | 244 | } 245 | 246 | .cart .add-to-cart { 247 | -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 248 | -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 249 | -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 250 | transition: all 600ms cubic-bezier(0, 0, 0.18, 1); 251 | /* ease-out */ 252 | -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 253 | -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 254 | -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 255 | transition-timing-function: cubic-bezier(0, 0, 0.18, 1); 256 | /* ease-out */ 257 | -webkit-transition-delay: 100ms; 258 | -o-transition-delay: 100ms; 259 | transition-delay: 100ms; 260 | display: block; 261 | position: absolute; 262 | top: 45%; 263 | left: 125%; 264 | -webkit-transform: translate(-25%, -50%); 265 | -ms-transform: translate(-25%, -50%); 266 | -o-transform: translate(-25%, -50%); 267 | transform: translate(-25%, -50%); 268 | 269 | } 270 | 271 | .cart .add-to-cart .txt { 272 | font-size: 12px; 273 | color: #fff; 274 | letter-spacing: 0.045em; 275 | text-transform: uppercase; 276 | white-space: nowrap; 277 | } 278 | 279 | .ProductContainer { 280 | margin-left: 10px; 281 | } 282 | 283 | a{ 284 | color: #fff; 285 | } 286 | 287 | .img{ 288 | border-radius: 10px; 289 | } 290 | 291 | 292 | 293 | .GoToCartLink{ 294 | text-decoration: none; 295 | } 296 | 297 | #PFTrash{ 298 | margin-top: auto; 299 | margin-bottom: -7px; 300 | padding-left: 100px; 301 | } 302 | 303 | .close{ 304 | cursor: pointer; 305 | } 306 | 307 | 308 | 309 | @media (max-width: 767px) { 310 | #FTrash{ 311 | padding-left: 50px; 312 | } 313 | 314 | /* .ProductContainer { 315 | padding: 25px; 316 | } */ 317 | 318 | 319 | } 320 | 321 | -------------------------------------------------------------------------------- /src/css/filter.css: -------------------------------------------------------------------------------- 1 | .MainContainer{ 2 | margin-top: 75px; 3 | display: block !important; 4 | } 5 | .FilterBar{ 6 | background-color: #f2f2f281; 7 | position: fixed !important; 8 | } 9 | .Product-Container-Catogory{ 10 | width: auto; 11 | border-radius: 10px; 12 | /* position: fixed; */ 13 | margin-left: 350px; 14 | } 15 | .categories{ 16 | background-color: white; 17 | border-radius: 10px; 18 | padding: 10px; 19 | } 20 | .Filterprice{ 21 | margin-top: 40px; 22 | background-color: white; 23 | border-radius: 10px; 24 | padding: 10px; 25 | } 26 | 27 | .priceText{ 28 | color: rgba(0, 0, 0, 0.6); 29 | font-family: "Roboto","Helvetica","Arial",sans-serif; 30 | padding: 10px; 31 | } 32 | 33 | .CategoriesText{ 34 | color: rgba(0, 0, 0, 0.6); 35 | font-family: "Roboto","Helvetica","Arial",sans-serif; 36 | padding: 10px; 37 | } 38 | 39 | .line{ 40 | color: rgba(0, 0, 0, 0.6); 41 | } 42 | 43 | 44 | 45 | 46 | .Filter-product-container{ 47 | display: flex; 48 | flex-wrap: nowrap; 49 | gap: 10px; 50 | overflow-x: auto; 51 | } 52 | 53 | .filter-category-container{ 54 | display: flex; 55 | flex-direction: column; 56 | gap: 10px; 57 | overflow-x: auto; 58 | width: 98%; 59 | flex: 0 0 auto; 60 | padding: 10px; 61 | border: 1px solid #ddd; 62 | border-radius: 20px; 63 | } 64 | .Filter-category-title{ 65 | font-size: 1.5rem; 66 | margin-bottom: 10px; 67 | font-family: system-ui; 68 | } 69 | 70 | .Price-Filter-Button{ 71 | top: 15px; 72 | align-items: center; 73 | align-self: center; 74 | width: 100%; 75 | } 76 | 77 | @media (max-width: 770px) { 78 | 79 | .Product-Container-Catogory { 80 | width: auto; 81 | border-radius: 10px; 82 | /* position: fixed; */ 83 | margin-left: 0px; 84 | margin-top: 50px; 85 | } 86 | .FilterBar { 87 | background-color: #f2f2f281; 88 | position: relative !important; 89 | } 90 | 91 | .categories{ 92 | width: 100% !important; 93 | } 94 | .Filterprice{ 95 | width: 100% !important; 96 | } 97 | 98 | } -------------------------------------------------------------------------------- /src/css/newCart.css: -------------------------------------------------------------------------------- 1 | 2 | .title{ 3 | margin-bottom: 5vh; 4 | } 5 | .card{ 6 | margin: auto; 7 | max-width: 950px; 8 | width: 90%; 9 | box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19); 10 | border-radius: 1rem; 11 | border: transparent; 12 | } 13 | @media(max-width:767px){ 14 | .card{ 15 | margin: 3vh auto; 16 | } 17 | } 18 | .cart{ 19 | background-color: #fff; 20 | padding: 4vh 5vh; 21 | border-bottom-left-radius: 1rem; 22 | border-top-left-radius: 1rem; 23 | } 24 | @media(max-width:767px){ 25 | .cart{ 26 | padding: 4vh; 27 | border-bottom-left-radius: unset; 28 | border-top-right-radius: 1rem; 29 | } 30 | } 31 | .summary{ 32 | background-color: #ddd; 33 | border-top-right-radius: 1rem; 34 | border-bottom-right-radius: 1rem; 35 | padding: 4vh; 36 | color: rgb(65, 65, 65); 37 | } 38 | @media(max-width:767px){ 39 | .summary{ 40 | border-top-right-radius: unset; 41 | border-bottom-left-radius: 1rem; 42 | } 43 | } 44 | .summary .col-2{ 45 | padding: 0; 46 | } 47 | .summary .col-10 48 | { 49 | padding: 0; 50 | }.row{ 51 | margin: 0; 52 | } 53 | .title b{ 54 | font-size: 1.5rem; 55 | } 56 | .main{ 57 | margin: 0; 58 | padding: 2vh 0; 59 | width: 100%; 60 | } 61 | .col-2, .col{ 62 | padding: 0 1vh; 63 | } 64 | a{ 65 | padding: 0 1vh; 66 | } 67 | .close{ 68 | margin-left: auto; 69 | font-size: 0.7rem; 70 | } 71 | img{ 72 | width: 3.5rem; 73 | } 74 | .back-to-shop{ 75 | margin-top: 4.5rem; 76 | } 77 | h5{ 78 | margin-top: 4vh; 79 | } 80 | hr{ 81 | margin-top: 1.25rem; 82 | } 83 | form{ 84 | padding: 2vh 0; 85 | } 86 | select{ 87 | border: 1px solid rgba(0, 0, 0, 0.137); 88 | padding: 1.5vh 1vh; 89 | margin-bottom: 4vh; 90 | outline: none; 91 | width: 100%; 92 | background-color: rgb(247, 247, 247); 93 | } 94 | input{ 95 | border: 1px solid rgba(0, 0, 0, 0.137); 96 | padding: 1vh; 97 | margin-bottom: 4vh; 98 | outline: none; 99 | width: 100%; 100 | background-color: rgb(247, 247, 247); 101 | } 102 | input:focus::-webkit-input-placeholder 103 | { 104 | color:transparent; 105 | } 106 | .btn{ 107 | background-color: #000; 108 | border-color: #000; 109 | color: white; 110 | width: 100%; 111 | font-size: 0.7rem; 112 | margin-top: 4vh; 113 | padding: 1vh; 114 | border-radius: 0; 115 | } 116 | .btn:focus{ 117 | box-shadow: none; 118 | outline: none; 119 | box-shadow: none; 120 | color: white; 121 | -webkit-box-shadow: none; 122 | -webkit-user-select: none; 123 | transition: none; 124 | } 125 | .btn:hover{ 126 | color: white; 127 | } 128 | .cartLinks{ 129 | text-decoration: none; 130 | color: black; 131 | } 132 | .cartLinks:hover{ 133 | text-decoration: none; 134 | color: black; 135 | } 136 | #code{ 137 | background-image: linear-gradient(to left, rgba(255, 255, 255, 0.253) , rgba(255, 255, 255, 0.185)), url("https://img.icons8.com/small/16/000000/long-arrow-right.png"); 138 | background-repeat: no-repeat; 139 | background-position-x: 95%; 140 | background-position-y: center; 141 | } -------------------------------------------------------------------------------- /src/helpers/helpers.js: -------------------------------------------------------------------------------- 1 | const moneyFormat = (amount) => { 2 | return amount.toLocaleString(); 3 | } 4 | 5 | export { moneyFormat }; -------------------------------------------------------------------------------- /src/hooks/FavoritesCount.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | 3 | export default function useFavoritesCount() { 4 | const [favoritesCount, setFavoritesCount] = useState(0); 5 | 6 | useEffect(() => { 7 | const favorites = JSON.parse(localStorage.getItem('Favorites')) || []; 8 | setFavoritesCount(favorites.length); 9 | }, []); 10 | 11 | const decreaseFavoritesCount = () => { 12 | setFavoritesCount(prevCount => prevCount - 1); 13 | }; 14 | 15 | return [favoritesCount, decreaseFavoritesCount]; 16 | } 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import reportWebVitals from './vars/reportWebVitals'; 4 | import App from './vars/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 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/routes/CartRoute.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0MeMo07/React-Shopping-Web-Application/0ac8524467637f5f4f4e3a8fc2dacbad6bc1442a/src/routes/CartRoute.jsx -------------------------------------------------------------------------------- /src/routes/FavoritesRoute.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0MeMo07/React-Shopping-Web-Application/0ac8524467637f5f4f4e3a8fc2dacbad6bc1442a/src/routes/FavoritesRoute.jsx -------------------------------------------------------------------------------- /src/routes/HomeRoute.jsx: -------------------------------------------------------------------------------- 1 | import { Route, Routes, Navigate } from 'react-router-dom'; 2 | import Home from '../app/Home' 3 | function HomeRouter({ children }) { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | 10 | 11 | export default HomeRouter; -------------------------------------------------------------------------------- /src/vars/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, Routes } from 'react-router-dom'; 3 | import Home from '../app/Home'; 4 | import Cart from '../app/Cart'; 5 | import Favorites from '../app/Favorites'; 6 | import Categories from '../app/Categories' 7 | import SearchBar from '../components/Search'; 8 | 9 | function App() { 10 | return ( 11 | <> 12 | 13 | 17 | 18 | 19 | } 20 | /> 21 | 25 | 26 | 27 | } 28 | /> 29 | } /> 30 | 31 | } /> 32 | 33 | 34 | ); 35 | } 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /src/vars/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 | -------------------------------------------------------------------------------- /src/vars/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 | --------------------------------------------------------------------------------