{name}
+{models}
+
+
+ 
+
+ 
+
+ {category}
+
+ {name && (
+ <>
+
+
+ );
+};
diff --git a/src/components/Breadcrumbs/index.ts b/src/components/Breadcrumbs/index.ts
new file mode 100644
index 0000000000..ce977548b1
--- /dev/null
+++ b/src/components/Breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from './Breadcrumbs';
diff --git a/src/components/CategoryShop/CategoryShop.module.scss b/src/components/CategoryShop/CategoryShop.module.scss
new file mode 100644
index 0000000000..f416c86701
--- /dev/null
+++ b/src/components/CategoryShop/CategoryShop.module.scss
@@ -0,0 +1,52 @@
+@import '../../main';
+
+.categoryShop {
+ @include page-container;
+
+ .title {
+ @include font-set($mobile-h2);
+
+ margin-bottom: 24px;
+
+ @include on-tablet {
+ @include font-set($tablet-h2);
+ }
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ @include on-tablet {
+ flex-direction: row;
+ gap: 16px;
+ }
+ }
+
+ .article {
+ @include hover {
+ transform: scale(1.05);
+ }
+
+ flex-grow: 1;
+
+ &__img {
+ width: 100%;
+ margin-bottom: 24px;
+ display: flex;
+ }
+
+ &__name {
+ @include font-set($tablet-h4);
+
+ margin-bottom: 4px;
+ }
+
+ &__countModels {
+ @include font-set($body-text);
+
+ color: $secondary;
+ }
+ }
+}
diff --git a/src/components/CategoryShop/CategoryShop.tsx b/src/components/CategoryShop/CategoryShop.tsx
new file mode 100644
index 0000000000..1f4b0a3775
--- /dev/null
+++ b/src/components/CategoryShop/CategoryShop.tsx
@@ -0,0 +1,53 @@
+import style from './CategoryShop.module.scss';
+import mobiles from '../../assets/img/categoryShop/mobile.png';
+import tablet from '../../assets/img/categoryShop/tablet.png';
+import accessories from '../../assets/img/categoryShop/accessories.png';
+import { NavLink } from 'react-router-dom';
+import { useContext } from 'react';
+import { ProductContext } from '../../store/ProductProvider';
+
+export const CategoryShop = () => {
+ const { products } = useContext(ProductContext);
+
+ const countItemsByCategory = (category: string) => {
+ return [...products].filter(item => item.category === category);
+ };
+
+ const categories = [
+ {
+ img: mobiles,
+ name: 'Mobile phones',
+ models: `${countItemsByCategory('phones').length} models`,
+ href: 'phones',
+ },
+ {
+ img: tablet,
+ name: 'Tablets',
+ models: `${countItemsByCategory('tablets').length} models`,
+ href: 'tablets',
+ },
+ {
+ img: accessories,
+ name: 'Accessories',
+ models: `${countItemsByCategory('accessories').length} models`,
+ href: 'accessories',
+ },
+ ];
+
+ return (
+ {name}
+ + )} +Shop by category
+
+ {categories.map(({ img, name, models, href }) => (
+
+
+ 
+
+
+ ))}
+
+
+
+ );
+};
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
new file mode 100644
index 0000000000..2f29bad4e6
--- /dev/null
+++ b/src/components/Dropdown/index.ts
@@ -0,0 +1 @@
+export * from './Dropdown';
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 0000000000..6b56ab4ec8
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,98 @@
+@import '../../main';
+
+.footer {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ padding: 32px 16px;
+ background-color: $white;
+ box-shadow: 0 -1px 0 0 $elements;
+ margin-top: 56px;
+
+ @include on-tablet {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 32px;
+ gap: 0;
+ margin-top: 64px;
+ }
+
+ @include on-desktop {
+ margin-top: 80px;
+ }
+
+ .logo {
+ width: 89px;
+ height: 32px;
+
+ @include hover {
+ transform: scale(1.05);
+ }
+
+ &__link {
+ display: flex;
+ }
+ }
+
+ .nav {
+ &__list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-tablet {
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 32px;
+ }
+
+ @include on-desktop {
+ gap: 108px;
+ }
+ }
+
+ &__item {
+ width: fit-content;
+
+ @include hover {
+ transform: scale(1.05);
+ transform-origin: center;
+ }
+ }
+
+ &__link {
+ @include font-set($uppercase);
+
+ color: $secondary;
+ }
+ }
+
+ .backToTop {
+ all: unset;
+ display: flex;
+ gap: 16px;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ @include hover {
+ transform: scale(1.03);
+ }
+
+ &__text {
+ color: $secondary;
+ }
+
+ &__button {
+ background-image: url(../../assets/img/icons/arrow-up.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 32px;
+ width: 32px;
+ padding: 8px;
+ border: 1px solid $icons;
+ border-radius: 48px;
+ }
+ }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000000..34a27e6076
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,46 @@
+import style from './Footer.module.scss';
+import logo from '../../assets/img/logos/mainlogo.svg';
+import { NavLink } from 'react-router-dom';
+
+const navigation = [
+ {
+ href: 'https://github.com/Nazarin565/react_phone-catalog/',
+ name: 'Github',
+ },
+ {
+ href: 'https://github.com/Nazarin565',
+ name: 'Contacts',
+ },
+ {
+ href: 'https://github.com/Nazarin565',
+ name: 'Rights',
+ },
+];
+
+export const Footer = () => {
+ return (
+
+ );
+};
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 0000000000..ddcc5a9cd1
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/Loader/Loader.module.scss b/src/components/Loader/Loader.module.scss
new file mode 100644
index 0000000000..f0526463fd
--- /dev/null
+++ b/src/components/Loader/Loader.module.scss
@@ -0,0 +1,7 @@
+.container {
+ position: absolute;
+ inset: 0;
+ margin: auto;
+ width: 200px;
+ height: 200px;
+}
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
new file mode 100644
index 0000000000..8cd3c6d112
--- /dev/null
+++ b/src/components/Loader/Loader.tsx
@@ -0,0 +1,8 @@
+import spinner from '../../assets/img/spinners/Spinner.svg';
+import style from './Loader.module.scss';
+
+export const Loader = () => (
+ + {dropdownName === 'sort' ? 'Sort by' : 'Items on page'} +
+ setIsOpen(!isOpen)}
+ onBlur={() => setIsOpen(false)}
+ >
+
+ {isOpen && (
+
+ {dropdownName === 'sort' ? sortBy : itemsOnPage}
+
+
+
+ {variants.map(item => (
+
+ )}
+ handleSortChange(dropdownName, item)}
+ key={item}
+ >
+ {item}
+
+ ))}
+
+ 
+
+);
diff --git a/src/components/Loader/index.ts b/src/components/Loader/index.ts
new file mode 100644
index 0000000000..d5ce981151
--- /dev/null
+++ b/src/components/Loader/index.ts
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/components/Pagination/Pagination.module.scss b/src/components/Pagination/Pagination.module.scss
new file mode 100644
index 0000000000..62acc47663
--- /dev/null
+++ b/src/components/Pagination/Pagination.module.scss
@@ -0,0 +1,63 @@
+@import '../../main';
+
+.pagination {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ justify-content: center;
+
+ .arrow {
+ background-image: url(../../assets/img/icons/arrow-right-active.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ width: $icons-size;
+ height: $icons-size;
+ padding: 16px;
+ border: 1px solid $icons;
+ border-radius: 48px;
+ background-color: inherit;
+ cursor: pointer;
+
+ @include hover {
+ border: 1px solid $primary;
+ }
+
+ &:disabled {
+ border: 1px solid $elements;
+ background-image: url(../../assets/img/icons/arrow-right.svg);
+ cursor: default;
+ }
+
+ &--left {
+ transform: rotateY(180deg);
+ }
+ }
+
+ .numbers {
+ display: flex;
+ gap: 8px;
+
+ .number {
+ font-size: 14px;
+ width: 34px;
+ height: 34px;
+ line-height: 34px;
+ text-align: center;
+ border: 1px solid $elements;
+ border-radius: 16px;
+ background-color: inherit;
+ cursor: pointer;
+
+ &--notEmpty {
+ @include hover {
+ border: 1px solid $primary;
+ }
+ }
+
+ &--active {
+ background-color: $primary;
+ color: $white;
+ }
+ }
+ }
+}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
new file mode 100644
index 0000000000..4543cdd630
--- /dev/null
+++ b/src/components/Pagination/Pagination.tsx
@@ -0,0 +1,132 @@
+import { useEffect, useState } from 'react';
+import { Product } from '../../types/Product';
+import { getNumbers } from '../../utils/getNumbers';
+import style from './Pagination.module.scss';
+import cn from 'classnames';
+
+type Props = {
+ currentPage: number;
+ visibleList: Product[];
+ perPage: number;
+ onPageChange: (page: number) => void;
+};
+
+export const Pagination: React.FC
+
+
+
+ );
+};
diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts
new file mode 100644
index 0000000000..e016c96b72
--- /dev/null
+++ b/src/components/Pagination/index.ts
@@ -0,0 +1 @@
+export * from './Pagination';
diff --git a/src/components/ProductCard/ProductCard.module.scss b/src/components/ProductCard/ProductCard.module.scss
new file mode 100644
index 0000000000..412bf69d08
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,151 @@
+@import '../../main';
+
+.card {
+ padding: 32px;
+ border: 1px solid $elements;
+ border-radius: 8px;
+ background-color: $white;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ min-width: 232px;
+
+ @include on-tablet {
+ min-width: 245px;
+ }
+
+ @include on-desktop {
+ min-width: 277px;
+ }
+
+ @include hover {
+ box-shadow: 0 2px 16px 0 #0000001a;
+ }
+
+ .img {
+ height: 148px;
+ width: 129px;
+ margin: auto;
+ cursor: pointer;
+ object-fit: contain;
+
+ &__link {
+ display: flex;
+ }
+
+ @include on-tablet {
+ height: 202px;
+ width: 173px;
+ }
+
+ @include on-desktop {
+ height: 208px;
+ width: 196px;
+ }
+
+ @include hover {
+ transform: scale(1.03);
+ z-index: 5;
+ }
+ }
+
+ .title {
+ @include font-set($body-text);
+
+ padding-top: 16px;
+ height: 60px;
+ cursor: pointer;
+
+ @include hover {
+ color: #78787a;
+ }
+ }
+
+ .price {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &__actual {
+ @include font-set($tablet-h3);
+ }
+
+ &__old {
+ font-size: 22px;
+ font-weight: 600;
+ line-height: 28.12px;
+ color: $secondary;
+ text-decoration: line-through;
+ }
+ }
+
+ .divider {
+ border: 1px solid $elements;
+ }
+
+ .specs {
+ padding-block: 8px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &__item {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__key {
+ font-weight: 700;
+ color: $secondary;
+ }
+
+ &__value {
+ font-weight: 700;
+ }
+ }
+
+ .buttons {
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+
+ &__add {
+ color: $white;
+ background-color: $accent;
+ border-radius: 48px;
+ padding: 9.5px 0;
+ width: 75%;
+ cursor: pointer;
+
+ @include hover {
+ box-shadow: 0 3px 13px 0 #17203166;
+ }
+
+ &--active {
+ border: 1px solid $elements;
+ color: $accent;
+ background-color: $hover-and-bg;
+ }
+ }
+
+ &__like {
+ border: 1px solid $icons;
+ border-radius: 48px;
+ cursor: pointer;
+ background-image: url(../../assets/img/icons/like.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 16px;
+ width: 40px;
+ height: 40px;
+
+ @include hover {
+ border: 1px solid $primary;
+ }
+
+ &--active {
+ background-image: url(../../assets/img/icons/like-active.svg);
+ }
+ }
+ }
+}
diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
new file mode 100644
index 0000000000..101aecf278
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,71 @@
+import style from './ProductCard.module.scss';
+import { Product } from '../../types/Product';
+import { NavLink } from 'react-router-dom';
+import cn from 'classnames';
+import { useContext } from 'react';
+import { FavouritesContext } from '../../store/FavouritesProvider';
+import { CartContext } from '../../store/CartProvider';
+
+type Props = {
+ prod: Product;
+ discount?: boolean;
+};
+
+export const ProductCard: React.FC-
+ {pageNumbers.map((page, index) => (
+
- page === +page && onPageChange(page)} + > + {page === '...' ? ... : page} + + ))} +
+
+
+
+ ${discount ? prod.price : prod.fullPrice}
+
+ {prod.fullPrice && discount && (
+ ${prod.fullPrice}
+ )}
+
+ {specs.map(({ key, value }) => (
+
+
+
+ ))}
+ {key}
+ {value}
+
+
+ = ({ prod }) => {
+ const { setCart, handleAddButton } = useContext(CartContext);
+
+ const handleMinusCount = () =>
+ setCart(prev =>
+ prev.map(item =>
+ item.id === prod.id && item.inCart
+ ? { ...item, inCart: item.inCart - 1 }
+ : item,
+ ),
+ );
+
+ const handlePlusCount = () =>
+ setCart(prev =>
+ prev.map(item =>
+ item.id === prod.id && item.inCart
+ ? { ...item, inCart: item.inCart + 1 }
+ : item,
+ ),
+ );
+
+ return (
+ = ({ title, discount, random }) => {
+ const scrollRef = useRef(null);
+ const [scrollValue, setScrollValue] = useState(228);
+ const [canScrollLeft, setCanScrollLeft] = useState(false);
+ const [canScrollRight, setCanScrollRight] = useState(true);
+ const { products } = useContext(ProductContext);
+
+ const [visibleList, setVisibleList] = useState([]);
+
+ useEffect(() => {
+ const newList = getVisibleProducts(products, discount, random);
+
+ setVisibleList(newList);
+ }, [discount, products, random]);
+
+ useEffect(() => {
+ const getScrollValue = () => {
+ if (window.innerWidth > 639) {
+ setScrollValue(261);
+ }
+
+ if (window.innerWidth > 1200) {
+ setScrollValue(304);
+ }
+ };
+
+ getScrollValue();
+ window.addEventListener('resize', getScrollValue);
+
+ return () => window.removeEventListener('resize', getScrollValue);
+ }, []);
+
+ useEffect(() => {
+ const currentRef = scrollRef.current;
+ const updateScrollArrows = () => {
+ if (currentRef) {
+ const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+
+ setCanScrollLeft(scrollLeft > 0);
+ setCanScrollRight(scrollLeft + clientWidth < scrollWidth);
+ }
+ };
+
+ updateScrollArrows();
+ if (currentRef) {
+ currentRef.addEventListener('scroll', updateScrollArrows);
+ }
+
+ return () => currentRef?.removeEventListener('scroll', updateScrollArrows);
+ }, []);
+
+ const scrollRight = () => {
+ if (scrollRef.current) {
+ scrollRef.current.scrollBy({ left: scrollValue });
+ }
+ };
+
+ const scrollLeft = () => {
+ if (scrollRef.current) {
+ scrollRef.current.scrollBy({ left: -scrollValue });
+ }
+ };
+
+ return (
+
+
+ );
+};
diff --git a/src/components/ProductSlider/index.ts b/src/components/ProductSlider/index.ts
new file mode 100644
index 0000000000..5349238270
--- /dev/null
+++ b/src/components/ProductSlider/index.ts
@@ -0,0 +1 @@
+export * from './ProductSlider';
diff --git a/src/components/Slider/Slider.module.scss b/src/components/Slider/Slider.module.scss
new file mode 100644
index 0000000000..3758e64255
--- /dev/null
+++ b/src/components/Slider/Slider.module.scss
@@ -0,0 +1,69 @@
+@import '../../main';
+
+.img {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ object-position: center;
+ object-fit: cover;
+
+ @include on-tablet {
+ max-height: 324px;
+ object-fit: contain;
+ padding-inline: 75px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ align-self: center;
+ }
+
+ @include on-desktop {
+ max-height: 432px;
+ }
+}
+
+.paginationContainer {
+ margin-top: 36px;
+}
+
+.swiperButtonNext,
+.swiperButtonPrev {
+ background-color: $hover-and-bg;
+ border: 1px solid $icons;
+ width: 32px;
+ height: 80%;
+ border-radius: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 10;
+
+ @include hover {
+ background-color: rgba(0, 0, 0, 0.8);
+ }
+
+ @include on-desktop {
+ top: 210px;
+ height: 85%;
+ }
+}
+
+.swiperButtonNext {
+ right: 24px;
+ background-image: url(../../assets/img/icons/arrow-right.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ color: $primary;
+}
+
+.swiperButtonPrev {
+ background-image: url(../../assets/img/icons/arrow-left.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ color: $primary;
+ left: 24px;
+}
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
new file mode 100644
index 0000000000..cd0dcb37be
--- /dev/null
+++ b/src/components/Slider/Slider.tsx
@@ -0,0 +1,71 @@
+import slider1_mobile from '../../assets/img/slider/slider-1-mobile.png';
+import slider1_tablet from '../../assets/img/slider/slider-1-tablet.png';
+import slider2 from '../../assets/img/slider/slider-2.png';
+import slider3 from '../../assets/img/slider/slider-3.png';
+import style from './Slider.module.scss';
+import { Swiper, SwiperSlide } from 'swiper/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Pagination, Autoplay, Navigation, Thumbs } from 'swiper/modules';
+import 'swiper/scss';
+import 'swiper/scss/pagination';
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+export const Slider = () => {
+ const [isActiveNavigation, setIsActiveNavigation] = useState(false);
+
+ useEffect(() => {
+ const updateSwiperSettings = () => {
+ if (window.innerWidth > 639) {
+ setIsActiveNavigation(true);
+ } else {
+ setIsActiveNavigation(false);
+ }
+ };
+
+ updateSwiperSettings();
+ window.addEventListener('resize', updateSwiperSettings);
+
+ return () => window.removeEventListener('resize', updateSwiperSettings);
+ }, []);
+
+ return (
+
+
+ 
+
+
+
+
+ 
+
+
+
+ {isActiveNavigation && (
+ <>
+
+
+
+ )}
+
+ );
+};
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
new file mode 100644
index 0000000000..f48a854158
--- /dev/null
+++ b/src/components/Slider/index.ts
@@ -0,0 +1 @@
+export * from './Slider';
diff --git a/src/components/TopBar/TopBar.module.scss b/src/components/TopBar/TopBar.module.scss
new file mode 100644
index 0000000000..a3c3b4f1dd
--- /dev/null
+++ b/src/components/TopBar/TopBar.module.scss
@@ -0,0 +1,214 @@
+@import '../../main';
+
+.topbar {
+ height: $topbar-height-mobile;
+
+ @include on-desktop {
+ height: $topbar-height-desktop;
+ }
+
+ z-index: 100;
+ width: 100%;
+ background-color: $white;
+ box-shadow: 0 1px 0 0 $elements;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 16px;
+ position: sticky;
+ top: 0;
+
+ &__left {
+ display: flex;
+ align-items: center;
+
+ @include on-tablet {
+ gap: 16px;
+ }
+
+ @include on-desktop {
+ gap: 24px;
+ }
+
+ .logo {
+ height: 22px;
+ width: 64px;
+
+ @include on-desktop {
+ height: 28px;
+ width: 80px;
+ }
+
+ margin: 13px 16px;
+
+ @include on-desktop {
+ margin: 18px 24px;
+ }
+
+ @include hover {
+ transform: scale(1.07);
+ }
+
+ &__link {
+ display: flex;
+ }
+ }
+
+ .nav {
+ display: none;
+
+ @include on-tablet {
+ display: block;
+ }
+
+ &__list {
+ display: flex;
+
+ @include on-tablet {
+ gap: 32px;
+ }
+
+ @include on-desktop {
+ gap: 64px;
+ }
+
+ align-items: center;
+ }
+
+ &__item {
+ display: flex;
+ height: $topbar-height-mobile;
+
+ @include on-desktop {
+ height: $topbar-height-desktop;
+ }
+
+ align-items: center;
+ }
+
+ &__link {
+ @include font-set($uppercase);
+
+ display: flex;
+ color: $secondary;
+ align-items: center;
+ height: 100%;
+ position: relative;
+
+ &:not(.nav__link--active)::after {
+ content: '';
+ height: 3px;
+ background-color: $primary;
+ position: absolute;
+ bottom: 0;
+ width: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ transition: width 0.3s ease;
+ }
+
+ @include hover {
+ transform: scale(1.06);
+ &::after {
+ width: 100%;
+ }
+ }
+
+ &--active {
+ color: $primary;
+ border-bottom: 3px solid $primary;
+ }
+ }
+ }
+ }
+
+ &__right {
+ display: flex;
+ align-items: center;
+ }
+
+ &__iconContainer {
+ position: relative;
+ box-shadow: -1px 0 0 0 $elements;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ cursor: pointer;
+
+ &:not(.topbar__iconContainer--active)::after {
+ content: '';
+ height: 2.5px;
+ background-color: $primary;
+ width: 0;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ transition: width 0.3s ease;
+ }
+
+ @include hover {
+ &:not(.topbar__burgerMenu)::after {
+ width: 100%;
+ }
+ }
+
+ &--active {
+ bottom: 1px;
+ border-bottom: 3px solid $primary;
+ }
+ }
+
+ &__icon {
+ position: relative;
+ display: flex;
+ height: $icons-size;
+ width: $icons-size;
+ margin: $icons-margin-mobile;
+
+ @include on-desktop {
+ margin: $icons-margin-desktop;
+ }
+
+ @include hover {
+ transform: scale(1.06);
+ }
+ }
+
+ &__count {
+ position: absolute;
+ right: 9px;
+ top: 10px;
+ width: 14px;
+ height: 14px;
+ background-color: $accent;
+ border: solid 1px $white;
+ border-radius: 50%;
+ color: white;
+ text-align: center;
+ font-size: 9px;
+ line-height: 13px;
+
+ @include on-desktop {
+ right: 17px;
+ top: 18px;
+ }
+ }
+
+ &__iconLike,
+ &__iconCart {
+ display: none;
+
+ @include on-tablet {
+ position: relative;
+ display: block;
+ }
+ }
+
+ &__burgerMenu {
+ @include on-tablet {
+ display: none;
+ }
+ }
+}
diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
new file mode 100644
index 0000000000..edf2813d9d
--- /dev/null
+++ b/src/components/TopBar/TopBar.tsx
@@ -0,0 +1,100 @@
+import logo from '../../assets/img/logos/mainlogo.svg';
+import style from './TopBar.module.scss';
+import { AiOutlineMenu, AiOutlineClose } from 'react-icons/ai';
+import like from '../../assets/img/icons/like.svg';
+import cartImg from '../../assets/img/icons/cart.svg';
+import { NavLink, useSearchParams } from 'react-router-dom';
+import cn from 'classnames';
+import { Aside } from '../Aside';
+import { useContext } from 'react';
+import { MenuContext } from '../../store/MenuProvider';
+import { FavouritesContext } from '../../store/FavouritesProvider';
+import { CartContext } from '../../store/CartProvider';
+
+const getActiveNavLink = ({ isActive }: { isActive: boolean }) =>
+ cn(style.nav__link, {
+ [style['nav__link--active']]: isActive,
+ });
+
+const getActiveIcon = ({ isActive }: { isActive: boolean }, iconName: string) =>
+ cn(style.topbar__iconContainer, style[`topbar__${iconName}`], {
+ [style['topbar__iconContainer--active']]: isActive,
+ });
+
+const navItems = [
+ { path: '/', name: 'Home' },
+ { path: 'phones', name: 'Phones' },
+ { path: 'tablets', name: 'Tablets' },
+ { path: 'accessories', name: 'Accessories' },
+];
+
+export const TopBar = () => {
+ const { isMenuActive, setIsMenuActive } = useContext(MenuContext);
+ const [searchParams] = useSearchParams();
+ const { favourites } = useContext(FavouritesContext);
+ const { cart, getLengthOfCart } = useContext(CartContext);
+
+ return (
+ <>
+ (getValue);
+
+ useEffect(() => {
+ localStorage.setItem(key, JSON.stringify(value));
+ }, [key, value]);
+
+ return [value, setValue] as const;
+};
diff --git a/src/index.tsx b/src/index.tsx
index 50470f1508..62cfb52d41 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import './main.scss';
+import { Root } from './Root';
-createRoot(document.getElementById('root') as HTMLElement).render( = ({ category }) => {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const { products, loader, errorMessage } = useContext(ProductContext);
+ const sort = searchParams.get('sort' || '');
+ const perPage = searchParams.get('perPage' || '');
+ const query = searchParams.get('query' || '');
+
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const [visibleList, setVisibleList] = useState([]);
+
+ const navigate = useNavigate();
+
+ const correctPerPage = perPage ? +perPage : visibleList.length;
+
+ useEffect(() => {
+ const sortedList = getSortedList(products, sort).filter(item => {
+ const matchesCategory = item.category === category;
+ const matchesQuery = query
+ ? item.name.toLowerCase().includes(query.toLowerCase())
+ : true;
+
+ return matchesCategory && matchesQuery;
+ });
+
+ setVisibleList(sortedList);
+ setCurrentPage(1);
+ }, [category, perPage, sort, products, query]);
+
+ const handleChangePage = (nextPage: number) => {
+ const params = new URLSearchParams(searchParams);
+
+ if (nextPage === 1) {
+ params.delete('page');
+ } else {
+ params.set('page', nextPage.toString());
+ }
+
+ setCurrentPage(nextPage);
+ setSearchParams(params);
+ };
+
+ const handleQuery = (event: React.ChangeEvent) => {
+ const params = new URLSearchParams(searchParams);
+
+ if (!event.target.value) {
+ params.delete('query');
+ } else {
+ params.set('query', event.target.value);
+ }
+
+ setSearchParams(params);
+ };
+
+ return (
+ (null);
+ const [activeIndex, setActiveIndex] = useState(0);
+ const [loader, setLoader] = useState(true);
+ const [currentProduct, setCurrentProduct] = useState();
+ const [productFromGeneralList, setProductFromGeneralList] =
+ useState();
+
+ const [thumbsDirection, setThumbsDirection] = useState(
+ () => {
+ if (window.innerWidth > 639) {
+ return 'vertical';
+ } else {
+ return 'horizontal';
+ }
+ },
+ );
+
+ const { getActiveLike, handleLike } = useContext(FavouritesContext);
+ const { getActiveButton, handleAddButton } = useContext(CartContext);
+
+ const { productId } = useParams();
+
+ const location = useLocation().pathname;
+ const category = location.split('/').slice(1, 2).join();
+
+ const navigate = useNavigate();
+
+ const handleChangeColor = (color: string) => {
+ const splitedPath = location.split('-');
+
+ const length = currentProduct
+ ? currentProduct.color.split(' ').join('-').split('-').length
+ : 0;
+
+ const pathWithoutColor = splitedPath.slice(0, -length);
+
+ const newPath =
+ pathWithoutColor.join('-') + '-' + color.split(' ').join('-');
+
+ navigate(newPath, { replace: true });
+ };
+
+ const handleChangeCapacity = (capacity: string) => {
+ const splitedPath = location.split('-');
+
+ const length = currentProduct
+ ? currentProduct.color.split(' ').join('-').split('-').length
+ : 0;
+
+ splitedPath[splitedPath.length - length - 1] = capacity.toLowerCase();
+
+ const newPath = splitedPath.join('-');
+
+ navigate(newPath, { replace: true });
+ };
+
+ useEffect(() => {
+ getData(`api/${category}.json`)
+ .then(data => setCurrentProduct(data.find(item => item.id === productId)))
+ .finally(() => setLoader(false));
+
+ getData(`api/products.json`).then(data =>
+ setProductFromGeneralList(data.find(item => item.itemId === productId)),
+ );
+ }, [productId, category]);
+
+ useEffect(() => {
+ const getWidth = () => {
+ if (window.innerWidth > 639) {
+ setThumbsDirection('vertical');
+ } else {
+ setThumbsDirection('horizontal');
+ }
+ };
+
+ window.addEventListener('resize', getWidth);
+
+ return () => window.removeEventListener('resize', getWidth);
+ }, []);
+
+ const images = currentProduct ? [...currentProduct?.images] : null;
+
+ return (
+ (url: string): Promise {
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ throw new Error('Can`t get data from the server');
+ }
+
+ return response.json();
+}
diff --git a/src/store/CartProvider.tsx b/src/store/CartProvider.tsx
new file mode 100644
index 0000000000..3ce9dfd761
--- /dev/null
+++ b/src/store/CartProvider.tsx
@@ -0,0 +1,59 @@
+import React, { createContext, ReactNode } from 'react';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { Product } from '../types/Product';
+
+type CartType = {
+ cart: Product[];
+ setCart: React.Dispatch>;
+ getActiveButton: (product: Product) => boolean;
+ handleAddButton: (product: Product) => void;
+ getLengthOfCart: () => number;
+};
+
+export const CartContext = createContext({
+ cart: [],
+ setCart: () => {},
+ getActiveButton: () => false,
+ handleAddButton: () => {},
+ getLengthOfCart: () => 1,
+});
+
+type Props = {
+ children: ReactNode;
+};
+
+export const CartProvider: React.FC = ({ children }) => {
+ const [cart, setCart] = useLocalStorage('cart', []);
+
+ const getActiveButton = (product: Product) => {
+ return cart.some((item: Product) => product.id === item.id);
+ };
+
+ const handleAddButton = (product: Product) => {
+ if (getActiveButton(product)) {
+ setCart(cart.filter((item: Product) => item.id !== product.id));
+ } else {
+ const newProduct = { ...product, inCart: 1 };
+
+ setCart([...cart, newProduct]);
+ }
+ };
+
+ const getLengthOfCart = () => {
+ return cart.reduce((acc, val) => acc + (val.inCart || 1), 0);
+ };
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/store/FavouritesProvider.tsx b/src/store/FavouritesProvider.tsx
new file mode 100644
index 0000000000..f25f1c7793
--- /dev/null
+++ b/src/store/FavouritesProvider.tsx
@@ -0,0 +1,47 @@
+import React, { createContext, ReactNode } from 'react';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { Product } from '../types/Product';
+
+type FavouritesType = {
+ favourites: Product[];
+ setFavourites: React.Dispatch>;
+ getActiveLike: (product: Product) => boolean;
+ handleLike: (product: Product) => void;
+};
+
+export const FavouritesContext = createContext({
+ favourites: [],
+ setFavourites: () => {},
+ getActiveLike: () => false,
+ handleLike: () => {},
+});
+
+type Props = {
+ children: ReactNode;
+};
+
+export const FavouritesProvider: React.FC = ({ children }) => {
+ const [favourites, setFavourites] = useLocalStorage('favourites', []);
+
+ const getActiveLike = (product: Product) => {
+ return favourites.some((item: Product) => product.id === item.id);
+ };
+
+ const handleLike = (product: Product) => {
+ if (getActiveLike(product)) {
+ setFavourites(
+ favourites.filter((item: Product) => item.id !== product.id),
+ );
+ } else {
+ setFavourites([...favourites, product]);
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/store/MenuProvider.tsx b/src/store/MenuProvider.tsx
new file mode 100644
index 0000000000..68df130504
--- /dev/null
+++ b/src/store/MenuProvider.tsx
@@ -0,0 +1,33 @@
+import React, { createContext, ReactNode, useEffect, useState } from 'react';
+
+type MenuType = {
+ isMenuActive: boolean;
+ setIsMenuActive: React.Dispatch>;
+};
+
+export const MenuContext = createContext({
+ isMenuActive: false,
+ setIsMenuActive: () => {},
+});
+
+type Props = {
+ children: ReactNode;
+};
+
+export const MenuProvider: React.FC = ({ children }) => {
+ const [isMenuActive, setIsMenuActive] = useState(false);
+
+ useEffect(() => {
+ if (isMenuActive) {
+ document.body.classList.add('no-scroll');
+ } else {
+ document.body.classList.remove('no-scroll');
+ }
+ }, [isMenuActive]);
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/store/ProductProvider.tsx b/src/store/ProductProvider.tsx
new file mode 100644
index 0000000000..9d17efbcf2
--- /dev/null
+++ b/src/store/ProductProvider.tsx
@@ -0,0 +1,48 @@
+import { createContext, ReactNode, useEffect, useState } from 'react';
+import { getData } from '../services/httpClient';
+import { Product } from '../types/Product';
+
+type ProductContextType = {
+ products: Product[];
+ setProducts: React.Dispatch>;
+ loader: boolean;
+ errorMessage: boolean;
+};
+
+export const ProductContext = createContext({
+ products: [],
+ setProducts: () => {},
+ loader: true,
+ errorMessage: false,
+});
+
+type Props = {
+ children: ReactNode;
+};
+
+export const ProductProvider: React.FC = ({ children }) => {
+ const [products, setProducts] = useState([]);
+
+ const [loader, setLoader] = useState(true);
+ const [errorMessage, setErrorMessage] = useState(false);
+
+ useEffect(() => {
+ setErrorMessage(false);
+
+ getData('api/products.json')
+ .then(setProducts)
+ .catch(error => {
+ setErrorMessage(true);
+ throw new Error(error);
+ })
+ .finally(() => setLoader(false));
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/types/Product.ts b/src/types/Product.ts
new file mode 100644
index 0000000000..acb82df38a
--- /dev/null
+++ b/src/types/Product.ts
@@ -0,0 +1,15 @@
+export interface Product {
+ id: number;
+ category: string;
+ itemId: string;
+ name: string;
+ fullPrice: number;
+ price: number;
+ screen: string;
+ capacity: string;
+ color: string;
+ ram: string;
+ year: number;
+ image: string;
+ inCart?: number;
+}
diff --git a/src/types/ProductItem.ts b/src/types/ProductItem.ts
new file mode 100644
index 0000000000..01e9d56c86
--- /dev/null
+++ b/src/types/ProductItem.ts
@@ -0,0 +1,24 @@
+export interface ProductItem {
+ id: string;
+ category: string;
+ namespaceId: string;
+ name: string;
+ capacityAvailable: string[];
+ capacity: string;
+ priceRegular: number;
+ priceDiscount: number;
+ colorsAvailable: string[];
+ color: string;
+ images: string[];
+ description: {
+ title: string;
+ text: string[];
+ }[];
+ screen: string;
+ resolution: string;
+ processor: string;
+ ram: string;
+ camera: string;
+ zoom: string;
+ cell: string[];
+}
diff --git a/src/types/SortType.ts b/src/types/SortType.ts
new file mode 100644
index 0000000000..abbee16f45
--- /dev/null
+++ b/src/types/SortType.ts
@@ -0,0 +1,5 @@
+export enum SortType {
+ Age = 'Newest',
+ Title = 'Alphabetically',
+ Price = 'Cheapest',
+}
diff --git a/src/utils/colorMap.ts b/src/utils/colorMap.ts
new file mode 100644
index 0000000000..be301d826c
--- /dev/null
+++ b/src/utils/colorMap.ts
@@ -0,0 +1,25 @@
+export const colorMap: { [key: string]: string } = {
+ silver: '#C0C0C0',
+ spacegray: '#4A4A4A',
+ gold: '#D4AF37',
+ midnightgreen: '#004953',
+ red: '#FF3B30',
+ white: '#FFFFFF',
+ black: '#000000',
+ green: '#34C759',
+ yellow: '#FFCC00',
+ purple: '#AF52DE',
+ blue: '#007AFF',
+ pink: '#FF2D55',
+ coral: '#FF6F61',
+ midnight: '#1C1C1E',
+ sierrablue: '#A3C8FF',
+ graphite: '#383838',
+ rosegold: '#B76E79',
+ spaceblack: '#121212',
+ 'space gray': '#4A4A4A',
+ 'midnight green': '#004953',
+ 'sierra blue': '#A3C8FF',
+ 'rose gold': '#B76E79',
+ 'sky blue': '#87CEEB',
+};
diff --git a/src/utils/getNumbers.ts b/src/utils/getNumbers.ts
new file mode 100644
index 0000000000..ab24e2b564
--- /dev/null
+++ b/src/utils/getNumbers.ts
@@ -0,0 +1,9 @@
+export function getNumbers(from: number, to: number): number[] {
+ const numbers = [];
+
+ for (let n = from; n <= to; n += 1) {
+ numbers.push(n);
+ }
+
+ return numbers;
+}
diff --git a/src/utils/getShuffledArray.ts b/src/utils/getShuffledArray.ts
new file mode 100644
index 0000000000..b4c4f146f5
--- /dev/null
+++ b/src/utils/getShuffledArray.ts
@@ -0,0 +1,11 @@
+export const getShuffledArray = (array: T[]): T[] => {
+ const newArray = [...array];
+
+ for (let i = newArray.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+
+ [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+ }
+
+ return newArray;
+};
diff --git a/src/utils/getSortedList.ts b/src/utils/getSortedList.ts
new file mode 100644
index 0000000000..d9ceb8ae55
--- /dev/null
+++ b/src/utils/getSortedList.ts
@@ -0,0 +1,17 @@
+import { Product } from '../types/Product';
+
+export const getSortedList = (
+ sortingArray: Product[],
+ sortParams: string | null,
+) => {
+ switch (sortParams) {
+ case 'Alphabetically':
+ return [...sortingArray].sort((a, b) => a.name.localeCompare(b.name));
+
+ case 'Cheapest':
+ return [...sortingArray].sort((a, b) => a.price - b.price);
+
+ default:
+ return [...sortingArray].sort((a, b) => b.year - a.year);
+ }
+};
diff --git a/src/utils/getVisibleProducts.ts b/src/utils/getVisibleProducts.ts
new file mode 100644
index 0000000000..be0abdc4ec
--- /dev/null
+++ b/src/utils/getVisibleProducts.ts
@@ -0,0 +1,36 @@
+import { Product } from '../types/Product';
+import { getShuffledArray } from './getShuffledArray';
+
+export const getVisibleProducts = (
+ products: Product[],
+ discount: boolean,
+ random: boolean,
+) => {
+ if (!products.length) {
+ return [];
+ }
+
+ if (random) {
+ const shuffled = getShuffledArray(products);
+
+ return shuffled.slice(0, 10);
+ }
+
+ if (!discount) {
+ let lastYearProduction = products[0].year;
+
+ for (const item of products) {
+ if (item.year > lastYearProduction) {
+ lastYearProduction = item.year;
+ }
+ }
+
+ return [...products]
+ .filter(item => item.year === lastYearProduction)
+ .sort((a, b) => b.fullPrice - a.fullPrice);
+ }
+
+ return [...products]
+ .sort((a, b) => b.fullPrice - b.price - (a.fullPrice - a.price))
+ .filter(item => item.fullPrice - item.price >= 100);
+};
handleLike(prod)}
+ />
+
+
+ );
+};
diff --git a/src/components/ProductCard/index.ts b/src/components/ProductCard/index.ts
new file mode 100644
index 0000000000..7ce031c382
--- /dev/null
+++ b/src/components/ProductCard/index.ts
@@ -0,0 +1 @@
+export * from './ProductCard';
diff --git a/src/components/ProductInCart/ProductInCart.module.scss b/src/components/ProductInCart/ProductInCart.module.scss
new file mode 100644
index 0000000000..614bc1c135
--- /dev/null
+++ b/src/components/ProductInCart/ProductInCart.module.scss
@@ -0,0 +1,102 @@
+@import '../../main';
+
+.product {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ background-color: $white;
+ border: 1px solid $elements;
+ border-radius: 16px;
+ padding: 16px;
+
+ @include on-tablet {
+ padding: 24px;
+
+ flex-direction: row;
+ gap: 24px;
+ justify-content: space-between;
+ }
+
+ .about {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ &__close {
+ height: $icons-size;
+ width: $icons-size;
+ cursor: pointer;
+ fill: $icons;
+
+ @include hover {
+ fill: $primary;
+ transform: scale(1.01);
+ }
+ }
+
+ &__imgLink {
+ display: flex;
+
+ @include hover {
+ transform: scale(1.03);
+ }
+ }
+
+ &__img {
+ width: 80px;
+ height: 80px;
+ object-fit: contain;
+ }
+
+ &__title {
+ @include hover {
+ color: #78787a;
+ }
+ }
+ }
+
+ .actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ @include on-tablet {
+ gap: 24px;
+ }
+
+ &__buttons {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ width: 100px;
+ text-align: center;
+
+ &__button {
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ cursor: pointer;
+ display: flex;
+
+ &--unactive {
+ cursor: default;
+ color: $icons;
+ }
+ }
+
+ &__count {
+ @include font-set($body-text);
+
+ width: 20px;
+ }
+ }
+
+ &__price {
+ @include font-set($tablet-h3);
+
+ width: 90px;
+ text-align: right;
+ }
+ }
+}
diff --git a/src/components/ProductInCart/ProductInCart.tsx b/src/components/ProductInCart/ProductInCart.tsx
new file mode 100644
index 0000000000..7eb5098375
--- /dev/null
+++ b/src/components/ProductInCart/ProductInCart.tsx
@@ -0,0 +1,94 @@
+import {
+ AiOutlineClose,
+ AiOutlineMinusCircle,
+ AiOutlinePlusCircle,
+} from 'react-icons/ai';
+import style from './ProductInCart.module.scss';
+import { Product } from '../../types/Product';
+import { useContext } from 'react';
+import { CartContext } from '../../store/CartProvider';
+import cn from 'classnames';
+import { Link } from 'react-router-dom';
+
+type Props = {
+ prod: Product;
+};
+
+export const ProductInCart: React.FC
+
+ );
+};
diff --git a/src/components/ProductInCart/index.ts b/src/components/ProductInCart/index.ts
new file mode 100644
index 0000000000..dc65709e1b
--- /dev/null
+++ b/src/components/ProductInCart/index.ts
@@ -0,0 +1 @@
+export * from './ProductInCart';
diff --git a/src/components/ProductSlider/ProductSlider.module.scss b/src/components/ProductSlider/ProductSlider.module.scss
new file mode 100644
index 0000000000..5d44c4cfb8
--- /dev/null
+++ b/src/components/ProductSlider/ProductSlider.module.scss
@@ -0,0 +1,85 @@
+@import '../../main';
+
+.productSlider {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 24px;
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+
+ @include page-container;
+
+ .title {
+ @include font-set($mobile-h2);
+
+ @include on-tablet {
+ @include font-set($tablet-h2);
+ }
+ }
+
+ .arrows {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+
+ &__left {
+ height: 32px;
+ width: 32px;
+ padding: 8px;
+ border: 1px solid $elements;
+ border-radius: 48px;
+ cursor: pointer;
+ background-image: url(../../assets/img/icons/arrow-right.svg);
+ transform: scaleX(-1);
+ background-repeat: no-repeat;
+ background-position: center;
+
+ &--active {
+ background-image: url(../../assets/img/icons/arrow-right-active.svg);
+ transform: scaleX(-1);
+ background-repeat: no-repeat;
+ background-position: center;
+ border: 1px solid $icons;
+ }
+ }
+
+ &__right {
+ height: 32px;
+ width: 32px;
+ padding: 8px;
+ border: 1px solid $elements;
+ border-radius: 48px;
+ cursor: pointer;
+ background-image: url(../../assets/img/icons/arrow-right.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+
+ &--active {
+ background-image: url(../../assets/img/icons/arrow-right-active.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ border: 1px solid $icons;
+ }
+ }
+ }
+ }
+
+ .productCard {
+ display: flex;
+ gap: 16px;
+ padding-left: $container-padding-mobile;
+ overflow-x: auto;
+
+ @include on-tablet {
+ padding-left: $container-padding-tablet;
+ }
+
+ @include on-desktop {
+ padding-left: $container-padding-desktop;
+ }
+ }
+}
diff --git a/src/components/ProductSlider/ProductSlider.tsx b/src/components/ProductSlider/ProductSlider.tsx
new file mode 100644
index 0000000000..520b7232ac
--- /dev/null
+++ b/src/components/ProductSlider/ProductSlider.tsx
@@ -0,0 +1,106 @@
+import style from './ProductSlider.module.scss';
+import { ProductCard } from '../ProductCard';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import cn from 'classnames';
+import { ProductContext } from '../../store/ProductProvider';
+import { getVisibleProducts } from '../../utils/getVisibleProducts';
+import { Product } from '../../types/Product';
+
+type ScrollValues = 228 | 261 | 304;
+
+type Props = {
+ title: string;
+ discount: boolean;
+ random: boolean;
+};
+
+export const ProductSlider: React.FC
+ handleAddButton(prod)}
+ />
+
+ 
+
+
+ {prod.name}
+
+
+
+
+
+
+
+ + {prod.inCart ? prod.inCart : '000'} +
+ ++ ${prod.price * (prod.inCart || 1)} +
+
+
+ {title}
+
+
+
+
+
+ {visibleList?.map(prod => (
+
+
+ 
+
+
+
+
+
+ );
+};
diff --git a/src/components/TopBar/index.ts b/src/components/TopBar/index.ts
new file mode 100644
index 0000000000..d19b2d5084
--- /dev/null
+++ b/src/components/TopBar/index.ts
@@ -0,0 +1 @@
+export * from './TopBar';
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000000..69963a5b93
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,23 @@
+declare module '*.scss' {
+ const content: { [className: string]: string };
+ export default content;
+}
+
+declare module '*.svg' {
+ const value: string;
+ export default value;
+}
+declare module '*.png' {
+ const value: string;
+ export default value;
+}
+
+declare module '*.jpg' {
+ const value: string;
+ export default value;
+}
+
+declare module '*.webp' {
+ const value: string;
+ export default value;
+}
diff --git a/src/hooks/useLocalStorage.tsx b/src/hooks/useLocalStorage.tsx
new file mode 100644
index 0000000000..01fe7035a9
--- /dev/null
+++ b/src/hooks/useLocalStorage.tsx
@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { Product } from '../types/Product';
+
+export const useLocalStorage = (key: string, initialValue: Product[]) => {
+ const getValue = () => {
+ const storage = localStorage.getItem(key);
+
+ if (storage) {
+ return JSON.parse(storage);
+ }
+
+ return initialValue;
+ };
+
+ const [value, setValue] = useState
+
+ 
+
+
+
+
+
+
+ getActiveIcon({ isActive }, 'iconLike')
+ }
+ >
+ 
+ {!!favourites.length && (
+ {favourites.length}
+ )}
+
+
+
+ getActiveIcon({ isActive }, 'iconCart')
+ }
+ >
+ 
+ {!!cart.length && (
+ {getLengthOfCart()}
+ )}
+
+
+
+ setIsMenuActive(!isMenuActive)}
+ >
+ {isMenuActive ? (
+
+
+
+ );
+};
diff --git a/src/modules/CartPage/index.ts b/src/modules/CartPage/index.ts
new file mode 100644
index 0000000000..90c010237a
--- /dev/null
+++ b/src/modules/CartPage/index.ts
@@ -0,0 +1 @@
+export * from './CartPage';
diff --git a/src/modules/CatalogPage/CatalogPage.module.scss b/src/modules/CatalogPage/CatalogPage.module.scss
new file mode 100644
index 0000000000..733f614aa4
--- /dev/null
+++ b/src/modules/CatalogPage/CatalogPage.module.scss
@@ -0,0 +1,147 @@
+@import '../../main';
+
+.catalogPage {
+ @include page-grid;
+ @include page-container;
+
+ .breadcrumbs {
+ grid-column: 1 / -1;
+ padding-right: 0;
+ }
+
+ .title {
+ @include font-set($mobile-h1);
+
+ grid-column: 1 / -1;
+ text-transform: capitalize;
+
+ @include on-tablet {
+ @include font-set($tablet-h1);
+ }
+ }
+
+ .countModels {
+ @include font-set($body-text);
+
+ grid-column: 1 / -1;
+ margin-top: 8px;
+ margin-bottom: 32px;
+ color: $secondary;
+
+ @include on-tablet {
+ margin-bottom: 40px;
+ }
+ }
+
+ .sortField {
+ grid-column: span 2;
+
+ &--1 {
+ @include on-tablet {
+ grid-column: span 4;
+ }
+ }
+
+ &--2 {
+ @include on-tablet {
+ grid-column: span 3;
+ }
+ }
+ }
+
+ .query {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ margin-top: 12px;
+
+ @include on-tablet {
+ grid-column: -1 / -5;
+ margin-top: 0;
+ }
+
+ @include on-desktop {
+ grid-column: -1 / -8;
+ }
+
+ &__label {
+ margin-bottom: 4px;
+ font-weight: 700;
+ color: $secondary;
+ }
+
+ &__input {
+ @include font-set($buttons);
+
+ padding: 12px;
+ background-color: inherit;
+ outline: none;
+ border: 1px solid $icons;
+ border-radius: 8px;
+
+ @include hover {
+ border: 1px solid $secondary;
+ }
+
+ &:focus {
+ border: 1px solid $primary;
+
+ @include hover {
+ border: 1px solid $primary;
+ }
+ }
+ }
+ }
+
+ .cards {
+ margin-top: 24px;
+ grid-column: 1 / -1;
+
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(212px, 272px));
+ justify-content: center;
+ gap: 40px 16px;
+ }
+
+ .pagination {
+ margin-top: 40px;
+ grid-column: 1 / -1;
+ }
+
+ .noData {
+ padding: 12px;
+ text-align: center;
+ font-weight: 800;
+ font-size: 24px;
+ line-height: 40px;
+ grid-column: 1 / -1;
+ }
+
+ .error {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ background-color: rgb(251, 167, 167);
+ border-radius: 10px;
+ padding: 24px;
+
+ &__text {
+ @include font-set($tablet-h3);
+
+ display: block;
+ }
+
+ &__button {
+ padding: 9.5px;
+ background-color: $accent;
+ color: $white;
+ border: 1px solid $icons;
+ border-radius: 36px;
+ cursor: pointer;
+
+ @include font-set($buttons);
+ }
+ }
+}
diff --git a/src/modules/CatalogPage/CatalogPage.tsx b/src/modules/CatalogPage/CatalogPage.tsx
new file mode 100644
index 0000000000..396ceb7474
--- /dev/null
+++ b/src/modules/CatalogPage/CatalogPage.tsx
@@ -0,0 +1,151 @@
+import style from './CatalogPage.module.scss';
+import { Dropdown } from '../../components/Dropdown';
+import { ProductCard } from '../../components/ProductCard';
+import { useContext, useEffect, useState } from 'react';
+import { Product } from '../../types/Product';
+import { ProductContext } from '../../store/ProductProvider';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Loader } from '../../components/Loader';
+import { Pagination } from '../../components/Pagination';
+import { getSortedList } from '../../utils/getSortedList';
+
+type Props = {
+ category: 'phones' | 'tablets' | 'accessories';
+};
+
+export const CatalogPage: React.FC navigate(-1)}>
+
+
+
+ {!cart.length && (
+ Back
+
+ 
+
+ )}
+
+ {!!cart.length && (
+ <>
+ Your cart is empty
+Cart
+ +-
+ {cart.map(prod => (
+
-
+
+
+ ))}
+
+
+
+ )}
+
+
+
+
+ ${getSum()}
++ Total for {getLengthOfCart()} items +
+
+
+ );
+};
diff --git a/src/modules/CatalogPage/index.ts b/src/modules/CatalogPage/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/modules/FavouritesPage/FavouritesPage.module.scss b/src/modules/FavouritesPage/FavouritesPage.module.scss
new file mode 100644
index 0000000000..cdd58d18d2
--- /dev/null
+++ b/src/modules/FavouritesPage/FavouritesPage.module.scss
@@ -0,0 +1,29 @@
+@import '../../main';
+
+.favouritesPage {
+ @include page-container;
+
+ .title {
+ @include font-set($mobile-h1);
+
+ margin-bottom: 8px;
+
+ @include on-tablet {
+ @include font-set($tablet-h1);
+ }
+ }
+
+ .countItems {
+ @include font-set($body-text);
+
+ color: $secondary;
+ margin-bottom: 32px;
+ }
+
+ .cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(212px, 272px));
+ justify-content: center;
+ gap: 40px 16px;
+ }
+}
diff --git a/src/modules/FavouritesPage/FavouritesPage.tsx b/src/modules/FavouritesPage/FavouritesPage.tsx
new file mode 100644
index 0000000000..deb7811ee9
--- /dev/null
+++ b/src/modules/FavouritesPage/FavouritesPage.tsx
@@ -0,0 +1,42 @@
+import { useContext } from 'react';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { ProductCard } from '../../components/ProductCard';
+import { Product } from '../../types/Product';
+import style from './FavouritesPage.module.scss';
+import { FavouritesContext } from '../../store/FavouritesProvider';
+
+export const FavouritesPage = () => {
+ const { favourites } = useContext(FavouritesContext);
+
+ return (
+
+
+
+ {loader &&
+ Something went wrong
+
+
+ )}
+
+ {!!products.length && !loader && !errorMessage && (
+ <>
+ + {category === 'phones' ? 'mobile phones' : category} +
+{visibleList.length} models
+ +
+
+
+
+
+
+
+
+
+
+
+ -
+ {visibleList
+ .slice(
+ currentPage * correctPerPage - correctPerPage,
+ currentPage * correctPerPage,
+ )
+ .map(prod => (
+
-
+
+
+ ))}
+
+
+ )}
+
+ )}
+
+ {!visibleList.length && !loader && !errorMessage && (
+ There are no {category} yet
+ )} +
+
+ );
+};
diff --git a/src/modules/FavouritesPage/index.ts b/src/modules/FavouritesPage/index.ts
new file mode 100644
index 0000000000..4663a94130
--- /dev/null
+++ b/src/modules/FavouritesPage/index.ts
@@ -0,0 +1 @@
+export * from './FavouritesPage';
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
new file mode 100644
index 0000000000..373d9b3698
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,32 @@
+@import '../../main';
+
+.homePage {
+ display: flex;
+ flex-direction: column;
+ gap: 56px;
+
+ @include on-tablet {
+ gap: 64px;
+ }
+
+ @include on-desktop {
+ gap: 80px;
+ }
+
+ .title {
+ @include page-container;
+ @include font-set($mobile-h1);
+
+ margin-block: 24px;
+
+ @include on-tablet {
+ @include font-set($tablet-h1);
+
+ margin-block: 32px;
+ }
+
+ @include on-desktop {
+ margin-block: 56px;
+ }
+ }
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 0000000000..a46f8d54b7
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,30 @@
+import { CategoryShop } from '../../components/CategoryShop/CategoryShop';
+import { ProductSlider } from '../../components/ProductSlider/ProductSlider';
+import { Slider } from '../../components/Slider';
+import style from './HomePage.module.scss';
+
+export const HomePage = () => (
+
+
+
+ {!favourites.length && (
+ <>
+ + You haven't favourite products =( +
+ + )} + + {!!favourites.length && ( + <> +Favourites
+ +{favourites.length} items
+ +
+ {favourites.map((item: Product) => (
+
+
+ )}
+
+
+ ))}
+
+
+);
diff --git a/src/modules/HomePage/index.ts b/src/modules/HomePage/index.ts
new file mode 100644
index 0000000000..11e53da674
--- /dev/null
+++ b/src/modules/HomePage/index.ts
@@ -0,0 +1 @@
+export * from './HomePage';
diff --git a/src/modules/ItemCardPage/ItemCardPage.module.scss b/src/modules/ItemCardPage/ItemCardPage.module.scss
new file mode 100644
index 0000000000..248ee3bdd6
--- /dev/null
+++ b/src/modules/ItemCardPage/ItemCardPage.module.scss
@@ -0,0 +1,453 @@
+@import '../../main';
+
+.itemCard {
+ @include page-container;
+ @include page-grid;
+
+ .breadcrumbs {
+ grid-column: 1 / -1;
+ }
+
+ .backButton {
+ display: flex;
+ gap: 4px;
+ align-items: flex-end;
+ width: fit-content;
+ cursor: pointer;
+
+ grid-column: 1 / -1;
+
+ @include hover {
+ transform: scale(1.01);
+ }
+
+ &__arrow {
+ background-image: url(../../assets/img/icons/arrow-right-active.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ width: $icons-size;
+ height: $icons-size;
+ transform: scaleX(-1);
+ }
+
+ &__text {
+ font-weight: 700;
+ color: $secondary;
+
+ @include hover {
+ color: $primary;
+ }
+ }
+ }
+
+ .title {
+ @include font-set($mobile-h2);
+
+ margin-top: 16px;
+ margin-bottom: 32px;
+
+ grid-column: 1 / -1;
+
+ @include on-tablet {
+ @include font-set($tablet-h2);
+
+ margin-bottom: 40px;
+ }
+ }
+
+ .slider {
+ grid-column: 1 / -1;
+
+ @include on-tablet {
+ grid-column: span 7;
+ }
+
+ @include on-desktop {
+ grid-column: span 12;
+ }
+
+ display: grid;
+ grid-template-columns: 1fr;
+ column-gap: 16px;
+
+ @include on-tablet {
+ grid-template-columns: repeat(7, 1fr);
+ }
+
+ @include on-desktop {
+ grid-template-columns: repeat(12, 1fr);
+ }
+
+ .mainImg {
+ grid-column: 1 / -1;
+
+ @include on-tablet {
+ grid-column: span 6;
+ }
+
+ @include on-desktop {
+ grid-column: span 10;
+ }
+ }
+
+ &__img {
+ display: flex;
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ object-fit: contain;
+ }
+
+ &__slide {
+ display: flex;
+ }
+
+ .thumbs {
+ grid-column: 1 / -1;
+
+ @include on-tablet {
+ grid-column: span 1;
+ grid-row: 1;
+ }
+
+ @include on-desktop {
+ grid-column: span 2;
+ }
+ }
+
+ &__thumbs {
+ width: 80px;
+ height: 80px;
+ object-fit: contain;
+ padding: 2px;
+ border: 1px solid $elements;
+ border-radius: 4px;
+ cursor: pointer;
+
+ @include on-tablet {
+ width: 100%;
+ }
+
+ &--active {
+ border: 1px solid $primary;
+ }
+ }
+ }
+
+ .main {
+ margin-top: 40px;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ grid-column: 1 / -1;
+
+ @include on-tablet {
+ grid-column: span 5;
+ }
+
+ @include on-desktop {
+ grid-column: 15 / span 7;
+ }
+
+ .selections {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .colors {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &__text {
+ display: flex;
+ justify-content: space-between;
+
+ &__available {
+ color: $secondary;
+ }
+
+ &__id {
+ color: $icons;
+ font-weight: 700;
+ }
+ }
+
+ &__selection {
+ display: flex;
+ gap: 8px;
+ width: fit-content;
+
+ &__container {
+ height: 32px;
+ width: 32px;
+ border: 1px solid $elements;
+ border-radius: 36px;
+ cursor: pointer;
+
+ @include hover {
+ border: 1px solid $icons;
+ }
+
+ &--active {
+ height: 32px;
+ width: 32px;
+ border: 1px solid $primary;
+ border-radius: 36px;
+ }
+ }
+
+ &__color {
+ height: 30px;
+ width: 30px;
+ border-radius: 36px;
+ border: 2px solid $white;
+ }
+ }
+ }
+
+ .divider {
+ border: 1px solid $elements;
+ }
+
+ .capacity {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &__text {
+ color: $secondary;
+ }
+
+ &__size {
+ display: flex;
+ gap: 8px;
+
+ &__container {
+ @include font-set($body-text);
+
+ border: 1px solid $icons;
+ border-radius: 4px;
+ padding: 7px 8px 4px;
+ cursor: pointer;
+
+ &--active {
+ color: $white;
+ background-color: $primary;
+ cursor: default;
+ }
+ }
+ }
+ }
+ }
+
+ .actions {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ .price {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+
+ &__discountPrice {
+ @include font-set($tablet-h2);
+ }
+
+ &__fullPrice {
+ font-size: 22px;
+ font-weight: 500;
+ line-height: 28.12px;
+ color: $secondary;
+ text-decoration: line-through;
+ }
+ }
+
+ .buttons {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+
+ &__addToCart {
+ padding: 13.5px;
+ width: 100%;
+ text-align: center;
+ background-color: $accent;
+ border-radius: 48px;
+ color: $white;
+ cursor: pointer;
+
+ @include hover {
+ box-shadow: 0 3px 13px 0 #17203166;
+ }
+
+ &--active {
+ border: 1px solid $elements;
+ color: $accent;
+ background-color: $hover-and-bg;
+ }
+ }
+
+ &__like {
+ padding: 16px;
+ border: 1px solid $icons;
+ border-radius: 40px;
+ cursor: pointer;
+
+ @include hover {
+ border: 1px solid $primary;
+ }
+
+ &__icon {
+ background-image: url(../../assets/img/icons/like.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ height: $icons-size;
+ width: $icons-size;
+
+ &--active {
+ background-image: url(../../assets/img/icons/like-active.svg);
+ }
+ }
+ }
+ }
+ }
+
+ .specification {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &__item {
+ display: flex;
+ justify-content: space-between;
+
+ &__key {
+ color: $secondary;
+ }
+
+ &__value {
+ font-weight: 700;
+ }
+ }
+ }
+ }
+
+ .about {
+ margin-top: 56px;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ grid-column: 1 / -1;
+
+ @include on-desktop {
+ grid-column: span 12;
+ }
+
+ &__title {
+ @include font-set($mobile-h3);
+
+ padding-bottom: 16px;
+ border-bottom: 1px solid $elements;
+ }
+
+ &__item {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ &__title {
+ @include font-set($mobile-h4);
+ }
+
+ &__description {
+ @include font-set($body-text);
+
+ color: $secondary;
+ }
+ }
+ }
+
+ .techSpecs {
+ margin-top: 56px;
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+
+ grid-column: 1 / -1;
+
+ @include on-desktop {
+ grid-column: 14 / span 11;
+ }
+
+ &__title {
+ @include font-set($tablet-h4);
+
+ padding-bottom: 16px;
+ border-bottom: 1px solid $elements;
+ }
+
+ .characteristics {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &__item {
+ display: flex;
+ justify-content: space-between;
+
+ &__key {
+ @include font-set($body-text);
+
+ font-weight: 500;
+
+ color: $secondary;
+ }
+
+ &__value {
+ @include font-set($body-text);
+ }
+ }
+ }
+ }
+
+ .productSlider {
+ margin-top: 56px;
+
+ grid-column: 1 / -1;
+ }
+
+ .notFoundProduct {
+ text-align: center;
+ background-color: $white;
+ border: 1px solid $elements;
+ border-radius: 36px;
+ padding: 16px;
+ margin-top: 32px;
+ grid-column: 1 / -1;
+
+ @include on-tablet {
+ grid-column: 2 / -2;
+ padding: 24px;
+ }
+
+ @include on-desktop {
+ grid-column: 6 / -6;
+ padding: 32px;
+ }
+
+ &__title {
+ @include font-set($mobile-h1);
+
+ @include on-tablet {
+ @include font-set($tablet-h1);
+ }
+ }
+
+ &__img {
+ width: 100%;
+ }
+ }
+}
diff --git a/src/modules/ItemCardPage/ItemCardPage.tsx b/src/modules/ItemCardPage/ItemCardPage.tsx
new file mode 100644
index 0000000000..b4b4ba5fd5
--- /dev/null
+++ b/src/modules/ItemCardPage/ItemCardPage.tsx
@@ -0,0 +1,396 @@
+import style from './ItemCardPage.module.scss';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';
+import 'swiper/scss';
+import { Autoplay, Thumbs } from 'swiper/modules';
+import { useContext, useEffect, useState } from 'react';
+import cn from 'classnames';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { getData } from '../../services/httpClient';
+import { ProductItem } from '../../types/ProductItem';
+import { FavouritesContext } from '../../store/FavouritesProvider';
+import { Product } from '../../types/Product';
+import notFoundProduct from '../../assets/img/product-not-found.png';
+import { Loader } from '../../components/Loader';
+import { CartContext } from '../../store/CartProvider';
+import { colorMap } from '../../utils/colorMap';
+import { ProductSlider } from '../../components/ProductSlider/ProductSlider';
+
+type ThumbsDirectionType = 'vertical' | 'horizontal';
+
+export const ItemCardPage = () => {
+ const [thumbsSwiper, setThumbsSwiper] = useState
+
+
+ Product Catalog
+Welcome to Nice Gadgets store!
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/modules/ItemCardPage/index.ts b/src/modules/ItemCardPage/index.ts
new file mode 100644
index 0000000000..8a4ff88f29
--- /dev/null
+++ b/src/modules/ItemCardPage/index.ts
@@ -0,0 +1 @@
+export * from './ItemCardPage';
diff --git a/src/modules/NotFoundPage/NotFoundPage.module.scss b/src/modules/NotFoundPage/NotFoundPage.module.scss
new file mode 100644
index 0000000000..e53ec83747
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.module.scss
@@ -0,0 +1,56 @@
+@import '../../main';
+
+.pageNotFound {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: $white;
+ border: 1px solid $elements;
+ border-radius: 36px;
+ padding: 16px;
+ margin: 32px auto 0;
+ width: 90%;
+
+ @include on-tablet {
+ padding: 24px;
+ width: 70%;
+ }
+
+ @include on-desktop {
+ padding: 32px;
+ width: 50%;
+ }
+
+ &__title {
+ @include font-set($mobile-h1);
+
+ @include on-tablet {
+ @include font-set($tablet-h1);
+ }
+ }
+
+ &__button {
+ @include font-set($buttons);
+
+ margin: 8px;
+ padding: 9.5px;
+ background-color: $accent;
+ color: $white;
+ border: 1px solid $icons;
+ border-radius: 36px;
+ cursor: pointer;
+ }
+
+ &__img {
+ width: 100%;
+
+ @include on-tablet {
+ width: 80%;
+ }
+
+ @include on-desktop {
+ width: 60%;
+ }
+ }
+}
diff --git a/src/modules/NotFoundPage/NotFoundPage.tsx b/src/modules/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 0000000000..b54b17ed1a
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,25 @@
+import { useNavigate } from 'react-router-dom';
+import notFoundPage from '../../assets/img/page-not-found.png';
+import style from './NotFoundPage.module.scss';
+
+export const NotFoundPage = () => {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+ navigate(`/${category}`)}>
+
+ Back
+ + + {loader &&
+ 
+
+ )}
+ {currentProduct && !loader && (
+ <>
+ Product wasn`t found
+{currentProduct.name}
+ +
+ setActiveIndex(swiper.activeIndex)}
+ className={style.mainImg}
+ >
+ {images?.map((img, index) => (
+
+
+
+ ))}
+
+
+ setThumbsSwiper(swiper)}
+ slidesPerView={images?.length}
+ spaceBetween={thumbsDirection === 'horizontal' ? 20 : 0}
+ className={style.thumbs}
+ direction={thumbsDirection}
+ updateOnWindowResize={false}
+ >
+
+
+
+
+ {images?.map((image, index) => (
+
+ 
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Available colors +
+ID: 802390
+-
+ {currentProduct.colorsAvailable.map(color => (
+
- handleChangeColor(color)} + > + + + ))} +
+
+
+
+ + {currentProduct.category === 'accessories' + ? 'Select Size' + : 'Select capacity'} +
+
+ {currentProduct.capacityAvailable.map(item => (
+
+ handleChangeCapacity(item)} + > + {item} +
+ ))} +
+
+
+
+
+
+ + ${currentProduct.priceDiscount} +
++ ${currentProduct.priceRegular} +
+
+
+
+
+ productFromGeneralList && handleLike(productFromGeneralList)
+ }
+ >
+
+
+
+ {}
+
+
+
+
+ Screen
++ {currentProduct.screen} +
+
+
+
+ Resolution
++ {currentProduct.resolution} +
+
+
+
+ Processor
++ {currentProduct.processor} +
+
+
+ RAM
++ {currentProduct.ram} +
+
+
+
+ About
+ {currentProduct.description.map(item => ( +
+
+ ))}
+ {item.title}
+{item.text}
+
+
+ Tech specs
+ +
+
+
+
+
+
+ Resolution
+
+
+ {currentProduct.resolution}
+
+
+
+
+
+ Processor
+
+
+ {currentProduct.processor}
+
+
+
+
+ RAM
+
+ {currentProduct.ram}
+
+
+
+
+ {currentProduct.category !== 'accessories' && (
+
+ {currentProduct.category === 'accessories'
+ ? 'Size'
+ : 'Built in memory'}
+
+
+ {currentProduct.capacity}
+
+
+
+ )}
+
+ Camera
+
+ {currentProduct.camera}
+
+
+
+
+ Zoom
+
+ Optical, 2x
+
+
+
+ Cell
+
+ {currentProduct.cell.map((item, index) =>
+ index !== currentProduct.cell.length - 1
+ ? item + ', '
+ : item,
+ )}
+
+
+
+
+ )}
+
+ 
+
+ );
+};
diff --git a/src/modules/NotFoundPage/index.ts b/src/modules/NotFoundPage/index.ts
new file mode 100644
index 0000000000..6197aa75aa
--- /dev/null
+++ b/src/modules/NotFoundPage/index.ts
@@ -0,0 +1 @@
+export * from './NotFoundPage';
diff --git a/src/services/httpClient.ts b/src/services/httpClient.ts
new file mode 100644
index 0000000000..5d5b9269c2
--- /dev/null
+++ b/src/services/httpClient.ts
@@ -0,0 +1,9 @@
+export async function getData