From 91eb301a71843d99b9aca06f0804732f00f8b071 Mon Sep 17 00:00:00 2001 From: Izzet Yusufov <17izzet@gmail.com12345Hello> Date: Fri, 1 Sep 2023 00:25:23 +0200 Subject: [PATCH 01/28] solution --- README.md | 49 +-- public/_new/img/picthree.bdd2e0fc.png | Bin 51400 -> 0 bytes .../shopByCategory/AccessoriesCategory.jpg | Bin 0 -> 67932 bytes .../category-accessories.png | Bin .../{ => shopByCategory}/category-phones.png | Bin .../{ => shopByCategory}/category-tablets.png | Bin public/_new/img/shopByCategory/phones.png | Bin 0 -> 280076 bytes .../img/shopByCategory/phonesCategory.jpg | Bin 0 -> 50568 bytes .../img/shopByCategory/tabletsCategory.jpg | Bin 0 -> 67594 bytes .../img/{ => slider}/banner-accessories.png | Bin .../_new/img/{ => slider}/banner-phones.png | Bin .../_new/img/{ => slider}/banner-tablets.png | Bin public/index.html | 16 +- src/App.scss | 127 +++++++- src/App.tsx | 47 ++- src/Context/StoragesContext.tsx | 138 ++++++++ src/components/Breadcrumbs/Breadcrumbs.scss | 39 +++ src/components/Breadcrumbs/Breadcrumbs.tsx | 57 ++++ src/components/Breadcrumbs/index.js | 1 + .../ButtonAndLike/ButtonAndLike.scss | 73 +++++ .../ButtonAndLike/ButtonAndLike.tsx | 121 +++++++ src/components/CartCard/CartCard.scss | 151 +++++++++ src/components/CartCard/CartCard.tsx | 109 +++++++ src/components/CartCard/index.js | 1 + src/components/CategoryCard/CategoryCard.scss | 23 ++ src/components/CategoryCard/CategoryCard.tsx | 34 ++ src/components/CategoryCard/index.js | 1 + src/components/CategoryList/CategoryList.scss | 4 + src/components/CategoryList/CategoryList.tsx | 50 +++ src/components/CategoryList/index.js | 1 + src/components/Footer/Footer.scss | 28 ++ src/components/Footer/Footer.tsx | 85 +++++ src/components/Footer/index.js | 1 + src/components/Loader/Loader.scss | 26 ++ src/components/Loader/Loader.tsx | 7 + src/components/Loader/index.tsx | 1 + src/components/MainSlider/MainSlider.scss | 69 ++++ src/components/MainSlider/MainSlider.tsx | 122 +++++++ src/components/MainSlider/index.js | 1 + src/components/Navbar/Navbar.scss | 209 ++++++++++++ src/components/Navbar/Navbar.tsx | 157 +++++++++ src/components/Navbar/index.js | 1 + .../NoSearchResults/NoSearchResults.tsx | 3 + src/components/NotFoundPage/NotFoundPage.scss | 11 + src/components/NotFoundPage/NotFoundPage.tsx | 13 + src/components/Pagination/Pagination.scss | 38 +++ src/components/Pagination/Pagination.tsx | 64 ++++ src/components/Pagination/index.js | 1 + src/components/ProductCard/ProductCard.scss | 120 +++++++ src/components/ProductCard/ProductCard.tsx | 116 +++++++ src/components/ProductCard/index.js | 1 + .../ProductDetails/ProductDetails.scss | 201 ++++++++++++ .../ProductDetailsImages.scss | 38 +++ .../ProductDetailsImages.tsx | 43 +++ src/components/ProductDetailsImages/index.js | 1 + src/components/ProductList/ProductList.scss | 130 ++++++++ src/components/ProductList/ProductList.tsx | 183 +++++++++++ src/components/ProductList/index.js | 1 + .../ProductSlider/ProductSlider.scss | 39 +++ .../ProductSlider/ProductSlider.tsx | 120 +++++++ src/components/ProductSlider/index.js | 1 + src/components/TitleOfPage/TitleOfPage.scss | 64 ++++ src/components/TitleOfPage/TitleOfPage.tsx | 71 ++++ src/components/TitleOfPage/index.js | 1 + src/enum/ButtonsSize.ts | 6 + src/enum/Fetch.ts | 6 + src/enum/SliderTitles.ts | 5 + src/fonts/Mont-Bold.otf | Bin 0 -> 171324 bytes src/fonts/Mont-Regular.otf | Bin 0 -> 173160 bytes src/fonts/Mont-SemiBold.otf | Bin 0 -> 172500 bytes src/hooks/useFetch.tsx | 49 +++ src/hooks/useLocalStorage.tsx | 27 ++ src/images/LOGO.svg | 6 + src/images/icons/Arrow-up.svg | 5 + src/images/icons/Close-gray.svg | 5 + src/images/icons/Close.svg | 5 + src/images/icons/Favourites-active.svg | 5 + src/images/icons/Favourites.svg | 5 + src/images/icons/Home.svg | 6 + src/images/icons/Minus-disabled.svg | 5 + src/images/icons/Minus.svg | 5 + src/images/icons/Plus.svg | 5 + src/images/icons/Search.svg | 5 + src/images/icons/arrow-down-gray.svg | 5 + src/images/icons/arrow-left-gray.svg | 5 + src/images/icons/arrow-left.svg | 5 + src/images/icons/arrow-right-gray.svg | 5 + src/images/icons/arrow-right.svg | 5 + src/images/icons/arrow-up-gray.svg | 3 + src/images/icons/bag.svg | 7 + src/index.tsx | 8 +- src/pages/Accessories.tsx | 20 ++ src/pages/Cart.tsx | 27 ++ src/pages/Constacts.tsx | 20 ++ src/pages/Favorites.tsx | 38 +++ src/pages/Home.tsx | 33 ++ src/pages/Phones.tsx | 103 ++++++ src/pages/ProductDetails.tsx | 307 ++++++++++++++++++ src/pages/Rights.tsx | 17 + src/pages/Tablets.tsx | 20 ++ src/styles/arrow.scss | 49 +++ src/styles/vars.scss | 8 + src/types/Phone.tsx | 15 + src/types/PhoneInfo.ts | 20 ++ src/utils/fetchClient.tsx | 36 ++ 105 files changed, 3880 insertions(+), 35 deletions(-) delete mode 100644 public/_new/img/picthree.bdd2e0fc.png create mode 100644 public/_new/img/shopByCategory/AccessoriesCategory.jpg rename public/_new/img/{ => shopByCategory}/category-accessories.png (100%) rename public/_new/img/{ => shopByCategory}/category-phones.png (100%) rename public/_new/img/{ => shopByCategory}/category-tablets.png (100%) create mode 100644 public/_new/img/shopByCategory/phones.png create mode 100644 public/_new/img/shopByCategory/phonesCategory.jpg create mode 100644 public/_new/img/shopByCategory/tabletsCategory.jpg rename public/_new/img/{ => slider}/banner-accessories.png (100%) rename public/_new/img/{ => slider}/banner-phones.png (100%) rename public/_new/img/{ => slider}/banner-tablets.png (100%) create mode 100644 src/Context/StoragesContext.tsx create mode 100644 src/components/Breadcrumbs/Breadcrumbs.scss create mode 100644 src/components/Breadcrumbs/Breadcrumbs.tsx create mode 100644 src/components/Breadcrumbs/index.js create mode 100644 src/components/ButtonAndLike/ButtonAndLike.scss create mode 100644 src/components/ButtonAndLike/ButtonAndLike.tsx create mode 100644 src/components/CartCard/CartCard.scss create mode 100644 src/components/CartCard/CartCard.tsx create mode 100644 src/components/CartCard/index.js create mode 100644 src/components/CategoryCard/CategoryCard.scss create mode 100644 src/components/CategoryCard/CategoryCard.tsx create mode 100644 src/components/CategoryCard/index.js create mode 100644 src/components/CategoryList/CategoryList.scss create mode 100644 src/components/CategoryList/CategoryList.tsx create mode 100644 src/components/CategoryList/index.js create mode 100644 src/components/Footer/Footer.scss create mode 100644 src/components/Footer/Footer.tsx create mode 100644 src/components/Footer/index.js create mode 100644 src/components/Loader/Loader.scss create mode 100644 src/components/Loader/Loader.tsx create mode 100644 src/components/Loader/index.tsx create mode 100644 src/components/MainSlider/MainSlider.scss create mode 100644 src/components/MainSlider/MainSlider.tsx create mode 100644 src/components/MainSlider/index.js create mode 100644 src/components/Navbar/Navbar.scss create mode 100644 src/components/Navbar/Navbar.tsx create mode 100644 src/components/Navbar/index.js create mode 100644 src/components/NoSearchResults/NoSearchResults.tsx create mode 100644 src/components/NotFoundPage/NotFoundPage.scss create mode 100644 src/components/NotFoundPage/NotFoundPage.tsx create mode 100644 src/components/Pagination/Pagination.scss create mode 100644 src/components/Pagination/Pagination.tsx create mode 100644 src/components/Pagination/index.js create mode 100644 src/components/ProductCard/ProductCard.scss create mode 100644 src/components/ProductCard/ProductCard.tsx create mode 100644 src/components/ProductCard/index.js create mode 100644 src/components/ProductDetails/ProductDetails.scss create mode 100644 src/components/ProductDetailsImages/ProductDetailsImages.scss create mode 100644 src/components/ProductDetailsImages/ProductDetailsImages.tsx create mode 100644 src/components/ProductDetailsImages/index.js create mode 100644 src/components/ProductList/ProductList.scss create mode 100644 src/components/ProductList/ProductList.tsx create mode 100644 src/components/ProductList/index.js create mode 100644 src/components/ProductSlider/ProductSlider.scss create mode 100644 src/components/ProductSlider/ProductSlider.tsx create mode 100644 src/components/ProductSlider/index.js create mode 100644 src/components/TitleOfPage/TitleOfPage.scss create mode 100644 src/components/TitleOfPage/TitleOfPage.tsx create mode 100644 src/components/TitleOfPage/index.js create mode 100644 src/enum/ButtonsSize.ts create mode 100644 src/enum/Fetch.ts create mode 100644 src/enum/SliderTitles.ts create mode 100755 src/fonts/Mont-Bold.otf create mode 100755 src/fonts/Mont-Regular.otf create mode 100755 src/fonts/Mont-SemiBold.otf create mode 100644 src/hooks/useFetch.tsx create mode 100644 src/hooks/useLocalStorage.tsx create mode 100644 src/images/LOGO.svg create mode 100644 src/images/icons/Arrow-up.svg create mode 100644 src/images/icons/Close-gray.svg create mode 100644 src/images/icons/Close.svg create mode 100644 src/images/icons/Favourites-active.svg create mode 100644 src/images/icons/Favourites.svg create mode 100644 src/images/icons/Home.svg create mode 100644 src/images/icons/Minus-disabled.svg create mode 100644 src/images/icons/Minus.svg create mode 100644 src/images/icons/Plus.svg create mode 100644 src/images/icons/Search.svg create mode 100644 src/images/icons/arrow-down-gray.svg create mode 100644 src/images/icons/arrow-left-gray.svg create mode 100644 src/images/icons/arrow-left.svg create mode 100644 src/images/icons/arrow-right-gray.svg create mode 100644 src/images/icons/arrow-right.svg create mode 100644 src/images/icons/arrow-up-gray.svg create mode 100644 src/images/icons/bag.svg create mode 100644 src/pages/Accessories.tsx create mode 100644 src/pages/Cart.tsx create mode 100644 src/pages/Constacts.tsx create mode 100644 src/pages/Favorites.tsx create mode 100644 src/pages/Home.tsx create mode 100644 src/pages/Phones.tsx create mode 100644 src/pages/ProductDetails.tsx create mode 100644 src/pages/Rights.tsx create mode 100644 src/pages/Tablets.tsx create mode 100644 src/styles/arrow.scss create mode 100644 src/styles/vars.scss create mode 100644 src/types/Phone.tsx create mode 100644 src/types/PhoneInfo.ts create mode 100644 src/utils/fetchClient.tsx diff --git a/README.md b/README.md index efb45c226a..81712eb702 100644 --- a/README.md +++ b/README.md @@ -11,51 +11,51 @@ tо fetch data (use actual `productId` as a last part of the URL before `.json`) Store the Cart in the `localStorage` -## Tasks +## +Tasks - Create `pages`, `components` and `helpers` folders to structure your app - Use `scss` files per component - Use component names as BEM block names with all the other BEM rules applied -### App -1. Add `
` with links to all the pages +### +App ++. Add `
` with links to all the pages - The `Logo` and the `Nav` are aligned left - The `Favorites` and the `Cart` are aligned right -1. Use `NavLink` to highlight current page in `Header` -1. Add `