├── .firebaserc ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── assets │ └── carosel2 copy.jpg ├── manifest.json └── index.html ├── src ├── assets │ ├── crown.png │ ├── google.png │ ├── carosel1.jpg │ ├── carosel2.jpg │ ├── carousel.jpg │ └── searchIcon.png ├── components │ ├── UI │ │ ├── Spinner.js │ │ ├── Card.js │ │ ├── Spinner.css │ │ └── Card.css │ ├── Main │ │ ├── MainShops.css │ │ ├── MainShop.js │ │ ├── MainShop.css │ │ ├── Main.css │ │ ├── MainProduct.js │ │ ├── MainProduct.css │ │ ├── PopularProduct.js │ │ ├── PopularProducts.css │ │ ├── Carousel.js │ │ ├── Main.js │ │ ├── PopularProduct.css │ │ ├── MainShops.js │ │ ├── MainProducts.js │ │ └── PopularProducts.js │ ├── Comment │ │ ├── Comments.css │ │ ├── Comment.js │ │ ├── Comment.css │ │ ├── AddComment.css │ │ ├── AddComment.js │ │ └── Comments.js │ ├── Header │ │ ├── Orders │ │ │ ├── Orders.js │ │ │ ├── OrderDetail.js │ │ │ ├── OrderShow.js │ │ │ ├── Orders.css │ │ │ ├── OrderShow.css │ │ │ ├── OrdersDetail.css │ │ │ ├── OrderDetail.css │ │ │ ├── OrdersDetail.js │ │ │ ├── OrdersShow.js │ │ │ └── OrdersShow.css │ │ ├── Cart │ │ │ ├── CartButton.js │ │ │ ├── CartButton.css │ │ │ ├── CartInfo.js │ │ │ ├── Cart.css │ │ │ ├── Cart.js │ │ │ └── CartInfo.css │ │ ├── Account │ │ │ ├── Account.js │ │ │ └── Account.css │ │ ├── Header.css │ │ ├── Header.js │ │ └── Searchbar │ │ │ ├── Searchbar.css │ │ │ └── Searchbar.js │ └── Footer │ │ ├── Footer.css │ │ └── Footer.js ├── store │ ├── orderSlice.js │ ├── AuthContext │ │ ├── authContext.js │ │ └── reducer.js │ ├── index.js │ ├── uiSlice.js │ ├── productApiSlice.js │ └── cartSlice.js ├── App.css ├── reportWebVitals.js ├── index.css ├── pages │ ├── Payment │ │ ├── PaymentProduct.js │ │ ├── PaymentProduct.css │ │ ├── PaymentRight.js │ │ ├── PaymentRight.css │ │ ├── Payment.css │ │ └── Payment.js │ ├── Product │ │ ├── Product.js │ │ ├── Product.css │ │ ├── ProductDetail.js │ │ ├── Products.js │ │ └── ProductDetail.css │ └── Login │ │ ├── Login.css │ │ └── Login.js ├── firebase.js ├── index.js └── App.js ├── firebase.json ├── .gitignore ├── package.json ├── .firebase └── hosting.YnVpbGQ.cache └── README.md /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "e-commerce-e76f2" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/crown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/src/assets/crown.png -------------------------------------------------------------------------------- /src/assets/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/src/assets/google.png -------------------------------------------------------------------------------- /src/assets/carosel1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/src/assets/carosel1.jpg -------------------------------------------------------------------------------- /src/assets/carosel2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/src/assets/carosel2.jpg -------------------------------------------------------------------------------- /src/assets/carousel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/src/assets/carousel.jpg -------------------------------------------------------------------------------- /src/assets/searchIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/src/assets/searchIcon.png -------------------------------------------------------------------------------- /public/assets/carosel2 copy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MertCankaya/e-commerce/HEAD/public/assets/carosel2 copy.jpg -------------------------------------------------------------------------------- /src/components/UI/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Spinner.css" 3 | 4 | const Spinner = () => { 5 | return
; 6 | }; 7 | 8 | export default Spinner; 9 | -------------------------------------------------------------------------------- /src/components/Main/MainShops.css: -------------------------------------------------------------------------------- 1 | .mainShops{ 2 | width: 100%; 3 | } 4 | 5 | .mainShops__container { 6 | display: flex; 7 | justify-content: space-between; 8 | margin: 1.2rem 0; 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/components/UI/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Card.css"; 3 | 4 | const Card = (props) => { 5 | return
{props.children}
; 6 | }; 7 | 8 | export default Card; 9 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/store/orderSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const orderSlice = createSlice({ 4 | name: "order", 5 | initialState: { 6 | orders: [], 7 | }, 8 | reducers: { 9 | replaceOrder(state, action) { 10 | state.orders = action.payload; 11 | }, 12 | }, 13 | }); 14 | 15 | export const orderActions = orderSlice.actions; 16 | export default orderSlice; 17 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App__subtotalMessage { 2 | display: flex; 3 | justify-content: center; 4 | font-size: 3rem; 5 | margin-top: 15rem; 6 | } 7 | 8 | @media only screen and (max-width: 64rem) { 9 | .App__subtotalMessage{ 10 | font-size: 2rem; 11 | } 12 | } 13 | @media only screen and (max-width: 48rem) { 14 | .App__subtotalMessage{ 15 | font-size: 1.2rem; 16 | } 17 | } 18 | 19 | 20 | -------------------------------------------------------------------------------- /.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 | 25 | .env.local -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/store/AuthContext/authContext.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useContext, useReducer } from "react"; 2 | 3 | export const StateContext = createContext(); 4 | 5 | export const StateProvider = ({ reducer, initialState, children }) => ( 6 | 7 | {children} 8 | 9 | ); 10 | 11 | export const useStateValue = () => useContext(StateContext); 12 | -------------------------------------------------------------------------------- /src/components/Main/MainShop.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "../UI/Card"; 3 | 4 | const MainShop = ({ mainTitle, title, image, onListHandler }) => { 5 | return ( 6 | 7 | 11 | 12 | ); 13 | }; 14 | 15 | export default MainShop; 16 | -------------------------------------------------------------------------------- /src/components/Main/MainShop.css: -------------------------------------------------------------------------------- 1 | .mainShop { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: flex-start; 5 | background-color: cadetblue; 6 | padding: 1.2rem; 7 | } 8 | 9 | .mainShop__mainTitle { 10 | color: white; 11 | margin-bottom: 1rem; 12 | font-size: 1.5rem; 13 | } 14 | 15 | .mainShop__image { 16 | height: 17rem; 17 | } 18 | 19 | .mainShop__title { 20 | margin-top: 1.4rem; 21 | font-size: 1.2rem; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Comment/Comments.css: -------------------------------------------------------------------------------- 1 | .comments__title { 2 | display: flex; 3 | font-size: 4rem; 4 | margin-top: 7rem; 5 | margin-left: 13%; 6 | } 7 | 8 | @media only screen and (max-width: 75rem) { 9 | .comments__title { 10 | font-size: 2.4rem; 11 | margin-top: 4rem; 12 | } 13 | } 14 | 15 | @media only screen and (max-width: 48rem) { 16 | .comments__title { 17 | font-size: 1.3rem; 18 | margin-top: -1.3rem; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/Main/Main.css: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | 6 | .main__container { 7 | width: 75%; 8 | } 9 | 10 | 11 | @media only screen and (max-width: 1200px) { 12 | .popularProduct__title { 13 | font-size: 0.75rem; 14 | } 15 | .main__container{ 16 | width: 90%; 17 | } 18 | } 19 | 20 | @media only screen and (max-width: 1024px) { 21 | .main__container { 22 | width: 100%; 23 | } 24 | } 25 | 26 | -------------------------------------------------------------------------------- /src/components/Main/MainProduct.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "../UI/Card"; 3 | 4 | const MainProduct = ({ mainTitle, title, image, onProductHandler }) => { 5 | return ( 6 | 7 | 12 | 13 | ); 14 | }; 15 | 16 | export default MainProduct; 17 | -------------------------------------------------------------------------------- /src/components/Header/Orders/Orders.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { useStateValue } from "../../../store/AuthContext/authContext"; 4 | import "./Orders.css"; 5 | 6 | const Orders = () => { 7 | const [{ user }] = useStateValue(); 8 | return ( 9 | 10 | Orders 11 | 12 | ); 13 | }; 14 | 15 | export default Orders; 16 | -------------------------------------------------------------------------------- /src/components/Main/MainProduct.css: -------------------------------------------------------------------------------- 1 | .mainProduct { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: flex-start; 5 | background-color: chocolate; 6 | padding: 1.2rem; 7 | } 8 | 9 | .mainProduct__mainTitle { 10 | color: white; 11 | margin-bottom: 1rem; 12 | font-size: 1.5rem; 13 | } 14 | 15 | .mainProduct__image { 16 | height: 17rem; 17 | } 18 | 19 | .mainProduct__title { 20 | margin-top: 1.4rem; 21 | font-size: 1.2rem; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Comment/Comment.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Comment.css"; 3 | 4 | const Comment = ({ name, message }) => { 5 | return ( 6 |
7 |
8 |
9 |

{name}

10 |

{message}

11 |
12 |
13 |
14 | ); 15 | }; 16 | 17 | export default Comment; 18 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | 3 | import cartSlice from "./cartSlice"; 4 | import orderSlice from "./orderSlice"; 5 | import productApiSlice from "./productApiSlice"; 6 | import uiSlice from "./uiSlice"; 7 | 8 | const store = configureStore({ 9 | reducer: { 10 | cart: cartSlice.reducer, 11 | ui: uiSlice.reducer, 12 | productApi: productApiSlice.reducer, 13 | order: orderSlice.reducer 14 | }, 15 | }); 16 | 17 | export default store; 18 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | border: none; 5 | } 6 | 7 | 8 | body { 9 | margin: 0; 10 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 11 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 12 | sans-serif; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | code { 18 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 19 | monospace; 20 | } 21 | -------------------------------------------------------------------------------- /src/store/uiSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const uiSlice = createSlice({ 4 | name: "ui", 5 | initialState: { payment: false, spinner: false }, 6 | reducers: { 7 | openPayment(state) { 8 | state.payment = true; 9 | }, 10 | closePayment(state) { 11 | state.payment = false; 12 | }, 13 | openSpinner(state) { 14 | state.spinner = true; 15 | }, 16 | closeSpinner(state) { 17 | state.spinner = false; 18 | }, 19 | }, 20 | }); 21 | 22 | export const uiActions = uiSlice.actions; 23 | export default uiSlice; 24 | -------------------------------------------------------------------------------- /src/store/AuthContext/reducer.js: -------------------------------------------------------------------------------- 1 | export const initialState = { 2 | user: null, 3 | }; 4 | 5 | export const actionTypes = { 6 | SET_USER: "SET_USER", 7 | DROP_USER: "DROP_USER", 8 | }; 9 | 10 | const reducer = (state, action) => { 11 | switch (action.type) { 12 | case actionTypes.SET_USER: 13 | return { 14 | ...state, 15 | user: action.user, 16 | }; 17 | case actionTypes.DROP_USER: 18 | return { 19 | ...state, 20 | user: null, 21 | }; 22 | 23 | default: 24 | break; 25 | } 26 | }; 27 | 28 | export default reducer; 29 | -------------------------------------------------------------------------------- /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/Payment/PaymentProduct.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./PaymentProduct.css"; 3 | 4 | const PaymentProduct = ({ image, title, price, quantity }) => { 5 | return ( 6 |
7 |
8 | {title} 9 |
10 |

{title}

11 |

${price}

12 |

Quantity:{quantity}

13 |
14 |
15 |
16 | ); 17 | }; 18 | 19 | export default PaymentProduct; 20 | -------------------------------------------------------------------------------- /src/components/Header/Orders/OrderDetail.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import "./OrderDetail.css"; 4 | 5 | const OrderDetail = ({ totalItem, productPostDate, productId, totalPrice }) => { 6 | return ( 7 | 8 |
9 |
10 |

{productPostDate}

11 |

Total Product: {totalItem}

12 |
13 |

${totalPrice.toFixed(2)}

14 |
15 | 16 | ); 17 | }; 18 | 19 | export default OrderDetail; -------------------------------------------------------------------------------- /src/pages/Product/Product.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | import "./Product.css"; 5 | 6 | 7 | const Product = ({ title, image, price, webID }) => { 8 | return ( 9 |
10 | 11 |
12 | {title} 13 |
14 |

{title}

15 |

${price}

16 |
17 |
18 | 19 |
20 | ); 21 | }; 22 | 23 | export default Product; 24 | 25 | -------------------------------------------------------------------------------- /src/firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from "firebase/compat/app"; 2 | import "firebase/compat/auth"; 3 | 4 | const firebaseConfig = { 5 | apiKey: "AIzaSyAJbk7iMvGul3nbWZVEtnDCfjUyVEGZCYs", 6 | authDomain: "e-commerce-e76f2.firebaseapp.com", 7 | databaseURL: "https://e-commerce-e76f2-default-rtdb.firebaseio.com", 8 | projectId: "e-commerce-e76f2", 9 | storageBucket: "e-commerce-e76f2.appspot.com", 10 | messagingSenderId: "1074505556237", 11 | appId: "1:1074505556237:web:a444f7fbf93e76e2f6d044", 12 | measurementId: "G-4BC1ZSJL0X", 13 | }; 14 | 15 | firebase.initializeApp(firebaseConfig); 16 | const auth = firebase.auth(); 17 | const provider = new firebase.auth.GoogleAuthProvider(); 18 | 19 | export { auth, provider }; 20 | -------------------------------------------------------------------------------- /src/components/Main/PopularProduct.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./PopularProduct.css"; 3 | 4 | const PopularProduct = ({ 5 | title, 6 | price, 7 | description, 8 | image, 9 | webID, 10 | onLinkProductLogic, 11 | }) => { 12 | const popularProductHandler = () => { 13 | onLinkProductLogic("keyboard", webID); 14 | }; 15 | return ( 16 | 23 | ); 24 | }; 25 | 26 | export default PopularProduct; 27 | -------------------------------------------------------------------------------- /src/components/Main/PopularProducts.css: -------------------------------------------------------------------------------- 1 | .popularProducts { 2 | padding: 1.3rem; 3 | background-color: #30415d; 4 | } 5 | 6 | .popularProducts > h2 { 7 | color: whitesmoke; 8 | margin-bottom: 1.2rem; 9 | font-size: 1.6rem; 10 | } 11 | 12 | .popularProducts__data { 13 | display: flex; 14 | justify-content: space-between; 15 | } 16 | 17 | @media only screen and (max-width: 80rem) { 18 | .popularProducts { 19 | padding: 0.8rem; 20 | } 21 | 22 | .popularProducts > h2 { 23 | margin-bottom: 0.9rem; 24 | font-size: 1rem; 25 | } 26 | } 27 | 28 | @media only screen and (max-width: 70rem) { 29 | .popularProducts { 30 | padding: 0.5rem 0.3rem; 31 | } 32 | .popularProducts > h2 { 33 | margin-bottom: .6rem; 34 | font-size: 1rem; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/Header/Orders/OrderShow.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./OrderShow.css"; 3 | 4 | const OrderShow = ({image,title,price,quantity,totalPrice }) => { 5 | return ( 6 |
7 |
8 |
9 |
10 | {title} 11 |
12 |

{title}

13 |

${price.toFixed(2)}

14 |

Quantity: {quantity}

15 |

Total price: ${totalPrice.toFixed(2)}

16 |
17 |
18 |
19 |
20 |
21 | ); 22 | }; 23 | 24 | export default OrderShow; 25 | -------------------------------------------------------------------------------- /src/components/Header/Orders/Orders.css: -------------------------------------------------------------------------------- 1 | .orders__link { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | text-decoration: none; 6 | color: whitesmoke; 7 | background-color: #031424; 8 | height: 100%; 9 | width: 5.4rem; 10 | font-size: 1.1rem; 11 | } 12 | 13 | .orders__link:hover { 14 | outline: 0.1rem solid whitesmoke; 15 | cursor: pointer; 16 | } 17 | 18 | .orders__link:active { 19 | background-color: #cf6766; 20 | } 21 | 22 | 23 | 24 | @media only screen and (max-width: 64rem) { 25 | .orders__link { 26 | width: 4rem; 27 | height: 100%; 28 | font-size: 0.8rem; 29 | } 30 | } 31 | 32 | 33 | @media only screen and (max-width: 48rem) { 34 | .orders__link { 35 | width: 2rem; 36 | height: 80%; 37 | font-size: 0.4rem; 38 | } 39 | } 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/Header/Cart/CartButton.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ShoppingBasketIcon from "@mui/icons-material/ShoppingBasket"; 3 | 4 | import "./CartButton.css"; 5 | 6 | import { useSelector } from "react-redux"; 7 | import { useNavigate } from "react-router"; 8 | 9 | const CartButton = () => { 10 | const navigate = useNavigate(); 11 | const cartQuantity = useSelector((state) => state.cart.totalQuantity); 12 | 13 | const cartButtonHandler = () => { 14 | navigate("/subtotal"); 15 | }; 16 | return ( 17 | 23 | ); 24 | }; 25 | 26 | export default CartButton; 27 | -------------------------------------------------------------------------------- /src/components/UI/Spinner.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | display: inline-block; 3 | width: 15rem; 4 | height: 3rem; 5 | margin: 17% auto; 6 | text-align: center; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | .spinner:after { 13 | content: " "; 14 | display: block; 15 | width: 4rem; 16 | height: 4rem; 17 | margin: 4rem; 18 | border-radius: 50%; 19 | border: 0.5rem solid #30415D; 20 | border-color: #30415D transparent #30415D transparent; 21 | animation: spinner 1s linear infinite; 22 | } 23 | @keyframes spinner { 24 | 0% { 25 | transform: rotate(0deg); 26 | } 27 | 100% { 28 | transform: rotate(360deg); 29 | } 30 | } 31 | 32 | 33 | @media only screen and (max-width: 48rem) { 34 | .spinner:after{ 35 | width: 1.5rem; 36 | height: 1.5rem; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/store/productApiSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const productApiSlice = createSlice({ 4 | name: "productApi", 5 | initialState: { 6 | keyword: "", 7 | fetchApiProcess: false, 8 | apiData: [], 9 | comments: [], 10 | }, 11 | reducers: { 12 | apiKeyword(state, action) { 13 | state.keyword = action.payload; 14 | }, 15 | startApiProcess(state) { 16 | state.fetchApiProcess = true; 17 | }, 18 | stopApiProcess(state) { 19 | state.fetchApiProcess = false; 20 | }, 21 | apiData(state, action) { 22 | state.apiData = action.payload.items; 23 | }, 24 | apiComments(state, action) { 25 | state.comments = action.payload.items; 26 | }, 27 | }, 28 | }); 29 | 30 | export const apiActions = productApiSlice.actions; 31 | export default productApiSlice; 32 | -------------------------------------------------------------------------------- /src/components/Main/Carousel.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Slide } from "react-slideshow-image"; 3 | 4 | import "react-slideshow-image/dist/styles.css"; 5 | 6 | import img1 from "../../assets/carosel1.jpg"; 7 | import img2 from "../../assets/carosel2.jpg"; 8 | import img3 from "../../assets/carousel.jpg"; 9 | 10 | const Carousel = () => { 11 | const style = { 12 | textAlign: "center", 13 | fontSize: "30px", 14 | height: "27.4rem", 15 | width: "100%", 16 | borderRadius: "40px 40px 0 0", 17 | marginTop: "2rem", 18 | 19 | }; 20 | 21 | return ( 22 |
23 |
24 | 25 | img1 26 | img2 27 | img3 28 | 29 |
30 |
31 | ); 32 | }; 33 | 34 | export default Carousel; 35 | -------------------------------------------------------------------------------- /src/components/Header/Account/Account.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useNavigate } from "react-router"; 3 | import { useStateValue } from "../../../store/AuthContext/authContext"; 4 | import { actionTypes } from "../../../store/AuthContext/reducer"; 5 | import "./Account.css"; 6 | 7 | const Account = () => { 8 | const [{ user }, dispatch] = useStateValue(); 9 | 10 | const navigate = useNavigate(); 11 | 12 | const buttonHandler = () => { 13 | if (!user) { 14 | navigate("/login"); 15 | } else { 16 | dispatch({ 17 | type: actionTypes.DROP_USER, 18 | }); 19 | } 20 | }; 21 | 22 | return ( 23 | <> 24 | 28 | 29 | ); 30 | }; 31 | 32 | export default Account; 33 | -------------------------------------------------------------------------------- /src/components/Header/Orders/OrderShow.css: -------------------------------------------------------------------------------- 1 | .orderShow__info { 2 | display: flex; 3 | margin-bottom: 0.1rem; 4 | background-color: #30415d; 5 | padding: 1.2rem; 6 | color: whitesmoke; 7 | } 8 | 9 | .orderShow__detail { 10 | margin-left: 1.6rem; 11 | } 12 | 13 | .orderShow__detail > h2 { 14 | margin-bottom: 1rem; 15 | font-size: 1.6rem; 16 | } 17 | 18 | .orderShow__detail > h3 { 19 | font-size: 1.3rem; 20 | margin-bottom: 0.5rem; 21 | } 22 | 23 | @media only screen and (max-width: 48rem) { 24 | .orderShow { 25 | padding-bottom: 0rem; 26 | } 27 | 28 | .orderShow__container { 29 | width: 100%; 30 | padding-bottom: 0rem; 31 | } 32 | 33 | .orderShow__info { 34 | margin-bottom: 0.1rem; 35 | } 36 | 37 | .orderShow__detail { 38 | font-size: 0.7rem; 39 | } 40 | .orderShow__detail > h2 { 41 | font-size: 0.7rem; 42 | } 43 | 44 | .orderShow__detail > h3 { 45 | font-size: 0.6rem; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/Header/Account/Account.css: -------------------------------------------------------------------------------- 1 | .account { 2 | height: 100%; 3 | width: 5.4rem; 4 | background-color: #031424; 5 | } 6 | 7 | .account:hover { 8 | outline: 0.1rem solid whitesmoke; 9 | cursor: pointer; 10 | } 11 | 12 | .account:active { 13 | background-color: #cf6766; 14 | } 15 | 16 | .account__userName { 17 | color: white; 18 | } 19 | 20 | .account__login { 21 | font-size: 1.1rem; 22 | color: whitesmoke; 23 | } 24 | 25 | @media only screen and (max-width: 64rem) { 26 | .account { 27 | width: 4rem; 28 | height: 100%; 29 | } 30 | .account__login { 31 | font-size: 0.8rem; 32 | } 33 | .account__userName { 34 | font-size: 0.7rem; 35 | } 36 | } 37 | 38 | 39 | @media only screen and (max-width: 48rem) { 40 | .account { 41 | width: 2rem; 42 | height: 80%; 43 | margin-bottom: .75rem; 44 | } 45 | .account__login { 46 | font-size: 0.4rem; 47 | } 48 | .account__userName { 49 | font-size: 0.3rem; 50 | } 51 | } -------------------------------------------------------------------------------- /src/components/Header/Orders/OrdersDetail.css: -------------------------------------------------------------------------------- 1 | .orders__detail { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | 7 | .orders__container { 8 | display: flex; 9 | flex-direction: column; 10 | margin-right: 0rem; 11 | margin-left: 0rem; 12 | margin-top: 3.4rem; 13 | } 14 | 15 | .orders__container__wrapper { 16 | width: 60rem; 17 | } 18 | 19 | .orders__container__title { 20 | font-size: 2.7rem; 21 | } 22 | 23 | 24 | @media only screen and (max-width: 64rem) { 25 | .orders__container__wrapper { 26 | width: 40rem; 27 | } 28 | 29 | .orders__container__title { 30 | font-size: 1.8rem; 31 | margin-left: 1rem; 32 | } 33 | } 34 | 35 | 36 | @media only screen and (max-width: 48rem) { 37 | .orders__container__wrapper { 38 | width: 18rem; 39 | } 40 | 41 | .orders__container__title { 42 | margin-top: -1rem; 43 | font-size: 1.8rem; 44 | margin-left: 0rem; 45 | margin-bottom: -.6rem; 46 | } 47 | } 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/components/Main/Main.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Carousel from "./Carousel"; 3 | import PopularProducts from "./PopularProducts"; 4 | 5 | import "./Main.css"; 6 | import MainShops from "./MainShops"; 7 | import { uiActions } from "../../store/uiSlice"; 8 | import { useDispatch } from "react-redux"; 9 | import { useLocation } from "react-router-dom"; 10 | import MainProducts from "./MainProducts"; 11 | import Footer from "../Footer/Footer"; 12 | 13 | const Main = () => { 14 | const dispatch = useDispatch(); 15 | const location = useLocation(); 16 | 17 | if (location.pathname === "/home") { 18 | dispatch(uiActions.closePayment()); 19 | } 20 | 21 | return ( 22 | <> 23 |
24 |
25 | 26 | 27 | 28 | 29 |
30 |
31 |