├── src ├── components │ ├── assets │ │ ├── asa │ │ └── images │ │ │ └── logo.svg │ ├── flashDeals │ │ ├── style.css │ │ ├── FlashDeals.jsx │ │ └── FlashCard.jsx │ ├── newarrivals │ │ ├── style.css │ │ ├── Cart.jsx │ │ ├── Ndata.js │ │ └── NewArrivals.jsx │ ├── MainPage │ │ ├── Slider.jsx │ │ ├── Home.jsx │ │ ├── Home.css │ │ ├── Sdata.js │ │ ├── SlideCard.jsx │ │ └── Categories.jsx │ ├── wrapper │ │ ├── style.css │ │ └── Wrapper.jsx │ ├── top │ │ ├── style.css │ │ ├── Tdata.js │ │ ├── TopCate.jsx │ │ └── TopCart.jsx │ ├── annocument │ │ └── Annocument.jsx │ ├── discount │ │ ├── Discount.jsx │ │ ├── Dcard.jsx │ │ └── Ddata.js │ ├── shops │ │ ├── Shop.jsx │ │ ├── style.css │ │ ├── Catg.jsx │ │ ├── Sdata.js │ │ └── ShopCart.jsx │ └── Data.js ├── index.js ├── common │ ├── header │ │ ├── Header.jsx │ │ ├── Head.jsx │ │ ├── Search.jsx │ │ ├── Navbar.jsx │ │ └── Header.css │ ├── footer │ │ ├── style.css │ │ └── Footer.jsx │ └── Cart │ │ ├── style.css │ │ └── Cart.jsx ├── pages │ └── Pages.jsx ├── App.js └── App.css ├── public ├── favicon.png ├── images │ ├── banner-1.png │ ├── banner-2.png │ ├── category │ │ ├── cat-1.png │ │ ├── cat-2.png │ │ ├── cat-3.png │ │ ├── cat1.png │ │ ├── cat10.png │ │ ├── cat11.png │ │ ├── cat2.png │ │ ├── cat3.jpg │ │ ├── cat3.png │ │ ├── cat4.png │ │ ├── cat5.png │ │ ├── cat6.png │ │ ├── cat7.png │ │ ├── cat8.png │ │ └── cat9.png │ ├── flash │ │ ├── flash-1.png │ │ ├── flash-2.png │ │ ├── flash-3.png │ │ ├── flash-4.png │ │ └── flash-5.png │ ├── shops │ │ ├── shops-1.png │ │ ├── shops-10.png │ │ ├── shops-2.png │ │ ├── shops-3.png │ │ ├── shops-4.png │ │ ├── shops-5.png │ │ ├── shops-6.png │ │ ├── shops-7.png │ │ ├── shops-8.png │ │ └── shops-9.png │ ├── top │ │ ├── category-1.png │ │ ├── category-2.png │ │ └── category-3.png │ ├── SlideCard │ │ ├── slide-1.png │ │ ├── slide-2.png │ │ ├── slide-3.png │ │ └── slide-4.png │ ├── arrivals │ │ ├── arrivals1.png │ │ ├── arrivals2.png │ │ ├── arrivals3.png │ │ ├── arrivals4.png │ │ ├── arrivals5.png │ │ └── arrivals6.png │ └── discount │ │ ├── discount-1.png │ │ ├── discount-2.png │ │ ├── discount-3.png │ │ ├── discount-4.png │ │ ├── discount-5.png │ │ ├── discount-6.png │ │ ├── discount-7.png │ │ ├── discount-8.png │ │ └── discount-9.png ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/components/assets/asa: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/favicon.png -------------------------------------------------------------------------------- /public/images/banner-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/banner-1.png -------------------------------------------------------------------------------- /public/images/banner-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/banner-2.png -------------------------------------------------------------------------------- /src/components/flashDeals/style.css: -------------------------------------------------------------------------------- 1 | .flash { 2 | background: #f6f9fc; 3 | padding: 50px 0; 4 | } 5 | -------------------------------------------------------------------------------- /public/images/category/cat-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat-1.png -------------------------------------------------------------------------------- /public/images/category/cat-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat-2.png -------------------------------------------------------------------------------- /public/images/category/cat-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat-3.png -------------------------------------------------------------------------------- /public/images/category/cat1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat1.png -------------------------------------------------------------------------------- /public/images/category/cat10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat10.png -------------------------------------------------------------------------------- /public/images/category/cat11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat11.png -------------------------------------------------------------------------------- /public/images/category/cat2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat2.png -------------------------------------------------------------------------------- /public/images/category/cat3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat3.jpg -------------------------------------------------------------------------------- /public/images/category/cat3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat3.png -------------------------------------------------------------------------------- /public/images/category/cat4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat4.png -------------------------------------------------------------------------------- /public/images/category/cat5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat5.png -------------------------------------------------------------------------------- /public/images/category/cat6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat6.png -------------------------------------------------------------------------------- /public/images/category/cat7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat7.png -------------------------------------------------------------------------------- /public/images/category/cat8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat8.png -------------------------------------------------------------------------------- /public/images/category/cat9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/category/cat9.png -------------------------------------------------------------------------------- /public/images/flash/flash-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/flash/flash-1.png -------------------------------------------------------------------------------- /public/images/flash/flash-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/flash/flash-2.png -------------------------------------------------------------------------------- /public/images/flash/flash-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/flash/flash-3.png -------------------------------------------------------------------------------- /public/images/flash/flash-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/flash/flash-4.png -------------------------------------------------------------------------------- /public/images/flash/flash-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/flash/flash-5.png -------------------------------------------------------------------------------- /public/images/shops/shops-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-1.png -------------------------------------------------------------------------------- /public/images/shops/shops-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-10.png -------------------------------------------------------------------------------- /public/images/shops/shops-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-2.png -------------------------------------------------------------------------------- /public/images/shops/shops-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-3.png -------------------------------------------------------------------------------- /public/images/shops/shops-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-4.png -------------------------------------------------------------------------------- /public/images/shops/shops-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-5.png -------------------------------------------------------------------------------- /public/images/shops/shops-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-6.png -------------------------------------------------------------------------------- /public/images/shops/shops-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-7.png -------------------------------------------------------------------------------- /public/images/shops/shops-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-8.png -------------------------------------------------------------------------------- /public/images/shops/shops-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/shops/shops-9.png -------------------------------------------------------------------------------- /public/images/top/category-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/top/category-1.png -------------------------------------------------------------------------------- /public/images/top/category-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/top/category-2.png -------------------------------------------------------------------------------- /public/images/top/category-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/top/category-3.png -------------------------------------------------------------------------------- /public/images/SlideCard/slide-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/SlideCard/slide-1.png -------------------------------------------------------------------------------- /public/images/SlideCard/slide-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/SlideCard/slide-2.png -------------------------------------------------------------------------------- /public/images/SlideCard/slide-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/SlideCard/slide-3.png -------------------------------------------------------------------------------- /public/images/SlideCard/slide-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/SlideCard/slide-4.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/arrivals/arrivals1.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/arrivals/arrivals2.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/arrivals/arrivals3.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/arrivals/arrivals4.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/arrivals/arrivals5.png -------------------------------------------------------------------------------- /public/images/arrivals/arrivals6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/arrivals/arrivals6.png -------------------------------------------------------------------------------- /public/images/discount/discount-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/discount/discount-1.png -------------------------------------------------------------------------------- /public/images/discount/discount-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/discount/discount-2.png -------------------------------------------------------------------------------- /public/images/discount/discount-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/discount/discount-3.png -------------------------------------------------------------------------------- /public/images/discount/discount-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/discount/discount-4.png -------------------------------------------------------------------------------- /public/images/discount/discount-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/discount/discount-5.png -------------------------------------------------------------------------------- /public/images/discount/discount-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/discount/discount-6.png -------------------------------------------------------------------------------- /public/images/discount/discount-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/discount/discount-7.png -------------------------------------------------------------------------------- /public/images/discount/discount-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/discount/discount-8.png -------------------------------------------------------------------------------- /public/images/discount/discount-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azamjonbro/magazin/HEAD/public/images/discount/discount-9.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ReactDOM from "react-dom" 3 | import App from "./App" 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById("root") 10 | ) 11 | -------------------------------------------------------------------------------- /src/components/newarrivals/style.css: -------------------------------------------------------------------------------- 1 | .heading img { 2 | width: 40px; 3 | height: 40px; 4 | margin-top: 5px; 5 | } 6 | .NewArrivals h4 { 7 | font-weight: 400; 8 | } 9 | .NewArrivals span { 10 | color: #e94560; 11 | font-size: 15px; 12 | font-weight: 500; 13 | } 14 | .NewArrivals .box img { 15 | width: 100%; 16 | height: 100%; 17 | } 18 | -------------------------------------------------------------------------------- /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 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/common/header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./Header.css" 3 | import Head from "./Head" 4 | import Search from "./Search" 5 | import Navbar from "./Navbar" 6 | 7 | const Header = ({ CartItem }) => { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | export default Header 18 | -------------------------------------------------------------------------------- /src/components/MainPage/Slider.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import SlideCard from "./SlideCard" 3 | 4 | const SliderHome = () => { 5 | return ( 6 | <> 7 |
8 |
9 | 10 |
11 |
12 | 13 | ) 14 | } 15 | 16 | export default SliderHome 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/MainPage/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Categories from "./Categories" 3 | import "./Home.css" 4 | import SliderHome from "./Slider" 5 | 6 | const Home = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 | ) 17 | } 18 | 19 | export default Home 20 | -------------------------------------------------------------------------------- /src/components/wrapper/style.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | text-align: center; 3 | } 4 | .wrapper .img { 5 | margin: auto; 6 | width: 70px; 7 | height: 70px; 8 | line-height: 70px; 9 | margin-bottom: 20px; 10 | } 11 | .wrapper .img i { 12 | font-size: 25px; 13 | } 14 | .wrapper .product { 15 | padding: 30px; 16 | } 17 | .wrapper .product h3 { 18 | font-weight: 500; 19 | } 20 | .wrapper p { 21 | font-size: 15px; 22 | margin-top: 20px; 23 | color: grey; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/flashDeals/FlashDeals.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import FlashCard from "./FlashCard" 3 | import "./style.css" 4 | 5 | const FlashDeals = ({ productItems, addToCart }) => { 6 | return ( 7 | <> 8 |
9 |
10 |
11 | 12 |

Flash Delas

13 |
14 | 15 |
16 |
17 | 18 | ) 19 | } 20 | 21 | export default FlashDeals 22 | -------------------------------------------------------------------------------- /src/components/newarrivals/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Ndata from "./Ndata" 3 | 4 | const Cart = () => { 5 | return ( 6 | <> 7 |
8 | {Ndata.map((val, index) => { 9 | return ( 10 |
11 |
12 | 13 |
14 |

{val.name}

15 | ${val.price} 16 |
17 | ) 18 | })} 19 |
20 | 21 | ) 22 | } 23 | 24 | export default Cart 25 | -------------------------------------------------------------------------------- /src/components/top/style.css: -------------------------------------------------------------------------------- 1 | .TopCate { 2 | position: relative; 3 | } 4 | .TopCate img { 5 | width: 100%; 6 | height: 100%; 7 | border-radius: 5px; 8 | } 9 | .TopCate .nametop { 10 | position: relative; 11 | width: 100%; 12 | } 13 | .TopCate .nametop span { 14 | background: #0f3460; 15 | color: #fff; 16 | font-size: 12px; 17 | padding: 5px 10px; 18 | border-radius: 50px; 19 | margin: 5px; 20 | position: absolute; 21 | top: 10px; 22 | } 23 | .TopCate .nametop .tleft { 24 | left: 0; 25 | } 26 | .TopCate .nametop .tright { 27 | background-color: aliceblue; 28 | color: black; 29 | position: absolute; 30 | right: 0; 31 | } 32 | -------------------------------------------------------------------------------- /src/components/MainPage/Home.css: -------------------------------------------------------------------------------- 1 | .homeSlide h1 { 2 | font-size: 45px; 3 | line-height: 55px; 4 | margin: 50px 0 20px 0; 5 | } 6 | .homeSlide p { 7 | margin: 20px 0; 8 | } 9 | .homeSlide ul { 10 | position: absolute; 11 | bottom: 20px; 12 | } 13 | .homeSlide ul li { 14 | border: 2px solid #b8b7b7; 15 | border-radius: 50%; 16 | padding: 10px; 17 | } 18 | .homeSlide ul li button { 19 | background: transparent !important; 20 | color: transparent !important; 21 | } 22 | .homeSlide ul li button::before { 23 | font-size: 15px !important; 24 | color: #0f3460; 25 | position: absolute; 26 | top: 2px; 27 | left: 0; 28 | margin: auto; 29 | } 30 | -------------------------------------------------------------------------------- /src/components/top/Tdata.js: -------------------------------------------------------------------------------- 1 | const Tdata = [ 2 | { 3 | cover: "./images/top/category-1.png", 4 | para: "headphone", 5 | desc: "3k orders this week", 6 | }, 7 | { 8 | cover: "./images/top/category-2.png", 9 | para: "watch", 10 | desc: "4k orders this week", 11 | }, 12 | { 13 | cover: "./images/top/category-3.png", 14 | para: "sunglass", 15 | desc: "6k orders this week", 16 | }, 17 | { 18 | cover: "./images/top/category-2.png", 19 | para: "watch", 20 | desc: "4k orders this week", 21 | }, 22 | { 23 | cover: "./images/top/category-3.png", 24 | para: "sunglass", 25 | desc: "6k orders this week", 26 | }, 27 | ] 28 | 29 | export default Tdata 30 | -------------------------------------------------------------------------------- /src/common/footer/style.css: -------------------------------------------------------------------------------- 1 | footer { 2 | background-color: #0f3460; 3 | padding: 100px 0; 4 | color: #fff; 5 | } 6 | footer h1 { 7 | margin-bottom: 30px; 8 | color: #e94560; 9 | font-weight: 800; 10 | font-style: italic; 11 | } 12 | footer .img { 13 | background-color: #0c2a4d; 14 | padding: 15px 20px; 15 | border-radius: 5px; 16 | } 17 | footer .img i { 18 | font-size: 20px; 19 | margin: 5px; 20 | } 21 | footer .img span { 22 | margin-top: 5px; 23 | } 24 | footer p { 25 | font-size: 14px; 26 | font-weight: 300; 27 | opacity: 0.5; 28 | margin-bottom: 20px; 29 | } 30 | footer h2 { 31 | margin-bottom: 20px; 32 | } 33 | footer li { 34 | margin-bottom: 10px; 35 | opacity: 0.5; 36 | } 37 | -------------------------------------------------------------------------------- /src/components/newarrivals/Ndata.js: -------------------------------------------------------------------------------- 1 | const Ndata = [ 2 | { 3 | cover: "./images/arrivals/arrivals1.png", 4 | name: "Sunglass", 5 | price: "150", 6 | }, 7 | { 8 | cover: "./images/arrivals/arrivals2.png", 9 | name: "Makeup", 10 | price: "250", 11 | }, 12 | { 13 | cover: "./images/arrivals/arrivals3.png", 14 | name: "Smart Watch", 15 | price: "50", 16 | }, 17 | { 18 | cover: "./images/arrivals/arrivals4.png", 19 | name: "Lipstick", 20 | price: "15", 21 | }, 22 | { 23 | cover: "./images/arrivals/arrivals5.png", 24 | name: "Green Plant", 25 | price: "10", 26 | }, 27 | { 28 | cover: "./images/arrivals/arrivals6.png", 29 | name: "Bonsai tree", 30 | price: "400", 31 | }, 32 | ] 33 | 34 | export default Ndata 35 | -------------------------------------------------------------------------------- /src/components/annocument/Annocument.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Annocument = () => { 4 | const mystyle = { 5 | width: "30%", 6 | height: "340px", 7 | } 8 | const mystyle1 = { 9 | width: "68%", 10 | height: "340px", 11 | } 12 | return ( 13 | <> 14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 |
24 | 25 | ) 26 | } 27 | 28 | export default Annocument 29 | -------------------------------------------------------------------------------- /src/components/top/TopCate.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./style.css" 3 | import TopCart from "./TopCart" 4 | 5 | const TopCate = () => { 6 | return ( 7 | <> 8 |
9 |
10 |
11 |
12 | 13 |

