+ {item.title} +
++ {item.text} +
+
+
*/}
+
+ );
+};
diff --git a/src/components/BreadCrumbs/index.tsx b/src/components/BreadCrumbs/index.tsx
new file mode 100644
index 0000000000..8ffa35f61f
--- /dev/null
+++ b/src/components/BreadCrumbs/index.tsx
@@ -0,0 +1 @@
+export * from './BreadCrumbs';
diff --git a/src/components/Carousel/Carousel.scss b/src/components/Carousel/Carousel.scss
new file mode 100644
index 0000000000..01766415a5
--- /dev/null
+++ b/src/components/Carousel/Carousel.scss
@@ -0,0 +1,123 @@
+@import '../../styles/main';
+
+.Carousel {
+ margin-top: 24px;
+
+ @include on-tablet {
+ margin-top: 32px;
+ }
+
+ @include on-desktop {
+ margin-top: 56px;
+ }
+
+ &__slider {
+ height: 352px;
+ max-width: 1200px;
+
+ @include on-tablet {
+ display: flex;
+ gap: 19px;
+ height: 221px;
+ padding-inline: 24px;
+ }
+
+ @include on-desktop {
+ height: 432px;
+ gap: 16px;
+ margin: 0 auto;
+ }
+
+ &-button {
+ display: none;
+
+ @include on-tablet {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 189px;
+ width: 32px;
+ background-color: var(--surface-color2);
+ border: 1px solid var(--carousel-border-btn);
+ cursor: pointer;
+
+ &:hover {
+ border-color: $primaryColor;
+ background-color: var(--hov-bg-slider-btn);
+ }
+ }
+
+ @include on-desktop {
+ height: 400px;
+ }
+ }
+
+ &-container {
+ height: 320px;
+ width: 100%;
+ overflow: hidden;
+
+ @include on-tablet {
+ height: 189px;
+ }
+
+ @include on-desktop {
+ height: 400px;
+ }
+ }
+
+ &-list {
+ height: 100%;
+ width: 300%;
+ display: flex;
+ transition: transform 1s;
+ }
+
+ &-item {
+ height: 100%;
+ width: 100%;
+ }
+
+ &-image {
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ }
+ }
+
+ &__dots {
+ display: flex;
+ gap: 4px;
+ justify-content: center;
+ margin-top: 8px;
+
+ &-container {
+ display: flex;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &-item {
+ width: 14px;
+ height: 4px;
+ background-color: var(--elements-color);
+ border: none;
+ cursor: pointer;
+ }
+ }
+}
+
+.banner-active {
+ background-color: var(--text-color);
+}
+
+.icon {
+ &--left {
+ &_img {
+ transform: rotate(180deg);
+ }
+ }
+}
diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx
new file mode 100644
index 0000000000..3788493d0d
--- /dev/null
+++ b/src/components/Carousel/Carousel.tsx
@@ -0,0 +1,126 @@
+import bannerPhones from '../../images/slider/banner-phones.png';
+import bannerTablets from '../../images/slider/banner-tablets.png';
+import bannerAccess from '../../images/slider/banner-accessories.png';
+import arrow from '../../images/icons/arrow_right.png';
+import arrowDark from '../../images/icons/arrow_dark.svg';
+import './Carousel.scss';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { useAppSelector } from '../../hooks/hooks';
+
+const images = [bannerPhones, bannerTablets, bannerAccess];
+
+export const Carousel = () => {
+ const firstImageIndex = 0;
+ const lastImageIndex = images.length - 1;
+
+ const [sliderWidth, setSliderWidth] = useState(0);
+ const [currentImageIndex, setCurrentImageIndex] = useState(firstImageIndex);
+
+ const { theme } = useAppSelector(state => state.theme);
+
+ const banner = useRef
+ 
+
+
+ {!productName ? (
+
+
+
+
+ {/*
+
+
+
+
+
+
+ {translate(categoryName)}
+ ) : ( + <> + + {translate(categoryName)} + + + ++ {capitalize(productName.slice(1))} +
+ + )} +
+
+
+
+
+
+
+
+
+ -
+ {images.map(image => (
+
-
+
+
+ ))}
+
+ {images.map((image, i) => (
+ // eslint-disable-next-line jsx-a11y/label-has-associated-control
+
+ ))}
+
+
+
+ );
+});
+
+CartItem.displayName = 'CartItem';
diff --git a/src/components/CartItem/index.tsx b/src/components/CartItem/index.tsx
new file mode 100644
index 0000000000..37a0553540
--- /dev/null
+++ b/src/components/CartItem/index.tsx
@@ -0,0 +1 @@
+export * from './CartItem';
diff --git a/src/components/Categories/Categories.scss b/src/components/Categories/Categories.scss
new file mode 100644
index 0000000000..75a2eaa69f
--- /dev/null
+++ b/src/components/Categories/Categories.scss
@@ -0,0 +1,99 @@
+@import '../../styles/main';
+
+.categories {
+ margin-top: 56px;
+
+ @include on-tablet {
+ margin-top: 64px;
+ }
+
+ @include on-desktop {
+ margin-top: 80px;
+ }
+
+ &__content {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ }
+
+ &__title {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 22px;
+ line-height: 30.8px;
+ color: var(--text-color);
+ margin-bottom: 24px;
+
+ @include on-tablet {
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -1%;
+ }
+ }
+
+ &__items {
+ @include on-tablet {
+ @include page-grid;
+ }
+ }
+
+ &__item {
+ grid-column: span 4;
+
+ @include on-desktop {
+ grid-column: span 8;
+ }
+
+ &_link {
+ height: 288px;
+ width: 100%;
+ cursor: pointer;
+
+ &-img {
+ height: 288px;
+ width: 100%;
+ object-fit: cover;
+ transition: transform 0.5s;
+ }
+
+ &-img:hover {
+ transform: scale(1.05);
+ }
+ }
+ }
+
+ &__info {
+ margin-top: 24px;
+
+ &--title {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 25.56px;
+ color: var(--text-color);
+ }
+
+ &--text {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ color: $secondaryColor;
+ }
+ }
+}
+
+.container {
+ padding-inline: 16px;
+
+ @include on-tablet {
+ padding-inline: 24px;
+ }
+
+ @include on-desktop {
+ padding-inline: 32px;
+ max-width: 1200px;
+ margin-inline: auto;
+ }
+}
diff --git a/src/components/Categories/Categories.tsx b/src/components/Categories/Categories.tsx
new file mode 100644
index 0000000000..6ffa295835
--- /dev/null
+++ b/src/components/Categories/Categories.tsx
@@ -0,0 +1,78 @@
+import './Categories.scss';
+import phones from '../../images/categories/Phones.png';
+import tablets from '../../images/categories/tablets.png';
+import accessories from '../../images/categories/accessories.png';
+import { Link } from 'react-router-dom';
+import { useAppSelector } from '../../hooks/hooks';
+import { useTranslation } from 'react-i18next';
+
+type CategoriesCard = {
+ title: string;
+ image: string;
+ type: string;
+};
+
+type CategoriesList = {
+ phones: CategoriesCard;
+ tablets: CategoriesCard;
+ accessories: CategoriesCard;
+};
+
+export const Categories = () => {
+ const { prods } = useAppSelector(state => state.prods);
+ const { t } = useTranslation();
+
+ const productsCount = (type: string) => {
+ const newProds = prods.filter(product => product.category === type);
+
+ return newProds.length;
+ };
+
+ const categoriesList: CategoriesList = {
+ phones: {
+ title: t('homePage.categories.category.phones'),
+ image: phones,
+ type: 'phones',
+ },
+ tablets: {
+ title: t('homePage.categories.category.tablets'),
+ image: tablets,
+ type: 'tablets',
+ },
+ accessories: {
+ title: t('homePage.categories.category.accessories'),
+ image: accessories,
+ type: 'accessories',
+ },
+ };
+
+ return (
+
+
+
+ dispatch(removeFromCart(product.id))}
+ >
+
+
+
+
+ 
+
+
+ {product.name}
+
+
+
+
+ handleMinus(product.id)}
+ >
+ 
+
+
+ {product.quantity}
+
+ handlePlus(product.id)}>
+
+
+ {`$${price}`}
+
+
+
+
+ + {t('homePage.categories.categoriesTitle')} +
+
+ {Object.values(categoriesList).map(category => (
+
+
+
+ 
+
+
+
+ ))}
+
+
+ {category.title}
+{`${productsCount(category.type)} models`}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/DropdownMenu/index.tsx b/src/components/DropdownMenu/index.tsx
new file mode 100644
index 0000000000..8aadf2fa5f
--- /dev/null
+++ b/src/components/DropdownMenu/index.tsx
@@ -0,0 +1 @@
+export * from './DropdownMenu';
diff --git a/src/components/Filter/Filter.scss b/src/components/Filter/Filter.scss
new file mode 100644
index 0000000000..10ad5e7d90
--- /dev/null
+++ b/src/components/Filter/Filter.scss
@@ -0,0 +1,73 @@
+@import '../../styles/main';
+
+.filter {
+ margin-top: 40px;
+
+ @include on-tablet {
+ margin-top: 0;
+ }
+
+ &__top {
+ display: flex;
+ justify-content: space-between;
+
+ &-title {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--secondary-color);
+ }
+
+ &-id {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--secondary-color);
+
+ @include on-desktop {
+ position: absolute;
+ right: 0;
+ }
+ }
+ }
+
+ &__list {
+ display: flex;
+ flex-direction: row;
+ margin-top: 8px;
+ gap: 8px;
+
+ &-item {
+ display: flex;
+ width: 32px;
+ height: 32px;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid var(--elements-color);
+ border-radius: 50%;
+ background-color: var(--bg-color);
+ cursor: pointer;
+
+ &_is-active {
+ border-color: var(--text-color);
+ pointer-events: none;
+ }
+
+ &:hover {
+ border-color: var(--filter-color-border-hover);
+ }
+ }
+
+ &-circle {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid var(--bg-color);
+ border-radius: 50%;
+ }
+ }
+}
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
new file mode 100644
index 0000000000..fa0153a2b3
--- /dev/null
+++ b/src/components/Filter/Filter.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import './Filter.scss';
+import { ProductDetails } from '../../types/ProductDetails';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import classNames from 'classnames';
+import { Product } from '../../types/Product';
+import { Colors } from '../../constants/Colors';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+ product: ProductDetails | undefined;
+ products: Product[];
+};
+
+export const Filter: React.FC-
+ {options.map(option => (
+
- { + setIsActive(false); + + handleSelectOpiton(option); + }} + > + {option} + + ))} + + {/*
- { + setIsActive(false); + + handleSelectOpiton(t('dropdownMenu.item.newest')); + }} + > + {t('dropdownMenu.item.newest')} + +
- { + setIsActive(false); + handleSelectOpiton(t('dropdownMenu.item.alphabetically')); + }} + > + {t('dropdownMenu.item.alphabetically')} + +
- { + setIsActive(false); + handleSelectOpiton(t('dropdownMenu.item.cheapset')); + }} + > + {t('dropdownMenu.item.cheapset')} + */} +
+
+ );
+});
+
+Filter.displayName = 'Filter';
diff --git a/src/components/Filter/index.tsx b/src/components/Filter/index.tsx
new file mode 100644
index 0000000000..0eea77907f
--- /dev/null
+++ b/src/components/Filter/index.tsx
@@ -0,0 +1 @@
+export * from './Filter';
diff --git a/src/components/FilterCapacity/FilterCapacity.scss b/src/components/FilterCapacity/FilterCapacity.scss
new file mode 100644
index 0000000000..db19398f4b
--- /dev/null
+++ b/src/components/FilterCapacity/FilterCapacity.scss
@@ -0,0 +1,49 @@
+@import '../../styles/main';
+
+.filterCapacity {
+ width: 100%;
+ margin-top: 40px;
+
+ &__top {
+ display: flex;
+ justify-content: space-between;
+
+ &-title {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--secondary-color);
+ }
+ }
+
+ &__list {
+ display: flex;
+ flex-flow: wrap;
+ flex-direction: row;
+ margin-top: 8px;
+ gap: 8px;
+
+ &-item {
+ height: 32px;
+ border: 1px solid var(--icons-color);
+ cursor: pointer;
+ padding: 7px 8px 4px;
+ font-family: Mont, sans-serif;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--text-color);
+
+ &:hover {
+ background-color: var(--filter-capacity-hover);
+ }
+ }
+ }
+}
+
+.is-active {
+ background-color: var(--text-color);
+ color: var(--filter-capacity-btn-text-active);
+ pointer-events: none;
+}
diff --git a/src/components/FilterCapacity/FilterCapacity.tsx b/src/components/FilterCapacity/FilterCapacity.tsx
new file mode 100644
index 0000000000..6e5ac021ce
--- /dev/null
+++ b/src/components/FilterCapacity/FilterCapacity.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import './FilterCapacity.scss';
+import { ProductDetails } from '../../types/ProductDetails';
+import { useLocation, useNavigate } from 'react-router-dom';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+ product: ProductDetails | undefined;
+};
+
+export const FilterCapacity: React.FC
+
+
+ {t('filter.title')}
+ {`ID: 802${selectedItem?.id}`}
+ -
+ {colors?.map(item => (
+
-
+ replaceColor(item)} + >+
+ ))}
+
+
+ );
+});
+
+FilterCapacity.displayName = 'FilterCapacity';
diff --git a/src/components/FilterCapacity/index.tsx b/src/components/FilterCapacity/index.tsx
new file mode 100644
index 0000000000..df539ad5dc
--- /dev/null
+++ b/src/components/FilterCapacity/index.tsx
@@ -0,0 +1 @@
+export * from './FilterCapacity';
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
new file mode 100644
index 0000000000..1edc15c1db
--- /dev/null
+++ b/src/components/Footer/Footer.scss
@@ -0,0 +1,125 @@
+@import '../../styles/main';
+
+.Footer {
+ margin-top: auto;
+ border-top: 1px solid var(--elements-color);
+ width: 100%;
+ background-color: var(--bg-color);
+ bottom: 0;
+
+ &__content {
+ width: 100%;
+ height: 257px;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ @include on-tablet {
+ width: 100%;
+ height: 96px;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ gap: 0;
+ }
+ }
+
+ &__logo {
+ margin-top: 32px;
+
+ @include on-tablet {
+ margin-top: 0;
+ }
+ }
+
+ &__nav {
+ &-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-tablet {
+ flex-direction: row;
+ gap: 13.5px;
+ }
+
+ @include on-desktop {
+ gap: 106.83px;
+ }
+ }
+
+ &-item {
+ width: 70px;
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 12px;
+ line-height: 11px;
+ letter-spacing: 4%;
+ color: var(--footer-nav-link-color);
+ cursor: pointer;
+
+ &-link {
+ text-decoration: none;
+ color: var(--footer-nav-link-color);
+
+ &:hover {
+ color: var(--footer-nav-link-hover-color);
+ }
+ }
+ }
+
+ &-item:hover {
+ color: var(--footer-nav-link-hover-color);
+ }
+ }
+
+ &__button {
+ margin-inline: auto;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ &-hiden {
+ display: none;
+
+ @include on-tablet {
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ }
+ }
+
+ @include on-tablet {
+ margin-inline: 0;
+ }
+
+ &-text {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--header-link-color);
+ }
+
+ &-link {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 32px;
+ height: 32px;
+ background-color: var(--footer-btn-bg-color);
+ border: 1px solid var(--slider-border-btn);
+ cursor: pointer;
+ transition-duration: transform 0.5s;
+
+ &:hover {
+ border-color: $primaryColor;
+ background-color: var(--hov-bg-slider-btn);
+ }
+ }
+
+ &-img {
+ transform: rotate(270deg);
+ }
+ }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000000..a4562ab995
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,82 @@
+import './Footer.scss';
+import logo from '../../images/logo/logo-header.svg';
+import logoDark from '../../images/logo/logo_dark.svg';
+import arrow from '../../images/icons/arrow_right.png';
+import arrowDark from '../../images/icons/arrow_dark.svg';
+import { Link } from 'react-router-dom';
+import { useAppSelector } from '../../hooks/hooks';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+export const Footer: React.FC = () => {
+ const goTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
+ const [isScrolled, setIsScrolled] = useState(false);
+ const { theme } = useAppSelector(state => state.theme);
+ const { t } = useTranslation();
+
+ useEffect(() => {
+ const handleScroll = () => {
+ if (window.scrollY > 0) {
+ setIsScrolled(true);
+ } else {
+ setIsScrolled(false);
+ }
+ };
+
+ window.addEventListener('scroll', handleScroll);
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, []);
+
+ return (
+
+ {t('filterCapacity.title')}
+
+
+ -
+ {capacityArr?.map(item => (
+
- replaceCapacity(item)} + > + {item} + + ))} +
+
+ );
+};
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 0000000000..ddcc5a9cd1
--- /dev/null
+++ b/src/components/Footer/index.tsx
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
new file mode 100644
index 0000000000..f0c3e9396b
--- /dev/null
+++ b/src/components/Header/Header.scss
@@ -0,0 +1,469 @@
+@import '../../styles/main';
+
+.header {
+ &__top-bar {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ height: 48px;
+ width: 100%;
+ border-bottom: 1px solid var(--border-color);
+
+ @include on-desktop {
+ height: 64px;
+ }
+
+ &_left {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ height: 100%;
+ }
+
+ &_right {
+ display: flex;
+ flex-direction: row;
+ justify-content: end;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &__nav {
+ display: none;
+
+ @include on-tablet {
+ display: flex;
+ gap: 16px;
+ justify-content: space-between;
+ height: 48px;
+ width: 100%;
+ }
+
+ &--list {
+ display: flex;
+ align-items: center;
+ gap: 32px;
+
+ @include on-desktop {
+ gap: 64px;
+ }
+ }
+
+ &--item {
+ gap: 32px;
+
+ &_link {
+ text-decoration: none;
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 12px;
+ line-height: 11px;
+ letter-spacing: 4%;
+ color: var(--header-link-color);
+
+ &--active {
+ color: var(--text-color);
+ border-bottom: 2px solid var(--text-color);
+
+ @include on-tablet {
+ padding-bottom: 11px;
+ }
+
+ @include on-desktop {
+ padding-bottom: 20px;
+ }
+ }
+ }
+
+ &_link:hover {
+ color: var(--text-color);
+ }
+ }
+ }
+
+ &__theme {
+ width: 48px;
+ height: 48px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-left: 1px solid var(--border-color);
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--elements-color);
+ }
+
+ @include on-desktop {
+ width: 64px;
+ height: 64px;
+ }
+
+ &-button {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 12px;
+ line-height: 11px;
+ letter-spacing: 4%;
+ color: var(--text-color);
+ cursor: pointer;
+
+ &-img {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ }
+ }
+ }
+
+ &__lang {
+ width: 48px;
+ height: 48px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-left: 1px solid var(--border-color);
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--elements-color);
+ }
+
+ @include on-desktop {
+ width: 64px;
+ height: 64px;
+ }
+
+ &-button {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 12px;
+ line-height: 11px;
+ letter-spacing: 4%;
+ color: var(--text-color);
+ cursor: pointer;
+ }
+ }
+
+ &__icons {
+ display: none;
+
+ @include on-tablet {
+ display: flex;
+ justify-content: end;
+ }
+
+ &--favourites {
+ width: 48px;
+ height: 48px;
+ border-inline: 1px solid var(--elements-color);
+ position: relative;
+
+ &-isActive {
+ background-color: var(--elements-color);
+ }
+
+ &:hover {
+ background-color: var(--elements-color);
+ }
+
+ @include on-desktop {
+ width: 64px;
+ height: 64px;
+ }
+
+ &_img {
+ padding: 16px;
+
+ &-count {
+ width: 14px;
+ height: 14px;
+ background-color: #eb5757;
+ border: 2px solid $whiteColor;
+ border-radius: 50%;
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 9px;
+ line-height: 11.5px;
+ color: $whiteColor;
+ display: flex;
+ justify-content: center;
+ }
+
+ @include on-desktop {
+ padding: 24px;
+ }
+ }
+ }
+
+ &--cart {
+ width: 48px;
+ height: 48px;
+ position: relative;
+
+ &-isActive {
+ background-color: var(--elements-color);
+ }
+
+ &:hover {
+ background-color: var(--elements-color);
+ }
+
+ @include on-desktop {
+ width: 64px;
+ height: 64px;
+ }
+
+ &_img {
+ padding: 16px;
+
+ &-count {
+ width: 14px;
+ height: 14px;
+ background-color: #eb5757;
+ border: 2px solid $whiteColor;
+ border-radius: 50%;
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 9px;
+ line-height: 11.5px;
+ color: $whiteColor;
+ display: flex;
+ justify-content: center;
+ }
+
+ @include on-desktop {
+ padding: 24px;
+ }
+ }
+ }
+ }
+
+ &__logo {
+ padding: 16px;
+
+ @include on-desktop {
+ padding: 18px 24px;
+ }
+
+ &_img {
+ height: 22px;
+ width: 64px;
+
+ @include on-desktop {
+ height: 28px;
+ width: 80px;
+ }
+ }
+ }
+}
+
+.burger_menu_icon {
+ padding: 13px;
+ height: 48px;
+ width: 48px;
+ border-left: 1px solid var(--elements-color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &_link {
+ height: 16px;
+ width: 16px;
+ }
+
+ &_img {
+ display: flex;
+ justify-content: center;
+ }
+
+ @include on-tablet {
+ display: none;
+ }
+}
+
+.burger_menu {
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ background-color: var(--bg-color);
+ z-index: 0;
+ transform: translateX(-100%);
+ transition: transform 0.3s;
+
+ &__top {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ height: 48px;
+ border-bottom: 1px solid var(--elements-color);
+ }
+
+ &__logo {
+ padding: 16px;
+
+ &_img {
+ height: 22px;
+ width: 64px;
+ }
+ }
+
+ &__icon {
+ padding: 16px;
+ height: 48px;
+ width: 48px;
+ border-left: 1px solid var(--elements-color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &_img {
+ display: flex;
+ justify-content: center;
+ }
+ }
+
+ &__nav {
+ display: flex;
+ justify-content: center;
+ margin-top: 24px;
+ width: 100%;
+
+ &--list {
+ display: flex;
+ gap: 16px;
+ flex-direction: column;
+ }
+
+ &--item {
+ text-align: center;
+
+ &_link {
+ text-decoration: none;
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 12px;
+ line-height: 11px;
+ letter-spacing: 4%;
+ color: $secondaryColor;
+
+ &--active {
+ border-bottom: 1px solid $primaryColor;
+ }
+ }
+
+ &_link:hover {
+ color: var(--text-color);
+ }
+ }
+ }
+
+ &__bottom {
+ display: flex;
+ justify-content: center;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ &-theme {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ &-button {
+ &-img {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ }
+ }
+ }
+
+ &-lang {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ &-button {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 12px;
+ line-height: 11px;
+ letter-spacing: 4%;
+ color: var(--text-color);
+ }
+ }
+
+ &-fav {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ &-cart {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ &_icon {
+ height: 64px;
+ width: 100%;
+ position: relative;
+ border: 1px solid var(--elements-color);
+
+ &:hover {
+ background-color: var(--elements-color);
+ }
+
+ &--img {
+ position: relative;
+
+ &-count {
+ width: 14px;
+ height: 14px;
+ background-color: $redColor;
+ border: 2px solid $whiteColor;
+ border-radius: 50%;
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 9px;
+ line-height: 11.5px;
+ color: $whiteColor;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+ }
+ }
+}
+
+.burger_menu:target {
+ opacity: 1;
+ pointer-events: all;
+ z-index: 2;
+ transform: translateX(0);
+}
+
+.scroll {
+ overflow: hidden;
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000000..77b6ff7ef7
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,314 @@
+import logo from '../../images/logo/logo-header.svg';
+import logoDark from '../../images/logo/logo_dark.svg';
+import fav from '../../images/icons/favourites.svg';
+import favDark from '../../images/icons/fav_dark.svg';
+import cart from '../../images/icons/cart.svg';
+import cartDark from '../../images/icons/cart_dark.svg';
+import burgerMenu from '../../images/icons/burger-menu.svg';
+import burgerMenuDark from '../../images/icons/menu_dark.svg';
+import close from '../../images/icons/close.svg';
+import closeDark from '../../images/icons/close_dark.svg';
+import sun from '../../images/icons/sun_white.svg';
+import moon from '../../images/icons/moon_png.png';
+import { Link, NavLink, useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { useAppDispath, useAppSelector } from '../../hooks/hooks';
+import classNames from 'classnames';
+import { SearchField } from '../SearchField';
+import { toggleTheme } from '../../features/theme';
+import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
+import { Lang } from '../../types/Language';
+
+import './Header.scss';
+
+const getLinkClass = ({ isActive }: { isActive: boolean }) =>
+ classNames('header__nav--item_link', {
+ 'header__nav--item_link--active': isActive,
+ });
+
+export const Header = () => {
+ const [isOpen, setIsOpen] = useState(false);
+ const { favourites } = useAppSelector(state => state.favourites);
+ const { productsOfCart } = useAppSelector(state => state.cart);
+
+ const { theme } = useAppSelector(state => state.theme);
+
+ const { t } = useTranslation();
+
+ const dispatch = useAppDispath();
+
+ const location = useLocation();
+ const isSearchField =
+ location.pathname === '/phones' ||
+ location.pathname === '/tablets' ||
+ location.pathname === '/accessories';
+
+ const changeLang = () => {
+ const lang = i18next.language === Lang.EN ? Lang.UK : Lang.EN;
+
+ i18next.changeLanguage(lang);
+ };
+
+ useEffect(() => {
+ localStorage.setItem('theme', theme);
+ document.body.classList.remove('light-theme', 'dark-theme');
+ document.body.classList.add(theme);
+
+ if (isOpen === true) {
+ document.body.classList.add('scroll');
+ } else {
+ document.body.classList.remove('scroll');
+ }
+ }, [theme, isOpen]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- + + GITHUB + + +
- {t('footer.contacts')} +
- {t('footer.rights')} +
+
+ {t('footer.backToTop')}
+ +
+
+
+ {isOpen && (
+
+ )}
+
+ );
+};
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 0000000000..266dec8a1b
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/src/components/ItemsDropdown/ItemsDropdown.scss b/src/components/ItemsDropdown/ItemsDropdown.scss
new file mode 100644
index 0000000000..cca1e1b6d4
--- /dev/null
+++ b/src/components/ItemsDropdown/ItemsDropdown.scss
@@ -0,0 +1,103 @@
+@import '../../styles/main';
+
+.itemsDropdown {
+ height: 59px;
+ width: 136px;
+
+ @include on-tablet {
+ width: 136px;
+ }
+
+ &__label {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--secondary-color);
+ }
+
+ &__button {
+ width: 100%;
+ height: 40px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-inline: 12px;
+ border: 1px solid var(--dropdown-border-color);
+ background-color: var(--dropdown-bg-color);
+ cursor: pointer;
+
+ &:hover {
+ border-color: var(--dropdown-border-hover-color);
+ }
+
+ &-text {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--text-color);
+ }
+
+ &-img {
+ width: 16px;
+ height: 16px;
+
+ &-active {
+ transform: rotate(90deg);
+ }
+ }
+ }
+
+ &__list {
+ display: none;
+
+ &-isActive {
+ display: initial;
+ width: 136px;
+ background-color: var(--bg-color);
+ border: 1px solid var(--dropdown-list-border);
+ flex-direction: column;
+ justify-content: center;
+ gap: 8px;
+ position: absolute;
+ margin-top: 5px;
+ z-index: 100;
+ }
+ }
+
+ &__item {
+ width: 100%;
+ height: 40px;
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--secondary-color);
+ cursor: pointer;
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding-left: 12px;
+
+ &:hover {
+ background-color: var(--dropdown-list-bg-hover);
+ color: var(--text-color);
+ }
+ }
+}
+
+// .active {
+// display: initial;
+// width: 136px;
+// background-color: $whiteColor;
+// padding-inline: 12px;
+// border: 1px solid $iconsColor;
+// display: flex;
+// flex-direction: column;
+// justify-content: center;
+// gap: 8px;
+// position: absolute;
+// margin-top: 5px;
+// z-index: 100;
+// }
diff --git a/src/components/ItemsDropdown/ItemsPropdown.tsx b/src/components/ItemsDropdown/ItemsPropdown.tsx
new file mode 100644
index 0000000000..55fbfa7cfc
--- /dev/null
+++ b/src/components/ItemsDropdown/ItemsPropdown.tsx
@@ -0,0 +1,102 @@
+import './ItemsDropdown.scss';
+import arrow from '../../images/icons/arrow_right.png';
+import arrowDark from '../../images/icons/arrow_dark.svg';
+import classNames from 'classnames';
+import { useState, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useAppSelector } from '../../hooks/hooks';
+import { useTranslation } from 'react-i18next';
+
+export const ItemsDropdown = () => {
+ const [isActive, setIsActive] = useState(false);
+ const { theme } = useAppSelector(state => state.theme);
+ const { t } = useTranslation();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const dropdownRef = useRef
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isSearchField &&
+
+ setIsOpen(true)}
+ >
+
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+
+
+
+
+ classNames('header__icons--favourites', {
+ 'header__icons--favourites-isActive': isActive,
+ })
+ }
+ >
+
+ {favourites.length > 0 && (
+
+
+
+ classNames('header__icons--cart', {
+ 'header__icons--cart-isActive': isActive,
+ })
+ }
+ >
+
+ {productsOfCart.length > 0 && (
+
+
+
+ {favourites.length}
+
+ )}
+
+ {/* {productsOfCart.length} */}
+ {productsOfCart.reduce(
+ (acc, item) => acc + item.quantity,
+ 0,
+ )}
+
+ )}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/ItemsDropdown/index.tsx b/src/components/ItemsDropdown/index.tsx
new file mode 100644
index 0000000000..bd21496902
--- /dev/null
+++ b/src/components/ItemsDropdown/index.tsx
@@ -0,0 +1 @@
+export * from '../ItemsDropdown';
diff --git a/src/components/Loader/Loader.scss b/src/components/Loader/Loader.scss
new file mode 100644
index 0000000000..6356b44223
--- /dev/null
+++ b/src/components/Loader/Loader.scss
@@ -0,0 +1,28 @@
+@import '../../styles/main';
+
+.loader {
+ display: flex;
+ width: 100%;
+ height: 50vh;
+ justify-content: center;
+ align-items: center;
+
+ &__content {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ border: 5px solid #ddd;
+ border-left-color: #000;
+ animation: load 1.2s infinite linear;
+ }
+}
+
+@keyframes load {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
new file mode 100644
index 0000000000..13153ad22b
--- /dev/null
+++ b/src/components/Loader/Loader.tsx
@@ -0,0 +1,9 @@
+import './Loader.scss';
+
+export const Loader = () => {
+ return (
+ -
+ {options.map(option => (
+
- { + handleSelectOption(option); + setIsActive(false); + }} + > + {option} + + ))} +
+
+
+ );
+};
diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
new file mode 100644
index 0000000000..d5ce981151
--- /dev/null
+++ b/src/components/Loader/index.tsx
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
new file mode 100644
index 0000000000..d0785cd3eb
--- /dev/null
+++ b/src/components/Modal/Modal.scss
@@ -0,0 +1,74 @@
+@import '../../styles/main';
+
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+ background-color: rgba(108, 109, 116, 0.49);
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &__box {
+ width: 420px;
+ height: 200px;
+ display: flex;
+ flex-direction: column;
+ border: 2px solid $primaryColor;
+ border-radius: 15px;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+ background-color: var(--bg-color);
+ }
+
+ &__title {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 25px;
+ color: var(--text-color);
+ }
+
+ &__question {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 25px;
+ color: var(--text-color);
+ margin-top: 15px;
+ }
+
+ &__buttons {
+ margin-top: 25px;
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ justify-content: center;
+ align-items: center;
+ height: 40px;
+ width: 100%;
+ }
+
+ &__button {
+ width: 100%;
+ background-color: var(--modal-btn-bg);
+ border: 1px solid var(--icons-color);
+ cursor: pointer;
+ height: 40px;
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 21px;
+ color: var(--secondary-color);
+ border-radius: 15px;
+
+ &:hover {
+ border-color: $primaryColor;
+ color: var(--text-color);
+ }
+ }
+}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
new file mode 100644
index 0000000000..72a349d3bb
--- /dev/null
+++ b/src/components/Modal/Modal.tsx
@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next';
+import { clearCart } from '../../features/cart';
+import { useAppDispath } from '../../hooks/hooks';
+import './Modal.scss';
+import React from 'react';
+
+type Props = {
+ setIsOpen: (value: boolean) => void;
+};
+
+export const Modal: React.FC
+
+ );
+});
+
+Modal.displayName = 'Modal';
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
new file mode 100644
index 0000000000..cb89ee1788
--- /dev/null
+++ b/src/components/Modal/index.tsx
@@ -0,0 +1 @@
+export * from './Modal';
diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss
new file mode 100644
index 0000000000..35191dbaf5
--- /dev/null
+++ b/src/components/Pagination/Pagination.scss
@@ -0,0 +1,94 @@
+@import '../../styles/main';
+
+.pagination {
+ width: 100%;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ flex-flow: row wrap;
+ margin-top: 24px;
+
+ @include on-tablet {
+ margin-top: 40px;
+ }
+
+ &__button {
+ display: flex;
+ width: 32px;
+ height: 32px;
+ border: 1px solid var(--pagination-btn-border);
+ border-style: none;
+ background-color: var(--pagination-btn-bg);
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ &:hover {
+ border-color: var(--pagination-btn-border-hover);
+ background-color: var(--pagination-btn-bg-hover);
+ }
+
+ &-right {
+ &--disable {
+ pointer-events: none;
+ opacity: 0.5;
+ }
+ }
+
+ &-left {
+ &--disable {
+ pointer-events: none;
+ opacity: 0.5;
+ }
+ }
+
+ &-imgLeft {
+ transform: rotate(180deg);
+ }
+
+ &-imgRight {
+ &--disable {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ &__block {
+ width: 152px;
+ margin-inline: 16px;
+ overflow: hidden;
+ }
+
+ &__list {
+ display: flex;
+ max-width: 184px;
+ gap: 8px;
+ }
+
+ &__item {
+ font-family: Mont, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ flex-shrink: 0;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid var(--pagination-item-border);
+ color: var(--pagination-item);
+ cursor: pointer;
+
+ &:hover {
+ border-color: var(--pagination-item-border-hover);
+ background-color: var(--pagination-item-bg-hover);
+ }
+
+ &--active {
+ background-color: var(--pagination-item-bg-active);
+ color: $whiteColor;
+ pointer-events: none;
+ }
+ }
+}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
new file mode 100644
index 0000000000..d26e469ce2
--- /dev/null
+++ b/src/components/Pagination/Pagination.tsx
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react';
+import './Pagination.scss';
+import { useSearchParams } from 'react-router-dom';
+import arrow from '../../images/icons/arrow_right.png';
+import arrowDark from '../../images/icons/arrow_dark.svg';
+import classNames from 'classnames';
+import { useAppSelector } from '../../hooks/hooks';
+
+type Props = {
+ totalItems: number;
+};
+
+export const Pagination: React.FC
+
+ {t('modal.title')}
+{t('modal.question')}
+
+
+
+
+
+
+
+
+ );
+};
+
+Pagination.displayName = 'Pagination';
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
new file mode 100644
index 0000000000..e016c96b72
--- /dev/null
+++ b/src/components/Pagination/index.tsx
@@ -0,0 +1 @@
+export * from './Pagination';
diff --git a/src/components/ProductCard/ProductCard.scss b/src/components/ProductCard/ProductCard.scss
new file mode 100644
index 0000000000..dae96044ae
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.scss
@@ -0,0 +1,158 @@
+@import '../../styles/main';
+
+.productCard {
+ width: 100%;
+ height: 100%;
+
+ &__content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 8px;
+ }
+
+ &__link {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ transition: transform 0.3s;
+
+ &:hover {
+ transform: scale(1.1);
+ }
+
+ &_img {
+ height: 129px;
+ width: 148px;
+ object-fit: contain;
+
+ @include on-tablet {
+ height: 173px;
+ width: 202px;
+ }
+
+ @include on-desktop {
+ height: 196px;
+ width: 208px;
+ }
+ }
+ }
+
+ &__title {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--text-color);
+ text-decoration: none;
+ }
+
+ &__block-price {
+ display: flex;
+ gap: 8px;
+ }
+
+ &__price {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 22px;
+ line-height: 30.8px;
+ color: var(--text-color);
+ }
+
+ &__fullPrice {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 22px;
+ line-height: 30.8px;
+ color: $secondaryColor;
+ text-decoration: line-through;
+ }
+
+ &__line {
+ display: flex;
+ height: 1px;
+ width: 100%;
+ background-color: var(--elements-color);
+ }
+
+ &__info {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &_block {
+ display: flex;
+ justify-content: space-between;
+
+ &--name {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: $secondaryColor;
+ }
+
+ &--value {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--text-color);
+ }
+ }
+ }
+
+ &__buttons {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 40px;
+ gap: 8px;
+
+ &_cart {
+ background-color: var(--prod-card-btn);
+ color: $whiteColor;
+ width: 100%;
+ height: 40px;
+ cursor: pointer;
+ transition: transform 0.3s;
+
+ &-isActive {
+ background-color: var(--active-prod-card-btn);
+ color: var(--active-prod-card-btn-text);
+ border: 1px solid var(--active-prod-card-btn-border);
+ }
+ }
+
+ &_cart:hover {
+ transform: scale(1.05);
+ }
+
+ &_favourites {
+ flex-shrink: 0;
+ border: 1px solid var(--prod-card-fav-border);
+ border-style: none;
+ width: 40px;
+ height: 40px;
+ background-color: var(--prod-card-fav-bg);
+ cursor: pointer;
+
+ &-isActive {
+ border-color: var(--prod-card-fav-border-active);
+ background-color: var(--prod-card-fav-bg-active);
+ }
+ }
+
+ &_favourites:hover {
+ border-color: var(--prod-card-fav-border-hover);
+ background-color: var(--prod-card-fav-bg-hover);
+ }
+ }
+}
diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
new file mode 100644
index 0000000000..ea816f2f39
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,140 @@
+import { Product } from '../../types/Product';
+import fav from '../../images/icons/favourites16px.svg';
+import favDark from '../../images/icons/fav_dark.svg';
+import favLike from '../../images/icons/favourites_like.png';
+import './ProductCard.scss';
+import { Link } from 'react-router-dom';
+import { useAppDispath, useAppSelector } from '../../hooks/hooks';
+import { addProduct, removeProduct } from '../../features/favourites';
+import { addToCart, removeFromCart } from '../../features/cart';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import React from 'react';
+
+type Props = {
+ product: Product;
+ discount?: boolean;
+ slash?: boolean;
+};
+
+export const ProductCard: React.FC
+
+
+
+ -
+ {numbersOfPage.map(item => (
+
- handleChange(item)} + > + {item} + + ))} +
+
+ );
+ },
+);
+
+ProductCard.displayName = 'ProductCard';
diff --git a/src/components/ProductCard/index.tsx b/src/components/ProductCard/index.tsx
new file mode 100644
index 0000000000..7ce031c382
--- /dev/null
+++ b/src/components/ProductCard/index.tsx
@@ -0,0 +1 @@
+export * from './ProductCard';
diff --git a/src/components/ProductDetailsCard/ProductDetailsCard.scss b/src/components/ProductDetailsCard/ProductDetailsCard.scss
new file mode 100644
index 0000000000..9e8c82d254
--- /dev/null
+++ b/src/components/ProductDetailsCard/ProductDetailsCard.scss
@@ -0,0 +1,420 @@
+@import '../../styles/main';
+
+.productDetailsCard {
+ margin-top: 16px;
+
+ &__contant {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
+ @include on-tablet {
+ width: 100%;
+ height: 100%;
+
+ @include page-grid;
+ }
+ }
+
+ &__title {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 22px;
+ line-height: 30.8px;
+ color: var(--text-color);
+
+ @include on-tablet {
+ grid-column: 1 / 13;
+ }
+
+ @include on-desktop {
+ grid-column: 1 / 17;
+ }
+ }
+
+ &__blockPhoto {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: center;
+ margin-top: 32px;
+
+ @include on-tablet {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ grid-column: 1 / 8;
+ align-items: start;
+ width: 100%;
+ height: 100%;
+ margin-top: 0;
+ }
+
+ @include on-desktop {
+ grid-column: 1 / 13;
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ gap: 16px;
+ }
+ }
+
+ &__photo {
+ width: 288px;
+ height: 288px;
+ margin-inline: auto;
+ justify-content: center;
+ align-items: center;
+
+ @include on-tablet {
+ margin-inline: 0;
+ grid-column: 2 / 8;
+ padding: 6.8px;
+ }
+
+ @include on-desktop {
+ width: 464px;
+ height: 464px;
+ grid-column: 3 / 13;
+ padding: 11px;
+ }
+
+ &-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ justify-content: center;
+
+ @include on-tablet {
+ grid-column: 3 / 7;
+ width: 273.39px;
+ height: 273.39px;
+ }
+
+ @include on-desktop {
+ grid-column: 4 / 12;
+ width: 442px;
+ height: 442px;
+ }
+ }
+
+ &-list {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ height: 49px;
+ margin-top: 16px;
+ gap: 8px;
+
+ @include on-tablet {
+ grid-column: 1 / 2;
+ flex-direction: column;
+ width: 35px;
+ justify-content: start;
+ height: 100%;
+ margin-top: 0;
+ }
+
+ @include on-desktop {
+ grid-column: 1 / 3;
+ flex-direction: column;
+ width: 80px;
+ }
+ }
+
+ &-link {
+ display: flex;
+ height: 100%;
+ cursor: pointer;
+
+ @include on-desktop {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &-item {
+ width: 51.2px;
+ height: 49px;
+ padding: 5px;
+ border: 1px solid var(--elements-color);
+
+ &:hover {
+ border-color: var(--text-color);
+ }
+
+ &-active {
+ border: 1px solid var(--text-color);
+ pointer-events: none;
+ }
+
+ @include on-tablet {
+ width: 35px;
+ height: 35px;
+ }
+
+ @include on-desktop {
+ width: 80px;
+ height: 80px;
+ }
+
+ &--img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+ }
+
+ &__options {
+ @include on-tablet {
+ height: 100%;
+ grid-column: 8 / 13;
+ }
+
+ @include on-desktop {
+ grid-column: 14 / 21;
+ }
+ }
+
+ &__about {
+ margin-top: 56px;
+ height: 100%;
+
+ @include on-tablet {
+ grid-column: 1 / -1;
+ }
+
+ @include on-desktop {
+ grid-column: 1 / 13;
+ margin-top: 80px;
+ }
+
+ &-top {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 26.65px;
+ color: var(--text-color);
+ }
+
+ &-block {
+ margin-top: 16px;
+
+ &--title {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20.45px;
+ color: var(--text-color);
+ }
+
+ &--text {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--secondary-color);
+ margin-top: 16px;
+ }
+ }
+ }
+
+ &__line {
+ width: 100%;
+ height: 1px;
+ background-color: var(--elements-color);
+ display: flex;
+ flex-direction: row;
+ margin-top: 16px;
+
+ &-filter {
+ width: 100%;
+ height: 1px;
+ background-color: var(--elements-color);
+ display: flex;
+ flex-direction: row;
+ margin-top: 24px;
+ }
+ }
+
+ &__priceBlock {
+ width: 288px;
+ height: 105px;
+ margin-top: 32px;
+
+ @include on-tablet {
+ // width: 237px;
+ width: 100%;
+ }
+
+ @include on-desktop {
+ width: 100%;
+ }
+ }
+
+ &__price {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &--discountPrice {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -1%;
+ color: var(--text-color);
+ }
+
+ &--regularPrice {
+ font-family: Mont, sans-serif;
+ font-weight: 500;
+ font-size: 22px;
+ line-height: 28.12px;
+ color: var(--secondary-color);
+ text-decoration: line-through;
+ }
+ }
+
+ &__buttons {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 48px;
+ gap: 8px;
+
+ @include on-desktop {
+ width: 100%;
+ }
+
+ &_cart {
+ background-color: var(--prod-card-btn);
+ color: $whiteColor;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ transition: transform 0.3s;
+
+ &-isActive {
+ background-color: var(--active-prod-card-btn);
+ color: var(--active-prod-card-btn-text);
+ border: 1px solid var(--active-prod-card-btn-border);
+ }
+ }
+
+ &_cart:hover {
+ transform: scale(1.05);
+ }
+
+ &_favourites {
+ flex-shrink: 0;
+ border: 1px solid var(--prod-card-fav-border);
+ border-style: none;
+ width: 48px;
+ height: 48px;
+ background-color: var(--prod-card-fav-bg);
+ cursor: pointer;
+
+ &-active {
+ border-color: var(--prod-card-fav-border-active);
+ background-color: var(--prod-card-fav-bg-active);
+ }
+ }
+
+ &_favourites:hover {
+ border-color: var(--prod-card-fav-border-hover);
+ background-color: var(--prod-card-fav-bg-hover);
+ }
+ }
+
+ &__info {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &_block {
+ display: flex;
+ justify-content: space-between;
+
+ &--name {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--secondary-color);
+ }
+
+ &--value {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--text-color);
+ }
+ }
+ }
+
+ &__techSpecs {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-top: 56px;
+
+ @include on-tablet {
+ grid-column: 1 / -1;
+ }
+
+ @include on-desktop {
+ justify-content: start;
+ margin-top: 80px;
+ grid-column: 14 / -1;
+ }
+
+ &-top {
+ display: flex;
+ justify-content: left;
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 26.65px;
+ color: var(--text-color);
+ }
+
+ &-info {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ margin-top: 30px;
+ gap: 8px;
+ }
+
+ &-block {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ &--title {
+ font-family: Mont, sans-serif;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--secondary-color);
+ }
+
+ &--text {
+ font-family: Mont, sans-serif;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--text-color);
+ }
+ }
+ }
+}
diff --git a/src/components/ProductDetailsCard/ProductDetailsCard.tsx b/src/components/ProductDetailsCard/ProductDetailsCard.tsx
new file mode 100644
index 0000000000..f701b7e58f
--- /dev/null
+++ b/src/components/ProductDetailsCard/ProductDetailsCard.tsx
@@ -0,0 +1,325 @@
+import fav from '../../images/icons/favourites.svg';
+import favDark from '../../images/icons/fav_dark.svg';
+import favLike from '../../images/icons/favourites_like.png';
+import React, { useState, useEffect } from 'react';
+import { ProductDetails } from '../../types/ProductDetails';
+import { Filter } from '../Filter';
+import { FilterCapacity } from '../FilterCapacity';
+import { Product } from '../../types/Product';
+import { useAppDispath, useAppSelector } from '../../hooks/hooks';
+import { addProduct, removeProduct } from '../../features/favourites';
+import { addToCart, removeFromCart } from '../../features/cart';
+import classNames from 'classnames';
+import { NotFoundProductPage } from '../../pages/NotFoundProductPage';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+import './ProductDetailsCard.scss';
+
+type Props = {
+ products: Product[];
+ currProd: ProductDetails | undefined;
+};
+
+export const ProductDetailsCard: React.FC
+
+ {slash ? (
+
+ ) : (
+
+ )}
+
+
+
+ {name}
+
+
+
+
+
+
+
+ {`$${price}`}
+ {discount && ( +{`$${fullPrice}`}
+ )} +
+
+
+
+
+
+
+ {t('productCard.info.screen')}
+
+ {screen}
+
+
+
+
+ {t('productCard.info.capacity')}
+
+ {capacity}
+
+
+
+ {t('productCard.info.ram')}
+
+ {ram}
+
+
+
+
+
+
+
+ );
+ },
+);
+
+ProductDetailsCard.displayName = 'ProductDetailsCard';
diff --git a/src/components/ProductDetailsCard/index.tsx b/src/components/ProductDetailsCard/index.tsx
new file mode 100644
index 0000000000..c0493cf5a5
--- /dev/null
+++ b/src/components/ProductDetailsCard/index.tsx
@@ -0,0 +1 @@
+export * from './ProductDetailsCard';
diff --git a/src/components/ProductList/ProductList.scss b/src/components/ProductList/ProductList.scss
new file mode 100644
index 0000000000..f8212ab088
--- /dev/null
+++ b/src/components/ProductList/ProductList.scss
@@ -0,0 +1,42 @@
+@import '../../styles/main';
+
+.productList {
+ margin-top: 24px;
+
+ &__list {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 16px;
+
+ @include on-tablet {
+ justify-content: left;
+ }
+
+ &-item {
+ height: 440px;
+ width: 288px;
+ min-height: 229px;
+ border: 1px solid var(--elements-color);
+ padding: 32px;
+ display: flex;
+ justify-content: center;
+
+ &:hover {
+ border-color: var(--text-color);
+ }
+
+ @include on-tablet {
+ height: 506px;
+ width: 288px;
+ }
+
+ @include on-desktop {
+ height: 506px;
+ width: 272px;
+ }
+ }
+ }
+}
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
new file mode 100644
index 0000000000..ba255e8fdc
--- /dev/null
+++ b/src/components/ProductList/ProductList.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Product } from '../../types/Product';
+import { ProductCard } from '../ProductCard';
+import './ProductList.scss';
+
+type Props = {
+ products: Product[];
+};
+
+export const PorductList: React.FC
+
+
+
+ {currProd?.name}
+ +
+
+
+ -
+ {images?.map((image, i) => (
+
-
+ setSelectedImage(image)} + > ++
+
+ ))}
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {currProd?.priceDiscount} +
++ {currProd?.priceRegular} +
+
+
+
+
+
+
+
+
+
+
+
+ {t('productDetailsCard.info.screen')}
+
+
+ {currProd?.screen}
+
+
+
+
+
+ {t('productDetailsCard.info.resolution')}
+
+
+ {currProd?.resolution}
+
+
+
+
+
+ {t('productDetailsCard.info.processor')}
+
+
+ {currProd?.processor}
+
+
+
+
+ {t('productDetailsCard.info.ram')}
+
+
+ {currProd?.ram}
+
+
+
+
+ ))}
+
+ + {t('productDetailsCard.about')} +
+ + {currProd?.description.map(item => ( +
+
+ + {t('productDetailsCard.info.title')} +
+ + + +
+
+
+
+
+
+ {t('productDetailsCard.info.screen')}
+
+
+ {currProd?.screen}
+
+
+
+
+
+ {t('productDetailsCard.info.resolution')}
+
+
+ {currProd?.resolution}
+
+
+
+
+
+ {t('productDetailsCard.info.processor')}
+
+
+ {currProd?.processor}
+
+
+
+
+
+ {t('productDetailsCard.info.ram')}
+
+
+ {currProd?.ram}
+
+
+
+
+ {currProd?.camera && (
+
+ {t('productDetailsCard.info.memory')}
+
+
+ {currProd?.capacity}
+
+
+
+ )}
+
+ {currProd?.zoom && (
+
+ {t('productDetailsCard.info.camera')}
+
+
+ {currProd?.camera || ''}
+
+
+
+ )}
+
+
+ {t('productDetailsCard.info.zoom')}
+
+
+ {currProd?.zoom || ''}
+
+
+
+
+ {t('productDetailsCard.info.cell')}
+
+
+ {currProd?.cell.join(', ')}
+
+
+
+ );
+});
+
+PorductList.displayName = 'PorductList';
diff --git a/src/components/ProductList/index.tsx b/src/components/ProductList/index.tsx
new file mode 100644
index 0000000000..c71910ae05
--- /dev/null
+++ b/src/components/ProductList/index.tsx
@@ -0,0 +1 @@
+export * from './ProductList';
diff --git a/src/components/SearchField/SearchField.scss b/src/components/SearchField/SearchField.scss
new file mode 100644
index 0000000000..dcfd9ed846
--- /dev/null
+++ b/src/components/SearchField/SearchField.scss
@@ -0,0 +1,31 @@
+@import '../../styles/main';
+
+.searchField {
+ width: 170px;
+ height: 100%;
+ box-sizing: border-box;
+
+ &__content {
+ display: flex;
+ height: 100%;
+ }
+
+ &__input {
+ width: 100%;
+ height: 100%;
+ border-style: none;
+ border-left: 1px solid var(--elements-color);
+ padding-left: 5px;
+ outline: none;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ }
+
+ &__close {
+ background-color: var(--bg-color);
+ display: flex;
+ align-items: center;
+ padding: 5px;
+ cursor: pointer;
+ }
+}
diff --git a/src/components/SearchField/SearchField.tsx b/src/components/SearchField/SearchField.tsx
new file mode 100644
index 0000000000..1d450c9405
--- /dev/null
+++ b/src/components/SearchField/SearchField.tsx
@@ -0,0 +1,113 @@
+import './SearchField.scss';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import close from '../../images/icons/close.svg';
+import closeDark from '../../images/icons/close_dark.svg';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import debounce from 'lodash.debounce';
+import classNames from 'classnames';
+import { useAppSelector } from '../../hooks/hooks';
+import { useTranslation } from 'react-i18next';
+
+export const SearchField = () => {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [query, setQueery] = useState-
+ {products.map(product => (
+
-
+
+
+ ))}
+
+
+
+ );
+};
diff --git a/src/components/SearchField/index.tsx b/src/components/SearchField/index.tsx
new file mode 100644
index 0000000000..9f5ef33472
--- /dev/null
+++ b/src/components/SearchField/index.tsx
@@ -0,0 +1 @@
+export * from './SearchField';
diff --git a/src/components/Skeletons/Skeletons.scss b/src/components/Skeletons/Skeletons.scss
new file mode 100644
index 0000000000..93bfaa5813
--- /dev/null
+++ b/src/components/Skeletons/Skeletons.scss
@@ -0,0 +1,36 @@
+@import '../../styles/main';
+
+.skeletons {
+ margin-top: 24px;
+
+ &__content {
+ width: 100%;
+ height: 100%;
+ }
+
+ &__list {
+ display: flex;
+ flex-flow: wrap;
+ flex-direction: row;
+ justify-content: center;
+ gap: 16px;
+
+ @include on-tablet {
+ justify-content: start;
+ }
+ }
+
+ &__item {
+ width: 287px;
+ height: 506px;
+ border: 1px solid $elementsColor;
+
+ @include on-tablet {
+ width: 288px;
+ }
+
+ @include on-desktop {
+ width: 272px;
+ }
+ }
+}
diff --git a/src/components/Skeletons/Skeletons.tsx b/src/components/Skeletons/Skeletons.tsx
new file mode 100644
index 0000000000..6743a23b89
--- /dev/null
+++ b/src/components/Skeletons/Skeletons.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Product } from '../../types/Product';
+import './Skeletons.scss';
+import ContentLoader from 'react-content-loader';
+
+type Props = {
+ products: Product[];
+};
+
+export const Skeletons: React.FC
+
+ );
+});
+
+Skeletons.displayName = 'Skeletons';
diff --git a/src/components/Skeletons/index.tsx b/src/components/Skeletons/index.tsx
new file mode 100644
index 0000000000..5bfa0c56f7
--- /dev/null
+++ b/src/components/Skeletons/index.tsx
@@ -0,0 +1 @@
+export * from './Skeletons';
diff --git a/src/components/Slider/Slider.scss b/src/components/Slider/Slider.scss
new file mode 100644
index 0000000000..39df0edea3
--- /dev/null
+++ b/src/components/Slider/Slider.scss
@@ -0,0 +1,131 @@
+@import '../../styles/main';
+
+.Slider {
+ margin-top: 56px;
+
+ &__content {
+ overflow: hidden;
+ }
+
+ &__top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-right: 16px;
+
+ @include on-tablet {
+ padding-right: 24px;
+ }
+
+ @include on-desktop {
+ padding-right: 32px;
+ }
+ }
+
+ &__title {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 22px;
+ line-height: 30.8px;
+ color: var(--text-color);
+ width: 136px;
+
+ @include on-tablet {
+ width: 100%;
+ font-size: 32px;
+ line-height: 42px;
+ letter-spacing: -1%;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ gap: 16px;
+ }
+
+ &__button {
+ height: 32px;
+ width: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--surface-color2);
+ border: 1px solid var(--slider-border-btn);
+ cursor: pointer;
+
+ &-left {
+ &-disabled {
+ pointer-events: none;
+ background-color: var(--bg-color);
+ }
+ }
+
+ &-right-disabled {
+ pointer-events: none;
+ background-color: var(--bg-color);
+ }
+
+ &:hover {
+ border-color: $primaryColor;
+ background-color: var(--hov-bg-slider-btn);
+ }
+
+ &--leftImg {
+ transform: rotate(180deg);
+ }
+ }
+
+ &__cardsBlock {
+ @include on-desktop {
+ max-width: 1136px;
+ overflow: hidden;
+ }
+ }
+
+ &__productCards {
+ margin-top: 24px;
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ transition-duration: 0.5s;
+
+ @include on-desktop {
+ padding-right: 32px;
+ }
+
+ &-item {
+ height: 439px;
+ width: 212px;
+ border: 1px solid var(--elements-color);
+ padding: 32px;
+
+ &:hover {
+ border-color: var(--text-color);
+ }
+
+ @include on-tablet {
+ height: 512px;
+ width: 237px;
+ }
+
+ @include on-desktop {
+ height: 506px;
+ width: 272px;
+ }
+ }
+ }
+
+ &__container {
+ padding-left: 16px;
+
+ @include on-tablet {
+ padding-left: 24px;
+ }
+
+ @include on-desktop {
+ padding-left: 32px;
+ max-width: 1200px;
+ margin-inline: auto;
+ }
+ }
+}
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
new file mode 100644
index 0000000000..785a4f81f4
--- /dev/null
+++ b/src/components/Slider/Slider.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import arrow from '../../images/icons/arrow_right.png';
+import arrowDark from '../../images/icons/arrow_dark.svg';
+import arrowDisabled from '../../images/icons/arrow_disabled_right.svg';
+import { ProductCard } from '../ProductCard';
+import { useEffect, useRef, useState } from 'react';
+import { Product } from '../../types/Product';
+import { useAppSelector } from '../../hooks/hooks';
+import classNames from 'classnames';
+
+import './Slider.scss';
+
+type Props = {
+ products: Product[];
+ discount?: boolean;
+ title: string;
+ slash?: boolean | undefined;
+};
+
+export const Slider: React.FC
+
+
+ {products.map(product => (
+
+
+
+
+
+ ))}
+
+
+ );
+ },
+);
+
+Slider.displayName = 'Slider';
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
new file mode 100644
index 0000000000..f48a854158
--- /dev/null
+++ b/src/components/Slider/index.tsx
@@ -0,0 +1 @@
+export * from './Slider';
diff --git a/src/constants/Colors.ts b/src/constants/Colors.ts
new file mode 100644
index 0000000000..ccbef9f804
--- /dev/null
+++ b/src/constants/Colors.ts
@@ -0,0 +1,28 @@
+import { ColorPalette } from '../types/ColorPalet';
+
+export const Colors: ColorPalette = {
+ 'space gray': '#6E6E73',
+ spacegray: '#6E6E73',
+ 'space-gray': '#6E6E73',
+ silver: '#C0C0C0',
+ gold: '#D4AF37',
+ blue: '#0071E3',
+ red: '#FF3B30',
+ 'rose gold': '#B76E79',
+ rosegold: '#B76E79',
+ green: '#34C759',
+ 'sky blue': '#87CEEB',
+ starlight: '#F9F3EE',
+ pink: '#FFD3E1',
+ black: '#1C1C1E',
+ 'midnight green': '#004E3F',
+ midnightgreen: '#004E3F',
+ midnight: '#001E3C',
+ coral: '#FF6F61',
+ white: '#F5F5F7',
+ yellow: '#FFD60A',
+ purple: '#A020F0',
+ spaceblack: '#1D1D1F',
+ graphite: '#4A4A4C',
+ sierrablue: '#9BB5CE',
+};
diff --git a/src/declaration.d.ts b/src/declaration.d.ts
new file mode 100644
index 0000000000..34fc97fcc7
--- /dev/null
+++ b/src/declaration.d.ts
@@ -0,0 +1,3 @@
+declare module '*.svg';
+declare module '*.png';
+declare module '*.webp';
diff --git a/src/features/cart.ts b/src/features/cart.ts
new file mode 100644
index 0000000000..c85b7c7bf8
--- /dev/null
+++ b/src/features/cart.ts
@@ -0,0 +1,89 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { UpdatedProduct } from '../types/UpdatedProduct';
+import { Product } from '../types/Product';
+
+type CartState = {
+ productsOfCart: UpdatedProduct[];
+};
+
+const initialState: CartState = {
+ productsOfCart: JSON.parse(localStorage.getItem('cart') || '[]'),
+};
+
+const updatedLocalStorage = (products: UpdatedProduct[]) => {
+ localStorage.setItem('cart', JSON.stringify(products));
+};
+
+const CartSlice = createSlice({
+ name: 'cart',
+ initialState,
+ reducers: {
+ addToCart: (state, action: PayloadAction
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+ -
+ {products.map(product => (
+
-
+
+
+ ))}
+
+
+ );
+};
diff --git a/src/pages/AccessoriesPage/index.tsx b/src/pages/AccessoriesPage/index.tsx
new file mode 100644
index 0000000000..486474aa0b
--- /dev/null
+++ b/src/pages/AccessoriesPage/index.tsx
@@ -0,0 +1 @@
+export * from './AccessoriesPage';
diff --git a/src/pages/CartPage/CartPage.scss b/src/pages/CartPage/CartPage.scss
new file mode 100644
index 0000000000..def92b79e2
--- /dev/null
+++ b/src/pages/CartPage/CartPage.scss
@@ -0,0 +1,196 @@
+@import '../../styles/main';
+
+.cart {
+ box-sizing: border-box;
+ width: 100%;
+
+ &__back {
+ width: 66px;
+ height: 16px;
+ gap: 4px;
+ display: flex;
+ align-items: center;
+ margin-top: 24px;
+ border-style: none;
+ background-color: inherit;
+ cursor: pointer;
+
+ &--img {
+ transform: rotate(180deg);
+ }
+
+ &--text {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--cart-back-text);
+ }
+ }
+
+ &__title {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 48px;
+ line-height: 56px;
+ letter-spacing: -1%;
+ color: var(--text-color);
+ margin-top: 24px;
+
+ @include on-tablet {
+ margin-top: 16px;
+ }
+ }
+
+ &__content {
+ width: 100%;
+ height: 100%;
+ margin-top: 32px;
+ display: flex;
+ flex-direction: column;
+
+ @include on-desktop {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 16px;
+ }
+ }
+
+ &__empty {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 10px;
+
+ &-title {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 25px;
+ color: $secondaryColor;
+ }
+
+ &-img {
+ width: 300px;
+ height: 300px;
+ display: flex;
+ }
+ }
+
+ &__count {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ color: $secondaryColor;
+ margin-top: 8px;
+ }
+
+ &__list {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-desktop {
+ width: 752px;
+ }
+ }
+
+ &__item {
+ @include on-desktop {
+ width: 752px;
+ }
+ }
+
+ &__total {
+ width: 100%;
+ height: 190px;
+ border: 1px solid var(--elements-color);
+ margin-top: 32px;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-desktop {
+ width: 368px;
+ height: 206px;
+ margin-top: 0;
+ }
+
+ &-priceBlock {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ &-price {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -1%;
+ color: var(--text-color);
+ }
+
+ &-count {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--secondary-color);
+ }
+
+ &-line {
+ display: flex;
+ width: 100%;
+ height: 1px;
+ background-color: var(--elements-color);
+ }
+
+ &-button {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 21px;
+ color: $whiteColor;
+ width: 100%;
+ height: 48px;
+ background-color: var(--prod-card-btn);
+ cursor: pointer;
+ transition: transform 0.3s;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+ }
+ }
+}
+
+.count {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ &__button {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid $iconsColor;
+ }
+
+ &__info {
+ width: 32px;
+ display: flex;
+ justify-content: center;
+ }
+}
diff --git a/src/pages/CartPage/CartPage.tsx b/src/pages/CartPage/CartPage.tsx
new file mode 100644
index 0000000000..c106dd6377
--- /dev/null
+++ b/src/pages/CartPage/CartPage.tsx
@@ -0,0 +1,100 @@
+import './CartPage.scss';
+import cartEmpty from '../../images/cart-is-empty.png';
+import arrow from '../../images/icons/arrow_right.png';
+import arrowDark from '../../images/icons/arrow_dark.svg';
+import { useState, useEffect } from 'react';
+import { useAppSelector } from '../../hooks/hooks';
+import { CartItem } from '../../components/CartItem';
+import { useNavigate } from 'react-router-dom';
+import { Modal } from '../../components/Modal';
+import { useTranslation } from 'react-i18next';
+
+export const CartPage: React.FC = () => {
+ const { productsOfCart } = useAppSelector(state => state.cart);
+
+ const { theme } = useAppSelector(state => state.theme);
+
+ const { t } = useTranslation();
+
+ const [isOpen, setIsOpen] = useState(false);
+
+ const navigate = useNavigate();
+
+ const totalInitPrice = productsOfCart.reduce(
+ (prev, acc) => prev + acc.price * acc.quantity,
+ 0,
+ );
+
+ const totalCartQuantity = productsOfCart.reduce(
+ (prev, acc) => prev + acc.quantity,
+ 0,
+ );
+
+ useEffect(() => {
+ window.scrollTo({ top: 0 });
+ }, [productsOfCart]);
+
+ return (
+
+
+
+
+
+ + {t('accessoriesPage.title.text')} +
++ {t('accessoriesPage.title.count', { + count: filteredProducts.length, + })} +
+
+
+
+ {isloading ? (
+
+
+
+ {t('cartPage.title.text')}
+ +
+ {productsOfCart.length ? (
+ <>
+
+ -
+ {productsOfCart.map(product => {
+ return (
+
-
+
+
+ );
+ })}
+
+
+
+ ) : (
+
+
+
+
+
+
+
+ {isOpen && {`$${totalInitPrice}`}
++ {/* {productsOfCart.length === 1 */} + {totalCartQuantity === 1 + ? `${t('cartPage.total.item')}` + : `${t('cartPage.total.items', { total: totalCartQuantity })}`} +
+
+ 
+
+ )}
+ {t('cartPage.title.empty')}
+
+
+ {t('favouritesPage.title.text')}
+ +
+ {t('favouritesPage.title.count', { count: favourites.length })}
+
+
+ {favourites.length ? (
+
+ 
*/}
+
+ )}
+ + {t('favouritesPage.title.empty')} +
+ {/*
+
+
+
+ {isloading ? (
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+};
diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
new file mode 100644
index 0000000000..11e53da674
--- /dev/null
+++ b/src/pages/HomePage/index.tsx
@@ -0,0 +1 @@
+export * from './HomePage';
diff --git a/src/pages/NotFoundPage/NotFoundPage.scss b/src/pages/NotFoundPage/NotFoundPage.scss
new file mode 100644
index 0000000000..38f6dd5a7c
--- /dev/null
+++ b/src/pages/NotFoundPage/NotFoundPage.scss
@@ -0,0 +1,54 @@
+@import '../../styles/main';
+
+.notFoundPage {
+ width: 100%;
+ height: 100%;
+ margin-top: 50px;
+
+ &__back {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+
+ &-arrow {
+ transform: rotate(180deg);
+ }
+
+ &-link {
+ text-decoration: none;
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ color: var(--secondary-color);
+
+ &:hover {
+ color: var(--text-color);
+ }
+ }
+ }
+
+ &__content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 50px;
+ }
+
+ &__title {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 40px;
+ letter-spacing: 2px;
+ color: var(--text-color);
+ text-align: center;
+ }
+
+ &__img {
+ width: 300px;
+ height: 300px;
+ }
+}
diff --git a/src/pages/NotFoundPage/NotFoundPage.tsx b/src/pages/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 0000000000..6a2c4d14f2
--- /dev/null
+++ b/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,33 @@
+import './NotFoundPage.scss';
+import notPage from '../../images/page-not-found copy.png';
+import arrow from '../../images/icons/arrow_right.png';
+import arrowDark from '../../images/icons/arrow_dark.svg';
+import { Link } from 'react-router-dom';
+import { useAppSelector } from '../../hooks/hooks';
+import { useTranslation } from 'react-i18next';
+
+export const NotFoundPage = () => {
+ const { theme } = useAppSelector(state => state.theme);
+
+ const { t } = useTranslation();
+
+ return (
+
+
+
+ {t('homePage.title')}
+
+
+ );
+};
diff --git a/src/pages/NotFoundPage/index.tsx b/src/pages/NotFoundPage/index.tsx
new file mode 100644
index 0000000000..6197aa75aa
--- /dev/null
+++ b/src/pages/NotFoundPage/index.tsx
@@ -0,0 +1 @@
+export * from './NotFoundPage';
diff --git a/src/pages/NotFoundProductPage/NotFoundProductPage.scss b/src/pages/NotFoundProductPage/NotFoundProductPage.scss
new file mode 100644
index 0000000000..970319c938
--- /dev/null
+++ b/src/pages/NotFoundProductPage/NotFoundProductPage.scss
@@ -0,0 +1,54 @@
+@import '../../styles/main';
+
+.notFoundProductPage {
+ width: 100%;
+ height: 100%;
+ margin-top: 50px;
+
+ &__back {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+
+ &-arrow {
+ transform: rotate(180deg);
+ }
+
+ &-link {
+ text-decoration: none;
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ color: var(--secondary-color);
+
+ &:hover {
+ color: var(--text-color);
+ }
+ }
+ }
+
+ &__content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 50px;
+ }
+
+ &__title {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 25px;
+ letter-spacing: 2px;
+ color: var(--text-color);
+ text-align: center;
+ }
+
+ &__img {
+ width: 300px;
+ height: 300px;
+ }
+}
diff --git a/src/pages/NotFoundProductPage/NotFoundProductPage.tsx b/src/pages/NotFoundProductPage/NotFoundProductPage.tsx
new file mode 100644
index 0000000000..0c4de3c32d
--- /dev/null
+++ b/src/pages/NotFoundProductPage/NotFoundProductPage.tsx
@@ -0,0 +1,44 @@
+import './NotFoundProductPage.scss';
+import notProduct from '../../images/product-not-found copy.png';
+import arrow from '../../images/icons/arrow_right.png';
+import arrowDark from '../../images/icons/arrow_dark.svg';
+import { Link } from 'react-router-dom';
+import { useAppSelector } from '../../hooks/hooks';
+import { useTranslation } from 'react-i18next';
+import React from 'react';
+
+type Props = {
+ title: string;
+};
+
+export const NotFoundProductPage: React.FC
+ 
+
+
+
+
+ {t('notFoundPage.backToHome')}
+
+
+
+ {t('notFoundPage.title')}
+
+
+ );
+});
+
+NotFoundProductPage.displayName = 'NotFoundProductPage';
diff --git a/src/pages/NotFoundProductPage/index.tsx b/src/pages/NotFoundProductPage/index.tsx
new file mode 100644
index 0000000000..5e8e5949d2
--- /dev/null
+++ b/src/pages/NotFoundProductPage/index.tsx
@@ -0,0 +1 @@
+export * from './NotFoundProductPage';
diff --git a/src/pages/PhonesPage/PhonesPage.scss b/src/pages/PhonesPage/PhonesPage.scss
new file mode 100644
index 0000000000..2585988073
--- /dev/null
+++ b/src/pages/PhonesPage/PhonesPage.scss
@@ -0,0 +1,45 @@
+@import '../../styles/main';
+
+.phonesPage {
+ width: 100%;
+ height: 100%;
+
+ &__title {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 24px;
+
+ &-text {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -1%;
+ color: var(--text-color);
+ }
+
+ &-count {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--secondary-color);
+ }
+ }
+
+ &__dropdownBox {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ gap: 16px;
+ margin-top: 32px;
+
+ @include on-tablet {
+ justify-content: left;
+ margin-top: 40px;
+ }
+ }
+}
diff --git a/src/pages/PhonesPage/PhonesPage.tsx b/src/pages/PhonesPage/PhonesPage.tsx
new file mode 100644
index 0000000000..baea048195
--- /dev/null
+++ b/src/pages/PhonesPage/PhonesPage.tsx
@@ -0,0 +1,123 @@
+import { DropdownMenu } from '../../components/DropdownMenu';
+import { PorductList } from '../../components/ProductList';
+import { CategoriesTypes } from '../../types/CategoriesTypes';
+import { ItemsDropdown } from '../../components/ItemsDropdown/ItemsPropdown';
+import { useSearchParams } from 'react-router-dom';
+import { BreadCrumbs } from '../../components/BreadCrumbs';
+import { getItemsOnPage } from '../../services/getItemsOnPage';
+import { Pagination } from '../../components/Pagination';
+import { useAppSelector } from '../../hooks/hooks';
+import React, { useEffect } from 'react';
+import { getNewProducts } from '../../services/getNewProducts';
+import { useDispatch } from 'react-redux';
+import { setProds } from '../../features/prods';
+import { useState } from 'react';
+import { Product } from '../../types/Product';
+
+import './PhonesPage.scss';
+import { Skeletons } from '../../components/Skeletons';
+import { NotFoundProductPage } from '../NotFoundProductPage';
+import { useTranslation } from 'react-i18next';
+
+export const PhonesPage: React.FC = () => {
+ const [isloading, setIsLoading] = useState(false);
+ const type = CategoriesTypes.Phones;
+ const { t } = useTranslation();
+
+ const { prods } = useAppSelector(state => state.prods);
+
+ const dispatch = useDispatch();
+
+ const [searchParams] = useSearchParams();
+ const query = searchParams.get('query');
+ const sort = searchParams.get('sort');
+
+ const sortProducts = (item: Product[], sortType: string) => {
+ switch (sortType) {
+ case `${t('dropdownMenu.item.newest')}`:
+ return item.sort((a, b) => b.year - a.year);
+
+ case `${t('dropdownMenu.item.alphabetically')}`:
+ return item.sort((a, b) => a.name.localeCompare(b.name));
+
+ case `${t('dropdownMenu.item.cheapset')}`:
+ return item.sort((a, b) => a.price - b.price);
+
+ default:
+ return item;
+ }
+ };
+
+ const filteredProducts = prods.filter(product => {
+ if (query) {
+ return (
+ product.category === type &&
+ product.name.toLowerCase().includes(query.toLowerCase())
+ );
+ } else {
+ return product.category === type;
+ }
+ });
+
+ const sortedProducts = sortProducts(filteredProducts, sort as string);
+
+ const page = searchParams.get('page') || 1;
+ const perPage = searchParams.get('perPage');
+
+ const itemsOnPage = getItemsOnPage(perPage, page, filteredProducts);
+
+ useEffect(() => {
+ setIsLoading(true);
+
+ getNewProducts()
+ .then(resolve => {
+ const newProds = resolve.map(item => ({ ...item, quantity: 1 }));
+
+ dispatch(setProds(newProds));
+ })
+ .catch(() => 'Unable to load data from server!')
+ .finally(() => {
+ setTimeout(() => {
+ setIsLoading(false);
+ }, 500);
+ });
+ }, [dispatch, searchParams]);
+
+ useEffect(() => {
+ window.scrollTo({ top: 0 });
+ }, []);
+
+ if (!itemsOnPage.length && !isloading) {
+ return (
+
+ 
+
+
+
+
+ {t('notFoundPage.backToHome')}
+
+
+
+ {title}
+
+
+ );
+};
diff --git a/src/pages/PhonesPage/index.tsx b/src/pages/PhonesPage/index.tsx
new file mode 100644
index 0000000000..380be65cc7
--- /dev/null
+++ b/src/pages/PhonesPage/index.tsx
@@ -0,0 +1 @@
+export * from './PhonesPage';
diff --git a/src/pages/ProductDetailsPage/ProductDetailsPage.scss b/src/pages/ProductDetailsPage/ProductDetailsPage.scss
new file mode 100644
index 0000000000..97fdc27528
--- /dev/null
+++ b/src/pages/ProductDetailsPage/ProductDetailsPage.scss
@@ -0,0 +1,31 @@
+@import '../../styles/main';
+
+.productDetailsPage {
+ &__back {
+ width: 66px;
+ height: 16px;
+ gap: 4px;
+ display: flex;
+ align-items: center;
+ margin-top: 24px;
+ border-style: none;
+ background-color: inherit;
+ cursor: pointer;
+
+ @include on-tablet {
+ margin-top: 40px;
+ }
+
+ &--img {
+ transform: rotate(180deg);
+ }
+
+ &--text {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15.34px;
+ color: var(--cart-back-text);
+ }
+ }
+}
diff --git a/src/pages/ProductDetailsPage/ProductDetailsPage.tsx b/src/pages/ProductDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 0000000000..5f3af378fa
--- /dev/null
+++ b/src/pages/ProductDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,107 @@
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { BreadCrumbs } from '../../components/BreadCrumbs';
+import { ProductDetailsCard } from '../../components/ProductDetailsCard';
+import './ProductDetailsPage.scss';
+import React, { useEffect, useState } from 'react';
+import { getNewProducts } from '../../services/getNewProducts';
+import { Slider } from '../../components/Slider';
+import arrow from '../../images/icons/arrow_right.png';
+import arrowDark from '../../images/icons/arrow_dark.svg';
+import { useAppDispath, useAppSelector } from '../../hooks/hooks';
+import { NotFoundProductPage } from '../NotFoundProductPage';
+import { setProds } from '../../features/prods';
+import { Loader } from '../../components/Loader';
+import { ProductDetails } from '../../types/ProductDetails';
+import { getProductsDetails } from '../../services/getProductsDetails';
+import { useTranslation } from 'react-i18next';
+
+export const ProductDetailsPage: React.FC = () => {
+ const [isLoading, setIsLoading] = useState(false);
+ const [productsDetails, setProductsDetails] = useState
+
+
+
+
+ + {t('phonesPage.title.text')} +
++ {t('phonesPage.title.count', { count: filteredProducts.length })} +
+
+
+
+ {isloading &&
+
+ );
+};
diff --git a/src/pages/ProductDetailsPage/index.tsx b/src/pages/ProductDetailsPage/index.tsx
new file mode 100644
index 0000000000..6615089e5e
--- /dev/null
+++ b/src/pages/ProductDetailsPage/index.tsx
@@ -0,0 +1 @@
+export * from './ProductDetailsPage';
diff --git a/src/pages/TabletsPage/TabletsPage.scss b/src/pages/TabletsPage/TabletsPage.scss
new file mode 100644
index 0000000000..293edd8de1
--- /dev/null
+++ b/src/pages/TabletsPage/TabletsPage.scss
@@ -0,0 +1,45 @@
+@import '../../styles/main';
+
+.tabletsPage {
+ width: 100%;
+ height: 100%;
+
+ &__title {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 24px;
+
+ &-text {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -1%;
+ color: var(--text-color);
+ }
+
+ &-count {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--secondary-color);
+ }
+ }
+
+ &__dropdownBox {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ gap: 16px;
+ margin-top: 32px;
+
+ @include on-tablet {
+ justify-content: left;
+ margin-top: 40px;
+ }
+ }
+}
diff --git a/src/pages/TabletsPage/TabletsPage.tsx b/src/pages/TabletsPage/TabletsPage.tsx
new file mode 100644
index 0000000000..dfac7634d0
--- /dev/null
+++ b/src/pages/TabletsPage/TabletsPage.tsx
@@ -0,0 +1,124 @@
+import { useSearchParams } from 'react-router-dom';
+import { BreadCrumbs } from '../../components/BreadCrumbs';
+import { DropdownMenu } from '../../components/DropdownMenu';
+import { ItemsDropdown } from '../../components/ItemsDropdown/ItemsPropdown';
+import { Pagination } from '../../components/Pagination';
+import { PorductList } from '../../components/ProductList';
+import { CategoriesTypes } from '../../types/CategoriesTypes';
+import { Product } from '../../types/Product';
+import './TabletsPage.scss';
+import { getItemsOnPage } from '../../services/getItemsOnPage';
+import { useAppSelector } from '../../hooks/hooks';
+import { useEffect } from 'react';
+import { getNewProducts } from '../../services/getNewProducts';
+import { setProds } from '../../features/prods';
+import { useDispatch } from 'react-redux';
+import { useState } from 'react';
+import { Skeletons } from '../../components/Skeletons';
+import { NotFoundProductPage } from '../NotFoundProductPage';
+import { useTranslation } from 'react-i18next';
+
+export const TabletsPage: React.FC = () => {
+ const [isloading, setIsLoading] = useState(false);
+ const type = CategoriesTypes.Tablets;
+
+ const { t } = useTranslation();
+ const { prods } = useAppSelector(state => state.prods);
+ const dispatch = useDispatch();
+ const [searchParams] = useSearchParams();
+ const sort = searchParams.get('sort' || '');
+ const query = searchParams.get('query' || '');
+
+ const filteredProducts = prods.filter(product => {
+ if (query) {
+ return (
+ product.category === type &&
+ product.name.toLowerCase().includes(query.toLowerCase())
+ );
+ } else {
+ return product.category === type;
+ }
+ });
+
+ const sortProducts = (item: Product[], sortType: string) => {
+ switch (sortType) {
+ case `${t('dropdownMenu.item.newest')}`:
+ return item.sort((a, b) => b.year - a.year);
+
+ case `${t('dropdownMenu.item.alphabetically')}`:
+ return item.sort((a, b) => a.name.localeCompare(b.name));
+
+ case `${t('dropdownMenu.item.cheapset')}`:
+ return item.sort((a, b) => a.price - b.price);
+
+ default:
+ return item;
+ }
+ };
+
+ const sortedProducts = sortProducts(filteredProducts, sort as string);
+
+ const curPage = searchParams.get('page') || 1;
+ const perPage = searchParams.get('perPage');
+
+ const itemsOnPage = getItemsOnPage(perPage, curPage, filteredProducts);
+
+ useEffect(() => {
+ setIsLoading(true);
+
+ getNewProducts()
+ .then(resolve => {
+ const newProds = resolve.map(item => ({ ...item, quantity: 1 }));
+
+ dispatch(setProds(newProds));
+ })
+ .catch(() => 'Unable to load data from server!')
+ .finally(() => {
+ setTimeout(() => {
+ setIsLoading(false);
+ }, 500);
+ });
+ }, [dispatch, searchParams]);
+
+ useEffect(() => {
+ window.scrollTo({ top: 0 });
+ }, []);
+
+ if (!itemsOnPage.length && !isloading) {
+ return (
+
+
+
+ {isLoading ? (
+
+
+ );
+};
diff --git a/src/pages/TabletsPage/index.tsx b/src/pages/TabletsPage/index.tsx
new file mode 100644
index 0000000000..6988826db6
--- /dev/null
+++ b/src/pages/TabletsPage/index.tsx
@@ -0,0 +1 @@
+export * from './TabletsPage';
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000000..30da896298
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+// /
+
+
+
+
+ + {t('tabletsPage.title.text')} +
++ {t('tabletsPage.title.count', { count: filteredProducts.length })} +
+
+
+
+ {isloading ? (
+