+
+
+ {type}
+ +
+ .svg)
+ .svg)
+
+
+
+
+ {sortedModels.length > 0 && (
+
+ {sortedModels.map(product => (
+
+
+ ))}
+
+ )}
+
+
+ );
+};
diff --git a/src/components/BrandNewModelsHome/index.ts b/src/components/BrandNewModelsHome/index.ts
new file mode 100644
index 0000000000..1a65c83e23
--- /dev/null
+++ b/src/components/BrandNewModelsHome/index.ts
@@ -0,0 +1 @@
+export * from './BrandNewModelsHome';
diff --git a/src/components/BurgerMenu/BurgerMenu.module.scss b/src/components/BurgerMenu/BurgerMenu.module.scss
new file mode 100644
index 0000000000..c5bffe9293
--- /dev/null
+++ b/src/components/BurgerMenu/BurgerMenu.module.scss
@@ -0,0 +1,87 @@
+.burger-menu {
+ position: fixed; // Меню поверх всего
+ top: 48px; // Убедись, что это соответствует высоте хедера
+ right: 0;
+ height: calc(100vh - 35px); // Учитываем высоту хедера
+ width: 100vw;
+ background-color: white;
+ z-index: 1000;
+
+ transform: translateX(100%);
+ transition: transform 0.5s ease-in-out;
+ &--active {
+ transform: translateX(-3px);
+
+ body {
+ overflow: hidden;
+ }
+ }
+ &__inner {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ &--text {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 20px;
+
+ &-button {
+ position: relative;
+ color: rgb(137, 147, 154);
+ }
+ }
+
+ &--button {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ display: flex;
+ justify-content: space-around; /* Равномерное распределение */
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+
+ border: 1px solid rgb(226, 230, 233);
+ width: 100%;
+ }
+
+ &::after {
+ content: '';
+ box-sizing: border-box;
+ position: absolute;
+ top: 50%;
+
+ border: 1px solid rgb(226, 230, 233);
+ width: 64px;
+
+ transform: rotate(90deg);
+ }
+ }
+}
+
+
+.burger-menu--text-button--is-active::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+
+ border: 1px solid #313237;
+ width: 100%;
+}
+
+.b-s-d--is-active::before {
+ content: '';
+ position: absolute;
+ bottom: 10px;
+
+ border: 2px solid #313237;
+ width: 47%;
+}
diff --git a/src/components/BurgerMenu/BurgerMenu.tsx b/src/components/BurgerMenu/BurgerMenu.tsx
new file mode 100644
index 0000000000..1bd4245ef5
--- /dev/null
+++ b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+
+type Props = {
+ burgerMenu: boolean;
+ setBurgerMenu: React.Dispatch
+
+ 
+
+
+
+ + {product.name} +
+{`${product.price}$`}
+ + + +
+
+
+ Screen
++ {product.screen} +
+
+
+
+ Capacity
++ {product.capacity} +
+
+
+
+ Ram
+{product.ram}
+
+
+ ![]()
toggleFavorite(product)}
+ className="page-home-card__favorite"
+ src={
+ favorites.some(fav => fav.id === product.id)
+ ? './img/Add to fovourites - Added.svg'
+ : './img/add-to-cart.svg'
+ }
+ alt="favorite"
+ />
+
+
+
+ );
+};
diff --git a/src/components/BurgerMenu/index.ts b/src/components/BurgerMenu/index.ts
new file mode 100644
index 0000000000..cc518a4328
--- /dev/null
+++ b/src/components/BurgerMenu/index.ts
@@ -0,0 +1 @@
+export * from './BurgerMenu';
diff --git a/src/components/DetailsCard/DetailsCard.module.scss b/src/components/DetailsCard/DetailsCard.module.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/DetailsCard/DetailsCard.tsx b/src/components/DetailsCard/DetailsCard.tsx
new file mode 100644
index 0000000000..8b99d31a47
--- /dev/null
+++ b/src/components/DetailsCard/DetailsCard.tsx
@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from 'react';
+import { Phone } from '../../types/phone';
+import { Tablet } from '../../types/tablet';
+import { Accessory } from '../../types/accessory';
+import classNames from 'classnames';
+import { NavLink, useNavigate } from 'react-router-dom';
+import { Products } from '../../types/products';
+import { COLORS } from '../../variables';
+import { useAppContext } from '../../ContextStor';
+import { useLocalStorage } from '../../LocaleStorage';
+import { useQuantityContext } from '../../QuantityContext';
+
+type Product = Phone | Tablet | Accessory;
+
+type Props = {
+ product: Product;
+};
+
+export const DetailsCard: React.FC
+
+
+
+ classNames('burger-menu--text-button', {
+ 'burger-menu--text-button--is-active': isActive,
+ })
+ }
+ onClick={() => setBurgerMenu(false)}
+ to="/"
+ >
+ HOME
+
+
+ classNames('burger-menu--text-button', {
+ 'burger-menu--text-button--is-active': isActive,
+ })
+ }
+ onClick={() => setBurgerMenu(false)}
+ to="/phones"
+ >
+ PHONES
+
+
+ classNames('burger-menu--text-button', {
+ 'burger-menu--text-button--is-active': isActive,
+ })
+ }
+ onClick={() => setBurgerMenu(false)}
+ to="/tablets"
+ >
+ TABLETS
+
+
+ classNames('burger-menu--text-button', {
+ 'burger-menu--text-button--is-active': isActive,
+ })
+ }
+ onClick={() => setBurgerMenu(false)}
+ to="/accessories"
+ >
+ ACCESSORIES
+
+
+
+
+
+ classNames('b-s-d ertyu', {
+ 'b-s-d--is-active': isActive,
+ })
+ }
+ onClick={() => setBurgerMenu(false)}
+ to="/favourites"
+ >
+ .svg)
+
+
+ classNames('b-s-d', {
+ 'b-s-d--is-active': isActive,
+ })
+ }
+ state={{ from: location.pathname }}
+ onClick={() => setBurgerMenu(false)}
+ to="/cart"
+ >
+ .svg)
+
+
+
+
+ {product.name}
+ +
+
+
+ );
+};
diff --git a/src/components/DetailsCard/index.ts b/src/components/DetailsCard/index.ts
new file mode 100644
index 0000000000..a3db26c802
--- /dev/null
+++ b/src/components/DetailsCard/index.ts
@@ -0,0 +1 @@
+export * from './DetailsCard';
diff --git a/src/components/DetailsHome/DetailsBack.module.scss b/src/components/DetailsHome/DetailsBack.module.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/DetailsHome/DetailsBack.tsx b/src/components/DetailsHome/DetailsBack.tsx
new file mode 100644
index 0000000000..38aece2fb3
--- /dev/null
+++ b/src/components/DetailsHome/DetailsBack.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Phone } from '../../types/phone';
+import { Tablet } from '../../types/tablet';
+import { Accessory } from '../../types/accessory';
+
+type Product = Phone | Tablet | Accessory;
+
+type Props = {
+ product: Product;
+};
+
+export const DetailsBack: React.FC
+ {product.images.map(img => (
+
+
+ {
+ setSelectedImage(img);
+ }}
+ className={`details__image--more__wrapper ${selectedImage === img ? 'selected' : ''}`}
+ key={`${img}-${product.id}`}
+ >
+ 
+
+ ))}
+
+ 
+
+
+
+
+
+
+
+ Aviables colors
+
+ {product.colorsAvailable.map(color => (
+
+ classNames({
+ details__color: !isActive,
+ 'details__color--is-active': isActive,
+ })
+ }
+ style={{
+ backgroundColor: COLORS[color as keyof typeof COLORS],
+ width: '32px',
+ height: '32px',
+ borderRadius: '50%',
+ marginRight: '4px',
+ }}
+ />
+ ))}
+
+
+
+
+ Select capacity
+ +
+ {product.capacityAvailable.map(el => (
+
+
+
+
+ handleMemoryChange(el.toLowerCase())}
+ className={classNames({
+ 'capacity-default': el !== product.capacity,
+ capacity: el === product.capacity,
+ })}
+ >
+
+ ))}
+ {el}
+ {`${product.priceDiscount}$`}
+ +
+
+ ![]()
{
+ toogleFavoritesOfDetails(product.id);
+ }}
+ className="page-home-card__favorite"
+ src={
+ favorites.some(fav => fav.itemId === product.id)
+ ? './img/Add to fovourites - Added.svg'
+ : './img/add-to-cart.svg'
+ }
+ alt="favorite"
+ />
+
+
+
+
+
+
+
+ Screen
+{product.screen}
+
+
+
+ Resolution
+{product.resolution}
+
+
+
+ Processor
+{product.processor}
+
+
+ RAM
+{product.ram}
+
+
+ 
+
+ .svg)
+
+
+
+
+
+
+
+
+
+
+ + {location.pathname.includes('/tablets') + ? 'Tablets' + : location.pathname.includes('/phones') + ? 'Mobile phones' + : location.pathname.includes('/accessories') + ? 'Accessories' + : ''} +
+ + +
+
+ {product.name}
+
+ .svg)
+
+
+
+ );
+};
diff --git a/src/components/DetailsHome/index.ts b/src/components/DetailsHome/index.ts
new file mode 100644
index 0000000000..b5c53e7f96
--- /dev/null
+++ b/src/components/DetailsHome/index.ts
@@ -0,0 +1 @@
+export * from './DetailsBack';
diff --git a/src/components/DetailsTechSpecs/DetailsTechSpecs.module.scss b/src/components/DetailsTechSpecs/DetailsTechSpecs.module.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/DetailsTechSpecs/DetailsTechSpecs.tsx b/src/components/DetailsTechSpecs/DetailsTechSpecs.tsx
new file mode 100644
index 0000000000..b632483287
--- /dev/null
+++ b/src/components/DetailsTechSpecs/DetailsTechSpecs.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { Phone } from '../../types/phone';
+import { Tablet } from '../../types/tablet';
+import { Accessory } from '../../types/accessory';
+
+type Product = Phone | Tablet | Accessory;
+
+type Props = {
+ product: Product;
+};
+
+export const DetailsTechSpecs: React.FC
+ Back
+
+
+
+ );
+};
diff --git a/src/components/DetailsTechSpecs/index.ts b/src/components/DetailsTechSpecs/index.ts
new file mode 100644
index 0000000000..5fdec93161
--- /dev/null
+++ b/src/components/DetailsTechSpecs/index.ts
@@ -0,0 +1 @@
+export * from './DetailsTechSpecs';
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 0000000000..6aa94f2b83
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,99 @@
+@media screen and (min-width: 640px) {
+ .footer {
+ height: 96px;
+ }
+
+ .footer__flex {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .footer__about-us {
+ flex-direction: row;
+ column-gap: 15px;
+ }
+
+ .footer__logo {
+ margin: 0;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .footer__about-us {
+ flex-direction: row;
+ column-gap: 105px;
+ }
+}
+
+@media screen and (max-width: 640px) {
+ .footer__about-us {
+ display: flex;
+ flex-direction: column;
+ column-gap: 8px;
+ margin-bottom: 32px;
+ }
+
+ .footer__logo {
+ margin: 0;
+ margin-bottom: 32px;
+
+ }
+}
+.footer {
+ position: relative;
+ box-sizing: border-box;
+ margin-top: 64px;
+ padding: 32px 16px;
+
+ &__line {
+ border-top: 1px solid rgb(226, 230, 233);
+ width:100%;
+
+ position: absolute;
+ top: 0; // Позиционирование линии сверху
+ left: 0; // Привязываем к левому краю
+
+ margin: 0 0 16px;
+ }
+
+ &__about-us {
+ color: #89939A;
+
+ display: flex;
+ }
+
+ &__logo {
+ width: 89px;
+ height: 32px;
+ }
+
+ &__text {
+ margin: 0;
+ cursor: pointer;
+ color: #89939A;
+ transition: all 0.3s;
+
+
+ &:hover {
+ color: #2d2d2e;
+
+ }
+ }
+
+ &__slide {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ column-gap: 16px;
+
+ &-text {
+ margin: 0;
+ cursor: pointer;
+ }
+
+ &-button {
+ cursor: pointer;
+ }
+ }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000000..9c60d98d2c
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+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/Header/Header.module.scss b/src/components/Header/Header.module.scss
new file mode 100644
index 0000000000..4b4259de2e
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,155 @@
+header {
+ background-color: #fff;
+ z-index: 1000;
+ position: sticky;
+ top: 0;
+}
+
+.nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 48px;
+ margin-top: -13px;
+ margin-bottom: 24px;
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+
+ border: 1px solid rgb(226, 230, 233);
+ width: 100%;
+ right: 0;
+
+ }
+
+ &-item {
+ color: rgb(137, 147, 154);
+ font-family: Mont, sans-serif;
+ font-size: 12px;
+ font-weight: 700;
+ position: relative;
+ transition: all 0.3s;
+
+ &::before {
+ content: '';
+ position: absolute;
+ bottom: -20px;
+ left: 50%;
+ width: 0; // Початкове значення ширини
+ border: 1px solid rgb(15, 15, 17);
+ opacity: 0; // Початкове значення opacity
+ transform: translateX(-50%); // Сдвигаем элемент влево на 50% ширини
+ transition: width 0.3s ease, opacity 0.3s ease; // Плавна анімація width і opacity
+ }
+
+ &:hover {
+ &::before {
+ width: 100%; // Коли наведено, ширина 100%
+ opacity: 1; // Коли наведено
+ }
+ }
+
+ &-is-active {
+ color: rgb(0, 0, 0);
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ bottom: -20px;
+ width: 100%;
+ border: 1px solid rgb(15, 15, 17);
+
+ @media screen and (max-width: 1200px) {
+ bottom: -13px;
+ }
+
+ }
+ }
+ }
+
+ @media screen and (min-width: 1200px) {
+ height: 64px;
+ }
+
+ &__logo {
+ width: 64px;
+ height: 22px;
+ padding-left: 16px;
+
+
+ @media screen and (min-width: 1200px) {
+ height: 28px;
+ width: 80px;
+ }
+ }
+
+ &__menu {
+ width: 16px;
+ height: 16px;
+ }
+ &__menu-container {
+ width: 16px;
+ height: 16px;
+ position: relative;
+ transition: all 0.3s;
+ padding-right: 16px;
+
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: calc(-100% - 8px);
+ bottom: 50%;
+ border: 1px solid rgb(226, 230, 233);
+ width: 48px;
+
+ transform: rotate(90deg);
+ }
+
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ @media screen and (min-width: 640px) {
+ display: none;
+ }
+ }
+
+ &__button {
+ display: none;
+
+ @media screen and (min-width: 640px) {
+ display: block;
+ display: flex;
+ }
+
+ &--first {
+ @media screen and (min-width: 640px) {
+ height: 48px;
+ width: 48px;
+ }
+
+ @media screen and (min-width: 1200px) {
+ height: 65px;
+ width: 65px;
+ }
+ }
+
+ &--second {
+ @media screen and (min-width: 640px) {
+ height: 48px;
+ width: 48px;
+ }
+
+ @media screen and (min-width: 1200px) {
+ height: 65px;
+ width: 65px;
+ }
+ }
+ }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000000..d25756f739
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,123 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Link, NavLink, useLocation } from 'react-router-dom';
+import { useCartAndFavorites } from '../../hooks/useCartAndFavorites';
+import { useAppContext } from '../../ContextStor';
+import { useLocalStorage } from '../../LocaleStorage';
+import { useQuantityContext } from '../../QuantityContext';
+
+type Props = {
+ burgerMenu: boolean;
+ setBurgerMenu: React.Dispatch
+
+
+ About
+ + +And then there was pro
++ A transformative triple‑camera system that adds tons of capability + without complexity. +
++ An unprecedented leap in battery life. And a mind‑blowing chip that + doubles down on machine learning and pushes the boundaries of what a + smartphone can do. Welcome to the first iPhone powerful enough to be + called Pro. +
+ +Camera
++ Meet the first triple‑camera system to combine cutting‑edge + technology with the legendary simplicity of iPhone. Capture up to + four times more scene. Get beautiful images in drastically lower + light. Shoot the highest‑quality video in a smartphone — then edit + with the same tools you love for photos. You’ve never shot with + anything like it. +
+ ++ Shoot it. Flip it. Zoom it. Crop it. Cut it. Light it. Tweak it. + Love it. +
++ iPhone 11 Pro lets you capture videos that are beautifully true to + life, with greater detail and smoother motion. Epic processing power + means it can shoot 4K video with extended dynamic range and + cinematic video stabilization — all at 60 fps. You get more creative + control, too, with four times more scene and powerful new editing + tools to play with. +
+
+
+ Tech specs
+ + +
+
+
+ Screen
+{product.screen}
+
+
+
+ Resolution
+{product.resolution}
+
+
+
+ Processor
+{product.processor}
+
+
+
+ RAM
+{product.ram}
+
+
+
+ Built in memory
+{product.capacity}
+
+
+
+ Camera
+{product.camera}
+
+
+
+ Zoom
+{product.zoom}
+
+
+ Cell
+
+ {product.cell.map((el, index) => (
+
+ + {el} +
+ ))} +
+
+ 
+
+
+
+
+
+ ![]()
setBurgerMenu(!burgerMenu)}
+ className="nav__menu"
+ src="./img/Menu.png"
+ alt="Menu"
+ />
+
+
+ -
+
+
+ 
+ {favoritesCount > 0 && (
+ 
+ {cartCount > 0 && (
+
+
+ {favoritesCount > 0 && (
+ {favoritesCount}
+ )}
+
+
+
+
+ {cartCount > 0 && (
+ {totalItems()}
+ )}
+
+ Welcome to Nice Gadgets store!
+ +
+
+
+ );
+};
diff --git a/src/components/HomeCarousel/index.ts b/src/components/HomeCarousel/index.ts
new file mode 100644
index 0000000000..af5fd95b62
--- /dev/null
+++ b/src/components/HomeCarousel/index.ts
@@ -0,0 +1 @@
+export * from './HomeCarousel';
diff --git a/src/components/HomeCarousel/pagination.scss b/src/components/HomeCarousel/pagination.scss
new file mode 100644
index 0000000000..3d3df15035
--- /dev/null
+++ b/src/components/HomeCarousel/pagination.scss
@@ -0,0 +1,15 @@
+.swiper-pagination {
+ transform: translateY(0%);
+}
+
+.swiper-pagination-bullet {
+ background: rgb(226, 230, 233);
+ border-radius: 0;
+ width: 14px;
+ height: 4px;
+ opacity: 1;
+}
+
+.swiper-pagination-bullet-active {
+ background: rgb(15, 15, 17);
+}
diff --git a/src/components/List/List.module.scss b/src/components/List/List.module.scss
new file mode 100644
index 0000000000..d71629cbf4
--- /dev/null
+++ b/src/components/List/List.module.scss
@@ -0,0 +1,148 @@
+.card {
+ border: 1px solid rgb(226, 230, 233);
+ border-radius: 8px;
+
+ background: rgb(255, 255, 255);
+ padding: 32px;
+ width: 240px;
+ margin: 0 auto;
+ margin-bottom: 10px;
+
+ &__grid {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+
+ @media screen and (min-width: 640px) {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 40px 16px;
+ }
+
+ @media screen and (min-width: 1200px) {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ }
+
+ &__image {
+ height: 200px;
+
+ display: block;
+ margin: 0 auto;
+
+ margin-bottom: 24px;
+
+ @media screen and (min-width: 1200px) {
+ transition: all 0.3s;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+ }
+ }
+
+ &__name {
+ color: rgb(15, 15, 17);
+ font-size: 14px;
+ font-weight: 500;
+
+ margin: 0 0 8px;
+ }
+
+ &__price-regular {
+ color: rgb(15, 15, 17);
+ font-size: 22px;
+ font-weight: 700;
+
+ margin: 0 0 8px;
+ }
+
+ &__line {
+ border-top: 1px solid rgb(226, 230, 233);
+ width: 100%;
+
+ margin: 0 0 16px;
+ }
+
+ &__screen {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ &-name {
+ color: rgb(137, 147, 154);
+ font-size: 12px;
+ font-weight: 700;
+ margin: 0;
+ margin-bottom: 8px;
+ }
+
+ &-info {
+ margin: 0;
+
+ color: rgb(15, 15, 17);
+ font-size: 12px;
+ font-weight: 700;
+ margin-bottom: 8px;
+ }
+ }
+
+ &__capacity {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ &-name {
+ color: rgb(137, 147, 154);
+ font-size: 12px;
+ font-weight: 700;
+ margin: 0;
+ margin-bottom: 8px;
+ }
+
+ &-info {
+ color: rgb(15, 15, 17);
+ font-size: 12px;
+ font-weight: 700;
+ margin: 0;
+ margin-bottom: 8px;
+ }
+ }
+
+ &__ram {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ &-name {
+ color: rgb(137, 147, 154);
+ font-size: 12px;
+ font-weight: 700;
+ margin: 0;
+ margin-bottom: 16px;
+ }
+
+ &-info {
+ color: rgb(15, 15, 17);
+ font-size: 12px;
+ font-weight: 700;
+ margin: 0;
+ margin-bottom: 16px;
+ }
+ }
+
+ &__buy {
+ display: flex;
+
+ column-gap: 8px;
+
+ &-cart {
+ color: white;
+ background: rgb(66, 25, 208);
+
+ border-radius: 48px;
+ border: 0;
+
+ width: 100%;
+ height: 40px;
+ }
+ }
+}
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
new file mode 100644
index 0000000000..e5f6831285
--- /dev/null
+++ b/src/components/List/List.tsx
@@ -0,0 +1,207 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useLocation, useSearchParams } from 'react-router-dom';
+import { Tablet } from '../../types/tablet';
+import { Accessory } from '../../types/accessory';
+import { Phone } from '../../types/phone';
+import { Products } from '../../types/products';
+import { useAppContext } from '../../ContextStor';
+import { useLocalStorage } from '../../LocaleStorage';
+import { useQuantityContext } from '../../QuantityContext';
+
+type Props = {
+ products: Phone[] | Tablet[] | Accessory[];
+ type: 'phones' | 'tablets' | 'accessories';
+};
+
+export const List: React.FC
+  (1).svg)
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+  (2).svg)
+
+
+
+
+
+
+ -
+ {sortedProducts.length > 0 &&
+ sortedProducts.map(product => (
+
+
+
+
+
+ ))}
+ {product.name}
+{`${product.price}$`}
+ + + +
+
+
+ Screen
+{product.screen}
+
+
+
+ Capacity
+{product.capacity}
+
+
+
+ Ram
+{product.ram}
+
+
+ ![]()
toggleFavorite(product)}
+ className="page-home-card__favorite"
+ src={
+ favorites.some(fav => fav.id === product.id)
+ ? './img/Add to fovourites - Added.svg'
+ : './img/add-to-cart.svg'
+ }
+ alt="favorite"
+ />
+
+
+
+
+ {Array.from({ length: endPage - startPage + 1 }, (_, index) => {
+ const page = startPage + index;
+
+ return (
+
+ );
+ })}
+
+
+
+ )}
+
+ );
+};
diff --git a/src/components/List/index.ts b/src/components/List/index.ts
new file mode 100644
index 0000000000..4994c18137
--- /dev/null
+++ b/src/components/List/index.ts
@@ -0,0 +1 @@
+export * from './List';
diff --git a/src/components/ProductHome/ProductHome.module.scss b/src/components/ProductHome/ProductHome.module.scss
new file mode 100644
index 0000000000..97e96979dd
--- /dev/null
+++ b/src/components/ProductHome/ProductHome.module.scss
@@ -0,0 +1,29 @@
+.page-phones {
+ display: flex;
+ column-gap: 8px;
+ margin-bottom: 24px;
+
+ &__house {
+ height: 16px;
+ width: 16px;
+ }
+
+ &__arrow {
+ height: 16px;
+ width: 16px;
+ }
+
+ &__catygory-text {
+ margin: 0;
+ }
+
+ &__main-text {
+ margin: 0;
+ margin-bottom: 8px;
+ }
+
+ &__conter-models {
+ margin: 0;
+ margin-bottom: 16px;
+ }
+}
diff --git a/src/components/ProductHome/ProductHome.tsx b/src/components/ProductHome/ProductHome.tsx
new file mode 100644
index 0000000000..66d5265de6
--- /dev/null
+++ b/src/components/ProductHome/ProductHome.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Phone } from '../../types/phone';
+import { Tablet } from '../../types/tablet';
+import { Accessory } from '../../types/accessory';
+import { Sorted } from '../Sorted';
+
+type Props = {
+ product: Phone[] | Tablet[] | Accessory[];
+};
+
+export const ProductHome: React.FC
+
+
+
+
+
+
+
+
+
+ + {location.pathname.includes('/tablets') + ? 'Tablets' + : location.pathname.includes('/phones') + ? 'Mobile phones' + : location.pathname.includes('/accessories') + ? 'Accessories' + : ''} +
++ {location.pathname.includes('/tablets') + ? 'Tablets' + : location.pathname.includes('/phones') + ? 'Mobile phones' + : location.pathname.includes('/accessories') + ? 'Accessories' + : ''} +
+{product.length} models
+ +Shop by category
+ +
+
+
+ );
+};
diff --git a/src/components/ShopByCategory/index.ts b/src/components/ShopByCategory/index.ts
new file mode 100644
index 0000000000..8081526324
--- /dev/null
+++ b/src/components/ShopByCategory/index.ts
@@ -0,0 +1 @@
+export * from './ShopByCategory';
diff --git a/src/components/Sorted/Sorted.module.scss b/src/components/Sorted/Sorted.module.scss
new file mode 100644
index 0000000000..a96a62e6a5
--- /dev/null
+++ b/src/components/Sorted/Sorted.module.scss
@@ -0,0 +1,100 @@
+.sort-list {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ column-gap: 16px;
+ margin-bottom: 24px;
+
+ color: #89939A;
+
+ @media screen and (min-width: 640px) {
+ grid-template-columns: repeat(12, 1fr);
+ }
+
+ @media screen and (min-width: 1200px) {
+ grid-template-columns: repeat(16, 1fr);
+ }
+
+ &--select {
+ box-sizing: border-box;
+
+ position: absolute;
+ width: 100%;
+ background-color: #fff;
+ border: 1px solid rgb(180, 189, 196);
+
+ border-radius: 10px;
+ padding: 10px 12px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 3px;
+ color: #000;
+
+ z-index: 1000;
+
+ &-text {
+ margin: 0;
+ cursor: pointer;
+ transition: all 0.3s;
+
+
+ &:hover {
+ background-color: #ebe3e3;
+ }
+ }
+ }
+
+ &__by {
+ position: relative;
+ grid-column: span 2;
+
+ @media screen and (min-width: 640px) {
+ grid-column: span 4;
+ }
+
+ }
+
+ &__items-page {
+ position: relative;
+
+ grid-column: span 2;
+
+ @media screen and (min-width: 640px) {
+ grid-column: span 3;
+ }
+
+ &--button {
+ position: relative;
+ cursor: pointer;
+
+ box-sizing: border-box;
+
+ padding-left: 12px;
+ margin-bottom: 8px;
+
+ display: flex;
+ align-items: center;
+
+ height: 40px;
+ width: 100%;
+
+ border: 1px solid rgb(180, 189, 196);
+ color: #000;
+
+ border-radius: 8px;
+ transition: all 0.3s;
+
+
+ &:hover {
+ border: 1px solid rgb(64, 65, 67);
+ }
+
+ &::before {
+ content: url('../img/Icons_Chevron (Arrow Down).svg');
+ position: absolute;
+ right: 12px;
+ height: 16px;
+ width: 16px;
+ }
+ }
+ }
+}
diff --git a/src/components/Sorted/Sorted.tsx b/src/components/Sorted/Sorted.tsx
new file mode 100644
index 0000000000..867f98254f
--- /dev/null
+++ b/src/components/Sorted/Sorted.tsx
@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+
+export const Sorted = () => {
+ const [newestList, setNewestList] = useState(false);
+ const [allList, setAllList] = useState(false);
+ const location = useLocation();
+ const [searchParams, setSearchParams] = useSearchParams(location.search);
+
+ function updateSearchParam(key: string, value: string) {
+ const newSearchParams = new URLSearchParams(searchParams);
+
+ newSearchParams.set(key, value);
+ setSearchParams(newSearchParams);
+ }
+
+ function removeSearchParam(key: string) {
+ const newSearchParams = new URLSearchParams(searchParams);
+
+ newSearchParams.delete(key);
+ setSearchParams(newSearchParams);
+ }
+
+ function clickBy() {
+ setNewestList(!newestList);
+ setAllList(false);
+ }
+
+ function clickCount() {
+ setAllList(!allList);
+ setNewestList(false);
+ }
+
+ return (
+
+
+ 
+
+
+
+
+
+ Mobile phones
+95 models
+
+
+ 
+
+
+
+
+
+
+
+ Tablets
+24 models
+
+
+ 
+
+
+
+
+
+
+ Accessories
+100 models
+
+ {/* Сортировка */}
+
+ );
+};
diff --git a/src/components/Sorted/index.ts b/src/components/Sorted/index.ts
new file mode 100644
index 0000000000..f19e381e9c
--- /dev/null
+++ b/src/components/Sorted/index.ts
@@ -0,0 +1 @@
+export * from './Sorted';
diff --git a/src/hooks/useCartAndFavorites.ts b/src/hooks/useCartAndFavorites.ts
new file mode 100644
index 0000000000..957f192f5d
--- /dev/null
+++ b/src/hooks/useCartAndFavorites.ts
@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useAppContext } from '../ContextStor';
+import { useLocalStorage } from '../LocaleStorage';
+import { useQuantityContext } from '../QuantityContext';
+
+export const useCartAndFavorites = () => {
+ const { cart, favorites } = useAppContext();
+ const { quantities, setQuantities } = useQuantityContext();
+
+
+ const [favoritesCount, setFavoritesCount] = useState(favorites.length);
+ const [cartCount, setCartCount] = useState(0);
+
+ // Функция для подсчета общего количества товаров
+ const calculateTotalItems = useCallback(() => {
+ return cart.reduce(
+ (total, _, index) => total + (quantities[index] || 0),
+ 0,
+ );
+ }, [cart, quantities]);
+
+ // Обновляем количество избранного
+ useEffect(() => {
+ setFavoritesCount(favorites.length);
+ }, [favorites.length]);
+
+ // Обновляем cartCount при изменении корзины или quantities
+ useEffect(() => {
+ setCartCount(calculateTotalItems());
+ }, [cart, quantities, calculateTotalItems]);
+
+ return { favoritesCount, cartCount };
+};
diff --git a/src/index.tsx b/src/index.tsx
index 50470f1508..d62a94e382 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,6 @@
+import React from 'react';
import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import { Root } from './Root';
-createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+ {/* Элементы на странице */}
+ Sort by
+
+ {searchParams.get('sort') || 'Newest'}
+
+
+ {newestList && (
+
+
+ )}
+ { + removeSearchParam('sort'); + setNewestList(false); + }} + className="sort-list--select-text" + > + Newest +
+{ + updateSearchParam('sort', 'Alphabetically'); + setNewestList(false); + }} + className="sort-list--select-text" + > + Alphabetically +
+{ + updateSearchParam('sort', 'Cheapest'); + setNewestList(false); + }} + className="sort-list--select-text" + > + Cheapest +
+
+
+ Items on page
+
+ {searchParams.get('perPage') || 'All'}
+
+
+ {allList && (
+
+
+ )}
+ { + updateSearchParam('perPage', '4'); + setAllList(false); + }} + className="sort-list--select-text" + > + 4 +
+{ + updateSearchParam('perPage', '8'); + setAllList(false); + }} + className="sort-list--select-text" + > + 8 +
+{ + updateSearchParam('perPage', '16'); + setAllList(false); + }} + className="sort-list--select-text" + > + 16 +
+{ + removeSearchParam('perPage'); + setAllList(false); + }} + className="sort-list--select-text" + > + All +
+
+
+
+ );
+};
diff --git a/src/pages/CartItem.tsx b/src/pages/CartItem.tsx
new file mode 100644
index 0000000000..1cb10d8a67
--- /dev/null
+++ b/src/pages/CartItem.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAppContext } from '../ContextStor';
+import { useQuantityContext } from '../QuantityContext';
+
+export const CartItem = () => {
+ const { cart, setCart } = useAppContext();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { quantities, setQuantities } = useQuantityContext();
+
+ const sumCart = () => {
+ let sum = 0;
+
+ for (let i = 0; i < cart.length; i++) {
+ sum += cart[i].price * quantities[i]; // Зміна тут: множимо ціну на кількість
+ }
+
+ return sum;
+ };
+
+ const handleRemoveItem = (productId: number) => {
+ const updatedCart = cart.filter(product => product.id !== productId);
+
+ // Находим индекс удаляемого продукта в корзине
+ const indexToRemove = cart.findIndex(product => product.id === productId);
+
+ // Обновляем массив quantities, удаляя элемент по индексу
+ const updatedQuantities = quantities.filter(
+ (_, index) => index !== indexToRemove,
+ );
+
+ // Устанавливаем новые значения для cart и quantities
+ setCart(updatedCart);
+ setQuantities(updatedQuantities);
+ };
+
+ const handleIncrease = (index: number) => {
+ const newQuantities = [...quantities];
+
+ newQuantities[index] += 1;
+
+ setQuantities(newQuantities);
+ };
+
+ const handleDecrease = (index: number) => {
+ const newQuantities = [...quantities];
+
+ if (newQuantities[index] > 1) {
+ newQuantities[index] -= 1;
+ }
+
+ setQuantities(newQuantities);
+ };
+
+ const totalItems = () => {
+ return quantities.reduce((total, qty) => total + qty, 0);
+ };
+
+ return (
+ <>
+
+ 
+ )}
+
+
+ );
+};
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
new file mode 100644
index 0000000000..b55c5674d8
--- /dev/null
+++ b/src/pages/Favorites.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Products } from '../types/products';
+import { useAppContext } from '../ContextStor';
+import { useQuantityContext } from '../QuantityContext';
+
+export const Favorites = () => {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { favorites, setFavorites, setCart, cart } = useAppContext();
+ const { quantities, setQuantities } = useQuantityContext();
+
+ const toggleFavorite = (product: Products) => {
+ const isFavorite = favorites.some(fav => fav.id === product.id);
+
+ if (isFavorite) {
+ setFavorites(favorites.filter(fav => fav.id !== product.id));
+ } else {
+ setFavorites([...favorites, product]);
+ }
+ };
+
+ const toggleCart = (product: Products) => {
+ const isCart = cart.some(el => el.id === product.id);
+
+ if (isCart) {
+ setCart(cart.filter(el => el.id !== product.id));
+ setQuantities(prevQuantities =>
+ prevQuantities.filter((_, index) => cart[index].id !== product.id),
+ );
+ } else {
+ setCart([...cart, product]);
+ setQuantities(prevQuantities => [...prevQuantities, 1]);
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+
+ { + navigate(`${location.state.from}`); + }} + className="details__back--text" + > + Back +
+Cart
+ {cart.length > 0 ? ( + <> +{totalItems()} items
+ +
+
+
+ ) : (
+
+ {cart.map((el, index) => (
+
+
+
+
+ ))}
+
+ ![]()
handleRemoveItem(el.id)}
+ className="cart__card-close"
+ src="./img/Icons_Close.png"
+ />
+ ![]()
navigate(`/${el.category}/${el.itemId}`)}
+ className="cart__card-img"
+ src={el.image}
+ style={{ cursor: 'pointer' }}
+ />
+
+
+ {el.name}
+
+
+
+
+
+ {quantities[index]}
+ ++ ${el.price * quantities[index]} +
+
+
+ {`$${sumCart()}`}
+Total for {totalItems()} items
+ + +
+ )}
+
+
+
+ );
+};
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000000..54ff7166b9
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ShopByCategory } from '../components/ShopByCategory';
+import { HomeCarousel } from '../components/HomeCarousel';
+import { BrandNewModelsHome } from '../components/BrandNewModelsHome';
+
+export const HomePage = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ + {location.pathname.includes('/tablets') + ? 'Tablets' + : location.pathname.includes('/phones') + ? 'Phones' + : location.pathname.includes('/accessories') + ? 'Accessories' + : location.pathname.includes('/favourites') + ? 'Favourites' + : ''} +
+Favourites
+{favorites.length} items
+ +-
+ {favorites.length > 0 &&
+ favorites.map(product => (
+
+ ![]()
{
+ navigate(`/${product.category}/${product.itemId}`);
+ }}
+ className="card__image"
+ src={product.image}
+ alt="card-image"
+ />
+
+ ))}
+ {product.name}
+{`${product.price}$`}
+ + + +
+
+
+ Screen
+{product.screen}
+
+
+
+ Capacity
+{product.capacity}
+
+
+
+ Ram
+{product.ram}
+
+
+ ![]()
toggleFavorite(product)}
+ className="page-home-card__favorite"
+ src={
+ favorites.some(fav => fav.id === product.id)
+ ? './img/Add to fovourites - Added.svg'
+ : './img/add-to-cart.svg'
+ }
+ alt="favorite"
+ />
+
+
+
+
+ );
+};
diff --git "a/src/pages/NotFoundPage\321\216.tsx" "b/src/pages/NotFoundPage\321\216.tsx"
new file mode 100644
index 0000000000..7bae3c401b
--- /dev/null
+++ "b/src/pages/NotFoundPage\321\216.tsx"
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const NotFoundPage = () => Page not found
; diff --git a/src/pages/PhonesPage.tsx b/src/pages/PhonesPage.tsx new file mode 100644 index 0000000000..f640ed3115 --- /dev/null +++ b/src/pages/PhonesPage.tsx @@ -0,0 +1,24 @@ +import React, { useEffect, useState } from 'react'; +import { Phone } from '../types/phone'; +import { List } from '../components/List'; +import { ProductHome } from '../components/ProductHome/ProductHome'; + +export const PhonesPage = () => { + const [phonesList, setPhonesList] = useState
+
+
+ );
+};
diff --git a/src/pages/ProductDetailsPage.tsx b/src/pages/ProductDetailsPage.tsx
new file mode 100644
index 0000000000..940274d2a3
--- /dev/null
+++ b/src/pages/ProductDetailsPage.tsx
@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useLocation } from 'react-router-dom';
+import { Phone } from '../types/phone';
+import { Tablet } from '../types/tablet';
+import { Accessory } from '../types/accessory';
+import { DetailsBack } from '../components/DetailsHome';
+import { DetailsCard } from '../components/DetailsCard';
+import { DetailsTechSpecs } from '../components/DetailsTechSpecs';
+import { BrandNewModelsHome } from '../components/BrandNewModelsHome';
+
+type Product = Phone | Tablet | Accessory;
+
+export const ProductDetailsPage = () => {
+ const { productId } = useParams();
+ const location = useLocation();
+ const [product, setProduct] = useStateLoading...
; + } + + if (error) { + return{error}
; + } + + if (!product) { + returnProduct not found
; + } + + return ( +
+
+ );
+};
diff --git a/src/pages/TabletsPage.tsx b/src/pages/TabletsPage.tsx
new file mode 100644
index 0000000000..b6d0634264
--- /dev/null
+++ b/src/pages/TabletsPage.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { Tablet } from '../types/tablet';
+import { List } from '../components/List';
+import { ProductHome } from '../components/ProductHome/ProductHome';
+
+export const TabletsPage = () => {
+ const [tabletsList, setTabletsList] = useState
+
+
+
+
+ );
+};
diff --git a/src/types/accessory.ts b/src/types/accessory.ts
new file mode 100644
index 0000000000..b1fac79e38
--- /dev/null
+++ b/src/types/accessory.ts
@@ -0,0 +1,22 @@
+export type Accessory = {
+ 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;
+ cell: string[];
+};
diff --git a/src/types/phone.ts b/src/types/phone.ts
new file mode 100644
index 0000000000..140775a7e0
--- /dev/null
+++ b/src/types/phone.ts
@@ -0,0 +1,24 @@
+export interface Phone {
+ id: string;
+ category: string;
+ namespaceId: string;
+ name: string;
+ capacityAvailable: string[];
+ capacity: string;
+ priceRegular: number;
+ priceDiscount: number;
+ colorsAvailable: string[];
+ color: string;
+ images: string[];
+ description: Array<{
+ title: string;
+ text: string[];
+ }>;
+ screen: string;
+ resolution: string;
+ processor: string;
+ ram: string;
+ camera: string;
+ zoom: string;
+ cell: string[];
+}
diff --git a/src/types/products.ts b/src/types/products.ts
new file mode 100644
index 0000000000..5b4e189cff
--- /dev/null
+++ b/src/types/products.ts
@@ -0,0 +1,14 @@
+export interface Products {
+ id: number;
+ category: string;
+ itemId: string;
+ name: string;
+ fullPrice: number;
+ price: number;
+ screen: string;
+ capacity: string;
+ color: string;
+ ram: string;
+ year: number;
+ image: string;
+}
diff --git a/src/types/tablet.ts b/src/types/tablet.ts
new file mode 100644
index 0000000000..6f2c8d0cef
--- /dev/null
+++ b/src/types/tablet.ts
@@ -0,0 +1,24 @@
+export type Tablet = {
+ 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/useWindowSize.ts b/src/useWindowSize.ts
new file mode 100644
index 0000000000..5c594e5611
--- /dev/null
+++ b/src/useWindowSize.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+type WidthAndHeightTuple = [number, number];
+
+function getCurrentWidthAndHeight(): WidthAndHeightTuple {
+ return [window.innerWidth, window.innerHeight];
+}
+
+export function useWindowResize() {
+ const [widthAndHeight, setWidthAndHeight] = useState(
+ getCurrentWidthAndHeight(),
+ );
+
+ function handler() {
+ setWidthAndHeight(getCurrentWidthAndHeight());
+ }
+
+ useEffect(() => {
+ window.addEventListener('resize', handler);
+
+ return () => window.removeEventListener('resize', handler);
+ }, []);
+
+ return widthAndHeight;
+}
diff --git a/src/variables.ts b/src/variables.ts
new file mode 100644
index 0000000000..f8ab0b6e38
--- /dev/null
+++ b/src/variables.ts
@@ -0,0 +1,17 @@
+export const COLORS = {
+ black: '#0F0F11',
+ gold: '#F4BA47',
+ silver: '#C0C0C0',
+ spacegray: '#A9A9A9',
+ coral: '#FF7F50',
+ white: '#FFFFFF',
+ midnightgreen: '#003030',
+ yellow: '#FFFF00',
+ purple: '#800080',
+ green: '#008000',
+ red: '#FF0000',
+ rosegold: '#B76E79',
+ midnight: '#191970',
+ graphite: '#7F7F7F',
+ sierrablue: '#A8B3C8',
+};
diff --git a/tsconfig.json b/tsconfig.json
index cfb168bb26..e2c46af00c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,7 @@
],
"compilerOptions": {
"sourceMap": false,
- "types": ["node", "cypress"]
+ "types": ["node", "cypress"],
+ "jsx": "react" // или "react-jsx" для React 17+
}
}