Top Categories

14 |
15 |
16 | View all 17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 | ) 25 | } 26 | 27 | export default TopCate 28 | -------------------------------------------------------------------------------- /src/components/discount/Discount.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Dcard from "./Dcard" 3 | 4 | const Discount = () => { 5 | return ( 6 | <> 7 |
8 |
9 |
10 |
11 | 12 |

Big Discounts

13 |
14 |
15 | View all 16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 | ) 24 | } 25 | 26 | export default Discount 27 | -------------------------------------------------------------------------------- /src/common/header/Head.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Head = () => { 4 | return ( 5 | <> 6 |
7 |
8 |
9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 🏳️‍⚧️ 18 | 19 | 🏳️‍⚧️ 20 | 21 |
22 |
23 |
24 | 25 | ) 26 | } 27 | 28 | export default Head 29 | -------------------------------------------------------------------------------- /src/components/newarrivals/NewArrivals.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Cart from "./Cart" 3 | import "./style.css" 4 | 5 | const NewArrivals = () => { 6 | return ( 7 | <> 8 |
9 |
10 |
11 |
12 | 13 |

New Arrivals

14 |
15 |
16 | View all 17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | ) 26 | } 27 | 28 | export default NewArrivals 29 | -------------------------------------------------------------------------------- /src/pages/Pages.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Home from "../components/MainPage/Home" 3 | import FlashDeals from "../components/flashDeals/FlashDeals" 4 | import TopCate from "../components/top/TopCate" 5 | import NewArrivals from "../components/newarrivals/NewArrivals" 6 | import Discount from "../components/discount/Discount" 7 | import Shop from "../components/shops/Shop" 8 | import Annocument from "../components/annocument/Annocument" 9 | import Wrapper from "../components/wrapper/Wrapper" 10 | 11 | const Pages = ({ productItems, addToCart, CartItem, shopItems }) => { 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ) 24 | } 25 | 26 | export default Pages 27 | -------------------------------------------------------------------------------- /src/components/discount/Dcard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Slider from "react-slick" 3 | import "slick-carousel/slick/slick.css" 4 | import "slick-carousel/slick/slick-theme.css" 5 | import Ddata from "./Ddata" 6 | import "../newarrivals/style.css" 7 | 8 | const Dcard = () => { 9 | const settings = { 10 | dots: false, 11 | infinite: true, 12 | slidesToShow: 6, 13 | slidesToScroll: 1, 14 | autoplay: true, 15 | } 16 | return ( 17 | <> 18 | 19 | {Ddata.map((value, index) => { 20 | return ( 21 | <> 22 |
23 |
24 | 25 |
26 |

{value.name}

27 | {value.price} 28 |
29 | 30 | ) 31 | })} 32 | 33 | 34 | ) 35 | } 36 | 37 | export default Dcard 38 | -------------------------------------------------------------------------------- /src/components/shops/Shop.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Catg from "./Catg" 3 | import ShopCart from "./ShopCart" 4 | import "./style.css" 5 | 6 | const Shop = ({ addToCart, shopItems }) => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | 13 |
14 |
15 |
16 |

