+
+
+
+
+ );
+};
diff --git a/src/components/Actions/index.ts b/src/components/Actions/index.ts
new file mode 100644
index 0000000000..ac0eab8d42
--- /dev/null
+++ b/src/components/Actions/index.ts
@@ -0,0 +1 @@
+export { Actions } from './Actions';
diff --git a/src/components/BackLink/BackLink.module.scss b/src/components/BackLink/BackLink.module.scss
new file mode 100644
index 0000000000..b4067103c0
--- /dev/null
+++ b/src/components/BackLink/BackLink.module.scss
@@ -0,0 +1,24 @@
+@import '../../styles/utils';
+
+.back-link {
+ width: 65px;
+ display: flex;
+ gap: 4px;
+ align-items: center;
+ height: 16px;
+
+ &__icon {
+ transform: rotate(-90deg);
+ }
+
+ &__text {
+ @include small-text;
+
+ color: var(--secondary);
+ line-height: 15px;
+ }
+
+ svg {
+ fill: var(--icon-primary);
+ }
+}
diff --git a/src/components/BackLink/BackLink.tsx b/src/components/BackLink/BackLink.tsx
new file mode 100644
index 0000000000..b3d59320b3
--- /dev/null
+++ b/src/components/BackLink/BackLink.tsx
@@ -0,0 +1,31 @@
+import styles from './BackLink.module.scss';
+import { Link, useNavigate } from 'react-router-dom';
+import { SvgIcon } from '../SvgIcon';
+import React from 'react';
+import cn from 'classnames';
+
+interface Props {
+ className?: string;
+}
+
+export const BackLink: React.FCBack
+ + ); +}; diff --git a/src/components/BackLink/index.ts b/src/components/BackLink/index.ts new file mode 100644 index 0000000000..907b5bb3c8 --- /dev/null +++ b/src/components/BackLink/index.ts @@ -0,0 +1 @@ +export { BackLink } from './BackLink'; diff --git a/src/components/Grid/Grid.module.scss b/src/components/Grid/Grid.module.scss new file mode 100644 index 0000000000..24caadc076 --- /dev/null +++ b/src/components/Grid/Grid.module.scss @@ -0,0 +1,29 @@ +@import '../../styles/utils'; + +.grid { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px 16px; + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat(4, 1fr); + } + + &__item { + height: 440px; + + @include on-tablet { + height: 506px; + } + } +} diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx new file mode 100644 index 0000000000..5fb2e8f32d --- /dev/null +++ b/src/components/Grid/Grid.tsx @@ -0,0 +1,21 @@ +import styles from './Grid.module.scss'; +import { Product } from '../../types/Product'; +import { ProductCard } from '../ProductCard'; + +interface Props { + products: Product[]; +} + +export const Grid: React.FC-
+ {products.map(product => {
+ return (
+
-
+
+
+ );
+ })}
+
+
+ 
+
+
+
+ );
+};
diff --git a/src/components/ProductCard/index.ts b/src/components/ProductCard/index.ts
new file mode 100644
index 0000000000..c4f2778191
--- /dev/null
+++ b/src/components/ProductCard/index.ts
@@ -0,0 +1 @@
+export { ProductCard } from './ProductCard';
diff --git a/src/components/ProductsSlider/ProductsSlider.module.scss b/src/components/ProductsSlider/ProductsSlider.module.scss
new file mode 100644
index 0000000000..619905991c
--- /dev/null
+++ b/src/components/ProductsSlider/ProductsSlider.module.scss
@@ -0,0 +1,87 @@
+@import '../../styles/utils';
+
+.products-slider {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+
+ &__header {
+ grid-column: 1 / -1;
+ display: flex;
+ gap: 10px;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+
+ @include page-padding-inline;
+ }
+
+ &__title {
+ margin: 0;
+
+ @include h2-mobile;
+
+ @include on-tablet {
+ @include h2-tablet-desktop;
+ }
+ }
+
+ &__controls {
+ display: flex;
+ gap: 16px;
+ }
+
+ &__btn {
+ width: 32px;
+ height: 32px;
+
+ &--prev {
+ transform: rotate(-90deg);
+ }
+ &--next {
+ transform: rotate(90deg);
+ }
+
+ &:disabled {
+ svg path {
+ fill: var(--elements);
+ }
+ }
+ }
+
+ &__wrapper {
+ grid-column: 1 / -1;
+ padding-left: $mobile-padding-inline;
+
+ @include on-tablet {
+ padding-left: $tablet-padding-inline;
+ }
+
+ @include on-desktop {
+ padding-inline: $desktop-padding-inline;
+ }
+ }
+
+ &__list {
+ display: flex;
+ overflow: hidden;
+ height: auto;
+ gap: 16px;
+ }
+
+ &__slide {
+ flex: 0 0 212px;
+ height: 440px;
+
+ transition: transform 0.5s ease-in-out;
+
+ @include on-tablet {
+ flex: 0 0 237px;
+ height: 512px;
+ }
+
+ @include on-desktop {
+ flex: 0 0 272px;
+ height: 506px;
+ }
+ }
+}
diff --git a/src/components/ProductsSlider/ProductsSlider.tsx b/src/components/ProductsSlider/ProductsSlider.tsx
new file mode 100644
index 0000000000..a5782c22c1
--- /dev/null
+++ b/src/components/ProductsSlider/ProductsSlider.tsx
@@ -0,0 +1,103 @@
+import styles from './ProductsSlider.module.scss';
+import cn from 'classnames';
+import { useEffect, useState } from 'react';
+import { Product } from '../../types';
+import { RoundButton } from '../RoundButton';
+import { SvgIcon } from '../SvgIcon';
+import { ProductCard } from '../ProductCard';
+
+interface Props {
+ title: string;
+ products: Product[];
+}
+
+export const ProductsSlider: React.FC
+
+
+ {name}
+ + +
+
+
+ ${price}
+${fullPrice}
+-
+ {properties.map(property => (
+
-
+
-
+
- + {property.term} + +
- + {property.desc} + +
+ ))}
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+ -
+ {products.map(product => {
+ return (
+
-
+
+
+ );
+ })}
+
-
+
-
+
+
+ +
+
+ {crumbs.map((crumb, i, arr) => {
+ currentLink += `/${crumb}`;
+ const title = firstLetterCap(crumb).replaceAll('-', ' ');
+ const isLast = i === arr.length - 1;
+
+ return (
+ -
+ {isLast ? (
+
{title}
+ ) : ( + + {title} + + )} +
+ );
+ })}
+
Cart
+ {cart.length ? ( +
+
+ ) : (
+ -
+ {cart.map(product => {
+ return (
+
-
+
+
+ );
+ })}
+
+
+ ${totalPrice}
++ Total for {totalQuantity} item{cart.length > 1 ? 's' : ''} +
+ +
+
+ );
+};
diff --git a/src/modules/CartPage/components/CartItem/index.ts b/src/modules/CartPage/components/CartItem/index.ts
new file mode 100644
index 0000000000..186b364ebd
--- /dev/null
+++ b/src/modules/CartPage/components/CartItem/index.ts
@@ -0,0 +1 @@
+export { CartItem } from './CartItem';
diff --git a/src/modules/CartPage/components/EmptyCart/EmptyCart.module.scss b/src/modules/CartPage/components/EmptyCart/EmptyCart.module.scss
new file mode 100644
index 0000000000..6cc850e7eb
--- /dev/null
+++ b/src/modules/CartPage/components/EmptyCart/EmptyCart.module.scss
@@ -0,0 +1,26 @@
+@import '../../../../styles/utils';
+
+.empty-cart {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+
+ &__text {
+ @include h2-mobile;
+
+ @include on-tablet {
+ @include h2-tablet-desktop;
+ }
+ }
+
+ &__img {
+ width: 100%;
+ max-width: 450px;
+ background: radial-gradient(circle, var(--accent) 0, var(--hover-bg) 70%);
+ padding: 60px;
+ object-fit: contain;
+ aspect-ratio: 1 / 1;
+ }
+
+}
diff --git a/src/modules/CartPage/components/EmptyCart/EmptyCart.tsx b/src/modules/CartPage/components/EmptyCart/EmptyCart.tsx
new file mode 100644
index 0000000000..b1b01a9555
--- /dev/null
+++ b/src/modules/CartPage/components/EmptyCart/EmptyCart.tsx
@@ -0,0 +1,14 @@
+import styles from './EmptyCart.module.scss';
+
+export const EmptyCart: React.FC = () => {
+ return (
+
+
+
+
+ {name}
+
+
+
+
+
+
+
+
+ {quantity}
+ +${price * quantity}
+
+ 
+
+ );
+};
diff --git a/src/modules/CartPage/components/EmptyCart/index.ts b/src/modules/CartPage/components/EmptyCart/index.ts
new file mode 100644
index 0000000000..a0a65c39fc
--- /dev/null
+++ b/src/modules/CartPage/components/EmptyCart/index.ts
@@ -0,0 +1 @@
+export { EmptyCart } from './EmptyCart';
diff --git a/src/modules/CartPage/components/Modal/Modal.module.scss b/src/modules/CartPage/components/Modal/Modal.module.scss
new file mode 100644
index 0000000000..b77d8c2127
--- /dev/null
+++ b/src/modules/CartPage/components/Modal/Modal.module.scss
@@ -0,0 +1,67 @@
+@import '../../../../styles/utils';
+
+.modal {
+ position: fixed;
+ z-index: 3;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ margin: 0;
+ padding: 40px;
+ border: 2px solid var(--accent);
+ border-radius: 16px;
+ width: 80%;
+ max-width: 600px;
+ background-color: var(--bg-secondary);
+
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ &__close {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ position: absolute;
+ width: 24px;
+ height: 24px;
+ top: 10px;
+ right: 10px;
+ border: none;
+ background-color: inherit;
+
+ @include transition;
+
+ &:hover {
+ transform: scale(1.2);
+ opacity: 0.6;
+ }
+
+ svg path {
+ fill: var(--icon-primary);
+ }
+ }
+
+ &__text {
+ color: var(--primary);
+ text-align: center;
+
+ @include h4-mobile;
+
+ @include on-tablet {
+ @include h4-tablet-desktop;
+ }
+ }
+
+ &__confirm {
+ padding: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--accent);
+ border: none;
+ color: var(--white);
+ border-radius: 8px;
+ }
+}
diff --git a/src/modules/CartPage/components/Modal/Modal.tsx b/src/modules/CartPage/components/Modal/Modal.tsx
new file mode 100644
index 0000000000..c010151675
--- /dev/null
+++ b/src/modules/CartPage/components/Modal/Modal.tsx
@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import styles from './Modal.module.scss';
+import { DispatchContext } from '../../../../contex/State';
+import { SvgIcon } from '../../../../components/SvgIcon';
+
+interface Props {
+ close: () => void;
+}
+
+export const Modal: React.FCYour cart is empty
+
+ Favourites
+ {favourites.length ? ( + <> ++ {favourites.length} item{favourites.length === 1 ? '' : 's'} +
+No items
+ )} +
+
+
+
+
+
+
+
+ {actions.map(action => {
+ const { name, count, icon } = action;
+
+ return (
+
+ cn(styles.actions__item, {
+ [styles['actions__item--active']]: isActive,
+ })
+ }
+ to={`/${name}`}
+ >
+
+ );
+ })}
+
+ );
+};
diff --git a/src/modules/Header/components/Actions/index.ts b/src/modules/Header/components/Actions/index.ts
new file mode 100644
index 0000000000..ac0eab8d42
--- /dev/null
+++ b/src/modules/Header/components/Actions/index.ts
@@ -0,0 +1 @@
+export { Actions } from './Actions';
diff --git a/src/modules/Header/components/Menu/Menu.module.scss b/src/modules/Header/components/Menu/Menu.module.scss
new file mode 100644
index 0000000000..7eb522e6d5
--- /dev/null
+++ b/src/modules/Header/components/Menu/Menu.module.scss
@@ -0,0 +1,22 @@
+@import '../../../../styles/utils';
+
+.menu {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ &__navigation {
+ @include page-padding-inline;
+ }
+
+ &__actions {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ border-top: 1px solid var(--elements);
+ height: 64px;
+ }
+
+ @include on-tablet {
+ display: none;
+ }
+}
diff --git a/src/modules/Header/components/Menu/Menu.tsx b/src/modules/Header/components/Menu/Menu.tsx
new file mode 100644
index 0000000000..df046b823f
--- /dev/null
+++ b/src/modules/Header/components/Menu/Menu.tsx
@@ -0,0 +1,19 @@
+import { Navigation } from '../Navigation';
+
+import styles from './Menu.module.scss';
+import React from 'react';
+import { Actions } from '../Actions';
+
+interface Props {
+ className?: string;
+}
+
+export const Menu: React.FC{count}
} + {name} +
+ {theme === Theme.LIGTH ? (
+
+ );
+};
diff --git a/src/modules/Header/components/ThemeSwitcher/index.ts b/src/modules/Header/components/ThemeSwitcher/index.ts
new file mode 100644
index 0000000000..5c112587e9
--- /dev/null
+++ b/src/modules/Header/components/ThemeSwitcher/index.ts
@@ -0,0 +1 @@
+export { ThemeSwitcher } from './ThemeSwitcher';
diff --git a/src/modules/Header/index.ts b/src/modules/Header/index.ts
new file mode 100644
index 0000000000..29429dc97e
--- /dev/null
+++ b/src/modules/Header/index.ts
@@ -0,0 +1 @@
+export { Header } from './Header';
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
new file mode 100644
index 0000000000..fdfef7c6e2
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,52 @@
+@import '../../styles/utils';
+
+.home-page {
+ max-width: $desktop-width;
+ margin: 24px auto 64px;
+
+ display: flex;
+ flex-direction: column;
+ gap: 56px;
+
+ @include on-tablet {
+ gap: 64px;
+ margin-top: 32px;
+ }
+
+ @include on-desktop {
+ gap: 80px;
+ margin-top: 56px;
+ margin-bottom: 80px;
+ }
+
+ &__wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ @include on-tablet {
+ gap: 32px;
+ }
+
+ @include on-desktop {
+ gap: 56px;
+ }
+ }
+
+ &__title {
+ margin: 0;
+
+ @include h1-mobile;
+ @include page-padding-inline;
+
+ @include on-tablet {
+ @include h1-tablet-desktop;
+ }
+ }
+
+ &__title-break {
+ @include on-desktop {
+ display: none;
+ }
+ }
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 0000000000..cdd0047a14
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import styles from './HomePage.module.scss';
+import { Categories } from './components/Categories';
+import { MainSlider } from './components/MainSlider';
+import { getHotPriceProducts, getNewProducts } from '../../servises/products';
+import { Product } from '../../types/Product';
+import { ProductsSlider } from '../../components/ProductsSlider';
+
+export const HomePage = () => {
+ const [newModels, setNewModels] = useState
+
+ );
+};
diff --git a/src/modules/HomePage/components/Categories/Categories.module.scss b/src/modules/HomePage/components/Categories/Categories.module.scss
new file mode 100644
index 0000000000..7849eb6ae1
--- /dev/null
+++ b/src/modules/HomePage/components/Categories/Categories.module.scss
@@ -0,0 +1,63 @@
+@import '../../../../styles/utils';
+
+.categories {
+ @include page-padding-inline;
+
+ &__title {
+ margin-bottom: 24px;
+
+ @include h2-mobile;
+
+ @include on-tablet {
+ @include h2-tablet-desktop;
+ }
+ }
+
+ &__list {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ @include on-tablet {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+ }
+ }
+
+ &__item {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__item-title {
+ margin: 0;
+ margin-bottom: 4px;
+
+ @include h4-tablet-desktop;
+ }
+
+ &__text {
+ color: var(--secondary);
+
+ @include body-text;
+ }
+
+ &__img {
+ display: block;
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ object-fit: contain;
+ border-radius: 8px;
+ margin-bottom: 24px;
+ overflow: hidden;
+
+ @include transition;
+ }
+
+ &__link {
+ &:hover .categories__img {
+ transform: scale(1.05);
+ }
+ }
+}
diff --git a/src/modules/HomePage/components/Categories/Categories.tsx b/src/modules/HomePage/components/Categories/Categories.tsx
new file mode 100644
index 0000000000..29f408f78d
--- /dev/null
+++ b/src/modules/HomePage/components/Categories/Categories.tsx
@@ -0,0 +1,79 @@
+import { Link } from 'react-router-dom';
+import styles from './Categories.module.scss';
+import { MainNavigation } from '../../../../utils/constants';
+import { useEffect, useState } from 'react';
+import { getAllProducts } from '../../../../servises/products';
+import { Category } from '../../../../types';
+
+export const Categories = () => {
+ const initialCategories = [
+ {
+ title: 'Mobile phones',
+ count: 0,
+ category: 'phones',
+ img: 'img/category-phones.png',
+ path: MainNavigation.PHONES,
+ },
+ {
+ title: 'Tablets',
+ count: 0,
+ category: 'tablets',
+ img: 'img/category-tablets.png',
+ path: MainNavigation.TABLETS,
+ },
+ {
+ title: 'Accessories',
+ count: 0,
+ category: 'accessories',
+ img: 'img/category-accessories.png',
+ path: MainNavigation.ACCESSORIES,
+ },
+ ];
+ const [categories, setCategories] = useState(initialCategories);
+
+ useEffect(() => {
+ getAllProducts.then(products => {
+ const counts: Record
+
+ Welcome to Nice
+
+
+ Product Catalog
+
+ Welcome to Nice
+ Gadgets store!
+
+
+ Shop by category
+-
+ {categories.map(category => {
+ const { path, img, count, title } = category;
+
+ return (
+
-
+
+
+
{title}
+{count} models
+ +
+ );
+ })}
+
+
+
+
+ -
+ {slides.map(slide => {
+ return (
+
-
+
+
+ );
+ })}
+
+ {slides.map((_, index) => {
+ const isActive = index === currentSlide;
+
+ return (
+
+
+ 
+
+ );
+};
diff --git a/src/modules/NotFoundPage/index.ts b/src/modules/NotFoundPage/index.ts
new file mode 100644
index 0000000000..642c600088
--- /dev/null
+++ b/src/modules/NotFoundPage/index.ts
@@ -0,0 +1 @@
+export { NotFoundPage } from './NotFoundPage';
diff --git a/src/modules/PhonesPage/PhonesPage.tsx b/src/modules/PhonesPage/PhonesPage.tsx
new file mode 100644
index 0000000000..c5982134e1
--- /dev/null
+++ b/src/modules/PhonesPage/PhonesPage.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { Product } from '../../types/Product';
+import { getProductsByCategory } from '../../servises/products';
+import { ProductsCatalog } from '../ProductsCatalog';
+
+export const PhonesPage = () => {
+ const [phones, setPhones] = useStatePage not found
+
+
+
+ );
+};
diff --git a/src/modules/ProductPage/components/About/About.module.scss b/src/modules/ProductPage/components/About/About.module.scss
new file mode 100644
index 0000000000..7112775d3d
--- /dev/null
+++ b/src/modules/ProductPage/components/About/About.module.scss
@@ -0,0 +1,47 @@
+@import '../../../../styles/utils';
+
+.about {
+ &__title {
+ margin: 0;
+ margin-bottom: 32px;
+
+ @include h3-mobile;
+
+ @include on-tablet {
+ @include h3-tablet-desktop;
+ }
+
+ &::after {
+ display: block;
+ content: '';
+ height: 1px;
+ background-color: var(--elements);
+ margin-top: 16px;
+ }
+ }
+
+ &__list {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ }
+
+ &__subtitle {
+ margin: 0;
+ margin-bottom: 16px;
+
+ @include h4-mobile;
+
+ @include on-tablet {
+ @include h4-tablet-desktop;
+ }
+ }
+
+ &__text {
+ color: var(--secondary);
+
+ &:not(:last-child) {
+ margin-bottom: 21px;
+ }
+ }
+}
diff --git a/src/modules/ProductPage/components/About/About.tsx b/src/modules/ProductPage/components/About/About.tsx
new file mode 100644
index 0000000000..5829a63e1f
--- /dev/null
+++ b/src/modules/ProductPage/components/About/About.tsx
@@ -0,0 +1,36 @@
+import cn from 'classnames';
+import { Description } from '../../../../types/Gadget';
+
+import styles from './About.module.scss';
+
+interface Props {
+ description: Description[];
+ className?: string;
+}
+
+export const About: React.FC
+
+ {!currentGadget || !currentProduct ? (
+
+ 
+
+ ) : (
+ <>
+ + Product was not found +
+
+
+
+ );
+};
diff --git a/src/modules/ProductPage/components/About/index.ts b/src/modules/ProductPage/components/About/index.ts
new file mode 100644
index 0000000000..b749bad6d5
--- /dev/null
+++ b/src/modules/ProductPage/components/About/index.ts
@@ -0,0 +1 @@
+export { About } from './About';
diff --git a/src/modules/ProductPage/components/AvailableCapacity/AvailableCapacity.module.scss b/src/modules/ProductPage/components/AvailableCapacity/AvailableCapacity.module.scss
new file mode 100644
index 0000000000..769bce95ed
--- /dev/null
+++ b/src/modules/ProductPage/components/AvailableCapacity/AvailableCapacity.module.scss
@@ -0,0 +1,50 @@
+@import '../../../../styles/utils';
+
+.available-capacity {
+ padding-bottom: 24px;
+ position: relative;
+
+ &::after {
+ display: block;
+ position: absolute;
+ content: '';
+ width: 100%;
+ height: 1px;
+ background-color: var(--elements);
+ bottom: 0;
+ }
+
+ &__title {
+ @include small-text;
+
+ color: var(--secondary);
+ margin-bottom: 8px;
+ font-weight: 600;
+ }
+
+ &__list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+
+ &__link {
+ display: block;
+ border: 1px solid var(--icon-secondary);
+ padding: 5px 8px 4px;
+ border-radius: 4px;
+
+ @include transition;
+
+ &--active {
+ background-color: var(--primary);
+ border-color: var(--primary);
+ color: var(--text-active);
+ cursor: auto;
+ }
+
+ &:not(&--active):hover {
+ border-color: var(--primary);
+ }
+ }
+}
diff --git a/src/modules/ProductPage/components/AvailableCapacity/AvailableCapacity.tsx b/src/modules/ProductPage/components/AvailableCapacity/AvailableCapacity.tsx
new file mode 100644
index 0000000000..2fd219d290
--- /dev/null
+++ b/src/modules/ProductPage/components/AvailableCapacity/AvailableCapacity.tsx
@@ -0,0 +1,61 @@
+import { Link, useLocation } from 'react-router-dom';
+import styles from './AvailableCapacity.module.scss';
+import cn from 'classnames';
+
+interface Props {
+ capacity: string[];
+ activeCapacity: string;
+ className?: string;
+}
+
+export const AvailableCapacity: React.FCAbout
+ +-
+ {description.map(desc => {
+ const { title, text } = desc;
+
+ return (
+
-
+
{title}
+ {text.map(t => { + return ( ++ {t} +
+ ); + })} +
+ );
+ })}
+
+
+ );
+};
diff --git a/src/modules/ProductPage/components/AvailableCapacity/index.ts b/src/modules/ProductPage/components/AvailableCapacity/index.ts
new file mode 100644
index 0000000000..738402b710
--- /dev/null
+++ b/src/modules/ProductPage/components/AvailableCapacity/index.ts
@@ -0,0 +1 @@
+export { AvailableCapacity } from './AvailableCapacity';
diff --git a/src/modules/ProductPage/components/AvailableColors/AvailableColors.module.scss b/src/modules/ProductPage/components/AvailableColors/AvailableColors.module.scss
new file mode 100644
index 0000000000..abf325ac39
--- /dev/null
+++ b/src/modules/ProductPage/components/AvailableColors/AvailableColors.module.scss
@@ -0,0 +1,52 @@
+@import '../../../../styles/utils';
+
+.available-colors {
+ padding-bottom: 24px;
+ position: relative;
+
+ &::after {
+ display: block;
+ position: absolute;
+ content: '';
+ width: 100%;
+ height: 1px;
+ background-color: var(--elements);
+ bottom: 0;
+ }
+
+ &__title {
+ @include small-text;
+
+ color: var(--secondary);
+ margin-bottom: 8px;
+ font-weight: 600;
+ }
+
+ &__list {
+ display: flex;
+ gap: 8px;
+ }
+
+ &__item {
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ border: 1px solid var(--elements);
+ padding: 2px;
+
+ &:not(&--active):hover {
+ border-color: var(--icon-secondary);
+ }
+
+ &--active {
+ border-color: var(--primary);
+ }
+ }
+
+ &__link {
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ }
+}
diff --git a/src/modules/ProductPage/components/AvailableColors/AvailableColors.tsx b/src/modules/ProductPage/components/AvailableColors/AvailableColors.tsx
new file mode 100644
index 0000000000..ff679baaf2
--- /dev/null
+++ b/src/modules/ProductPage/components/AvailableColors/AvailableColors.tsx
@@ -0,0 +1,51 @@
+import { Link, useLocation } from 'react-router-dom';
+import styles from './AvailableColors.module.scss';
+import cn from 'classnames';
+import { colorMap } from '../../../../helpers';
+
+interface Props {
+ colors: string[];
+ currentColor: string;
+ className?: string;
+}
+
+export const AvailableColors: React.FCSelect capacity
+-
+ {capacity.map(cap => {
+ const isActive = activeCapacity === cap;
+ const currentPath = path
+ .split(activeCapacity.toLowerCase())
+ .join(cap.toLowerCase());
+
+ return (
+
- + + {normalizeCapacity(cap)} + + + ); + })} +
+
+ );
+};
diff --git a/src/modules/ProductPage/components/AvailableColors/index.ts b/src/modules/ProductPage/components/AvailableColors/index.ts
new file mode 100644
index 0000000000..ec9b7b3461
--- /dev/null
+++ b/src/modules/ProductPage/components/AvailableColors/index.ts
@@ -0,0 +1 @@
+export { AvailableColors } from './AvailableColors';
diff --git a/src/modules/ProductPage/components/Gadget/Gadget.module.scss b/src/modules/ProductPage/components/Gadget/Gadget.module.scss
new file mode 100644
index 0000000000..1ad368ff6d
--- /dev/null
+++ b/src/modules/ProductPage/components/Gadget/Gadget.module.scss
@@ -0,0 +1,44 @@
+@import '../../../../styles/utils';
+
+.gadget {
+ @include page-padding-inline;
+
+ &__title {
+ margin: 0;
+ margin-bottom: 32px;
+
+ @include h2-mobile;
+
+ @include on-tablet {
+ margin-bottom: 40px;
+
+ @include h2-tablet-desktop;
+ }
+ }
+
+ &__details {
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ @include on-tablet {
+ display: grid;
+ grid-template-columns: 113fr 79fr;
+ gap: 16px;
+ }
+
+ @include on-desktop {
+ grid-template-columns: 35fr 32fr;
+ gap: 64px;
+ }
+ }
+
+ &__about,
+ &__tech-specs {
+ grid-column: 1 / -1;
+
+ @include on-desktop {
+ grid-column: auto;
+ }
+ }
+}
diff --git a/src/modules/ProductPage/components/Gadget/Gadget.tsx b/src/modules/ProductPage/components/Gadget/Gadget.tsx
new file mode 100644
index 0000000000..4832882a4e
--- /dev/null
+++ b/src/modules/ProductPage/components/Gadget/Gadget.tsx
@@ -0,0 +1,78 @@
+import cn from 'classnames';
+import { About } from '../About';
+import { ProductPhotos } from '../ProductPhotos';
+import { TechSpecs } from '../TechSpecs';
+import styles from './Gadget.module.scss';
+import { MainControls } from '../MainControls';
+import { Product, GadgetType } from '../../../../types';
+
+interface Props {
+ gadget: GadgetType;
+ className?: string;
+ product: Product;
+}
+
+export const Gadget: React.FCAvailable colors
+-
+ {colors.map(c => {
+ const color = c.split(' ').join('-');
+
+ const isActive = c === currentColor;
+ const currentPath = path
+ .split(currentColor.split(' ').join('-'))
+ .join(color);
+
+ return (
+
- + + + ); + })} +
{name}
+ +
+
+
+
+ );
+};
diff --git a/src/modules/ProductPage/components/MainControls/index.ts b/src/modules/ProductPage/components/MainControls/index.ts
new file mode 100644
index 0000000000..48877cc344
--- /dev/null
+++ b/src/modules/ProductPage/components/MainControls/index.ts
@@ -0,0 +1 @@
+export { MainControls } from './MainControls';
diff --git a/src/modules/ProductPage/components/ProductPhotos/ProductPhotos.module.scss b/src/modules/ProductPage/components/ProductPhotos/ProductPhotos.module.scss
new file mode 100644
index 0000000000..8de61560ea
--- /dev/null
+++ b/src/modules/ProductPage/components/ProductPhotos/ProductPhotos.module.scss
@@ -0,0 +1,72 @@
+@import '../../../../styles/utils';
+
+.product-photos {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+
+ @include on-tablet {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ align-items: start;
+ }
+
+ @include on-desktop {
+ grid-template-columns: 5fr 29fr;
+ }
+
+ &__current {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ overflow: hidden;
+
+ @include on-tablet {
+ grid-column: 2 / -1;
+ }
+ }
+
+ &__list {
+ display: flex;
+ gap: 8px;
+ max-width: 100%;
+
+ @include on-tablet {
+ order: -1;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ &__item {
+ border: 1px solid var(--elements);
+ border-radius: 8px;
+ padding: 3px;
+ width: 51px;
+ height: 49px;
+
+ @include on-tablet {
+ width: 100%;
+ height: 100%;
+ aspect-ratio: 1 / 1;
+ }
+ }
+
+ &__btn {
+ border: none;
+ background-color: inherit;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ }
+
+ &__img {
+ display: block;
+ object-fit: contain;
+ width: 100%;
+ height: 100%;
+ }
+}
diff --git a/src/modules/ProductPage/components/ProductPhotos/ProductPhotos.tsx b/src/modules/ProductPage/components/ProductPhotos/ProductPhotos.tsx
new file mode 100644
index 0000000000..57b105c93d
--- /dev/null
+++ b/src/modules/ProductPage/components/ProductPhotos/ProductPhotos.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import styles from './ProductPhotos.module.scss';
+import cn from 'classnames';
+
+interface Props {
+ photos: string[];
+ className?: string;
+}
+
+export const ProductPhotos: React.FC
+
+
+
+ + {priceDiscount}$ +
+{priceRegular}$
+-
+ {properties.map(property => (
+
-
+
- {property.term}
+- {property.desc}
+
+ ))}
+
ID: {product.id}
+
+
+ );
+};
diff --git a/src/modules/ProductPage/components/ProductPhotos/index.ts b/src/modules/ProductPage/components/ProductPhotos/index.ts
new file mode 100644
index 0000000000..c200dd5eb1
--- /dev/null
+++ b/src/modules/ProductPage/components/ProductPhotos/index.ts
@@ -0,0 +1 @@
+export { ProductPhotos } from './ProductPhotos';
diff --git a/src/modules/ProductPage/components/TechSpecs/TechSpecs.module.scss b/src/modules/ProductPage/components/TechSpecs/TechSpecs.module.scss
new file mode 100644
index 0000000000..d4dab62cb4
--- /dev/null
+++ b/src/modules/ProductPage/components/TechSpecs/TechSpecs.module.scss
@@ -0,0 +1,45 @@
+@import '../../../../styles/utils';
+
+.tech-specs {
+ &__title {
+ margin: 0;
+ margin-bottom: 32px;
+
+ @include h3-mobile;
+
+ @include on-tablet {
+ @include h3-tablet-desktop;
+ }
+
+ &::after {
+ display: block;
+ content: '';
+ height: 1px;
+ background-color: var(--elements);
+ margin-top: 16px;
+ }
+ }
+
+ &__list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ &__item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
+ }
+
+ &__term {
+ font-weight: 500;
+ color: var(--secondary);
+ }
+
+ &__desc {
+ margin: 0;
+ font-weight: 600;
+ }
+}
diff --git a/src/modules/ProductPage/components/TechSpecs/TechSpecs.tsx b/src/modules/ProductPage/components/TechSpecs/TechSpecs.tsx
new file mode 100644
index 0000000000..b21dbdee14
--- /dev/null
+++ b/src/modules/ProductPage/components/TechSpecs/TechSpecs.tsx
@@ -0,0 +1,31 @@
+import cn from 'classnames';
+import styles from './TechSpecs.module.scss';
+
+interface Props {
+ className?: string;
+ techSpecs: {
+ title: string;
+ value: string;
+ }[];
+}
+
+export const TechSpecs: React.FC
+ 
+
+ -
+ {photos.map(img => {
+ return (
+
- setCurrentImage(img)} + > + + + ); + })} +
+
+ );
+};
diff --git a/src/modules/ProductPage/components/TechSpecs/index.ts b/src/modules/ProductPage/components/TechSpecs/index.ts
new file mode 100644
index 0000000000..fced6b5881
--- /dev/null
+++ b/src/modules/ProductPage/components/TechSpecs/index.ts
@@ -0,0 +1 @@
+export { TechSpecs } from './TechSpecs';
diff --git a/src/modules/ProductPage/index.ts b/src/modules/ProductPage/index.ts
new file mode 100644
index 0000000000..93f6975c68
--- /dev/null
+++ b/src/modules/ProductPage/index.ts
@@ -0,0 +1 @@
+export { ProductPage } from './ProductPage';
diff --git a/src/modules/ProductsCatalog/ProductsCatalog.module.scss b/src/modules/ProductsCatalog/ProductsCatalog.module.scss
new file mode 100644
index 0000000000..a276d20c98
--- /dev/null
+++ b/src/modules/ProductsCatalog/ProductsCatalog.module.scss
@@ -0,0 +1,73 @@
+@import '../../styles/utils';
+
+.products-catalog {
+ max-width: $desktop-width;
+ padding-top: 24px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding-bottom: 64px;
+
+ @include page-padding-inline;
+
+ @include on-tablet {
+ gap: 40px;
+ }
+
+ &__title {
+ margin: 0;
+ margin-bottom: 8px;
+
+ @include h1-mobile;
+
+ @include on-tablet {
+ @include h1-tablet-desktop;
+ }
+ }
+
+ &__text {
+ color: var(--secondary);
+ margin-bottom: 8px;
+
+ @include on-tablet {
+ margin: 0;
+ }
+ }
+
+ &__controllers {
+ margin-bottom: 24px;
+
+ @include on-tablet {
+ display: flex;
+ gap: 16px;
+ }
+ }
+
+ &__selectors-wrapper {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+ margin-bottom: 16px;
+
+ @include on-tablet {
+ grid-template-columns: 187px 136px;
+ }
+
+ @include on-desktop {
+ grid-template-columns: 176px 128px;
+ }
+ }
+
+ &__no-found {
+ @include h2-mobile;
+
+ @include on-tablet {
+ @include h2-tablet-desktop;
+ }
+ }
+
+ &__pagination {
+ margin: 0 auto;
+ }
+}
diff --git a/src/modules/ProductsCatalog/ProductsCatalog.tsx b/src/modules/ProductsCatalog/ProductsCatalog.tsx
new file mode 100644
index 0000000000..15fa4de782
--- /dev/null
+++ b/src/modules/ProductsCatalog/ProductsCatalog.tsx
@@ -0,0 +1,143 @@
+import { Product } from '../../types/Product';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { Pagination } from './components/Pagination';
+import styles from './ProductsCatalog.module.scss';
+import { Selector } from './components/Selector';
+import { Grid } from '../../components/Grid';
+import { useUpdateSearchParams } from '../../hooks';
+import { Loader } from '../../components/Loader';
+import { Search } from './components/Search';
+
+interface Props {
+ title: string;
+ products: Product[];
+ loading: boolean;
+ error: string;
+}
+
+export const ProductsCatalog: React.FCTech specs
+ +-
+ {techSpecs.map(spec => {
+ const { title, value } = spec;
+
+ return (
+
-
+
- {title}
+- {value}
+
+ );
+ })}
+
{error}
+ ) : ( + <> +
+
+ {title}
++ {refinedProducts.length} models +
+
+
+
+
+ {refinedProducts.length ? (
+
+
+ + No matches found +
+ )} +
+
+ );
+};
diff --git a/src/modules/ProductsCatalog/components/Pagination/index.ts b/src/modules/ProductsCatalog/components/Pagination/index.ts
new file mode 100644
index 0000000000..0a1fd4dad6
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/Pagination/index.ts
@@ -0,0 +1 @@
+export { Pagination } from './Pagination';
diff --git a/src/modules/ProductsCatalog/components/PaginationItem/PaginationItem.module.scss b/src/modules/ProductsCatalog/components/PaginationItem/PaginationItem.module.scss
new file mode 100644
index 0000000000..cc01518b8e
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/PaginationItem/PaginationItem.module.scss
@@ -0,0 +1,15 @@
+@import '../../../../styles/utils';
+
+.pagination-item {
+ display: block;
+
+ &__btn {
+ &--active,
+ &--active:hover {
+ cursor: auto;
+ background-color: var(--primary);
+ color: var(--text-active);
+ border-color: var(--primary);
+ }
+ }
+}
diff --git a/src/modules/ProductsCatalog/components/PaginationItem/PaginationItem.tsx b/src/modules/ProductsCatalog/components/PaginationItem/PaginationItem.tsx
new file mode 100644
index 0000000000..dab37cde9c
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/PaginationItem/PaginationItem.tsx
@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import { RoundButton } from '../../../../components/RoundButton';
+import { scrollToTop } from '../../../../utils/utility';
+import styles from './PaginationItem.module.scss';
+
+interface Props {
+ page: number;
+ onPageChange: (page: number) => void;
+ isCurrent: boolean;
+ className?: string;
+}
+
+export const PaginationItem: React.FC
+
+
+
+
+
+ {pages.length <= 5 ? (
+ pages.map(page => (
+
+
+ + ... +
+ )} + + {getMiddlePages().map(page => { + return ( ++ ... +
+ )} +
+
+
+
+
+
+ {page}
+
+
+ );
+};
diff --git a/src/modules/ProductsCatalog/components/PaginationItem/index.ts b/src/modules/ProductsCatalog/components/PaginationItem/index.ts
new file mode 100644
index 0000000000..c070a870df
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/PaginationItem/index.ts
@@ -0,0 +1 @@
+export { PaginationItem } from './PaginationItem';
diff --git a/src/modules/ProductsCatalog/components/Search/Search.module.scss b/src/modules/ProductsCatalog/components/Search/Search.module.scss
new file mode 100644
index 0000000000..4e0f330036
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/Search/Search.module.scss
@@ -0,0 +1,62 @@
+@import '../../../../styles/utils';
+
+.search {
+ width: 100%;
+
+ &__title {
+ display: block;
+ color: var(--secondary);
+ margin-bottom: 4px;
+
+ @include small-text;
+ }
+
+ &__input-wrapper {
+ position: relative;
+ }
+
+ &__input {
+ width: 100%;
+ height: 40px;
+ border-radius: 8px;
+ border: 1px solid var(--icon-secondary);
+ background-color: var(--bg-secondary);
+ color: var(--primary);
+ padding: 0 30px;
+ background-image: var(--search-img);
+ background-repeat: no-repeat;
+ background-position: 8px center;
+
+ @include transition;
+
+ &:focus {
+ border-color: var(--primary);
+ outline: none;
+ }
+ }
+
+ &__clear {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ top: 50%;
+ right: 4px;
+ transform: translateY(-50%);
+ width: 24px;
+ height: 24px;
+ background-color: inherit;
+ border: none;
+
+ @include transition;
+
+ &:hover {
+ opacity: 0.5;
+ }
+
+ svg path {
+ fill: var(--icon-primary);
+ }
+ }
+}
diff --git a/src/modules/ProductsCatalog/components/Search/Search.tsx b/src/modules/ProductsCatalog/components/Search/Search.tsx
new file mode 100644
index 0000000000..49d965ab3a
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/Search/Search.tsx
@@ -0,0 +1,59 @@
+import cn from 'classnames';
+import styles from './Search.module.scss';
+import { useUpdateSearchParams } from '../../../../hooks';
+import { useEffect, useState } from 'react';
+import { SvgIcon } from '../../../../components/SvgIcon';
+
+interface Props {
+ className?: string;
+}
+
+export const Search: React.FC
+
+
+ );
+};
diff --git a/src/modules/ProductsCatalog/components/Search/index.ts b/src/modules/ProductsCatalog/components/Search/index.ts
new file mode 100644
index 0000000000..6860ea7e14
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/Search/index.ts
@@ -0,0 +1 @@
+export { Search } from './Search';
diff --git a/src/modules/ProductsCatalog/components/Selector/Selector.module.scss b/src/modules/ProductsCatalog/components/Selector/Selector.module.scss
new file mode 100644
index 0000000000..444de27d49
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/Selector/Selector.module.scss
@@ -0,0 +1,95 @@
+@import '../../../../styles/utils';
+
+.selector {
+ &__title {
+ color: var(--secondary);
+ margin-bottom: 4px;
+
+ @include small-text;
+ }
+
+ &__dropdown {
+ position: relative;
+ width: 100%;
+ }
+
+ &__btn {
+ width: 100%;
+ height: 40px;
+ border-radius: 8px;
+ border: 1px solid var(--icon-secondary);
+ padding-inline: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ background-color: inherit;
+
+ &:hover {
+ border-color: var(--secondary);
+ }
+
+ &:focus {
+ border-color: var(--primary);
+ outline: none;
+ }
+ }
+
+ &__text {
+ font-weight: 700;
+ color: var(--primary);
+ }
+
+ &__icon {
+ width: 16px;
+ height: 16px;
+ transform: rotate(180deg);
+
+ svg {
+ fill: var(--icon-secondary);
+ }
+ }
+
+ &__menu {
+ width: 100%;
+ display: none;
+ position: absolute;
+ z-index: 2;
+ padding-top: 4px;
+
+ &--active {
+ display: block;
+ }
+ }
+
+ &__content {
+ display: flex;
+ flex-direction: column;
+ border-radius: 8px;
+ border: 1px solid var(--elements);
+ background-color: var(--bg-secondary);
+ }
+
+ &__item {
+ text-align: start;
+ line-height: 32px;
+ cursor: pointer;
+ font-weight: 600;
+ color: var(--secondary);
+ padding-inline: 12px;
+ background-color: inherit;
+ border: none;
+
+ &:hover,
+ &:focus,
+ &--active {
+ background-color: var(--hover-bg);
+ border-radius: 8px;
+ color: var(--primary);
+ }
+
+ &--active {
+ cursor: default;
+ }
+ }
+}
diff --git a/src/modules/ProductsCatalog/components/Selector/Selector.tsx b/src/modules/ProductsCatalog/components/Selector/Selector.tsx
new file mode 100644
index 0000000000..cc6d84f9a8
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/Selector/Selector.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useRef, useState } from 'react';
+import cn from 'classnames';
+
+import styles from './Selector.module.scss';
+import { useSearchParams } from 'react-router-dom';
+import { firstLetterCap } from '../../../../utils/utility';
+import { SvgIcon } from '../../../../components/SvgIcon';
+
+interface Props {
+ title: string;
+ type: string;
+ items: { name: string; value: string }[];
+ className?: string;
+}
+
+export const Selector: React.FC
+
+ {value && (
+
+ )}
+
+
+
+ );
+};
diff --git a/src/modules/ProductsCatalog/components/Selector/index.ts b/src/modules/ProductsCatalog/components/Selector/index.ts
new file mode 100644
index 0000000000..90d25f2bf2
--- /dev/null
+++ b/src/modules/ProductsCatalog/components/Selector/index.ts
@@ -0,0 +1 @@
+export { Selector } from './Selector';
diff --git a/src/modules/ProductsCatalog/index.ts b/src/modules/ProductsCatalog/index.ts
new file mode 100644
index 0000000000..be4f0c9e98
--- /dev/null
+++ b/src/modules/ProductsCatalog/index.ts
@@ -0,0 +1 @@
+export { ProductsCatalog } from './ProductsCatalog';
diff --git a/src/modules/TabletsPage/TabletsPage.tsx b/src/modules/TabletsPage/TabletsPage.tsx
new file mode 100644
index 0000000000..d71997f5cd
--- /dev/null
+++ b/src/modules/TabletsPage/TabletsPage.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { Product } from '../../types/Product';
+import { getProductsByCategory } from '../../servises/products';
+import { ProductsCatalog } from '../ProductsCatalog';
+
+export const TabletsPage = () => {
+ const [tablets, setTablets] = useState{title}
+
+
+
+
+
+
+
+