Mobile Phones

17 |
18 |
19 | View all 20 | 21 |
22 |
23 |
24 | 25 |
26 |
27 |
28 |
29 | 30 | ) 31 | } 32 | 33 | export default Shop 34 | -------------------------------------------------------------------------------- /src/components/Data.js: -------------------------------------------------------------------------------- 1 | const Data = { 2 | productItems: [ 3 | { 4 | id: 1, 5 | discount: 50, 6 | cover: "./images/flash/flash-1.png", 7 | name: "Shoes", 8 | price: 100, 9 | }, 10 | { 11 | id: 2, 12 | discount: 40, 13 | cover: "./images/flash/flash-2.png", 14 | name: "Watch", 15 | price: 20, 16 | }, 17 | { 18 | id: 3, 19 | discount: 40, 20 | cover: "./images/flash/flash-3.png", 21 | name: "Smart Mobile Black", 22 | price: 200, 23 | }, 24 | { 25 | id: 4, 26 | discount: 40, 27 | cover: "./images/flash/flash-4.png", 28 | name: "Smart Watch Black", 29 | price: 50, 30 | }, 31 | { 32 | id: 5, 33 | discount: 50, 34 | cover: "./images/flash/flash-1.png", 35 | name: "Shoes", 36 | price: 100, 37 | }, 38 | { 39 | id: 6, 40 | discount: 50, 41 | cover: "./images/flash/flash-3.png", 42 | name: "Shoes", 43 | price: 100, 44 | }, 45 | ], 46 | } 47 | export default Data 48 | -------------------------------------------------------------------------------- /src/components/top/TopCart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Slider from "react-slick" 3 | import "slick-carousel/slick/slick.css" 4 | import "slick-carousel/slick/slick-theme.css" 5 | import Tdata from "./Tdata" 6 | 7 | const TopCart = () => { 8 | const settings = { 9 | dots: false, 10 | infinite: true, 11 | slidesToShow: 3, 12 | slidesToScroll: 1, 13 | autoplay: true, 14 | } 15 | return ( 16 | <> 17 | 18 | {Tdata.map((value, index) => { 19 | return ( 20 | <> 21 |
22 |
23 | {value.para} 24 | {value.desc} 25 |
26 |
27 | 28 |
29 |
30 | 31 | ) 32 | })} 33 | 34 | 35 | ) 36 | } 37 | 38 | export default TopCart 39 | -------------------------------------------------------------------------------- /src/components/MainPage/Sdata.js: -------------------------------------------------------------------------------- 1 | const Sdata = [ 2 | { 3 | id: 1, 4 | title: "50% Off For Your First Shopping", 5 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis consequat eu, quam etiam at quis ut convallis.", 6 | cover: "./images/SlideCard/slide-1.png", 7 | }, 8 | { 9 | id: 2, 10 | title: "50% Off For Your First Shopping", 11 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis consequat eu, quam etiam at quis ut convallis.", 12 | cover: "./images/SlideCard/slide-2.png", 13 | }, 14 | { 15 | id: 3, 16 | title: "50% Off For Your First Shopping", 17 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis consequat eu, quam etiam at quis ut convallis.", 18 | cover: "./images/SlideCard/slide-3.png", 19 | }, 20 | { 21 | id: 4, 22 | title: "50% Off For Your First Shopping", 23 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis consequat eu, quam etiam at quis ut convallis.", 24 | cover: "./images/SlideCard/slide-4.png", 25 | }, 26 | ] 27 | export default Sdata 28 | -------------------------------------------------------------------------------- /src/components/discount/Ddata.js: -------------------------------------------------------------------------------- 1 | const Ddata = [ 2 | { 3 | cover: "./images/discount/discount-1.png", 4 | name: "BenuX 2022", 5 | price: "$250", 6 | }, 7 | { 8 | cover: "./images/discount/discount-2.png", 9 | name: "Sony TV 1080p", 10 | price: "$450", 11 | }, 12 | { 13 | cover: "./images/discount/discount-3.png", 14 | name: "Sony PS4", 15 | price: "$50", 16 | }, 17 | { 18 | cover: "./images/discount/discount-4.png", 19 | name: "Setgearr 2022", 20 | price: "$100", 21 | }, 22 | { 23 | cover: "./images/discount/discount-5.png", 24 | name: "Tony BGB", 25 | price: "$20", 26 | }, 27 | { 28 | cover: "./images/discount/discount-6.png", 29 | name: "RG products", 30 | price: "$200", 31 | }, 32 | { 33 | cover: "./images/discount/discount-7.png", 34 | name: "Ranasonic 2022", 35 | price: "$300", 36 | }, 37 | { 38 | cover: "./images/discount/discount-8.png", 39 | name: "Pune HD", 40 | price: "$30", 41 | }, 42 | { 43 | cover: "./images/discount/discount-9.png", 44 | name: "Sony CCTV", 45 | price: "$80", 46 | }, 47 | ] 48 | export default Ddata 49 | -------------------------------------------------------------------------------- /src/components/MainPage/SlideCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Sdata from "./Sdata" 3 | import Slider from "react-slick" 4 | import "slick-carousel/slick/slick.css" 5 | import "slick-carousel/slick/slick-theme.css" 6 | 7 | const SlideCard = () => { 8 | const settings = { 9 | dots: true, 10 | infinite: true, 11 | slidesToShow: 1, 12 | slidesToScroll: 1, 13 | autoplay: true, 14 | appendDots: (dots) => { 15 | return
    {dots}
16 | }, 17 | } 18 | return ( 19 | <> 20 | 21 | {Sdata.map((value, index) => { 22 | return ( 23 | <> 24 |
25 |
26 |

{value.title}

27 |

{value.desc}

28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 | ) 36 | })} 37 | 38 | 39 | ) 40 | } 41 | 42 | export default SlideCard 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bonik-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.8.1", 7 | "@emotion/styled": "^11.8.1", 8 | "@mui/material": "^5.4.4", 9 | "@mui/styled-engine-sc": "^5.4.2", 10 | "@testing-library/jest-dom": "^5.16.2", 11 | "@testing-library/react": "^12.1.3", 12 | "@testing-library/user-event": "^13.5.0", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "5.0.0", 17 | "react-slick": "^0.28.1", 18 | "slick-carousel": "^1.8.1", 19 | "styled-components": "^5.3.3", 20 | "web-vitals": "^2.1.4" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/shops/style.css: -------------------------------------------------------------------------------- 1 | .shop .category { 2 | padding: 30px; 3 | height: 90vh; 4 | } 5 | .chead h1 { 6 | font-size: 20px; 7 | margin-bottom: 20px; 8 | } 9 | .chead h1:nth-child(2) { 10 | opacity: 0.5; 11 | border-left: 3px solid rgba(0, 0, 0, 0.5); 12 | padding-left: 70px; 13 | } 14 | .shop .category .box { 15 | background-color: #f6f9fc; 16 | margin: 15px 0; 17 | padding: 5px 10px; 18 | transition: 0.5s; 19 | border-radius: 5px; 20 | } 21 | .shop .category img { 22 | width: auto; 23 | height: auto; 24 | } 25 | .shop .category .box:hover { 26 | background-color: #fff; 27 | box-shadow: rgb(43 52 69 / 10%) 0px 4px 16px; 28 | } 29 | .shop .box2 { 30 | margin-top: 100px !important; 31 | text-align: center; 32 | } 33 | .shop .category button { 34 | padding: 10px; 35 | background: none; 36 | text-align: center; 37 | font-size: 17px; 38 | font-weight: 500; 39 | } 40 | 41 | .shop .contentWidth { 42 | margin-left: 30px; 43 | } 44 | 45 | .grid1 { 46 | display: grid; 47 | grid-template-columns: repeat(3, 1fr); 48 | grid-gap: 20px; 49 | } 50 | .shop .product img { 51 | width: 100%; 52 | height: 100%; 53 | } 54 | .shop .product { 55 | transition: 0.5s; 56 | } 57 | .shop .product:hover { 58 | box-shadow: rgb(43 52 69 / 10%) 0px 4px 16px; 59 | } 60 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | React Js Ecommerce Template 12 | 13 | 14 | 15 |
16 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/components/shops/Catg.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Catg = () => { 4 | const data = [ 5 | { 6 | cateImg: "./images/category/cat-1.png", 7 | cateName: "Apple", 8 | }, 9 | { 10 | cateImg: "./images/category/cat-2.png", 11 | cateName: "Samasung", 12 | }, 13 | { 14 | cateImg: "./images/category/cat-1.png", 15 | cateName: "Oppo", 16 | }, 17 | { 18 | cateImg: "./images/category/cat-2.png", 19 | cateName: "Vivo", 20 | }, 21 | { 22 | cateImg: "./images/category/cat-1.png", 23 | cateName: "Redimi", 24 | }, 25 | { 26 | cateImg: "./images/category/cat-2.png", 27 | cateName: "Sony", 28 | }, 29 | ] 30 | return ( 31 | <> 32 |
33 |
34 |

Brands

35 |

Shops

36 |
37 | {data.map((value, index) => { 38 | return ( 39 |
40 | 41 | {value.cateName} 42 |
43 | ) 44 | })} 45 |
46 | 47 |
48 |
49 | 50 | ) 51 | } 52 | 53 | export default Catg 54 | -------------------------------------------------------------------------------- /src/common/header/Search.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import logo from "../../components/assets/images/logo.svg" 3 | import { Link } from "react-router-dom" 4 | 5 | const Search = ({ CartItem }) => { 6 | // fixed Header 7 | window.addEventListener("scroll", function () { 8 | const search = document.querySelector(".search") 9 | search.classList.toggle("active", window.scrollY > 100) 10 | }) 11 | 12 | return ( 13 | <> 14 |
15 |
16 |
17 | 18 |
19 | 20 |
21 | 22 | 23 | All Category 24 |
25 | 26 |
27 | 28 |
29 | 30 | 31 | {CartItem.length === 0 ? "" : CartItem.length} 32 | 33 |
34 |
35 |
36 |
37 | 38 | ) 39 | } 40 | 41 | export default Search 42 | -------------------------------------------------------------------------------- /src/components/wrapper/Wrapper.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./style.css" 3 | 4 | const Wrapper = () => { 5 | const data = [ 6 | { 7 | cover: , 8 | title: "Worldwide Delivery", 9 | decs: "We offer competitive prices on our 100 million plus product any range.", 10 | }, 11 | { 12 | cover: , 13 | title: "Safe Payment", 14 | decs: "We offer competitive prices on our 100 million plus product any range.", 15 | }, 16 | { 17 | cover: , 18 | title: "Shop With Confidence ", 19 | decs: "We offer competitive prices on our 100 million plus product any range.", 20 | }, 21 | { 22 | cover: , 23 | title: "24/7 Support ", 24 | decs: "We offer competitive prices on our 100 million plus product any range.", 25 | }, 26 | ] 27 | return ( 28 | <> 29 |
30 |
31 | {data.map((val, index) => { 32 | return ( 33 |
34 |
35 | {val.cover} 36 |
37 |

{val.title}

38 |

{val.decs}

39 |
40 | ) 41 | })} 42 |
43 |
44 | 45 | ) 46 | } 47 | 48 | export default Wrapper 49 | -------------------------------------------------------------------------------- /src/components/shops/Sdata.js: -------------------------------------------------------------------------------- 1 | const Sdata = { 2 | shopItems: [ 3 | { 4 | id: 7, 5 | cover: "./images/shops/shops-1.png", 6 | name: "Mapple Earphones", 7 | price: "180", 8 | discount: "25", 9 | }, 10 | { 11 | id: 8, 12 | cover: "./images/shops/shops-2.png", 13 | name: "Vivo android one", 14 | price: "120", 15 | discount: "10", 16 | }, 17 | { 18 | id: 9, 19 | cover: "./images/shops/shops-3.png", 20 | name: "Sony Light", 21 | price: "20", 22 | discount: "50 ", 23 | }, 24 | { 25 | id: 10, 26 | cover: "./images/shops/shops-4.png", 27 | name: "Iphone", 28 | price: "999", 29 | discount: "10 ", 30 | }, 31 | { 32 | id: 11, 33 | cover: "./images/shops/shops-5.png", 34 | name: "Ceats wireless earphone", 35 | price: "80", 36 | discount: "20 ", 37 | }, 38 | { 39 | id: 12, 40 | cover: "./images/shops/shops-7.png", 41 | name: "Redimi Phone", 42 | price: "400", 43 | discount: "20 ", 44 | }, 45 | { 46 | id: 13, 47 | cover: "./images/shops/shops-8.png", 48 | name: "Xeats Bluetooth earphones", 49 | price: "60", 50 | discount: "5 ", 51 | }, 52 | { 53 | id: 14, 54 | cover: "./images/shops/shops-9.png", 55 | name: "Airpod", 56 | price: "120", 57 | discount: "10", 58 | }, 59 | { 60 | id: 15, 61 | cover: "./images/shops/shops-10.png", 62 | name: "Silver Cap", 63 | price: "5", 64 | discount: "2", 65 | }, 66 | ], 67 | } 68 | export default Sdata 69 | -------------------------------------------------------------------------------- /src/components/MainPage/Categories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Categories = () => { 4 | const data = [ 5 | { 6 | cateImg: "./images/category/cat1.png", 7 | cateName: "Fashion", 8 | }, 9 | { 10 | cateImg: "./images/category/cat2.png", 11 | cateName: "Electronic", 12 | }, 13 | { 14 | cateImg: "./images/category/cat3.png", 15 | cateName: "Cars", 16 | }, 17 | { 18 | cateImg: "./images/category/cat4.png", 19 | cateName: "Home & Garden", 20 | }, 21 | { 22 | cateImg: "./images/category/cat5.png", 23 | cateName: "Gifts", 24 | }, 25 | { 26 | cateImg: "./images/category/cat6.png", 27 | cateName: "Music", 28 | }, 29 | { 30 | cateImg: "./images/category/cat7.png", 31 | cateName: "Health & Beauty", 32 | }, 33 | { 34 | cateImg: "./images/category/cat8.png", 35 | cateName: "Pets", 36 | }, 37 | { 38 | cateImg: "./images/category/cat9.png", 39 | cateName: "Baby Toys", 40 | }, 41 | { 42 | cateImg: "./images/category/cat10.png", 43 | cateName: "Groceries", 44 | }, 45 | { 46 | cateImg: "./images/category/cat11.png", 47 | cateName: "Books", 48 | }, 49 | ] 50 | 51 | return ( 52 | <> 53 |
54 | {data.map((value, index) => { 55 | return ( 56 |
57 | 58 | {value.cateName} 59 |
60 | ) 61 | })} 62 |
63 | 64 | ) 65 | } 66 | 67 | export default Categories 68 | -------------------------------------------------------------------------------- /src/common/Cart/style.css: -------------------------------------------------------------------------------- 1 | .cart-items { 2 | background: #f6f9fc; 3 | height: auto; 4 | padding: 50px 0; 5 | } 6 | 7 | .cart-items .cart-details { 8 | width: 70%; 9 | } 10 | 11 | .cart-items .cart-total { 12 | width: 30%; 13 | margin-top: 30px; 14 | margin-left: 30px; 15 | height: 130px; 16 | } 17 | .cart-list { 18 | background: white; 19 | margin-top: 30px; 20 | } 21 | .cart-items .img { 22 | width: 150px; 23 | height: 150px; 24 | } 25 | .cart-items img { 26 | width: 100%; 27 | height: 100%; 28 | object-fit: contain; 29 | } 30 | .cart-items .cart-details h3 { 31 | font-size: 20px; 32 | font-weight: 500; 33 | margin-top: 20px; 34 | } 35 | .cart-items .cart-details h4 { 36 | font-size: 15px; 37 | font-weight: 400; 38 | margin-top: 50px; 39 | color: grey; 40 | } 41 | .cart-items h4 span { 42 | color: #e94560; 43 | margin-left: 20px; 44 | font-weight: 500; 45 | } 46 | .removeCart { 47 | background: none; 48 | font-size: 25px; 49 | text-align: right; 50 | margin-right: 10px; 51 | } 52 | .cartControl { 53 | margin-top: 50px; 54 | } 55 | .cartControl button { 56 | width: 40px; 57 | height: 40px; 58 | margin: 10px; 59 | border-radius: 5px; 60 | font-size: 20px; 61 | } 62 | .incCart { 63 | background: none; 64 | border: 1px solid rgb(3 0 71 / 9%); 65 | color: #e94560; 66 | } 67 | .desCart { 68 | background: #f6f9fc; 69 | } 70 | .cart-total h4 { 71 | font-size: 15px; 72 | font-weight: 400; 73 | } 74 | .cart-total h3 { 75 | font-size: 20px; 76 | font-weight: 500; 77 | color: #e94560; 78 | } 79 | .cart-total h2 { 80 | font-size: 18px; 81 | margin-bottom: 20px; 82 | border-bottom: 1px solid rgb(3 0 71 / 9%); 83 | padding-bottom: 10px; 84 | color: #e94560; 85 | } 86 | .no-items { 87 | color: #e94560; 88 | font-size: 18px; 89 | margin-top: 30px; 90 | height: 130px; 91 | } 92 | -------------------------------------------------------------------------------- /src/common/header/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import { Link } from "react-router-dom" 3 | 4 | const Navbar = () => { 5 | // Toogle Menu 6 | const [MobileMenu, setMobileMenu] = useState(false) 7 | return ( 8 | <> 9 |
10 |
11 |
12 | 13 |

14 | Categories 15 |

16 |
17 | 18 |
19 |
    setMobileMenu(false)}> 20 | {/*
      */} 21 |
    • 22 | home 23 |
      • 24 |
    • 25 | pages 26 |
      • 27 |
    • 28 | user account 29 |
      • 30 |
    • 31 | vendor account 32 |
      • 33 |
    • 34 | track my order 35 |
      • 36 |
    • 37 | contact 38 |
      • 39 |
    40 | 41 | 44 |
45 |
46 |
47 | 48 | ) 49 | } 50 | 51 | export default Navbar 52 | -------------------------------------------------------------------------------- /src/common/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./style.css" 3 | 4 | const Footer = () => { 5 | return ( 6 | <> 7 |
8 |
9 |
10 |

Bonik

11 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat et lectus vel ut sollicitudin elit at amet.

12 |
13 |
14 | 15 | Google Play 16 |
17 |
18 | 19 | App Store 20 |
21 |
22 |
23 | 24 |
25 |

About Us

26 |
    27 |
  • Careers
    • 28 |
  • Our Stores
    • 29 |
  • Our Cares
    • 30 |
  • Terms & Conditions
    • 31 |
  • Privacy Policy
    • 32 |
33 |
34 |
35 |

Customer Care

36 |
    37 |
  • Help Center
    • 38 |
  • How to Buy
    • 39 |
  • Track Your Order
    • 40 |
  • Corporate & Bulk Purchasing
    • 41 |
  • Returns & Refunds
    • 42 |
43 |
44 |
45 |

Contact Us

46 |
    47 |
  • 70 Washington Square South, New York, NY 10012, United States
    • 48 |
  • Email: uilib.help@gmail.com
    • 49 |
  • Phone: +1 1123 456 780
    • 50 |
51 |
52 |
53 |
54 | 55 | ) 56 | } 57 | 58 | export default Footer 59 | -------------------------------------------------------------------------------- /src/common/Cart/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import "./style.css" 3 | 4 | const Cart = ({ CartItem, addToCart, decreaseQty }) => { 5 | // Stpe: 7 calucate total of items 6 | const totalPrice = CartItem.reduce((price, item) => price + item.qty * item.price, 0) 7 | 8 | // prodcut qty total 9 | return ( 10 | <> 11 |
12 |
13 | {/* if hamro cart ma kunai pani item xaina bhane no diplay */} 14 | 15 |
16 | {CartItem.length === 0 &&

No Items are add in Cart

} 17 | 18 | {/* yasma hami le cart item lai display garaaxa */} 19 | {CartItem.map((item) => { 20 | const productQty = item.price * item.qty 21 | 22 | return ( 23 |
24 |
25 | 26 |
27 |
28 |

{item.name}

29 |

30 | ${item.price}.00 * {item.qty} 31 | ${productQty}.00 32 |

33 |
34 |
35 |
36 | 39 |
40 | {/* stpe: 5 41 | product ko qty lai inc ra des garne 42 | */} 43 |
44 | 47 | 50 |
51 |
52 | 53 |
54 |
55 | ) 56 | })} 57 |
58 | 59 |
60 |

Cart Summary

61 |
62 |

Total Price :

63 |

${totalPrice}.00

64 |
65 |
66 |
67 |
68 | 69 | ) 70 | } 71 | 72 | export default Cart 73 | -------------------------------------------------------------------------------- /src/components/flashDeals/FlashCard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import Slider from "react-slick" 3 | import "slick-carousel/slick/slick.css" 4 | import "slick-carousel/slick/slick-theme.css" 5 | 6 | const SampleNextArrow = (props) => { 7 | const { onClick } = props 8 | return ( 9 |
10 | 13 |
14 | ) 15 | } 16 | const SamplePrevArrow = (props) => { 17 | const { onClick } = props 18 | return ( 19 |
20 | 23 |
24 | ) 25 | } 26 | const FlashCard = ({ productItems, addToCart }) => { 27 | const [count, setCount] = useState(0) 28 | const increment = () => { 29 | setCount(count + 1) 30 | } 31 | const settings = { 32 | dots: false, 33 | infinite: true, 34 | speed: 500, 35 | slidesToShow: 4, 36 | slidesToScroll: 1, 37 | nextArrow: , 38 | prevArrow: , 39 | } 40 | 41 | return ( 42 | <> 43 | 44 | {productItems.map((productItems) => { 45 | return ( 46 |
47 |
48 |
49 | {productItems.discount}% Off 50 | 51 |
52 |
53 | 54 |
55 |
56 |
57 |

{productItems.name}

58 |
59 | 60 | 61 | 62 | 63 | 64 |
65 |
66 |

${productItems.price}.00

67 | {/* step : 3 68 | if hami le button ma click garryo bahne 69 | */} 70 | 73 |
74 |
75 |
76 |
77 | ) 78 | })} 79 | 80 | 81 | ) 82 | } 83 | 84 | export default FlashCard 85 | -------------------------------------------------------------------------------- /src/components/shops/ShopCart.jsx: -------------------------------------------------------------------------------- 1 | //import React, { useState } from "react" 2 | 3 | //const ShopCart = ({ addToCart, shopItems }) => { 4 | // const [count, setCount] = useState(0) 5 | // const increment = () => { 6 | // setCount(count + 1) 7 | // } 8 | 9 | // return ( 10 | // <> 11 | // {shopItems.map((shopItems) => { 12 | // return ( 13 | //
14 | //
15 | // {shopItems.discount}% Off 16 | // 17 | //
18 | //
19 | // 20 | //
21 | //
22 | //
23 | //

{shopItems.name}

24 | //
25 | // 26 | // 27 | // 28 | // 29 | // 30 | //
31 | //
32 | //

${shopItems.price}.00

33 | // 36 | //
37 | //
38 | //
39 | // ) 40 | // })} 41 | // 42 | // ) 43 | //} 44 | 45 | //export default ShopCart 46 | 47 | import React, { useState } from "react" 48 | 49 | const ShopCart = ({ shopItems, addToCart }) => { 50 | const [count, setCount] = useState(0) 51 | const increment = () => { 52 | setCount(count + 1) 53 | } 54 | 55 | return ( 56 | <> 57 | {shopItems.map((shopItems, index) => { 58 | return ( 59 |
60 |
61 |
62 | {shopItems.discount}% Off 63 | 64 |
65 |
66 | 67 |
68 |
69 |
70 |

{shopItems.name}

71 |
72 | 73 | 74 | 75 | 76 | 77 |
78 |
79 |

${shopItems.price}.00

80 | {/* step : 3 81 | if hami le button ma click garryo bahne 82 | */} 83 | 86 |
87 |
88 |
89 |
90 | ) 91 | })} 92 | 93 | ) 94 | } 95 | 96 | export default ShopCart 97 | -------------------------------------------------------------------------------- /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 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | 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) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | 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) 55 | 56 | ### Making a Progressive Web App 57 | 58 | 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) 59 | 60 | ### Advanced Configuration 61 | 62 | 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) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | 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) 71 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import "./App.css" 3 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom" 4 | import Header from "./common/header/Header" 5 | import Pages from "./pages/Pages" 6 | import Data from "./components/Data" 7 | import Cart from "./common/Cart/Cart" 8 | import Footer from "./common/footer/Footer" 9 | import Sdata from "./components/shops/Sdata" 10 | 11 | function App() { 12 | /* 13 | step1 : const { productItems } = Data 14 | lai pass garne using props 15 | 16 | Step 2 : item lai cart ma halne using useState 17 | ==> CartItem lai pass garre using props from ani import garrxa in cartItem ma 18 | 19 | Step 3 : chai flashCard ma xa button ma 20 | 21 | Step 4 : addToCart lai chai pass garne using props in pages and cart components 22 | */ 23 | 24 | //Step 1 : 25 | const { productItems } = Data 26 | const { shopItems } = Sdata 27 | 28 | //Step 2 : 29 | const [CartItem, setCartItem] = useState([]) 30 | 31 | //Step 4 : 32 | const addToCart = (product) => { 33 | // if hamro product alredy cart xa bhane find garna help garxa 34 | const productExit = CartItem.find((item) => item.id === product.id) 35 | // if productExit chai alredy exit in cart then will run fun() => setCartItem 36 | // ani inside => setCartItem will run => map() ani yo map() chai each cart ma 37 | // gayara check garxa if item.id ra product.id chai match bhayo bhane 38 | // productExit product chai display garxa 39 | // ani increase exits product QTY by 1 40 | // if item and product doesnt match then will add new items 41 | if (productExit) { 42 | setCartItem(CartItem.map((item) => (item.id === product.id ? { ...productExit, qty: productExit.qty + 1 } : item))) 43 | } else { 44 | // but if the product doesnt exit in the cart that mean if card is empty 45 | // then new product is added in cart and its qty is initalize to 1 46 | setCartItem([...CartItem, { ...product, qty: 1 }]) 47 | } 48 | } 49 | 50 | // Stpe: 6 51 | const decreaseQty = (product) => { 52 | // if hamro product alredy cart xa bhane find garna help garxa 53 | const productExit = CartItem.find((item) => item.id === product.id) 54 | 55 | // if product is exit and its qty is 1 then we will run a fun setCartItem 56 | // inside setCartItem we will run filter to check if item.id is match to product.id 57 | // if the item.id is doesnt match to product.id then that items are display in cart 58 | // else 59 | if (productExit.qty === 1) { 60 | setCartItem(CartItem.filter((item) => item.id !== product.id)) 61 | } else { 62 | // if product is exit and qty of that produt is not equal to 1 63 | // then will run function call setCartItem 64 | // inside setCartItem we will run map method 65 | // this map() will check if item.id match to produt.id then we have to desc the qty of product by 1 66 | setCartItem(CartItem.map((item) => (item.id === product.id ? { ...productExit, qty: productExit.qty - 1 } : item))) 67 | } 68 | } 69 | 70 | return ( 71 | <> 72 | 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |